/* ============================================================
   ScamRadar — surcouche au thème Cybal
   Palette : docs/design-system.md (fond #071525, surface #0C1D31,
   surélevée #112842, bordure #1B3A5C, primaire #168BFF, accent #00C2FF)
   ============================================================ */
:root {
  --sr-fond: #071525;
  --sr-surface: #0C1D31;
  --sr-surface2: #112842;
  --sr-bordure: #1B3A5C;
  --sr-primaire: #168BFF;
  --sr-accent: #00C2FF;
  --sr-texte: #F5F8FC;
  --sr-texte2: #9BB0C7;
  --sr-faible: #21C87A;
  --sr-modere: #F5A623;
  --sr-eleve: #FF7A2F;
  --sr-critique: #FF4D4F;
}

html { scroll-behavior: smooth; }
/* Filet général : un mot plus large que son conteneur se coupe au lieu de
   pousser la page. Ne modifie pas la largeur minimale calculée, donc sans
   effet sur les mises en page en grille. */
body { color: var(--sr-texte2); overflow-wrap: break-word; }
/* `anywhere` et non `break-word` : seul le premier réduit aussi la largeur
   minimale de l'élément. Une adresse écrite en toutes lettres
   (« cybertool.fr/scamradar/confidentialite ») imposait sinon sa largeur à
   la page entière, qui débordait de 5 px sur un téléphone. */
.sr-prose a, .sr-article a, .sr-obs a, .sr-flux a, .sr-sources a,
.single_address a, .sr-obs-table a { overflow-wrap: anywhere; }
h1, h2, h3, h4, h5, h6 { color: var(--sr-texte); }
strong { color: var(--sr-texte); font-weight: 600; }
a { color: var(--sr-accent); }
a:hover { color: #fff; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: #fff;
  background: var(--sr-surface2);
  padding: 2px 7px;
  border-radius: 5px;
  word-break: break-all;
}
::selection { background: var(--sr-primaire); color: #fff; }
:focus-visible { outline: 3px solid var(--sr-accent); outline-offset: 3px; }
.sr-no-wow .wow { visibility: visible !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wow { visibility: visible !important; animation: none !important; }
}

/* Boutons : dégradé bleu → cyan (le thème proposait du rose). */
.btn_one {
  background-image: linear-gradient(to right, var(--sr-primaire) 0%, var(--sr-accent) 51%, var(--sr-primaire) 100%);
  border-radius: 8px;
  text-transform: none;
  font-size: 15px;
  letter-spacing: 0.01em;
}
.btn_one i { margin-right: 8px; }
.btn_two { border-radius: 8px; padding: 13px 28px; text-transform: none; font-weight: 500; }
.btn_two i { margin-left: 6px; font-size: 12px; }
.sr-play { display: inline-flex; align-items: center; gap: 10px; }
.sr-play svg { width: 20px; height: 22px; flex: none; }

/* En-tête ------------------------------------------------------ */
#navigation { padding: 16px 40px; }
@media (max-width: 991px) { #navigation { padding: 14px 20px; } }
.site-logo { width: auto; }
.site-logo a { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }
.site-logo img { width: 40px; height: 40px; border-radius: 10px; }
.site-logo b { color: var(--sr-accent); font-weight: 600; }
#main-menu ul li a { font-size: 15px; font-weight: 500; text-transform: none; }
#main-menu ul li a.sr-actif, #main-menu ul li a:hover { color: var(--sr-accent); }
.navbar-fixed { background: rgba(7, 21, 37, 0.96); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
.mobile_menu { display: none; }
.sr-nav-cta { white-space: nowrap; }

/* Accueil : bandeau ------------------------------------------ */
.sr-hero {
  position: relative;
  padding: 150px 0 200px;
  background: url(../img/bg/radar-hero.svg) center / cover no-repeat;
  overflow: hidden;
}
.sr-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(7, 21, 37, 0.92) 0%, rgba(7, 21, 37, 0.7) 55%, rgba(7, 21, 37, 0.35) 100%);
}
.sr-hero .container { position: relative; z-index: 1; }
.sr-hero-kicker {
  display: inline-block;
  background: rgba(0, 194, 255, 0.14);
  border: 1px solid rgba(0, 194, 255, 0.35);
  color: var(--sr-accent);
  padding: 5px 16px; border-radius: 30px;
  font-size: 14px; font-weight: 500; margin-bottom: 22px;
}
.sr-hero h1 { font-size: 56px; line-height: 1.12; font-weight: 700; color: #fff; margin-bottom: 22px; letter-spacing: -0.02em; }
.sr-hero h1 em { font-style: normal; color: var(--sr-accent); }
.sr-hero p.sr-lead { font-size: 19px; line-height: 1.6; color: #D6E2F0; max-width: 560px; margin-bottom: 32px; }
.sr-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 26px; }
.sr-hero-btns .btn_two { margin-left: 0; }
/* Chaque garantie reste d'un seul tenant : « Hors connexion » se coupait en
   deux lignes sur un petit téléphone. */
.sr-hero-note { font-size: 14px; color: var(--sr-texte2); display: flex; flex-wrap: wrap; gap: 4px 18px; }
.sr-hero-note > span { white-space: nowrap; }
.sr-hero-note i { color: var(--sr-faible); margin-right: 6px; }
.sr-phones { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; min-height: 520px; }
.sr-phone {
  width: 240px; border-radius: 30px; overflow: hidden;
  border: 7px solid #10233a; background: #10233a;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 194, 255, 0.15);
}
.sr-phone img { display: block; width: 100%; height: auto; }
.sr-phone-1 { transform: translate(30px, 40px) rotate(-6deg); z-index: 1; }
.sr-phone-2 { transform: translate(-30px, 0) rotate(4deg); z-index: 2; }
@media (max-width: 1199px) { .sr-hero h1 { font-size: 46px; } .sr-phone { width: 210px; } }
@media (max-width: 991px) {
  .sr-hero { padding: 120px 0 170px; }
  .sr-hero h1 { font-size: 40px; }
  .sr-phones { min-height: 0; margin-top: 40px; }
  .sr-phone { width: 190px; }
}
@media (max-width: 575px) {
  .sr-hero { padding: 110px 0 160px; }
  .sr-hero h1 { font-size: 32px; }
  .sr-hero p.sr-lead { font-size: 17px; }
  .sr-phone { width: 150px; border-width: 5px; border-radius: 22px; }
}

/* Compteurs -------------------------------------------------- */
.count_area { margin-top: -110px; padding-bottom: 60px; position: relative; z-index: 2; }
.single-project { border-radius: 0; border: 1px solid var(--sr-bordure); border-right-width: 0; padding: 44px 24px; }
.count_area .col-lg-3:first-child .single-project { border-radius: 14px 0 0 14px; }
.count_area .col-lg-3:last-child .single-project { border-radius: 0 14px 14px 0; border-right-width: 1px; }
.single-project h2 { -webkit-text-stroke: 0; color: var(--sr-accent); font-size: 46px; margin-bottom: 6px; }
.single-project h4 { color: var(--sr-texte2); font-weight: 400; }
@media (max-width: 991px) {
  .single-project { border-right-width: 1px; border-radius: 0 !important; margin-bottom: -1px; }
}

/* Sections --------------------------------------------------- */
.section-padding { padding: 100px 0; }
.section-title span, .ab_content span {
  background: rgba(0, 194, 255, 0.12);
  border: 1px solid rgba(0, 194, 255, 0.3);
  color: var(--sr-accent);
  font-size: 14px; font-weight: 500;
  padding: 4px 16px;
}
.section-title h2, .ab_content h2 { text-transform: none; font-size: 38px; line-height: 1.25; letter-spacing: -0.015em; }
.section-title p { color: var(--sr-texte2); }
@media (max-width: 767px) { .section-title h2, .ab_content h2 { font-size: 29px; } .section-padding { padding: 70px 0; } }
.sr-bg-surface { background: var(--sr-surface); }
.sr-bg-image { background: url(../img/bg/radar-section.svg) center / cover no-repeat; position: relative; }

/* Cartes génériques ----------------------------------------- */
.sr-card {
  background: var(--sr-surface);
  border: 1px solid var(--sr-bordure);
  border-radius: 14px;
  padding: 32px 28px;
  height: 100%;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.sr-card:hover { transform: translateY(-4px); border-color: var(--sr-accent); }
.sr-card-icon {
  width: 58px; height: 58px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 194, 255, 0.12); color: var(--sr-accent); font-size: 26px;
  margin-bottom: 20px;
}
.sr-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.sr-card p { color: var(--sr-texte2); margin: 0; }
.sr-grid-gap > [class*="col-"] { margin-bottom: 30px; }

/* Bandeau défilant ------------------------------------------ */
.marq_text { background: var(--sr-accent); color: #04121f; font-size: 18px; font-weight: 600; padding: 20px 0; overflow: hidden; }
.sr-marquee { display: flex; width: max-content; animation: sr-defile 40s linear infinite; }
.sr-marquee-track { display: flex; flex: none; }
.sr-marquee-track span { padding: 0 28px; white-space: nowrap; position: relative; }
.sr-marquee-track span::after { content: "•"; position: absolute; right: -6px; opacity: 0.6; }
@keyframes sr-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sr-marquee { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .sr-marquee-track:last-child { display: none; } }

/* Bloc « il explique » -------------------------------------- */
.abmv { border: 1px solid var(--sr-bordure); border-radius: 14px; }
.abmv h4 { display: flex; align-items: center; gap: 12px; font-size: 19px; }
.abmv h4 i { color: var(--sr-accent); font-size: 20px; }
.abmv p { color: var(--sr-texte2); }
.sr-levels { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; }
.sr-levels li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 30px; border: 1px solid var(--sr-bordure); background: var(--sr-surface); color: #fff; font-size: 14px; font-weight: 500; }
.sr-levels li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.sr-shot { display: flex; justify-content: center; }
.sr-shot .sr-phone { width: 300px; transform: none; }
@media (max-width: 991px) { .sr-shot { margin-bottom: 40px; } }

/* Garanties -------------------------------------------------- */
.sr-garanties { list-style: none; margin: 0 0 30px; padding: 0; }
.sr-garanties li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--sr-bordure); }
.sr-garanties li:last-child { border-bottom: 0; }
.sr-garanties i { flex: none; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(33, 200, 122, 0.14); color: var(--sr-faible); font-size: 18px; }
.sr-garanties strong { display: block; margin-bottom: 4px; }
.sr-garanties span { color: var(--sr-texte2); }
.sr-privacy-nums .single-project2 { background: rgba(7, 21, 37, 0.55); border: 1px solid var(--sr-bordure); border-radius: 12px; padding: 22px 16px; text-align: center; margin-bottom: 20px; }
.sr-privacy-nums h2 { font-size: 40px; font-weight: 700; color: var(--sr-accent); margin-bottom: 4px; }
.sr-privacy-nums h4 { font-size: 15px; color: #fff; font-weight: 400; }

/* Honnêteté ------------------------------------------------- */
.sr-honest {
  background: var(--sr-surface);
  border: 1px solid var(--sr-bordure);
  border-left: 4px solid var(--sr-modere);
  border-radius: 14px;
  padding: 34px 36px;
}
.sr-honest h2 { font-size: 26px; margin-bottom: 14px; }
.sr-honest p { color: var(--sr-texte2); margin-bottom: 12px; }
.sr-honest p:last-child { margin-bottom: 0; }

/* Campagnes -------------------------------------------------- */
.sr-camp { display: flex; flex-direction: column; }
.sr-camp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sr-camp-head .sr-card-icon { margin: 0; width: 50px; height: 50px; font-size: 22px; }
.sr-camp-head h3 { margin: 0; font-size: 19px; }
.sr-canaux { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.sr-canaux li { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 20px; background: var(--sr-surface2); color: #fff; }
.sr-camp p { margin-bottom: 12px; }
.sr-camp dl { margin: 12px 0 0; border-top: 1px solid var(--sr-bordure); padding-top: 14px; }
.sr-camp dt { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sr-accent); font-weight: 600; margin-bottom: 4px; }
.sr-camp dd { color: var(--sr-texte2); margin-bottom: 12px; }
.sr-camp dd:last-child { margin-bottom: 0; }
.sr-camp .sr-card-link { margin-top: auto; padding-top: 16px; }
.sr-card-link { color: var(--sr-accent); font-weight: 500; }
.sr-card-link i { font-size: 12px; margin-left: 4px; }

/* Blog ------------------------------------------------------- */
.single_blog { height: 100%; }
.single_blog img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--sr-bordure); }
.single_blog span { font-size: 14px; color: var(--sr-texte2); }
.single_blog span a { color: var(--sr-accent); margin-right: 18px; }
.single_blog h3 a { font-size: 19px; }
.single_blog h3 a:hover { color: var(--sr-accent); }
.single_blog .sr-resume { color: var(--sr-texte2); font-size: 15px; margin-bottom: 14px; }
.blog_btn i { margin-left: 4px; }

/* Article ---------------------------------------------------- */
.section-top { padding: 70px 0 60px; }
.section-top::before { content: ""; position: absolute; inset: 0; background: rgba(7, 21, 37, 0.55); }
.section-top .container { position: relative; }
.section-top-title h1 { text-transform: none; font-size: 42px; line-height: 1.2; }
.section-top-title ul li { color: var(--sr-texte2) !important; }
@media (max-width: 767px) { .section-top-title h1 { font-size: 30px; } }
.sr-article { font-size: 17px; line-height: 1.75; }
.sr-article .sr-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--sr-texte2); font-size: 15px; margin-bottom: 26px; }
.sr-article .sr-meta i { color: var(--sr-accent); margin-right: 6px; }
.sr-article .sr-cover { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--sr-bordure); margin-bottom: 30px; }
.sr-article p { margin-bottom: 20px; }
.sr-article h2 { font-size: 28px; margin: 40px 0 16px; }
.sr-article h3 { font-size: 22px; margin: 36px 0 14px; }
.sr-article ul { padding-left: 22px; margin-bottom: 20px; }
.sr-article ul li { margin-bottom: 8px; }
.sr-article .sr-intro { font-size: 19px; color: #D6E2F0; }
.sr-check { list-style: none; padding: 0 !important; margin: 0 0 24px; }
.sr-check li { position: relative; padding-left: 36px; margin-bottom: 12px !important; }
.sr-check li::before { font-family: 'themify'; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.sr-check-alerte li::before { content: "\e6c5"; background: rgba(255, 77, 79, 0.16); color: var(--sr-critique); }
.sr-check-ok li::before { content: "\e64c"; background: rgba(33, 200, 122, 0.16); color: var(--sr-faible); }
.sr-example { background: var(--sr-surface); border: 1px solid var(--sr-bordure); border-left: 4px solid var(--sr-accent); border-radius: 12px; padding: 22px 26px; margin: 26px 0; }
.sr-example strong { color: var(--sr-accent); display: block; margin-bottom: 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; }
.sr-example p { margin: 0; }
.sr-article-cta { margin-top: 50px; background: var(--sr-surface); border: 1px solid var(--sr-bordure); border-radius: 14px; padding: 30px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: space-between; }
.sr-article-cta h3 { margin: 0 0 6px; font-size: 20px; }
.sr-article-cta p { margin: 0; color: var(--sr-texte2); }
.sr-article-nav { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
.sr-article-nav a { color: var(--sr-texte2); }
.sr-article-nav a:hover { color: var(--sr-accent); }

/* Pages textes (confidentialité, mentions) ------------------- */
.sr-prose { font-size: 17px; line-height: 1.75; }
.sr-prose h2 { font-size: 26px; margin: 44px 0 14px; padding-top: 24px; border-top: 1px solid var(--sr-bordure); }
.sr-prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.sr-prose h3 { font-size: 20px; margin: 28px 0 10px; }
.sr-prose p, .sr-prose ul { margin-bottom: 16px; }
.sr-prose ul { padding-left: 22px; }
.sr-prose table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 16px; }
.sr-prose th, .sr-prose td { text-align: left; padding: 10px 14px; border: 1px solid var(--sr-bordure); vertical-align: top; }
.sr-prose th { background: var(--sr-surface); color: #fff; font-weight: 600; }
.sr-prose .sr-encadre { background: var(--sr-surface); border: 1px solid var(--sr-bordure); border-left: 4px solid var(--sr-accent); border-radius: 12px; padding: 20px 24px; margin: 24px 0; }
.sr-prose .sr-encadre p:last-child { margin: 0; }
.sr-a-completer { background: rgba(245, 166, 35, 0.14); border: 1px dashed var(--sr-modere); color: #FFD27A; padding: 2px 8px; border-radius: 6px; }
.sr-table-wrap { overflow-x: auto; }

/* FAQ -------------------------------------------------------- */
.accordion-item { border-radius: 12px !important; border: 1px solid var(--sr-bordure) !important; overflow: hidden; }
.accordion-header { border-radius: 0; }
.accordion-button { font-size: 18px !important; font-weight: 600 !important; text-align: left; }
.accordion-body { color: var(--sr-texte2) !important; padding-top: 0; }
.accordion-body p { margin-bottom: 12px; }
.accordion-body p:last-child { margin-bottom: 0; }

/* Contact ---------------------------------------------------- */
.single_address { background: var(--sr-surface); border: 1px solid var(--sr-bordure); border-radius: 14px; padding: 36px 24px; height: 100%; }
.single_address p { color: var(--sr-texte2); }
.single_address a { word-break: break-all; }
.sabr { border-left: 1px solid var(--sr-bordure); border-right: 1px solid var(--sr-bordure); }
.address_area .col-lg-4 { margin-bottom: 30px; }
.sr-ressources { list-style: none; padding: 0; margin: 0; }
.sr-ressources li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--sr-bordure); }
.sr-ressources li:last-child { border-bottom: 0; }
.sr-ressources i { flex: none; color: var(--sr-accent); font-size: 22px; margin-top: 4px; }
.sr-ressources strong { display: block; }
.sr-ressources span { color: var(--sr-texte2); }

/* Appel au téléchargement ----------------------------------- */
.sr-download { position: relative; background: url(../img/bg/radar-section.svg) center / cover no-repeat; }
.sr-download::before { content: ""; position: absolute; inset: 0; background: rgba(7, 21, 37, 0.7); }
.sr-download .container { position: relative; }
.sr-download-box { background: rgba(12, 29, 49, 0.9); border: 1px solid var(--sr-bordure); border-radius: 20px; padding: 56px 40px; text-align: center; }
.sr-download-box img { width: 84px; height: 84px; border-radius: 20px; margin-bottom: 22px; }
.sr-download-box h2 { font-size: 34px; margin-bottom: 14px; }
.sr-download-box p { color: var(--sr-texte2); max-width: 620px; margin: 0 auto 28px; font-size: 18px; }
.sr-download-box .sr-hero-note { display: block; margin-top: 18px; }
@media (max-width: 575px) { .sr-download-box { padding: 40px 22px; } .sr-download-box h2 { font-size: 26px; } }

/* Pied de page ---------------------------------------------- */
.footer { background: var(--sr-fond) !important; border-top: 1px solid var(--sr-bordure); }
.single_footer p { color: var(--sr-texte2); }
.single_footer h4 { text-transform: none; }
.single_footer ul li a { text-transform: none; color: var(--sr-texte2); }
.fc { border-top-color: var(--sr-bordure); }
.footer_copyright p { color: var(--sr-texte2); text-transform: none; }
.footer_menu ul li a { text-transform: none; color: var(--sr-texte2); }
.footer_menu ul li a:hover { color: var(--sr-accent); }
.sr-footer-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 22px; font-weight: 600; margin-bottom: 18px; }
.sr-footer-logo img { width: 40px; height: 40px; border-radius: 10px; margin: 0; }
.sr-footer-logo b { color: var(--sr-accent); font-weight: 600; }

/* 404 -------------------------------------------------------- */
/* `min(...)` et pas `360px` seul : cette règle l'emporte sur `.img-fluid`,
   et l'illustration débordait sous 380px de large. */
.error_page img { max-width: min(360px, 100%); height: auto; margin-bottom: 20px; }
.error_page h2 { font-size: 38px; }
.error_page p { width: auto; max-width: 560px; color: var(--sr-texte2); }
@media (max-width: 767px) { .error_page h2 { font-size: 28px; } }

/* Préchargeur : plus discret */
.preloaders { background: var(--sr-fond); }

/* Retouches après revue ------------------------------------- */
.single_address h4, .section-top-title h1, .single_footer h4, .error_page h2 { text-transform: none; }
.accordion-button::after { content: "+"; font-size: 24px; line-height: 1; background-image: none !important; width: auto; height: auto; }
.accordion-button:not(.collapsed)::after { content: "−"; transform: none; background-image: none !important; }

/* Veille : base d'attaques, observations, flux ------------------ */
/* `min(180px, 100%)` : sans lui, le plancher de 180px dépasse le conteneur
   sous 220px de large et la grille pousse la page en débordement. */
.sr-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 16px; margin: 0 0 40px; }
/* Une cellule de grille ne descend pas sous sa taille min-content sans ceci :
   une valeur longue (« 11 septembre 2026 ») élargissait la colonne. */
.sr-strip > div { min-width: 0; }
.sr-strip-paire { margin: 0; }
@media (min-width: 480px) { .sr-strip-paire { grid-template-columns: 1fr 1fr; } }
.sr-strip div { background: var(--sr-surface); border: 1px solid var(--sr-bordure); border-radius: 12px; padding: 20px 22px; }
.sr-strip strong { display: block; font-size: 34px; font-weight: 700; color: var(--sr-accent); line-height: 1.1; margin-bottom: 4px; }
@media (max-width: 400px) { .sr-strip strong { font-size: 28px; } }
/* Une date n'est pas un compteur : à 34 px elle ne tient pas dans une
   colonne et se coupait au milieu d'un mot. */
.sr-strip-date strong { font-size: 20px; line-height: 1.25; }
.sr-strip span { color: var(--sr-texte2); font-size: 15px; }
.sr-filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 26px; }
.sr-filtres .sr-filtre-label { color: var(--sr-texte2); font-size: 14px; margin-right: 6px; }
.sr-filtres button { background: var(--sr-surface); border: 1px solid var(--sr-bordure); color: #fff; border-radius: 30px; padding: 6px 14px; font-size: 14px; font-family: inherit; cursor: pointer; transition: 0.2s; }
.sr-filtres button:hover { border-color: var(--sr-accent); }
.sr-filtres button[aria-pressed="true"] { background: var(--sr-accent); color: #04121f; border-color: var(--sr-accent); font-weight: 600; }
.sr-proc { display: flex; flex-direction: column; }
/* Le badge ne se coupe pas (`nowrap`) : c'est donc l'en-tête qui passe à la
   ligne, sinon il pousse la carte hors de l'écran sur un petit téléphone. */
.sr-proc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; align-items: flex-start; margin-bottom: 10px; }
.sr-proc-head h3 { min-width: 0; overflow-wrap: anywhere; }
.sr-proc-head h3 { margin: 0; font-size: 19px; }
.sr-badge-app { flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; background: rgba(33, 200, 122, 0.14); color: var(--sr-faible); white-space: nowrap; }
.sr-badge-veille { background: rgba(0, 194, 255, 0.12); color: var(--sr-accent); }
.sr-compteurs { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 12px; }
.sr-compteurs div { line-height: 1.2; }
.sr-compteurs strong { font-size: 26px; font-weight: 700; color: #fff; display: block; }
.sr-compteurs span { color: var(--sr-texte2); font-size: 13px; }
.sr-compteurs .sr-j30 strong { color: var(--sr-accent); }
.sr-zero { color: var(--sr-texte2); font-size: 14px; font-style: italic; margin: 6px 0 12px; }
.sr-marques { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.sr-marques li { font-size: 12px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--sr-bordure); color: #fff; }
.sr-marques li::before { content: "≈ "; color: var(--sr-critique); }
.sr-proc-meta { color: var(--sr-texte2); font-size: 13px; margin-bottom: 10px; }
.sr-proc .sr-card-link { margin-top: auto; padding-top: 12px; }
.sr-obs-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sr-obs-table th, .sr-obs-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--sr-bordure); vertical-align: top; }
.sr-obs-table th { color: #fff; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.sr-obs-table td:first-child { white-space: nowrap; color: var(--sr-texte2); }
.sr-obs-table a { color: var(--sr-accent); }
.sr-obs-table .sr-obs-proc { color: #fff; }
.sr-obs-table em { color: var(--sr-texte2); font-style: normal; font-size: 13px; }
.sr-obs { list-style: none; padding: 0 !important; margin: 0 0 20px; }
.sr-obs li { padding: 10px 0; border-bottom: 1px solid var(--sr-bordure); margin: 0 !important; }
.sr-obs time { color: var(--sr-accent); font-weight: 500; }
.sr-note { color: var(--sr-texte2); font-size: 14px; }
.sr-flux { list-style: none; padding: 0; margin: 0; }
.sr-flux li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--sr-bordure); align-items: flex-start; }
.sr-flux li:last-child { border-bottom: 0; }
.sr-flux i { flex: none; color: var(--sr-accent); font-size: 22px; margin-top: 3px; }
.sr-flux strong { display: block; }
.sr-flux span { color: var(--sr-texte2); font-size: 15px; }
.sr-flux code { font-size: 0.85em; }
.sr-sources { list-style: none; padding: 0; margin: 0; }
.sr-sources li { padding: 12px 0; border-bottom: 1px solid var(--sr-bordure); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.sr-sources li:last-child { border-bottom: 0; }
.sr-sources .sr-src-off { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; background: rgba(33, 200, 122, 0.14); color: var(--sr-faible); }
.sr-sources .sr-src-lic { color: var(--sr-texte2); font-size: 14px; flex-basis: 100%; }
.sr-rss { display: inline-flex; align-items: center; gap: 8px; }
.sr-rss i { color: var(--sr-modere); }
[hidden] { display: none !important; }

/* Sept entrées de menu : plus serré sous 1500 px */
@media (max-width: 1500px) { #main-menu ul li { padding: 0 9px; } #main-menu ul li a { font-size: 14px; } }
@media (max-width: 1250px) { #main-menu ul li { padding: 0 6px; } #main-menu ul li a { font-size: 13px; } }
.sr-compteurs .sr-date strong { font-size: 17px; padding-top: 6px; }