/* Blog du guide PVT de Laura : pages statiques (outils/build_blog.py), même charte que le guide, légère et lisible */
@font-face { font-family: "Montserrat"; font-weight: 500 900; font-display: swap; src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Montserrat"; font-weight: 500 900; font-display: swap; src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+A720-A7FF; }
:root { --ink: #2E3557; --ink-2: #4A5170; --black: #18181C; --pink: #F2558C; --pink-600: #CF336C; --cream: #FFF8EA; --kraft: #EAD9BC;
  /* 13/11 : mêmes réglages que le guide (css/style.css) */
  --pink-200: #FFD6E5; --turq: #40BEC4; --turq-100: #DDF3F4; --yellow: #F5B83D; --yellow-100: #FFF1C9;
  --bw: 2.5px; --sh-card: 5px 5px 0 var(--black); --sh-tile: 2px 2px 0 var(--black); --r-card: 16px; --r-ctrl: 12px; }
* { box-sizing: border-box; }
html { background: var(--kraft); }
body { margin: 0; font-family: "Montserrat", system-ui, sans-serif; font-weight: 500; color: var(--ink); line-height: 1.6; font-size: 17px;
  background: linear-gradient(rgba(255, 248, 234, .62), rgba(255, 248, 234, .62)), #CB975E url("../img/fond_kraft_tuile.webp") left top / 700px 700px repeat; }
a { color: var(--pink-600); font-weight: 700; }
.haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px;
  background: var(--cream); border-bottom: var(--bw) solid var(--black); }
.marque { color: var(--ink); font-weight: 900; font-size: 19px; text-decoration: none; }
.marque span { color: var(--pink-600); }
.bouton { display: inline-block; background: var(--pink-600); color: #fff; text-decoration: none; font-weight: 800; padding: 10px 16px;
  border: 2px solid var(--black); border-radius: 12px; box-shadow: 3px 3px 0 var(--black); }
.page { max-width: 820px; margin: 0 auto; padding: 20px 16px 48px; }
.fil { font-size: 14px; margin-bottom: 12px; }
article { background: #fff; }
article { border: var(--bw) solid var(--black); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 20px 22px; }
h1 { font-size: clamp(26px, 5vw, 38px); line-height: 1.15; font-weight: 900; margin: 0 0 8px; }
h2 { font-size: 22px; font-weight: 900; margin: 28px 0 8px; }
.maj { color: var(--ink-2); font-size: 14px; margin: 0 0 12px; }
.chapo { font-size: 18px; font-weight: 600; }
.tab-wrap { overflow-x: auto; }
.tab { width: 100%; border-collapse: collapse; font-size: 15px; }
.tab th, .tab td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid rgba(24, 24, 28, .15); }
.tab thead th { background: var(--cream); }
.off { display: inline-block; font-size: 12px; font-weight: 800; color: #155E63; background: var(--turq-100); border: 1.5px solid currentColor; border-radius: 99px; padding: 1px 8px; }
.etapes li { margin-bottom: 8px; }
.faq { border: 2px solid var(--black); border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: var(--cream); }
.faq summary { font-weight: 800; cursor: pointer; }
.cta { margin: 28px 0 8px; padding: 16px 18px; background: var(--pink-200); border: var(--bw) solid var(--black); border-radius: var(--r-card); box-shadow: var(--sh-card); }
.cta .lien { margin-left: 10px; }
.sources { font-size: 14px; }
.autres { font-size: 15px; }
.note { font-size: 14px; color: var(--ink-2); }
.liste { list-style: none; padding: 0; display: grid; gap: 12px; }
.liste a { display: block; background: #fff; color: var(--ink); text-decoration: none; border: var(--bw) solid var(--black); border-radius: var(--r-card); padding: 12px 16px; box-shadow: var(--sh-tile); }
.liste strong { display: block; font-size: 18px; }
.liste span { font-weight: 500; font-size: 15px; color: var(--ink-2); }
.bas { max-width: 820px; margin: 0 auto; padding: 0 16px 32px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 600px) { body { font-size: 16px; } article { padding: 16px; } .cta .lien { display: block; margin: 10px 0 0; } }

/* photos (09/11) */
.ph { margin: 18px 0; }
.ph img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; border: var(--bw) solid var(--black); border-radius: var(--r-card); }
.ph figcaption { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.ph .cr a { color: var(--ink-2); font-weight: 600; }
.couv { margin: -20px -22px 18px; }
.couv img { border: 0; border-bottom: var(--bw) solid var(--black); border-radius: 15px 15px 0 0; max-height: 360px; }
.couv figcaption { padding: 0 22px; }
.liste a { display: flex; gap: 14px; align-items: center; padding: 10px; }
.vig { flex: none; width: 120px; height: 90px; object-fit: cover; border: 2px solid var(--black); border-radius: 10px; }
.vig--txt { display: flex; align-items: center; justify-content: center; background: var(--pink); color: #fff; font-weight: 900; font-size: 20px; }
.liste .txt { display: block; }
.dr { width: 26px; height: 18px; object-fit: cover; border: 1.5px solid var(--black); border-radius: 3px; vertical-align: -3px; margin-right: 8px; }
@media (max-width: 600px) { .couv { margin: -16px -16px 16px; } .couv figcaption { padding: 0 16px; } .vig { width: 88px; height: 72px; } }
.vig--laura { object-fit: contain; background: var(--pink-200); padding: 4px; }

/* 09/11 : mise en page large (accueil du blog en grille, articles avec colonne collante) */
.page { max-width: 1240px; }
.page > h1, .page > .chapo, .page > .fil { max-width: 820px; }
.cartes { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.carte { display: flex; flex-direction: column; height: 100%; background: #fff; color: var(--ink); text-decoration: none; border: var(--bw) solid var(--black);
  border-radius: 16px; box-shadow: var(--sh-card); overflow: hidden; transition: transform .15s; }
.carte:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--black); }
.carte__img { display: block; width: 100%; height: 180px; object-fit: cover; border-bottom: var(--bw) solid var(--black); }
.carte__img--laura { object-fit: contain; background: var(--pink-200); padding: 10px; }
.carte__txt { display: block; padding: 14px 16px 16px; }
.carte__txt strong { display: block; font-size: 18px; line-height: 1.3; margin-bottom: 6px; }
.carte__txt span { font-size: 14.5px; color: var(--ink-2); }
.grille { display: block; }
.cote { display: none; }
@media (min-width: 1100px) {
  .grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
  .cote { display: block; position: sticky; top: 16px; }
  .cote__in { display: grid; gap: 14px; max-height: calc(100vh - 32px); overflow-y: auto; padding-bottom: 8px; }
}
.cote__b { background: var(--cream); border: var(--bw) solid var(--black); border-radius: var(--r-card); padding: 12px 14px; box-shadow: var(--sh-tile); }
.cote__t { margin: 0 0 6px; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cote ol { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.cote ol a { color: var(--ink); font-weight: 700; text-decoration: none; }
.cote ol a:hover { color: var(--pink-600); text-decoration: underline; }
.cote__quiz { text-align: center; background: var(--pink-200); }
.cote__quiz img { width: 90px; height: auto; }
.cote__quiz p { margin: 4px 0 10px; font-size: 14px; }
.cote__guide { text-align: center; }
.cote__guide p { margin: 0 0 10px; font-size: 14px; }
.cote__guide .bouton--blanc { background: #fff; color: var(--ink); border: 2px solid var(--black); }
.cote__guide .cote__deja { margin: 8px 0 0; font-size: 13.5px; }
.cote__guide .cote__deja a, .cta__guide a { color: var(--pink-700); }
.cta__guide { font-size: 14.5px; }
.cote__pays { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; font-size: 13.5px; }
.cote__pays a { color: var(--ink); text-decoration: none; font-weight: 700; display: flex; align-items: center; }
.cote__pays a[aria-current] { color: var(--pink-600); }
.cote__pays .dr { width: 20px; height: 14px; margin-right: 6px; flex: none; }
h2[id] { scroll-margin-top: 16px; }

/* 09/11 : TikTok (en-tête, accueil, colonne) */
.haut__d { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tt { width: 18px; height: 18px; flex: none; }
.tiktok { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 800; text-decoration: none; padding: 8px 12px;
  border: 2px solid var(--black); border-radius: 12px; background: #fff; }
.tiktok:hover { background: var(--cream); }
.tiktok--plein { background: var(--black); color: #fff; box-shadow: 3px 3px 0 var(--pink); }
.tiktok--plein:hover { background: #2a2a31; }
.qui { display: flex; gap: 18px; align-items: center; background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-card); box-shadow: var(--sh-card);
  padding: 16px 20px; margin: 14px 0 18px; max-width: 820px; }
.qui img { width: 110px; height: auto; flex: none; }
.qui h2 { margin: 0 0 4px; font-size: 20px; }
.qui p { margin: 0 0 8px; font-size: 15.5px; }
.qui__b { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px !important; }
.qui__b .lien { font-size: 14px; }
.cote__tt { text-align: center; }
.cote__tt p { margin: 0 0 10px; font-size: 14px; }
@media (max-width: 600px) {
  .qui { flex-direction: column; text-align: center; }
  .qui__b { justify-content: center; }
  .haut .tiktok span { display: none; }
}
.couv--laura { background: var(--pink-200); border-bottom: var(--bw) solid var(--black); border-radius: 15px 15px 0 0; text-align: center; padding: 10px 0; }
.couv--laura img { display: inline-block; width: auto; height: 220px; max-height: none; border: 0; border-radius: 0; object-fit: contain; }

/* 09/11 : accueil du blog : les 15 pays d'abord, en petites cartes ; les sujets ensuite */
.sec { font-size: 24px; margin: 26px 0 12px; }
.cartes { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; }
.carte__img { height: 130px; }
.carte__img--laura { padding: 6px; }
.carte__txt { padding: 10px 12px 12px; }
.carte__txt strong { font-size: 16px; }
.carte__txt span { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cartes--pays { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; }
.cartes--pays .carte__img { height: 105px; }
.cartes--pays .carte__txt strong { font-size: 17px; margin-bottom: 2px; }
.cartes--pays .carte__txt span { font-size: 13px; -webkit-line-clamp: 2; }
.villes-l { line-height: 2; font-size: 15px; max-width: 1100px; }

/* 10/11 (testeurs) : sur téléphone, les grands tableaux disent qu'ils défilent */
@media (max-width: 700px) {
  .tab-wrap { position: relative; }
  .tab-wrap::before { content: "Fais glisser le tableau →"; display: block; font-size: 12.5px; font-weight: 800; color: var(--pink-600); margin: 0 0 4px; }
}

/* 10/11 (audit) : liens roses plus foncés là où le fond est kraft ou rose pâle (contraste 4,5:1) */
:root { --pink-700: #A81F55; }
.fil a, .bas a, .villes-l a, .cta a:not(.bouton), .autres a, .note a, .page > p a:not(.bouton) { color: var(--pink-700); }
@media print { .haut, .cote, .bas { display: none !important; } html, body { background: #fff !important; } }
@media (max-width: 700px) { .tab-wrap::before { color: var(--pink-700); } }
/* 14/11 : tuiles « L'essentiel » (comme dans le guide) */
.ess { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 18px; }
@media (min-width: 700px) { .ess { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ess__t { display: flex; flex-direction: column; gap: 3px; padding: 12px; background: #fff; border: var(--bw) solid var(--black); border-radius: var(--r-card); box-shadow: var(--sh-tile); min-width: 0; }
.ess__ic { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border: 2px solid var(--black); border-radius: 50%; }
.ess__ic svg { width: 18px; height: 18px; fill: none; stroke: var(--black); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ess__k { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ess__v { font-size: 20px; font-weight: 900; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; }
.ess__n { font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.ess__t .off { align-self: flex-start; margin-top: auto; }
.ess__t > .ess__n, .ess__t > .ess__v { margin-bottom: 6px; }   /* 14/11 : le badge « Officiel » ne touche plus le texte */
/* 14/11 relecture visuelle : la colonne de droite n'est plus collée (plus haute que l'écran, l'encadré du guide était coupé et défilait à part) */
@media (min-width: 1100px) { .cote { position: static; } .cote__in { max-height: none; overflow: visible; } }
/* 14/11 : une rangée de tuiles incomplète se termine par une tuile élargie */
@media (max-width: 699px) { .ess > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 700px) { .ess > :last-child:nth-child(4n+3) { grid-column: span 2; } .ess > :last-child:nth-child(4n+2) { grid-column: span 3; } .ess > :last-child:nth-child(4n+1) { grid-column: 1 / -1; } }