/* Direction artistique du blog, portee depuis getmailcheck.com.
   Tout est confine sous .blog-da : les classes generiques comme .btn
   existent deja sur mailcheck.fr et se marcheraient dessus.
   La navigation et le pied ne sont pas portes, Page.astro fournit ceux
   du site pour que le lecteur garde le menu sous les yeux. */

/* landing.css style TOUT element <nav> en position fixe en haut de l'ecran,
   pour la barre du site. Le sommaire, la navigation precedent/suivant et la
   pagination du blog sont aussi des <nav> : sans cette remise a zero ils se
   collent en haut de la fenetre et se superposent. */
.blog-da nav {
  position: static;
  top: auto; left: auto; right: auto;
  z-index: auto;
  background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}

:root {
  --vert: #00c166;
  --vert-fonce: #00663a;
  --vert-pale: #e6fff3;
  --encre: #14161a;
  --gris-900: #1f2937;
  --gris-600: #566172;
  --gris-500: #7b8794;
  --gris-300: #d7dce3;
  --gris-200: #e8ecf1;
  --gris-100: #f2f5f8;
  --blanc: #ffffff;
  --fond: #fbfcfd;
  --rayon: 14px;
  --rayon-plein: 999px;
  --largeur: 1120px;
  --duree: .25s;
  --ease: cubic-bezier(.22,.61,.36,1);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
.blog-da { box-sizing: border-box; margin: 0; padding: 0; }
.blog-da { -webkit-text-size-adjust: 100%; }
.blog-da {
  font-family: var(--sans);
  background: var(--fond);
  color: var(--encre);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.blog-da a { color: inherit; }
.blog-da .conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) {

}
.blog-da .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: transform var(--duree) var(--ease), box-shadow var(--duree) var(--ease), background var(--duree) var(--ease);
}
.blog-da .btn-vert { background: var(--vert); color: #04240f; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.blog-da .btn-vert:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,193,102,.28); }
.blog-da .btn-clair { background: var(--blanc); color: var(--encre); border: 1px solid var(--gris-300); }
.blog-da .btn-clair:hover { border-color: var(--gris-500); }
.blog-da .btn-lg { padding: 14px 26px; font-size: .98rem; }
.blog-da .bandeau { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); }
.blog-da .bandeau::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, #c3cad6 1.4px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 42%, #000 8%, transparent 68%);
  mask-image: radial-gradient(ellipse 80% 90% at 50% 42%, #000 8%, transparent 68%);
}
.blog-da .bandeau > .conteneur { position: relative; z-index: 1; }
.blog-da .hero { text-align: center; }
.blog-da .hero-pilule {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon-plein);
  color: var(--gris-600); font-size: 13px; font-weight: 600; letter-spacing: -.01em;
  padding: 6px 14px; margin-bottom: 22px;
}
.blog-da .hero-pilule .puce { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }
.blog-da .hero h1 {
  font-size: clamp(2.35rem, 4.4vw + .9rem, 3.6rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.06;
  margin: 0 0 18px; text-wrap: balance;
}
.blog-da .hero-chapo {
  color: var(--gris-500); font-size: clamp(1.1rem, 1.1vw + .85rem, 1.35rem);
  letter-spacing: -.01em; line-height: 1.5; margin: 0 auto; max-width: 38rem; text-wrap: balance;
}
.blog-da .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.blog-da .hero-note { margin-top: 14px; font-size: .82rem; color: var(--gris-500); }
.blog-da .grille { display: grid; gap: clamp(20px, 2.4vw, 30px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); }
.blog-da .carte {
  background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon);
  overflow: hidden; display: flex;
  transition: border-color var(--duree) var(--ease), box-shadow var(--duree) var(--ease), transform var(--duree) var(--ease);
}
.blog-da .carte:hover { border-color: var(--gris-300); box-shadow: 0 14px 34px rgba(20,22,26,.07); transform: translateY(-2px); }
.blog-da .carte-lien { display: flex; flex-direction: column; width: 100%; text-decoration: none; color: inherit; }
.blog-da .carte-visuel { aspect-ratio: 16/9; background: var(--gris-100); border-bottom: 1px solid var(--gris-200); overflow: hidden; display: block; position: relative; }
.blog-da .carte-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.blog-da .carte:hover .carte-visuel img { transform: scale(1.04); }
.blog-da .carte-visuel--repli { background: linear-gradient(160deg, var(--vert-pale), var(--blanc)); display: flex; align-items: center; justify-content: center; }
.blog-da .carte-visuel--repli::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, #bcd8c9 1.2px, transparent 0); background-size: 18px 18px; opacity: .8;
}
.blog-da .carte-visuel--repli span { position: relative; font-size: 2rem; }
.blog-da .carte-corps { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.blog-da .carte-rubrique { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--vert-fonce); }
.blog-da .carte-titre { font-size: 1.02rem; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; color: var(--encre); }
.blog-da .carte-extrait { font-size: .86rem; color: var(--gris-600); line-height: 1.55; }
.blog-da .carte-meta { margin-top: auto; padding-top: 6px; font-size: .76rem; color: var(--gris-500); display: flex; gap: 8px; }
.blog-da .article { max-width: 720px; margin: 0 auto; padding: 0 24px 90px; }
.blog-da .article-entete { text-align: center; }
.blog-da .article-entete h1 { font-size: clamp(1.9rem, 2.4vw + 1.1rem, 2.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin-bottom: 16px; text-wrap: balance; }
.blog-da .article-meta { font-size: .82rem; color: var(--gris-500); display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.blog-da .article-visuel { margin: 36px 0 44px; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--gris-200); aspect-ratio: 16/9; background: var(--gris-100); }
.blog-da .article-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-da .article-corps > * + * { margin-top: 20px; }
.blog-da .article-corps p, .blog-da .article-corps li { font-size: 1.03rem; line-height: 1.78; color: var(--gris-900); }
.blog-da .article-corps h2 { font-size: 1.42rem; font-weight: 800; letter-spacing: -.02em; margin-top: 44px; line-height: 1.25; text-wrap: balance; }
.blog-da .article-corps ul, .blog-da .article-corps ol { padding-left: 22px; }
.blog-da .article-corps li + li { margin-top: 8px; }
.blog-da .article-corps strong { font-weight: 700; color: var(--encre); }
.blog-da .article-corps a { color: var(--vert-fonce); text-underline-offset: 3px; }
.blog-da .encart {
  margin: 48px 0 0; padding: 30px 32px; text-align: center;
  background: var(--vert-pale); border: 1px solid rgba(0,193,102,.35); border-radius: var(--rayon);
}
.blog-da .encart h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.blog-da .encart p { color: var(--gris-600); font-size: .94rem; margin-bottom: 20px; }
.blog-da .encart .fin { margin: 14px 0 0; font-size: .78rem; color: var(--gris-500); }
.blog-da .suite { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--gris-200); }
.blog-da .suite h2 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; }
.blog-da .precsuiv { display: flex; justify-content: space-between; gap: 20px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--gris-200); }
.blog-da .precsuiv a { text-decoration: none; max-width: 46%; display: flex; flex-direction: column; gap: 4px; }
.blog-da .precsuiv .label { font-size: .74rem; color: var(--gris-500); font-weight: 600; }
.blog-da .precsuiv .titre { font-size: .9rem; font-weight: 600; color: var(--gris-900); line-height: 1.4; }
.blog-da .precsuiv a:hover .titre { color: var(--vert-fonce); }
.blog-da .precsuiv .fin { text-align: right; margin-left: auto; }
.blog-da .article-large { max-width: var(--largeur); margin: 0 auto; padding: 0 24px 90px; }
.blog-da .article-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 56px;
  align-items: start;
}
.blog-da .article-grille .article-corps { max-width: 700px; }
.blog-da .aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.blog-da .aside-carte {
  background: var(--blanc); border: 1px solid var(--gris-200); border-radius: var(--rayon);
  padding: 24px 22px;
}
.blog-da .aside-carte--accent { background: var(--vert-pale); border-color: rgba(0,193,102,.38); }
.blog-da .aside-titre { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; margin-bottom: 10px; }
.blog-da .aside-texte { font-size: .86rem; color: var(--gris-600); line-height: 1.6; margin-bottom: 16px; }
.blog-da .aside .btn { width: 100%; justify-content: center; }
.blog-da .aside-note { font-size: .76rem; color: var(--gris-500); margin-top: 12px; text-align: center; line-height: 1.5; }
.blog-da .aside-liste { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.blog-da .aside-liste li { font-size: .84rem; color: var(--gris-600); padding-left: 20px; position: relative; line-height: 1.5; }
.blog-da .aside-liste li::before { content: '✓'; position: absolute; left: 0; color: var(--vert); font-weight: 700; }
.blog-da .aside-etiquette { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gris-500); margin-bottom: 12px; display: block; }
@media (max-width: 980px) {
.blog-da .article-grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.blog-da .article-grille .article-corps { max-width: 720px; margin: 0 auto; }
.blog-da .aside { position: static; max-width: 720px; margin: 0 auto; width: 100%; }
}
.blog-da .article-corps h2 { scroll-margin-top: 90px; }
.blog-da .article-corps h2 a.ancre { color: inherit; text-decoration: none; }
.blog-da .article-corps h2 a.ancre:hover::after { content: ' #'; color: var(--gris-300); font-weight: 400; }
.blog-da .tableau-comparatif { width: 100%; overflow-x: auto; margin: 24px 0; border: 1px solid var(--gris-200); border-radius: var(--rayon); background: var(--blanc); }
.blog-da .tableau-comparatif table { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 640px; }
.blog-da .tableau-comparatif th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-500); padding: 12px 14px; background: var(--gris-100); border-bottom: 1px solid var(--gris-200); white-space: nowrap; }
.blog-da .tableau-comparatif td { padding: 12px 14px; border-bottom: 1px solid var(--gris-200); color: var(--gris-600); vertical-align: top; line-height: 1.5; }
.blog-da .tableau-comparatif tr:last-child td { border-bottom: none; }
.blog-da .tableau-comparatif td strong { color: var(--encre); }
.blog-da .tableau-comparatif tr.mise-en-avant td { background: var(--vert-pale); }
.blog-da .article-corps h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; margin-top: 28px; line-height: 1.35; color: var(--encre); }
.blog-da .article-corps h3 + p { margin-top: 8px; }