/* Blog « Conseils » de challierq.fr.
   À charger après styles.css, sur les pages du blog uniquement.
   Reprend les variables, les icônes et les composants de styles.css. */

/* ---------- Icônes propres au blog ---------- */
:root {
  --vignette: #DCEAF6;   /* fond des vignettes d'article */

  --ico-bouclier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --ico-mobile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
  --ico-sms: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M9 7h6M9 11h4M12 18h.01'/%3E%3C/svg%3E");
  --ico-wifi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01'/%3E%3C/svg%3E");
  --ico-cadenas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --ico-alerte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4M12 7v4M12 14h.01'/%3E%3C/svg%3E");
  --ico-calendrier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --ico-horloge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  --ico-externe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3'/%3E%3C/svg%3E");
  --ico-retour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
}
.ico--bouclier { --ico: var(--ico-bouclier); }
.ico--mobile { --ico: var(--ico-mobile); }
.ico--sms { --ico: var(--ico-sms); }
.ico--wifi { --ico: var(--ico-wifi); }
.ico--cadenas { --ico: var(--ico-cadenas); }
.ico--alerte { --ico: var(--ico-alerte); }
.ico--calendrier { --ico: var(--ico-calendrier); }
.ico--horloge { --ico: var(--ico-horloge); }
.ico--externe { --ico: var(--ico-externe); }
.ico--retour { --ico: var(--ico-retour); }

/* ---------- Filtres de catégories (pastilles-liens) ---------- */
.filtres ul { display: flex; flex-wrap: wrap; gap: 10px; }
.filtres a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 6px 18px;
  border-radius: 999px; background: #FFFFFF; border: 2px solid var(--bordure);
  color: var(--marine); font-weight: 700; line-height: 1.3; text-decoration: none;
}
.filtres a:hover { border-color: var(--marine); color: var(--marine); }
.filtres a[aria-current="page"] { background: var(--marine); border-color: var(--marine); color: #FFFFFF; }
@media (min-width: 720px) { .filtres ul { gap: 12px; } .filtres a { min-height: 52px; padding-inline: 22px; } }

/* ---------- Méta (date, temps de lecture) ---------- */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: 16px; color: var(--texte-3); }
.meta span { display: inline-flex; align-items: center; gap: 8px; }
.meta .ico { width: 18px; height: 18px; }
@media (min-width: 720px) { .meta--grande { font-size: 18px; } }

.categorie-etiquette {
  font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bleu);
}
@media (min-width: 720px) { .categorie-etiquette { font-size: 16px; } }

/* ---------- Vignette d'article (icône de la catégorie) ---------- */
.vignette {
  display: flex; align-items: center; justify-content: center;
  min-height: 140px; background: var(--vignette); color: var(--marine);
}
.vignette .ico { width: 60px; height: 60px; }
.vignette--marine { background: var(--marine); }
.vignette--marine .ico { color: var(--cyan); }

/* Vignette avec l'image de l'article (à la place de l'icône quand l'article a une image) */
.vignette--image { display: block; padding: 0; overflow: hidden; background: var(--vignette); }
.vignette--image img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carte-article .vignette--image, .une .vignette--image { min-height: 0; }
@media (min-width: 720px) {
  .liste-articles .carte-article .vignette--image img { aspect-ratio: auto; }
}
@media (min-width: 1000px) {
  .une .vignette--image img { aspect-ratio: auto; }
}

/* Image d'illustration en tête d'article */
.prose .article-image { margin-top: 0; }

/* ---------- Article à la une ---------- */
.une {
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  text-decoration: none; color: var(--texte);
}
.une:hover { border-color: var(--marine); color: var(--texte); }
.une .vignette { min-height: 180px; }
.une .vignette .ico { width: 96px; height: 96px; }
.une__corps { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.une__corps h3 { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.2; }
.une__lire { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 700; text-decoration: underline; }
.une__lire .ico { width: 20px; height: 20px; }
@media (min-width: 1000px) {
  .une { flex-direction: row; }
  .une .vignette { flex: 1 1 380px; min-height: 280px; }
  .une .vignette .ico { width: 120px; height: 120px; }
  .une__corps { flex: 1.4 1 460px; padding: 40px; gap: 14px; }
}

/* ---------- Grille de cartes ---------- */
.cartes-articles { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .cartes-articles { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1000px) { .cartes-articles { grid-template-columns: repeat(3, 1fr); } }

.carte-article {
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  border-radius: var(--rayon-l); text-decoration: none; color: var(--texte);
}
.carte-article:hover { border-color: var(--marine); color: var(--texte); }
.carte-article .vignette { min-height: 140px; }
.carte-article__corps { flex-grow: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; }
.carte-article h3 { font-size: 22px; line-height: 1.25; }
.carte-article p { flex-grow: 1; font-size: 18px; color: var(--texte-3); }
@media (min-width: 720px) { .carte-article .vignette { min-height: 160px; } .carte-article h3 { font-size: 23px; } }

/* ---------- Liste d'articles (page catégorie) ---------- */
.liste-articles { display: flex; flex-direction: column; gap: 20px; }
.liste-articles .carte-article .vignette { min-height: 120px; }
@media (min-width: 720px) {
  .liste-articles .carte-article { flex-direction: row; }
  .liste-articles .carte-article .vignette { flex: 0 0 200px; min-height: 180px; }
  .liste-articles .carte-article__corps { justify-content: center; padding: 24px 28px; }
  .liste-articles .carte-article p { flex-grow: 0; }
  .liste-articles .carte-article h3 { font-size: 24px; }
}

/* ---------- Pagination ---------- */
.pagination ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.pagination li > a, .pagination li > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 52px; min-height: 52px; padding: 0 16px; border-radius: 14px;
  background: #FFFFFF; border: 2px solid var(--bordure); color: var(--marine);
  font-weight: 700; text-decoration: none;
}
.pagination li > a:hover { border-color: var(--marine); }
.pagination li > a[aria-current="page"] { background: var(--marine); border-color: var(--marine); color: #FFFFFF; }
.pagination span.inactif { color: var(--bordure-champ); }
.pagination .ico { width: 18px; height: 18px; }
.pagination .suivant { border-color: var(--marine); }

/* ---------- En-tête de catégorie ---------- */
.categorie-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.categorie-titre__icone {
  flex: none; width: 72px; height: 72px; border-radius: 20px; background: var(--marine);
  display: flex; align-items: center; justify-content: center; color: var(--cyan);
}
.categorie-titre__icone .ico { width: 40px; height: 40px; }
.categorie-titre h1 { flex: 1 1 320px; }
@media (min-width: 720px) {
  .categorie-titre__icone { width: 88px; height: 88px; border-radius: 24px; }
  .categorie-titre__icone .ico { width: 48px; height: 48px; }
}

/* ---------- Mise en page en deux colonnes (catégorie, article) ---------- */
.colonnes-blog { display: flex; flex-direction: column; gap: 36px; }
.colonnes-blog > * { min-width: 0; }
@media (min-width: 1000px) {
  .colonnes-blog { flex-direction: row; align-items: flex-start; gap: 56px; }
  .colonnes-blog__principal { flex: 1 1 640px; }
  .colonnes-blog__cote { flex: 0 0 320px; }
  .colonnes-blog--article .colonnes-blog__principal { max-width: 760px; }
  .colonnes-blog--article .colonnes-blog__cote { order: 2; position: sticky; top: 112px; }
}
.colonnes-blog__cote { display: flex; flex-direction: column; gap: 20px; }

/* Encart d'appel marine (colonne de côté) */
.encart-appel {
  background: var(--marine); color: #FFFFFF; border-radius: var(--rayon-l);
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
  --couleur-coche: var(--cyan);
}
.encart-appel h2 { font-size: 22px; line-height: 1.25; }
.encart-appel p, .encart-appel li { font-size: 18px; color: var(--sur-marine); }
.encart-appel strong { color: #FFFFFF; }
.encart-appel .btn { min-height: 60px; font-family: var(--police-titre); font-size: 22px; white-space: nowrap; }
.encart-appel .btn .ico { width: 24px; height: 24px; }
@media (min-width: 720px) { .encart-appel { padding: 28px; } }

/* Sur téléphone, la barre d'appel fixe suffit : l'encart d'appel de l'article est masqué */
@media (max-width: 719px) { .colonnes-blog--article .encart-appel { display: none; } }

/* Encadré « Conseils écrits par » (page catégorie) */
.signature { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--rayon-l); background: var(--fond-teinte); font-size: 18px; line-height: 1.35; }
.signature img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 18%; flex: none; }
.signature strong { display: block; }
.signature a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ---------- Article ---------- */
.badge-categorie {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--marine); color: #FFFFFF;
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
}
.badge-categorie:hover { color: #FFFFFF; background: #0B2F58; }
.badge-categorie .ico { width: 18px; height: 18px; color: var(--cyan); }

.auteur-mini { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; color: var(--marine); text-decoration: none; }
.auteur-mini img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 18%; }

/* Sommaire */
.sommaire { background: var(--fond-teinte); border-radius: var(--rayon-l); padding: 20px 24px; }
.sommaire h2 { margin-bottom: 6px; }
.sommaire ol { display: flex; flex-direction: column; font-size: 18px; line-height: 1.35; }
.sommaire a { display: flex; align-items: center; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--bordure); font-weight: 700; text-decoration: none; }
.sommaire li:last-child a { border-bottom: 0; }

/* Corps de l'article */
.prose { font-size: 19px; line-height: 1.7; color: var(--texte-2); }
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 44px; font-size: clamp(25px, 2.6vw, 32px); line-height: 1.2; color: var(--texte); }
.prose h3 { margin-top: 32px; font-size: 22px; color: var(--texte); }
.prose h2 + *, .prose h3 + * { margin-top: 14px; }
.prose ul { list-style: disc; padding-left: 28px; }
.prose ol { list-style: decimal; padding-left: 28px; }
.prose li + li { margin-top: 10px; }
.prose li::marker { color: var(--marine); font-weight: 700; }
.prose strong { color: var(--texte); }
.prose a { font-weight: 700; }
.prose figure { margin-block: 32px; }
.prose figure img { width: 100%; border-radius: 20px; }
.prose figcaption { margin-top: 10px; font-size: 17px; color: var(--texte-3); }
@media (min-width: 720px) { .prose { font-size: 20px; } }


/* Encadré « À retenir » */
.a-retenir { margin-top: 40px; padding: 24px; border-radius: var(--rayon-l); background: var(--fond-teinte); color: var(--texte); line-height: 1.5; }
.a-retenir h2 { margin: 0 0 14px; font-size: 24px; }
.prose .a-retenir ul { list-style: none; padding-left: 0; }
@media (min-width: 720px) { .a-retenir { padding: 28px 32px; } }

/* Box auteur */
.auteur {
  margin-top: 56px; display: flex; flex-direction: column; gap: 20px;
  line-height: 1.55; color: var(--texte);
}
.auteur img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 18%; flex: none; }
.auteur__texte { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.auteur h2 { font-size: 26px; line-height: 1.2; }
.auteur__role { font-weight: 700; }
.auteur__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 6px; }
.auteur__liens .btn { min-height: 52px; padding: 6px 20px; border-radius: 14px; font-size: inherit; }
.auteur__liens .btn .ico { width: 20px; height: 20px; }
@media (min-width: 720px) {
  .auteur { flex-direction: row; align-items: flex-start; gap: 28px; }
  .auteur img { width: 120px; height: 120px; }
}
.auteur__texte > * { margin: 0; }