/* ══════════════════════════════════════════════════════════════════════════
   Le cadre des pages du Blog : la bannière de tête, le fil d'Ariane, les
   puces de rubrique, la grille des cartes, les guides, « à lire ensuite »,
   la bande de la lettre.

   RECOPIÉ DES PAGES ÉCRITES À LA MAIN. La première moitié sort du <style> de
   `blog.html`, la seconde de celui des douze `article-*.html` : mêmes
   sélecteurs, mêmes valeurs, au pixel. Une page fabriquée par une fonction
   doit être indiscernable d'une page écrite à la main — c'est la consigne, et
   c'est aussi la seule façon de basculer sans que rien ne bouge à l'écran.

   UN SEUL ARBITRAGE. Les deux pages définissent `.tete`, et pas pareil : la
   liste tient sur 1080 px et respire moins, l'article tient sur 800 px et
   porte une photo derrière le titre. Elles ne pouvaient pas cohabiter dans une
   feuille commune. La liste garde les valeurs nues ; l'article les reprend
   sous `.blog-article`, la classe que `gabarit.mjs` pose sur <body>. Rien
   n'est inventé : les deux jeux de valeurs sont ceux d'origine.

   Le corps d'article, lui, est dans `css/article.css` — cette feuille-ci ne
   s'occupe que de ce qui entoure le texte. Les deux dépendent des variables de
   `css/commun.css` et se chargent APRÈS lui.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── recopié de blog.html : la bannière de tête d'une page secondaire ── */
.tete { position: relative; padding: 148px 0 62px; background: linear-gradient(170deg, #071431 0%, var(--espace) 45%, #13306c 100%); overflow: hidden; }
.tete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(224,163,60,.55) 22%, rgba(224,163,60,.55) 78%, transparent);
}
.tete__inner { max-width: min(1280px, 92vw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
.tete h1 { font-family: var(--titre); font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.12; margin: 0 0 14px; color: #fff; }
.tete p { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.86); text-wrap: pretty; margin: 0; }
.fil { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--gris); margin: 0 0 18px; flex-wrap: wrap; }
.fil a { color: var(--gris); }
.fil a:hover { color: var(--accent); }
@media (max-width: 767px) { .tete { padding: 116px 0 48px; } .tete p { font-size: 15.5px; } }

/* ── recopié de blog.html : le filtre par rubrique ──
   Les quatre rubriques sont des boutons, mais aussi de vraies adresses
   (`/articles/categorie/route`) : un lien depuis l'accueil ou depuis un moteur
   tombe directement sur la bonne sélection, et la page marche sans script. */
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; padding: 0; list-style: none; }
.filtres a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--gris-fonce);
  border: 1px solid rgba(16,39,90,.14); background: #fff;
  border-radius: 999px; padding: 9px 16px 9px 12px;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.filtres a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cat, #7286ad); flex: none; }
.filtres a:hover { transform: translateY(-2px); border-color: var(--cat, #2a6ae4); color: var(--cat, #2a6ae4); }
.filtres a[aria-current="true"], .filtres a[aria-current="page"] { background: var(--cat-clair, #e9edf7); border-color: var(--cat, #10275a); color: var(--cat, #10275a); }

/* ── recopié de blog.html : la grille du journal ──
   `margin: 0; padding: 0` : une liste garde sinon le retrait de quarante
   pixels que le navigateur pose à gauche de toute puce — invisible sur trois
   colonnes, mais sur téléphone il n'y en a qu'une.
   `grid-auto-rows: 1fr` égalise les rangées : sans lui, une rangée dont les
   titres tiennent sur une ligne est plus courte que la suivante. */
.journal { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 22px; margin: 0; padding: 0; }
.journal > li { display: flex; }
.journal > li[hidden] { display: none; }
@media (max-width: 980px) { .journal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .journal { grid-template-columns: 1fr; } }
.journal .carte-art { display: flex; flex-direction: column; width: 100%; }
.journal .carte-art .corps { display: flex; flex-direction: column; flex: 1; }
.journal .carte-art .meta { margin-top: auto; }
.journal li { list-style: none; }
.journal .carte-art[hidden] { display: none; }
.vide { color: var(--gris-fonce); font-size: 15px; margin: 0; }

/* ── recopié de blog.html : les cinq guides ── */
.guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 820px) { .guides { grid-template-columns: 1fr; } }
.guides li:first-child { grid-column: 1 / -1; }
.guides a {
  display: grid; grid-template-columns: 46px 1fr; gap: 4px 16px; align-items: start;
  background: rgba(255,255,255,.07); border: 1px solid rgba(224,163,60,.28);
  border-radius: 16px; padding: 20px 22px; height: 100%;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.guides a:hover { background: rgba(255,255,255,.12); border-color: rgba(224,163,60,.6); transform: translateY(-2px); }
.guides__num { grid-row: 1 / 3; font-family: var(--titre); font-weight: 700; font-size: 22px; color: var(--accent); line-height: 1; padding-top: 2px; }
.guides b { font-family: var(--titre); font-size: 17px; color: #fff; line-height: 1.35; }
.guides span:not(.guides__num) { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.82); }

/* ── recopié de blog.html : la lettre, en fin de page ── */
.lettre__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .lettre__grid { grid-template-columns: 1fr; gap: 26px; } }
.news__form { display: flex; gap: 10px; flex-wrap: wrap; }
.news__form input { flex: 1; min-width: 220px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--bordure); background: rgba(255,255,255,.1); color: #fff; font-family: var(--texte); font-size: 15px; }
.news__form input::placeholder { color: rgba(255,255,255,.55); }
.news__form .btn { border: none; cursor: pointer; font-family: var(--texte); }
.news__note { font-size: 12.5px; color: var(--gris); margin: 10px 0 0; }

/* ══ recopié des douze article-*.html : la tête d'article ══
   La photo en grand, le titre par-dessus. Même famille que les pages de
   destination et de voyage, en plus sobre : un article se lit, il ne se vend
   pas. Sous `.blog-article` pour ne pas écraser la tête de la liste. */
.blog-article .tete { padding: 150px 0 58px; background: linear-gradient(170deg, #071431 0%, var(--espace) 48%, #13306c 100%); }
.tete__photo { position: absolute; inset: 0; z-index: 0; }
.tete__photo img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .38; }
.tete__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,20,49,.6) 0%, rgba(10,26,63,.84) 60%, rgba(16,39,90,.96) 100%); }
.blog-article .tete__inner { max-width: min(1280px, 92vw); }
.blog-article .tete h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.14; margin: 0 0 16px; }
.tete .chapeau { font-size: 17.5px; line-height: 1.7; color: rgba(255,255,255,.9); margin: 0; max-width: none; }
/* l'étiquette de rubrique reprend la couleur de la rubrique, comme les cartes.
   Pastille claire, texte de la couleur : les quatre --cat sont des couleurs
   foncées, un texte sombre par-dessus ne se lisait pas, et un aplat foncé se
   serait fondu dans le bandeau bleu nuit.

   LE SÉLECTEUR PASSE PAR `.tete`, ET CE N'EST PAS DU ZÈLE. L'étiquette est un
   `<p>` ; `.tete p` (0,1,1) l'emportait sur `.etiquette` (0,1,0) et repeignait
   le texte en blanc à 86 %. Résultat : du blanc sur du crème, illisible — ce
   que Thomas a signalé le 1er septembre 2026. Elle prend maintenant l'habit
   exact de la puce active de `/articles/categorie/…` : fond clair, texte ET
   contour de la rubrique. Et de l'air des deux côtés : elle touchait le fil
   d'Ariane au-dessus et le titre en dessous. */
.tete .etiquette {
  display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 20px;
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  color: var(--cat, #10275a); background: var(--cat-clair, #e9edf7);
  border: 1px solid var(--cat, #10275a); border-radius: 999px; padding: 7px 15px;
}
.signes { margin: 20px 0 0; font-size: 13px; color: var(--gris); }
@media (max-width: 767px) { .blog-article .tete { padding: 116px 0 44px; } .tete .chapeau { font-size: 16px; } }

/* ── recopié des douze article-*.html : à lire ensuite ── */
.suite { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .suite { grid-template-columns: 1fr; } }

/* ── la pagination : elle n'existait pas ──
   Douze articles tenaient sur une page. Le Blog est fait pour en porter des
   centaines : au-delà de douze, une deuxième page, et de vraies adresses
   (`?page=2`) que Google suit et qu'on peut mettre en favori. */
.pages { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 34px 0 0; padding: 0; list-style: none; }
.pages a, .pages span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--gris-fonce);
  border: 1px solid rgba(16,39,90,.14); background: #fff;
}
.pages a:hover { border-color: #2a6ae4; color: #2a6ae4; }
.pages [aria-current="page"] { background: var(--espace); border-color: var(--espace); color: #fff; }
.pages .ellipse { border: none; background: none; min-width: 0; padding: 0 2px; color: var(--gris); }

/* ── la page « retiré » ──
   Un article retiré répond 410, mais il répond quand même quelque chose de
   lisible : une page blanche à ce moment-là ressemble à une panne. */
.retire { max-width: 640px; margin: 0 auto; text-align: center; }
.retire p { font-size: 16.5px; line-height: 1.72; color: var(--gris-fonce); margin: 0 0 22px; }

/* ── la recherche ──
   Elle n'existait pas non plus : douze articles se parcourent des yeux. Un
   vrai <form method="get"> — la page de résultats a une adresse, elle marche
   sans script, et le serveur fait la recherche en plein texte français. */
.recherche { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 28px; }
.recherche input {
  flex: 1; min-width: 220px; padding: 12px 16px; border-radius: 10px;
  border: 1px solid rgba(16,39,90,.16); background: #fff;
  font-family: var(--texte); font-size: 15px; color: var(--encre);
}
.recherche input::placeholder { color: var(--gris); }
.recherche .btn { border: none; cursor: pointer; font-family: var(--texte); }

/* LE TÉLÉPHONE, ET UN LECTEUR QUI N'A PLUS VINGT ANS — même bloc que
   css/commun.css, où il est expliqué en entier. Les articles se lisent au
   téléphone plus qu'ailleurs, et le public de l'agence est plutôt âgé. */
@media (max-width: 767px) {
  .article__corps p, .article__corps li, .encadre-art p,
  .carte-art .corps p, .carte-art p { font-size: 16px; line-height: 1.68; }
  .signes, .credit-photo, .news__note, .fil { font-size: 14px; }
  .filtres a, .rubriques a { min-height: 44px; align-items: center; }
  .missions p, .manque p, .etapes p, .lectures p, .porte-cli__boite > p,
  .porte-cli__essai, .porte-cli__retour, .voisines a p,
  .grille-liens a p { font-size: 16px; line-height: 1.62; }
  .porte-cli__intro, .aide-porte, .avis-maquette { font-size: 14px; }
  .fil a { padding: 9px 0; margin: -9px 0; }
}

/* ─── les trois dossiers de fond ───
   Copie exacte des regles de `accueil.html` : le bloc doit se presenter au
   lecteur de la meme facon des deux cotes. Si l'un des deux change un jour,
   l'autre change avec lui. */
.guides-accueil { list-style: none; margin: 0 0 44px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .guides-accueil { grid-template-columns: 1fr; margin-bottom: 36px; } }
.guides-accueil a {
  display: block; height: 100%; background: rgba(16,39,90,.04);
  border: 1px solid rgba(16,39,90,.12); border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0; padding: 18px 20px;
  text-decoration: none; transition: background .18s ease, transform .18s ease;
}
.guides-accueil a:hover { background: rgba(16,39,90,.07); transform: translateY(-2px); }
.guides-accueil b { display: block; font-family: var(--titre); font-size: 16px; color: var(--encre); margin-bottom: 6px; line-height: 1.35; }
.guides-accueil span { font-size: 14px; line-height: 1.6; color: var(--gris-fonce); }
@media (max-width: 767px) { .guides-accueil span { font-size: 15.5px; } }

/* ─── LES TROIS FAÇONS DE NOUS JOINDRE ───
   Reprises du site actuel aventurusse.com, avec ses adresses et ses mots.
   Chacune porte la couleur de son service : c'est ce qui les rend
   reconnaissables d'un coup d'œil, avant meme d'etre lues. Elles sont dans le
   pied de page de TOUTES les pages, y compris celles du blog — Thomas, le
   31 aout 2026 : « c'est plus important que le reste ». */
.joindre { list-style: none; margin: 16px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
/* Trois pastilles rondes de 44 px, le logo blanc dessus, le fond teinté de
   la couleur du service — les mesures et les couleurs sont celles de
   `footer.php` sur aventurusse.com, au centième près. Le libellé n'est plus
   visible : il vit dans `title` et `aria-label`. */
.joindre a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  text-decoration: none; border: 1px solid transparent; color: #fff;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.joindre__ico { width: 22px; height: 22px; flex: none; display: block; }
.joindre__ml .joindre__ico { width: 20px; height: 20px; }
.joindre a:hover { transform: translateY(-2px); color: #fff; }
.joindre__wa { background: rgba(37,211,102,.18); border-color: rgba(37,211,102,.45); }
.joindre__wa:hover { background: rgba(37,211,102,.32); }
.joindre__tg { background: rgba(42,171,238,.18); border-color: rgba(42,171,238,.45); }
.joindre__tg:hover { background: rgba(42,171,238,.32); }
.joindre__ml { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); }
.joindre__ml:hover { background: rgba(255,255,255,.22); }
/* Sur la bande rouge, les trois teintes tournent au brun : un vert à dix-huit
   pour cent posé sur du grenat ne fait plus du vert. Les pastilles y prennent
   toutes le blanc translucide — celui du bouton courriel — et le logo, lui,
   reste blanc et reconnaissable. */
.band--rouge .joindre a { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); }
.band--rouge .joindre a:hover { background: rgba(255,255,255,.24); }

/* Les boutons dans une section de page (et non dans le pied) : un peu d'air
   au-dessus, et la liste qui suit se distingue d'eux. */
.joindre--section { margin: 26px 0 6px; }
.joindre--section + .contact__infos { margin-top: 10px; }

/* ── L'ENCADRÉ DE LA LETTRE, entre la recherche et les cartes ──
   Thomas, 2 septembre 2026 : « dans la partie blog, mets le gros encadré ».
   Bleu nuit sur la bande blanche, liseré d'or : il se voit sans crier. */
.lettre-encadre {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center;
  margin: 0 0 34px; padding: 30px 34px;
  background: linear-gradient(135deg, #0c1f49 0%, #16336f 100%); color: #fff;
  border: 1px solid rgba(224,163,60,.5); border-radius: 22px;
  box-shadow: 0 18px 44px rgba(16,39,90,.18);
}
.lettre-encadre h2 { font-family: var(--titre); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.2; margin: 0 0 10px; color: #fff; }
.lettre-encadre p { margin: 0; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.86); }
.lettre-encadre .band__eyebrow { margin-bottom: 10px; color: var(--accent); }   /* la bande blanche le peint en bleu : ici, or sur nuit */
.lettre-encadre .news__note { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.7); }
.news__note--ok { color: #ffd98a !important; }
.news__note--ko { color: #ffb4a8 !important; }
@media (max-width: 900px) { .lettre-encadre { grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; border-radius: 18px; } }
