/* ==========================================================================
   Les Partenaires de l'Auto — blog.css
   Chargée seulement par les pages du blog (/blog/), après variables.css et style.css :
   aucune page commerciale n'en dépend. Après modification, changer VERSION_BLOG_CSS
   dans outils-site/blog.py puis relancer « python3 outils-site/blog.py regenerer ».
   Sommaire :
     1. Fil d'Ariane et aperçu privé
     2. Article : en-tête et image
     3. Article : grille, sommaire, l'essentiel
     4. Article : texte (titres, liens, renvois, listes, tableaux, exemples)
     5. Article : partenaires, contact, pour aller plus loin, sources
     6. Index du blog
   ========================================================================== */

/* ---------- 1. Fil d'Ariane et aperçu privé ---------- */
.fil-ariane { margin-bottom: var(--e-8); font-size: var(--t-petit); color: var(--c-encre-douce); }

.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fil-ariane li + li::before { content: "/"; margin-right: var(--e-2); color: var(--c-trait-fort); }
.fil-ariane a { color: var(--c-encre-douce); text-decoration: none; }
.fil-ariane a:hover { color: var(--c-bleu); text-decoration: underline; }
.fil-ariane [aria-current="page"] { overflow-wrap: anywhere; }

/* Bandeau des brouillons : n'apparaît que dans l'aperçu privé, jamais en ligne */
.blog-apercu {
  margin: 0;
  padding: var(--e-3) var(--e-gouttiere);
  border-bottom: 2px solid var(--c-attention-trait);
  background: var(--c-attention-fond);
  color: var(--c-attention);
  font-size: var(--t-petit);
  overflow-wrap: anywhere;
}

/* ---------- 2. Article : en-tête et image ---------- */
.article__entete { padding-top: var(--e-hero-haut); }

.article__entete .conteneur { max-width: 70rem; }

.article__theme { margin-bottom: var(--e-5); }

.article__theme a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 1rem;
  border-radius: var(--r-pilule);
  background: var(--c-fond-alt);
  color: var(--c-bleu);
  font-size: var(--t-petit);
  font-weight: var(--g-moyenne);
  text-decoration: none;
}

.article__theme a:hover { background: var(--c-trait); color: var(--c-nuit); }

.article__titre {
  max-width: 22ch;
  margin-bottom: var(--e-5);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: var(--ih-titres);
  letter-spacing: var(--ls-titres);
  text-wrap: balance;
}

.article__resume {
  max-width: 38em;
  margin-bottom: var(--e-6);
  font-size: var(--t-intro);
  line-height: var(--ih-intro);
  color: var(--c-encre-douce);
  text-wrap: pretty;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-petit);
  color: var(--c-encre-douce);
}

.article__meta li + li::before { content: "·"; margin-right: var(--e-3); }

.article__image { margin: var(--e-10) 0 0; }

.article__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-grand);
  background: var(--c-nuit);
}

.article__credit { margin-top: var(--e-2); font-size: 0.8125rem; color: var(--c-encre-douce); text-align: right; }

/* ---------- 3. Article : grille, sommaire, l'essentiel ---------- */
.article__grille {
  display: grid;
  grid-template-columns: minmax(0, 46rem);
  justify-content: center;
  gap: var(--e-16);
  padding-top: var(--e-10);
  padding-bottom: var(--e-section);
}

.article__cote { display: none; }

@media (min-width: 64em) {
  .article__grille--sommaire { grid-template-columns: 14rem minmax(0, 46rem); }
  .article__cote { display: block; }
  .sommaire--replie { display: none; }
}

.article__signature {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  margin-bottom: var(--e-8);
  font-size: var(--t-petit);
  color: var(--c-encre-douce);
}

.article__signature span:first-child { font-weight: var(--g-moyenne); color: var(--c-encre); }

/* Sommaire : liste discrète, sans numéros ni soulignement */
.sommaire ul { margin: 0; padding: 0; list-style: none; }

.sommaire a {
  display: block;
  padding: 0.4375rem 0 0.4375rem var(--e-4);
  border-left: 2px solid transparent;
  color: var(--c-encre-douce);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
}

.sommaire a:hover { border-left-color: var(--c-marine); color: var(--c-nuit); }
.sommaire ul ul a { padding-left: var(--e-8); font-size: var(--t-petit); }

.sommaire--cote { position: sticky; top: var(--e-8); }
.sommaire--cote > ul { border-left: 2px solid var(--c-trait); }
.sommaire--cote a { margin-left: -2px; }

.sommaire__titre {
  margin-bottom: var(--e-3);
  font-size: 0.75rem;
  font-weight: var(--g-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-encre-douce);
}

/* Téléphone et tablette : sommaire replié dans une pilule */
.sommaire--replie {
  margin-top: var(--e-4);
  border-radius: var(--r-faq);
  background: var(--c-fond-alt);
}

.sommaire--replie summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  padding: 0 var(--e-5);
  font-weight: var(--g-moyenne);
  cursor: pointer;
  list-style: none;
}

.sommaire--replie summary::-webkit-details-marker { display: none; }

.sommaire--replie summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--c-nuit);
  border-bottom: 2px solid var(--c-nuit);
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--duree) ease;
}

.sommaire--replie[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.sommaire--replie summary:focus-visible { outline: var(--focus); outline-offset: var(--focus-decalage); border-radius: var(--r-faq); }
.sommaire--replie nav { padding: 0 var(--e-5) var(--e-4); }

/* L'essentiel : ce qu'il faut retenir, avec une coche par point */
.article__essentiel {
  padding: var(--e-6) var(--e-6) var(--e-5);
  border-radius: var(--r-carte);
  background: var(--c-fond-alt);
}

.article__essentiel-titre {
  margin-bottom: var(--e-4);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: 1.375rem;
  line-height: var(--ih-carte);
}

.article__essentiel ul { margin: 0; padding: 0; list-style: none; }

.article__essentiel li {
  position: relative;
  padding-left: 2.125rem;
  line-height: var(--ih-texte);
}

.article__essentiel li + li { margin-top: var(--e-3); }

.article__essentiel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.125rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--c-bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.875rem no-repeat;
}

.article__avertissement {
  margin-top: var(--e-6);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-faq);
  background: var(--c-attention-fond);
  font-size: var(--t-petit);
}

.article__note { margin-top: var(--e-4); font-size: var(--t-petit); color: var(--c-encre-douce); }

/* ---------- 4. Article : texte ---------- */
.article__corps { margin-top: var(--e-4); font-size: var(--t-texte); line-height: 1.7; }

.article__corps h2,
.article__corps h3 { scroll-margin-top: var(--e-8); text-wrap: balance; }

.article__corps h2 {
  margin: var(--e-12) 0 var(--e-4);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  line-height: var(--ih-carte);
  letter-spacing: var(--ls-carte);
}

.article__corps h3 {
  margin: var(--e-8) 0 var(--e-3);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: 1.375rem;
  line-height: var(--ih-carte);
}

.article__corps p,
.article__corps ul,
.article__corps ol,
.article__corps blockquote,
.article__tableau { margin-bottom: var(--e-5); }

.article__corps ul,
.article__corps ol { padding-left: var(--e-6); }
.article__corps li + li { margin-top: var(--e-2); }
.article__corps li::marker { color: var(--c-bleu); }

.article__corps a {
  color: var(--c-bleu);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--c-bleu) 35%, transparent);
  text-underline-offset: 0.2em;
}

.article__corps a:hover { color: var(--c-nuit); text-decoration-color: currentColor; }

.article__corps blockquote {
  margin-inline: 0;
  padding: var(--e-1) 0 var(--e-1) var(--e-5);
  border-left: 3px solid var(--c-bleu);
  color: var(--c-encre-douce);
}

/* Renvoi vers une source : petite pastille, sans crochets */
.article__ref { margin-left: 0.25em; font-size: 0.6875rem; line-height: 1; vertical-align: 0.45em; }

.article__ref a {
  display: inline-block;
  min-width: 1.25em;
  padding: 0.2em 0.4em;
  border-radius: var(--r-pilule);
  background: color-mix(in srgb, var(--c-bleu) 12%, var(--c-fond));
  color: var(--c-bleu);
  font-weight: var(--g-semi);
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

.article__corps .article__ref a { text-decoration: none; }
.article__ref a:hover { background: var(--c-bleu); color: var(--c-sur-sombre); }

/* Tableau : défile dans son cadre sur téléphone, sans élargir la page */
.article__tableau { overflow-x: auto; border-radius: var(--r-faq); box-shadow: inset 0 0 0 1px var(--c-trait-fort); }
.article__tableau:focus-visible { outline: var(--focus); outline-offset: var(--focus-decalage); }

.article__tableau table { width: 100%; min-width: 28rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }

.article__tableau th,
.article__tableau td { padding: var(--e-3) var(--e-4); text-align: left; vertical-align: top; }

.article__tableau tbody tr + tr td { border-top: 1px solid var(--c-trait); }
.article__tableau th { font-weight: var(--g-semi); background: var(--c-fond-alt); }

.article__exemple {
  margin: var(--e-6) 0;
  padding: var(--e-5) var(--e-6);
  border-radius: var(--r-faq);
  background: color-mix(in srgb, var(--c-ciel) 14%, var(--c-fond));
}

.article__exemple-titre { margin-bottom: var(--e-2); font-size: var(--t-petit); font-weight: var(--g-semi); color: var(--c-bleu); }
.article__exemple > :last-child { margin-bottom: 0; }

/* ---------- 5. Article : contact, pour aller plus loin, sources ---------- */
.article__contact {
  margin-top: var(--e-12);
  padding: var(--e-8) var(--e-6);
  border-radius: var(--r-carte);
  background: var(--c-nuit);
  color: var(--c-sur-sombre);
}

.article__contact-titre,
.article__suite-titre,
.article__sources-titre {
  margin-bottom: var(--e-4);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: 1.5rem;
  line-height: var(--ih-carte);
}

.article__contact p { margin-bottom: var(--e-6); color: var(--c-sur-sombre-doux); }
.article__contact .bouton:focus-visible { outline: var(--focus-sombre); outline-offset: var(--focus-decalage); }

/* Sites partenaires : formation et voiture à double commande pour l'examen */
.article__partenaires { margin-top: var(--e-12); }

.article__partenaires-titre {
  margin-bottom: var(--e-4);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: 1.5rem;
  line-height: var(--ih-carte);
}

.article__partenaires ul { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }

@media (min-width: 40em) {
  .article__partenaires ul { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

.article__partenaires a {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  height: 100%;
  padding: var(--e-5);
  border-radius: var(--r-faq);
  background: color-mix(in srgb, var(--c-ciel) 14%, var(--c-fond));
  color: var(--c-nuit);
  text-decoration: none;
  transition: background-color var(--duree) ease;
}

.article__partenaires a:hover { background: color-mix(in srgb, var(--c-ciel) 26%, var(--c-fond)); }
.article__partenaires strong { font-weight: var(--g-semi); }
.article__partenaires strong::after { content: " ↗"; color: var(--c-bleu); }
.article__partenaires span { font-size: var(--t-petit); color: var(--c-encre-douce); }
.article__partenaires-mention { margin-top: var(--e-2); font-size: 0.8125rem; color: var(--c-encre-douce); }

.article__suite { margin-top: var(--e-12); }

.article__suite ul {
  display: grid;
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .article__suite ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.article__suite a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  height: 100%;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-faq);
  box-shadow: inset 0 0 0 1px var(--c-trait-fort);
  color: var(--c-nuit);
  font-weight: var(--g-moyenne);
  line-height: 1.35;
  text-decoration: none;
  transition: box-shadow var(--duree) ease, background-color var(--duree) ease;
}

.article__suite a::after { content: "→"; flex: none; color: var(--c-bleu); }
.article__suite a:hover { background: var(--c-fond-alt); box-shadow: inset 0 0 0 1px var(--c-marine); }

.article__sources {
  margin-top: var(--e-12);
  padding-top: var(--e-6);
  border-top: 1px solid var(--c-trait);
  font-size: var(--t-petit);
  color: var(--c-encre-douce);
}

.article__sources-titre { font-size: 1.125rem; color: var(--c-encre); }
.article__sources ol { margin: 0; padding-left: var(--e-5); }
.article__sources li + li { margin-top: var(--e-2); }
.article__sources li { scroll-margin-top: var(--e-8); }
.article__sources li:target { color: var(--c-encre); }
.article__sources a { color: var(--c-encre-douce); overflow-wrap: anywhere; }
.article__sources a:hover { color: var(--c-bleu); }

/* ---------- 6. Index du blog ---------- */
.blog-filtres ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0 0 var(--e-10);
  padding: 0;
  list-style: none;
}

.blog-filtres a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-pilule);
  background: var(--c-fond-alt);
  color: var(--c-nuit);
  font-size: var(--t-petit);
  font-weight: var(--g-moyenne);
  text-decoration: none;
}

.blog-filtres a:hover { background: var(--c-trait); }

.blog-pilier { scroll-margin-top: var(--e-8); }
.blog-pilier + .blog-pilier { margin-top: var(--e-12); }

.blog-pilier__titre {
  margin-bottom: var(--e-5);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: var(--t-carte);
}

.blog-liste {
  display: grid;
  gap: var(--e-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 45em) {
  .blog-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 70em) {
  .blog-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Carte entière cliquable : le lien du titre couvre la carte */
.blog-carte {
  position: relative;
  overflow: hidden;
  padding: 0 0 var(--e-6);
  border-radius: var(--r-carte);
  background: var(--c-fond-alt);
  transition: background-color var(--duree) ease;
}

.blog-carte:hover { background: var(--c-trait); }
.blog-carte > :not(img) { margin-inline: var(--e-6); }

.blog-carte__image { display: block; width: 100%; height: auto; margin-bottom: var(--e-5); background: var(--c-nuit); }

.blog-carte__titre {
  margin-bottom: var(--e-3);
  font-family: var(--police-titres);
  font-weight: var(--g-moyenne);
  font-size: 1.375rem;
  line-height: var(--ih-carte);
}

.blog-carte__titre a { color: var(--c-nuit); text-decoration: none; }
.blog-carte__titre a::after { content: ""; position: absolute; inset: 0; }
.blog-carte__titre a:focus-visible { outline: none; }
.blog-carte:has(a:focus-visible) { outline: var(--focus); outline-offset: var(--focus-decalage); }

.blog-carte__resume { margin-bottom: var(--e-3); color: var(--c-encre-douce); }
.blog-carte__meta { font-size: var(--t-petit); color: var(--c-encre-douce); }