/* ============================================================
   OEMA — Blog

   Prolonge landing.css : mêmes couleurs, mêmes fontes, même barre
   haute. Ce qui est propre à un texte long tient ici — largeur de
   lecture, rythme des titres, tableaux qui débordent proprement.
   ============================================================ */

/* Une colonne de lecture, pas une pleine largeur : au-delà d'une
   soixantaine de signes par ligne, l'œil perd le début de la suivante. */
.wrap.etroit{max-width:720px;}

/* ---------- Lien de navigation ---------- */
.lien-nav{font-size:14px;font-weight:600;color:var(--muted);padding:8px 4px;}
.lien-nav:hover{color:var(--ink);}

/* ---------- Tête du blog ---------- */
.blog-tete{
  background:linear-gradient(158deg,var(--navy-grad-top),var(--navy-deep));
  color:#fff;padding:72px 0 78px;position:relative;overflow:hidden;
}
.blog-tete::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1.1px,transparent 1.1px);
  background-size:22px 22px;
}
.blog-tete .wrap{position:relative;}
.blog-tete .cat{
  font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--yellow);display:block;margin-bottom:12px;
}
.blog-tete h1{font-size:clamp(30px,5vw,46px);line-height:1.1;}
.blog-tete p{font-size:16.5px;color:#C9D6F5;margin-top:16px;max-width:560px;}
@media (max-width:700px){ .blog-tete{padding:52px 0 56px;} }

/* ---------- Cartes d'articles ---------- */
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.carte{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r18);
  padding:24px;transition:border-color .15s,box-shadow .15s,transform .1s;
}
.carte:hover{border-color:var(--blue);box-shadow:var(--sh-2);}
.carte:active{transform:translateY(1px);}
.carte .cat{
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:10px;
}
.carte h3{font-size:19px;line-height:1.25;}
.carte p{font-size:14.5px;color:var(--muted);margin-top:10px;flex:1;}
.carte .quand{font-size:12.5px;color:var(--muted2);margin-top:16px;}

/* ---------- Article ---------- */
.article{padding:44px 0 72px;}
.fil{font-size:13px;color:var(--muted2);margin-bottom:22px;}
.fil a{color:var(--muted);}
.fil a:hover{color:var(--ink);}
.fil span{margin:0 4px;}

.article .cat{
  font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--blue);display:block;margin-bottom:12px;
}
.article h1{font-size:clamp(28px,4.6vw,42px);line-height:1.12;}
.article .chapeau{font-size:18px;color:var(--muted);margin-top:16px;line-height:1.55;}
.article .meta{font-size:13px;color:var(--muted2);margin-top:18px;}
.article .meta span{margin:0 4px;}

/* Sommaire : sur un article de fond, savoir où l'on va évite de partir. */
.sommaire{
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r12);
  padding:20px 24px;margin-top:32px;
}
.sommaire b{
  display:block;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted2);margin-bottom:10px;
}
.sommaire ol{margin:0;padding-left:20px;}
.sommaire li{font-size:14.5px;margin:6px 0;}
.sommaire a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line);}
.sommaire a:hover{text-decoration-color:var(--navy);}

/* ---------- Corps du texte ---------- */
.corps{margin-top:36px;font-size:17px;line-height:1.72;}
.corps > * + *{margin-top:22px;}
.corps h2{
  font-size:clamp(22px,3vw,28px);line-height:1.2;
  margin-top:48px;padding-top:4px;scroll-margin-top:86px;
}
.corps h3{font-size:19.5px;line-height:1.3;margin-top:34px;scroll-margin-top:86px;}
.corps h2 + p,.corps h3 + p{margin-top:14px;}
.corps a{
  color:var(--navy);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--navy) 35%,transparent);
}
.corps a:hover{text-decoration-color:var(--navy);}
.corps b{font-weight:600;color:var(--ink);}
.corps ul,.corps ol{padding-left:24px;}
.corps li{margin:9px 0;}
.corps li::marker{color:var(--blue);}
.corps hr{border:none;border-top:1px solid var(--line);margin:40px 0;}
.corps code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r6);
  padding:1px 5px;
}
.corps blockquote{
  border-left:3px solid var(--yellow);background:var(--card-2);
  border-radius:0 var(--r12) var(--r12) 0;padding:18px 22px;
}
.corps blockquote p{margin:0;font-size:16.5px;color:var(--muted);}

/* Un tableau large défile dans sa propre boîte : la page, elle,
   ne part jamais de travers. */
.table-enveloppe{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r12);}
.corps table{border-collapse:collapse;width:100%;font-size:15px;min-width:420px;}
.corps th,.corps td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line-2);}
.corps th{background:var(--card-2);font-weight:600;font-size:13px;
  letter-spacing:.02em;color:var(--muted);white-space:nowrap;}
.corps tr:last-child td{border-bottom:none;}

/* ---------- Appel à l'action ---------- */
.appel{
  background:linear-gradient(158deg,var(--navy-grad-top),var(--navy-deep));
  color:#fff;border-radius:var(--r24);padding:40px 32px;text-align:center;
  margin-top:56px;position:relative;overflow:hidden;
}
.appel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1.1px,transparent 1.1px);
  background-size:24px 24px;
}
.appel > *{position:relative;}
.appel h2{font-size:clamp(22px,3vw,28px);line-height:1.2;}
.appel p{font-size:15.5px;color:#C9D6F5;margin:12px auto 24px;max-width:460px;}
.appel-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- À lire ensuite ---------- */
.suite{margin-top:56px;}
.suite h2{font-size:22px;margin-bottom:20px;}
.suite .cartes{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}