/* ==================================================================
   Ange Security - blog
   Meme systeme visuel que les prestations. Ici la lecture prime :
   colonne mesuree, type plus large, et une colonne d appui collante
   qui garde le sommaire et le numero a portee de main.
   ================================================================== */

/* ---------- Barre de progression --------------------------------- */

.asv-progression {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 9997; background: transparent; pointer-events: none;
}
.asv-progression span {
  display: block; height: 100%; width: 0;
  background: var(--asv-signal);
}

/* ---------- Hero ------------------------------------------------- */

.asv-hero-article, .asv-hero-liste { padding: 48px 0 52px; }

.asv-hero-article h1, .asv-hero-liste h1 {
  font-size: clamp(30px, 4.6vw, 50px);
  text-transform: none; letter-spacing: -.01em; line-height: 1.06;
  max-width: 20ch;
}
.asv-hero-article h1 .asv-zone, .asv-hero-liste h1 .asv-zone { color: #fff; }

.asv-meta {
  margin: 20px 0 0;
  font-family: var(--asv-condense);
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.asv-meta span { margin: 0 8px; color: var(--asv-signal); }

/* ---------- Colonne de lecture ----------------------------------- */

.asv-lecture { background: var(--asv-papier); padding: 56px 0 64px; }

.asv-lecture-grille {
  display: grid; gap: 56px;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
}

.asv-texte { max-width: 68ch; }

.asv-illustration { margin: 0 0 32px; }
.asv-illustration img {
  display: block; width: 100%; height: auto; border-radius: 3px;
}

.asv-texte p { font-size: 18px; line-height: 1.78; margin: 0 0 22px; color: #26313A; }
.asv-texte p:first-of-type { font-size: 20px; line-height: 1.7; color: #1A232B; }

.asv-texte h2 {
  font-family: var(--asv-condense);
  font-size: clamp(24px, 3vw, 31px); font-weight: 700;
  text-transform: uppercase; line-height: 1.12;
  margin: 48px 0 16px; padding-top: 18px;
  border-top: 2px solid var(--asv-signal);
  color: var(--asv-encre);
  scroll-margin-top: 90px;
}
.asv-texte h3 {
  font-family: var(--asv-condense);
  font-size: 22px; font-weight: 600; text-transform: uppercase;
  margin: 34px 0 12px; color: var(--asv-encre);
}
.asv-texte ul, .asv-texte ol { font-size: 18px; line-height: 1.72; margin: 0 0 22px; padding-left: 22px; }
.asv-texte li { margin-bottom: 9px; }
.asv-texte a { color: #B04F12; text-underline-offset: 3px; }
.asv-texte a:hover { color: var(--asv-signal); }
.asv-texte img { max-width: 100%; height: auto; border-radius: 3px; }
.asv-texte figure { margin: 0 0 26px; }

/* Images alignees dans le contenu, heritees des anciens articles. */
.asv-texte .alignleft,
.asv-texte figure.alignleft { float: left; margin: 6px 28px 20px 0; max-width: 320px; }
.asv-texte .alignright,
.asv-texte figure.alignright { float: right; margin: 6px 0 20px 28px; max-width: 320px; }
.asv-texte .aligncenter,
.asv-texte figure.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.asv-texte .alignnone { display: block; margin: 0 0 26px; }
.asv-texte::after { content: ""; display: table; clear: both; }
.asv-texte figcaption {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--asv-trace); margin-top: 8px;
}
.asv-texte blockquote {
  margin: 30px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--asv-signal);
  font-size: 20px; line-height: 1.6; color: var(--asv-encre);
}
.asv-texte blockquote p:last-child { margin-bottom: 0; }

.asv-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid #E2E5E8; }
.asv-tags a {
  display: inline-block; font-size: 13px; padding: 6px 12px;
  border: 1px solid #DBDFE3; border-radius: 2px;
  color: var(--asv-trace); text-decoration: none;
}
.asv-tags a:hover { border-color: var(--asv-signal); color: #B04F12; }

/* ---------- Colonne d appui -------------------------------------- */

.asv-colonne { position: sticky; top: 24px; display: grid; gap: 20px; }

.asv-toc {
  border-left: 2px solid var(--asv-signal);
  padding: 2px 0 2px 18px;
}
.asv-toc-titre {
  font-family: var(--asv-condense);
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--asv-trace); margin: 0 0 12px;
}
.asv-toc-liste { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.asv-toc-liste li { counter-increment: toc; margin-bottom: 11px; }
.asv-toc-liste a {
  display: block; font-size: 14px; line-height: 1.4;
  color: #3B4750; text-decoration: none;
}
.asv-toc-liste a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--asv-condense); font-size: 11px;
  color: var(--asv-signal); margin-right: 8px; letter-spacing: .06em;
}
.asv-toc-liste a:hover { color: var(--asv-encre); }

.asv-encart {
  background: var(--asv-nuit); color: #fff;
  border-top: 3px solid var(--asv-signal);
  border-radius: 3px; padding: 22px 20px;
}
.asv-encart-titre {
  font-family: var(--asv-condense);
  font-size: 19px; font-weight: 700; text-transform: uppercase;
  margin: 0 0 10px; color: #fff;
}
.asv-encart-texte { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.78); margin: 0 0 18px; }
.asv-encart .asv-btn { width: 100%; justify-content: center; font-size: 16px; padding: 13px 16px; }
.asv-encart-aut {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.42); margin: 14px 0 0; word-break: break-word;
}

/* ---------- Cartes d articles ------------------------------------ */

.asv-secteur h2 { margin-bottom: 26px; }

.asv-cartes { display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); }
.asv-cartes-3 { gap: 30px; }

.asv-carte-art {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid #E2E5E8; border-radius: 3px;
  overflow: hidden; transition: border-color .15s ease, transform .15s ease;
}
.asv-carte-art:hover { border-color: var(--asv-signal); transform: translateY(-3px); }
.asv-carte-art:focus-visible { outline: 3px solid var(--asv-signal); outline-offset: 2px; }

.asv-carte-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--asv-nuit); }
.asv-carte-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asv-vignette-vide {
  display: block; width: 100%; height: 100%;
  background-image: repeating-linear-gradient(115deg,
    rgba(255,124,44,.16) 0 2px, transparent 2px 22px);
}

.asv-carte-date {
  display: block; padding: 18px 20px 0;
  font-family: var(--asv-condense);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--asv-trace);
}
.asv-carte-date span { color: var(--asv-signal); margin: 0 6px; }

.asv-carte-titre2 {
  display: block; padding: 8px 20px 0;
  font-family: var(--asv-condense);
  font-size: 20px; font-weight: 700; line-height: 1.2;
  color: var(--asv-encre);
}
.asv-carte-extrait {
  display: block; padding: 10px 20px 22px;
  font-size: 14px; line-height: 1.6; color: #4A555E;
}
.asv-carte-titre2:last-child { padding-bottom: 22px; }

/* ---------- Pagination ------------------------------------------- */

.asv-corps-liste { background: var(--asv-beton); }
.asv-corps-liste .asv-conteneur { max-width: var(--asv-max); }

.asv-pagination { margin-top: 44px; }
.asv-pagination .page-numbers {
  display: inline-block; min-width: 42px; text-align: center;
  padding: 10px 14px; margin: 0 4px 8px 0;
  background: #fff; border: 1px solid #DBDFE3; border-radius: 2px;
  font-family: var(--asv-condense); font-size: 15px; font-weight: 600;
  letter-spacing: .04em; color: var(--asv-encre); text-decoration: none;
}
.asv-pagination .page-numbers:hover { border-color: var(--asv-signal); color: #B04F12; }
.asv-pagination .page-numbers.current {
  background: var(--asv-encre); border-color: var(--asv-encre); color: #fff;
}

.asv-vide { font-size: 17px; color: #3B4750; }

/* ---------- Adaptatif -------------------------------------------- */

/* ---------- Adaptatif -------------------------------------------- */

@media (max-width: 980px) {
  .asv-lecture-grille { grid-template-columns: 1fr; gap: 40px; }
  .asv-colonne { position: static; order: -1; }
  .asv-cartes { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Pages legales ---------------------------------------- */

.asv-hero-legal { padding: 44px 0 46px; }
.asv-hero-legal h1 { font-size: clamp(28px, 4vw, 44px); max-width: 24ch; }

/* Le texte legal se lit par reperage, pas d une traite :
   titres plus discrets, interlignage genereux, listes aerees. */
.asv-legal .asv-texte p { font-size: 16px; line-height: 1.8; }
.asv-legal .asv-texte p:first-of-type { font-size: 17px; }
.asv-legal .asv-texte h2 {
  font-size: 21px; border-top: 1px solid #DDE1E5;
  padding-top: 22px; margin: 42px 0 14px;
}
.asv-legal .asv-texte h3 { font-size: 17px; margin: 28px 0 10px; }
.asv-legal .asv-texte ul, .asv-legal .asv-texte ol { font-size: 16px; line-height: 1.75; }
.asv-legal .asv-texte table {
  width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px;
}
.asv-legal .asv-texte th, .asv-legal .asv-texte td {
  border: 1px solid #DDE1E5; padding: 10px 12px; text-align: left; vertical-align: top;
}
.asv-legal .asv-texte th { background: var(--asv-beton); font-weight: 600; }

/* Fiche editeur : meme famille que la carte d habilitation,
   en version claire pour ne pas alourdir une page de texte. */
.asv-fiche {
  background: #fff; border: 1px solid #DDE1E5;
  border-top: 3px solid var(--asv-signal);
  border-radius: 3px; padding: 20px;
}
.asv-fiche-titre {
  font-family: var(--asv-condense);
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--asv-trace); margin: 0 0 14px;
}
.asv-fiche dl { margin: 0; }
.asv-fiche dt {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--asv-trace); margin-bottom: 3px;
}
.asv-fiche dd {
  margin: 0 0 14px;
  font-family: var(--asv-condense);
  font-size: 15px; font-weight: 600; color: var(--asv-encre);
  word-break: break-word;
}
.asv-fiche dd:last-child { margin-bottom: 0; }
.asv-fiche .asv-num { font-size: 12px; letter-spacing: .01em; font-weight: 400; }
.asv-fiche a { color: #B04F12; text-decoration: none; }
.asv-fiche a:hover { color: var(--asv-signal); }

.asv-toc-simple { list-style: none; margin: 0; padding: 0; }
.asv-toc-simple li { margin-bottom: 10px; }
.asv-toc-simple a { font-size: 14px; color: #3B4750; text-decoration: none; }
.asv-toc-simple a:hover { color: var(--asv-encre); }

@media (max-width: 980px) {
  .asv-legal .asv-colonne { order: 0; }
}

@media (max-width: 700px) {
  .asv-hero-article, .asv-hero-liste { padding: 32px 0 38px; }
  .asv-lecture { padding: 36px 0 44px; }
  .asv-texte p { font-size: 17px; }
  .asv-texte p:first-of-type { font-size: 18px; }
  .asv-texte .alignleft, .asv-texte figure.alignleft,
  .asv-texte .alignright, .asv-texte figure.alignright {
    float: none; max-width: 100%; margin: 0 0 22px;
  }
  .asv-cartes { grid-template-columns: 1fr; }
}