/* Feuille de style unique des quatre sites.
   Les valeurs ci-dessous ne sont pas inventées : elles sont relevées au pixel
   sur le site WordPress d'origine (viewport 1280) pour en reprendre exactement
   l'ergonomie. Les variables de couleur et de police sont injectées par site
   dans le <head>, ce qui permet quatre identités avec une seule feuille. */

:root {
  --fond: #dcf0ff;
  --encre: #1e3340;
  --titre: #15324a;
  --creme: #fff7ec;
  --tangerine: #ff7a45;
  --peche: #ffd9c4;
  --herbe: #3e9c84;
  --herbe-clair: #d8eee6;
  --soleil: #ffc247;
  --rose: #ff7aa2;
  --bleu: #4a90d9;
  --menthe: #b6f2c8;
  --menthe-encre: #14572e;
  --lien: #3b29ff;
  --gris: #3e5468;
  --texte-corps: #2d2d2d;
  --jaune-mark: #ffe94a;

  /* Ombres relevées sur l'original : douces sur les surfaces, dure uniquement
     sur le bloc article. */
  --ombre-carte: 0 14px 32px rgba(26, 94, 138, 0.14);
  --ombre-heros: 0 18px 44px rgba(26, 94, 138, 0.2);
  --ombre-bulle: 0 10px 26px rgba(0, 0, 0, 0.12);
  --ombre-entete: 0 4px 18px rgba(26, 94, 138, 0.12);
  --ombre-dure: 5px 5px 0 rgba(30, 51, 64, 0.18);

  /* 1232 = 2 de bordure + 40 de rembourrage + 180 de sommaire + 32 d'ecart
     + 936 de colonne de texte + 40 + 2. Les largeurs internes sont celles
     relevees au navigateur sur le site d'origine ; la bordure entre dans le
     calcul puisque le bloc est en box-sizing: border-box. */
  --large: 1232px;
  /* 22 px de marge laterale : a 1280 px de fenetre, barre de defilement
     comprise, c'est ce qu'il faut pour que le conteneur atteigne ses 1228 px
     et la colonne de texte ses 936 px mesures sur le site d'origine. */
  --marge: 22px;
  --titre-police: "Space Grotesk", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --corps: "Outfit", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 124px; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.65;
}

/* Motif de fond : la règle complète est écrite par site dans le <head>, un
   data-URI ne sachant pas lire une variable CSS. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--lien); }

.conteneur { width: min(100% - (var(--marge) * 2), var(--large)); margin-inline: auto; }
.saut-contenu { position: absolute; left: -9999px; top: 0; background: var(--titre); color: #fff; padding: 12px 20px; border-radius: 0 0 12px 0; z-index: 100; }
.saut-contenu:focus { left: 0; }

/* ── En-tête (108 px sur l'original) ─────────────────────────────────── */
.entete { background: #fff; box-shadow: var(--ombre-entete); position: sticky; top: 0; z-index: 50; }
/* La barre d'en-tete est 16 px plus etroite que le contenu sur l'original :
   1216 px centres contre 1232 pour les articles. Releve au navigateur. */
.entete-inner { display: flex; align-items: center; gap: 20px; min-height: 108px; width: min(100% - 64px, 1216px); }
/* Marque : valeurs relevees au navigateur sur les sites d'origine. Leur
   mascotte y est un ::before de 48 x 42 (largeur imposee par flex-basis,
   hauteur par la regle du mu-plugin) suivi du nom a 20,8 px en Fraunces 900.
   Le clone garde un vrai SVG, qui se met a l'echelle dans la meme boite. */
.marque { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--titre); flex: 0 0 auto; }
.marque svg { width: 48px; height: 42px; flex: 0 0 48px; }
.marque span { font-family: var(--serif); font-weight: 900; font-size: 20.8px; letter-spacing: -0.4px; line-height: 1.12; color: #1E3340; }

/* Menu : les liens font 80 px de haut sur l'original, sans pastille, et la
   liste ne passe JAMAIS a la ligne. Sans « nowrap », les libelles allemands,
   plus longs, renvoyaient la barre de recherche sous le logo. */
.entete .nav { margin-left: auto; }
.entete .nav ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; align-items: center; }
.entete .nav a { display: block; padding: 0 17px; text-decoration: none; color: #3E5468; font-weight: 600; font-size: 16.5px; line-height: 80px; white-space: nowrap; }
.entete .nav a:hover { color: var(--rose); }

/* Barre de recherche : la hauteur de 40 px du champ vient du theme Astra, que
   l'on ne porte pas ; sans elle le bloc tombe a 38 px au lieu de 48. */
.sachat-search input[type="search"] { height: 40px; }
.bouton-menu { display: none; }

/* ── Héros ───────────────────────────────────────────────────────────── */

.cta { display: inline-block; padding: 14px 28px; border-radius: 16px; text-decoration: none; font-weight: 700; font-size: 14px; }
.cta-primaire { background: var(--rose); color: #fff; box-shadow: 0 12px 26px rgba(255, 122, 162, 0.4); }
.cta-secondaire { background: #fff; color: var(--titre); box-shadow: 0 10px 24px rgba(26, 94, 138, 0.15); }
.cta:hover { transform: translateY(-2px); }

/* ── Cartes d'article ────────────────────────────────────────────────── */
.section-titre { font-family: var(--titre-police); font-size: 28px; color: var(--titre); margin: 34px 0 22px; letter-spacing: -0.5px; }
.grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
/* Toute regle display explicite ecrase le [hidden] de la feuille navigateur :
   sans ceci, la recherche posait bien l'attribut mais les cartes restaient
   affichees, et le compteur annoncait un resultat pour soixante-et-une cartes. */
[hidden] { display: none !important; }

/* ── Menu du Réflexe Vert : jamais de libellé coupé en deux ──────────────
   Son thème laisse les liens se comprimer sous leur largeur de contenu, si
   bien que « Anti-nuisibles » et « Confort thermique » passent sur deux
   lignes dès 1280 px. Demande d'Audren : que ça reste sur une ligne.

   Il manquait 38 px à 1280 : l'écart entre liens passe de 22 à 14 px, ce qui
   en libère 48. En dessous de 1140 px, sept libellés ne tiennent de toute
   façon pas ; le menu déroulant prend le relais, au lieu d'un menu tassé. */
/* « flex: 0 0 auto » en plus du nowrap : la reinitialisation du theme pose
   « min-width: 0 », qui autorise un element flex a passer SOUS sa largeur de
   contenu. Sans cela les libelles restaient rognes de deux ou trois pixels. */
.theme-vert .nav a { white-space: nowrap; flex: 0 0 auto; }

/* L'ecart entre rubriques doit rester nettement plus grand que l'espace qui
   separe deux mots d'un meme libelle (3,96 px ici) : a 14 px le rapport
   tombait a 3,5 et « Recettes maison » semblait coller a ses voisins. On rend
   les 22 px d'origine, soit 5,6 fois l'espace entre mots, en resserrant la
   barre de recherche qui etait la seule reserve de place disponible. */
.theme-vert .nav { gap: 22px; }
.theme-vert .lrv-search { max-width: 140px; }
/* Le nom du site se coupait lui aussi en deux, pour la meme raison. */
.theme-vert .site-header .brand { white-space: nowrap; flex: 0 0 auto; }

/* Sur un tres petit ecran, une marque qui refuse de retrecir ecrase le bouton
   de menu : a 320 px il tombait a 14 px de large. On lui rend sa souplesse et
   on reserve leur place au bouton et a la recherche. */
@media (max-width: 420px) {
  .theme-vert .site-header .brand {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  .theme-vert .menu-toggle { flex: 0 0 42px; }
  .theme-vert .lrv-search { flex: 0 0 44px; min-width: 44px; }
}

@media (max-width: 1139px) {
  .theme-vert .nav {
    display: none; position: absolute; top: 70px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface, #fff); border-bottom: 1px solid var(--line, #e6e9e4);
    padding: 8px 0;
  }
  .theme-vert .nav.open { display: flex; }
  .theme-vert .nav a { padding: 12px 24px; }
  .theme-vert .menu-toggle { display: flex; }
  .theme-vert .site-header .container { position: relative; }
}

/* Adresse de contact, la ou le site d'origine sert un formulaire WordPress. */
.lrv-contact-direct { margin: 26px 0 0; }
.lrv-contact-direct .btn { display: inline-block; }

/* Titre reserve aux lecteurs d'ecran, pose par WordPress sur la pagination.
   Valeurs relevees au navigateur sur le site d'origine. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

.carte { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--ombre-carte); display: flex; flex-direction: column; }
.carte:hover { transform: translateY(-3px); }
.carte-image { aspect-ratio: 3 / 2; overflow: hidden; background: var(--peche); }
.carte-image img { width: 100%; height: 100%; object-fit: cover; }
.carte-corps { padding: 24px; display: flex; flex-direction: column; flex: 1; }
/* Titres de carte : Fraunces 900, taille fluide clamp(16px, 1.4vw, 21px) sur
   l'original, soit 17,92 px en 1280. Releve au navigateur. */
.carte h3 { font-family: var(--serif) !important; font-weight: 900; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.3; letter-spacing: -0.4px; margin: 0 0 10px; }
.carte h3 a { color: var(--encre); text-decoration: none; }
.carte h3 a:hover { text-decoration: underline; }
.carte p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--encre); }
.carte p.carte-meta { margin-top: 12px; font-size: 13px; }

.pastille {
  display: inline-block; font-size: 10.4px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; padding: 5px 13px; border-radius: 999px; margin-bottom: 10px;
  background: var(--menthe); color: var(--menthe-encre); text-decoration: none;
  align-self: flex-start; box-shadow: 0 6px 14px rgba(20, 87, 46, 0.22);
}

/* Carte pleine largeur du dernier article. */
.carte-une { display: grid; grid-template-columns: 471px minmax(0, 1fr); align-items: stretch; margin-bottom: 28px; }
.carte-une .une-image { overflow: hidden; background: var(--peche); }
.carte-une .une-image img { width: 100%; height: 100%; object-fit: cover; }
.carte-une .carte-corps { justify-content: center; padding: 32px; }
.carte-une h3 { font-size: 28px; line-height: 1.3; }
.carte-une p { font-size: 14px; }


/* ── Article ─────────────────────────────────────────────────────────── */
.article-entete { padding: 34px 0 20px; }
.ariane { font-size: 13.5px; color: var(--gris); margin-bottom: 12px; }
.ariane a { color: var(--gris); }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.ariane li + li::before { content: "›"; margin-right: 8px; opacity: 0.6; }
.article-entete h1 { font-family: var(--titre-police); font-weight: 900; font-size: 35.2px; line-height: 1.15; letter-spacing: -0.7px; color: var(--titre); margin: 0 0 12px; }
.article-meta { font-size: 14px; color: var(--gris); display: flex; gap: 14px; flex-wrap: wrap; }
.article-image { border-radius: 24px; overflow: hidden; box-shadow: var(--ombre-carte); margin-bottom: 28px; }

/* Le bloc article reprend le seul endroit où l'original utilise une bordure
   franche et l'ombre dure. */
.article-corps {
  background: #fff; border: 2px solid var(--encre); border-radius: 24px;
  box-shadow: var(--ombre-dure); padding: 40px;
  /* Largeurs relevees au navigateur sur le site d'origine : sommaire 180 px,
     ecart 32 px, colonne de texte 936 px. Mesurees, pas deduites. */
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px;
  align-items: start; margin-bottom: 60px;
}

/* Page fixe : même bloc que l'article, mais sans colonne de sommaire.
   Déclarée après .article-corps : à spécificité égale, l'ordre source tranche. */
.article-corps--simple { grid-template-columns: minmax(0, 1fr); }


.contenu { font-size: 16px; line-height: 1.75; }
.contenu p, .contenu li { font-size: 15.5px; }
/* Interligne des sous-titres releve a 1.3 sur l'origine. */
.contenu h3 { line-height: 1.3; }
/* Justification demandée par Audren. La césure automatique est indispensable :
   sans elle, le français justifié creuse de grands blancs entre les mots. */
.contenu h2 {
  font-family: var(--titre-police); font-weight: 900; font-size: 20px; line-height: 1.2;
  color: var(--titre); margin: 34px 0 12px; padding-top: 16px;
  border-top: 2px dashed rgba(30, 51, 64, 0.18); scroll-margin-top: 128px; text-align: left;
}
.contenu h2:first-of-type { border-top: none; padding-top: 0; margin-top: 8px; }
.contenu h3 { font-family: var(--titre-police); font-weight: 700; color: var(--titre); margin: 24px 0 8px; text-align: left; }
.contenu p { margin: 0 0 1.6em; }
.contenu ul, .contenu ol { margin: 0 0 20px; padding-left: 22px; }
.contenu li { margin-bottom: 8px; }
.contenu a { color: var(--lien); }
.contenu table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 14.5px; }
.contenu thead th { background: var(--titre); color: #fff; text-align: left; padding: 12px 14px; }
.contenu tbody td { padding: 11px 14px; border-bottom: 1px solid #e2ecf5; text-align: left; }
.contenu tbody tr:nth-child(even) { background: #f6fbff; }
.contenu .lien-affilie { color: var(--herbe); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Les encarts Sachat sont entierement decrits par la feuille portee depuis le
   site d'origine : couleurs, libelles traduits, mascottes, ombres. Les regles
   ecrites ici a la main faisaient double emploi et debordaient sur la note en
   marge, dont elles rendaient la mascotte absolue, donc cachee derriere la
   bulle. */

/* ── Encart produits ─────────────────────────────────────────────────── */
.produits { background: var(--fond); border-radius: 20px; padding: 22px; margin: 0 0 30px; box-shadow: var(--ombre-carte); }
.produits h2 { font-family: var(--titre-police); font-size: 17px; margin: 0 0 4px; color: var(--titre); border: none; padding: 0; }
.produits .sous-titre { font-size: 13px; color: var(--gris); margin: 0 0 16px; text-align: left; }
.produits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.produits li { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; background: #fff; border-radius: 14px; margin: 0; }
.produits .nom { font-weight: 600; flex: 1; min-width: 180px; font-size: 14.5px; text-align: left; }
.produits .bouton { padding: 8px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 13px; }
.produits .amazon { background: var(--soleil); color: var(--encre); }
.produits .maxizoo { background: var(--bleu); color: #fff; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq { margin: 40px 0 8px; }
.faq-titre { font-family: var(--titre-police) !important; font-size: 24px !important; color: var(--titre); margin-bottom: 16px !important; border: none !important; padding-top: 0 !important; }
.faq-item { background: #fff; border-radius: 16px; margin-bottom: 12px; box-shadow: 0 8px 20px rgba(26, 94, 138, 0.1); overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; padding: 16px 54px 16px 20px; position: relative; font-family: var(--titre-police); font-weight: 700; font-size: 16px; color: var(--titre); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--rose); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 700; transition: transform 0.2s; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-reponse { padding: 0 20px 18px; }
.faq-reponse p { margin: 0; color: var(--gris); line-height: 1.65; }

/* ── Fin d'article ───────────────────────────────────────────────────── */
.connexes { background: var(--fond); border-radius: 20px; padding: 22px; margin: 32px 0 0; }
.connexes h2 { font-family: var(--titre-police); font-size: 17px; margin: 0 0 12px; color: var(--titre); border: none; padding: 0; }
.connexes ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; }
.connexes li { text-align: left; }
.mention-affiliation { font-size: 12.5px; color: var(--gris); background: var(--fond); border-radius: 12px; padding: 10px 14px; margin: 0 0 24px; text-align: left !important; }

/* ── Pied de page ────────────────────────────────────────────────────── */
.pied { background: var(--titre); color: #fff; margin-top: 50px; padding: 44px 0 30px; font-size: 13px; }
.pied a { color: #cfe6fa; }
.pied-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
.pied h2 { font-family: var(--titre-police); font-size: 15px; margin: 0 0 12px; color: #fff; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Selecteur de langue : discret, sous les liens d'information du pied. Ce sont
   de vrais liens, pas des hreflang : c'est par eux que Google passe d'un site
   a l'autre. */
.pied-langues { margin-top: 22px; }
.pied-langues span { display: block; font-size: 12px; color: #9fc2dc; margin-bottom: 8px; }
.pied-langues ul { display: flex; flex-wrap: wrap; gap: 14px; }
.pied-langues a { text-decoration: underline; text-underline-offset: 3px; }

.pied-bas { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.16); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #9fc2dc; }

/* ── Encarts du Réflexe Vert ─────────────────────────────────────────── */

/* ── Adaptations ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-une { grid-template-columns: 40% minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .article-corps { grid-template-columns: 1fr; gap: 22px; padding: 28px; }
}

@media (max-width: 860px) {
  .pied-cols { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --marge: 24px; }  /* marge mobile relevee sur les sites d'origine */
  .bouton-menu { display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--encre); background: #fff; cursor: pointer; }
  .entete .nav { order: 3; width: 100%; margin-left: 0; display: none; padding-bottom: 14px; }
  .entete .nav.ouvert { display: block; }
  .entete .nav ul { flex-direction: column; gap: 2px; }
  .entete-inner { flex-wrap: wrap; min-height: 76px; }
  .marque span { font-size: 18.97px; }  /* taille relevee sur l'original en 375 px */
  .marque svg { width: 34px; height: 40px; flex-basis: 34px; }
  .grille { grid-template-columns: 1fr; }
  .carte-une { grid-template-columns: 1fr; }
  .carte-une .une-image { aspect-ratio: 3 / 2; }
  .carte-une h3 { font-size: 22px; }
  .article-corps { padding: 22px 18px; }
  .contenu { font-size: 16px; }
  /* Sur une colonne étroite, le justifié creuse trop : on revient au fer à gauche. */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carte:hover, .cta:hover { transform: none; }
}

/* ── Variante « vert » : Le Réflexe Vert ─────────────────────────────────
   Le site d'origine n'a rien d'un site chat : fond blanc, en-tête fin sans
   ombre, pied de page blanc, cartes à filet de 1 px sans ombre portée, héros
   à photo. Valeurs relevées sur lereflexevert.com au viewport 1280. */

.theme-vert { --large: 1140px; --marge: 24px; }
.theme-vert body::before, body.theme-vert::before { display: none; }

.theme-vert .heros-photo {
  display: grid; grid-template-columns: 549px minmax(0, 1fr); gap: 46px;
  align-items: center; padding: 54px 0 30px;
}
.theme-vert .surtitre {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  background: var(--creme); color: var(--vert, var(--herbe)); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 700;
}
.theme-vert .heros h1 { font-size: 52px; line-height: 1.05; letter-spacing: -1px; }
.theme-vert .heros h1 mark { background: none; color: var(--herbe); padding: 0; border-radius: 0; box-shadow: none; }
.theme-vert .heros p { font-size: 19px; color: var(--gris); max-width: none; }
.theme-vert .heros-image {
  width: 100%; height: 400px; object-fit: cover; border-radius: 26px;
  box-shadow: 0 24px 60px rgba(22, 163, 74, 0.18);
}
.theme-vert .cta { border-radius: 999px; padding: 13px 22px; font-family: var(--titre-police); font-size: 15px; }
.theme-vert .cta-primaire { background: var(--herbe); color: #fff; box-shadow: none; }
.theme-vert .cta-secondaire { background: #fff; color: var(--titre); border: 1px solid #e6e9e4; box-shadow: none; }

.theme-vert .carte { border: 1px solid #e6e9e4; border-radius: 18px; box-shadow: none; }
.theme-vert .carte-image { background: var(--creme); }
.theme-vert .carte-corps { padding: 16px 18px 20px; gap: 8px; }
.theme-vert .carte h3 { font-size: 20px; font-weight: 600; line-height: 1.22; }
.theme-vert .carte-meta { font-size: 13px; font-weight: 600; color: #8c9789; margin-top: 8px; }
.theme-vert .pastille { background: var(--creme); color: var(--herbe); box-shadow: none; }
.theme-vert .carte-une { border: 1px solid #e6e9e4; }

.theme-vert .article-corps { border: 1px solid #e6e9e4; box-shadow: none; }
.theme-vert .article-entete h1 { font-size: 38px; font-weight: 700; }
.theme-vert .contenu h2 { border-top-color: #e6e9e4; font-weight: 600; font-size: 22px; }
.theme-vert .produits, .theme-vert .connexes, .theme-vert .mention-affiliation { background: #f7faf8; box-shadow: none; }
.theme-vert .faq-item { border: 1px solid #e6e9e4; box-shadow: none; }
.theme-vert .faq-item summary::after { background: var(--herbe); }

@media (max-width: 900px) {
  .theme-vert .heros-photo { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
  .theme-vert .heros h1 { font-size: 34px; }
  .theme-vert .heros-image { height: 260px; }
}

/* ── Recherche ───────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.recherche { margin-bottom: 8px; }
.recherche input {
  width: 100%; font: inherit; font-size: 18px; padding: 15px 20px; border-radius: 999px;
  border: 2px solid var(--encre); background: #fff; color: var(--encre);
}
.recherche input:focus { outline: 3px solid var(--rose); outline-offset: 2px; }
.recherche-compte { font-size: 14px; color: var(--gris); margin: 0 0 22px; min-height: 21px; }
.theme-vert .recherche input { border: 1px solid #e6e9e4; }
.theme-vert .recherche input:focus { outline-color: var(--herbe); }

/* Pagination. Le conteneur et le dimensionnement des pastilles viennent du
   theme Astra, pas du CSS additionnel : sans ces valeurs les pastilles ne sont
   pas rondes mais collees au texte. Relevees au navigateur sur l'original. */
.ast-pagination { text-align: center; padding: 32px 0 0; margin-bottom: 48px; }
.ast-pagination .nav-links { display: inline-block; }
.ast-pagination .page-numbers {
  display: inline-block; width: 2.33333em; height: 2.33333em;
  font-size: 1.06666rem; line-height: calc(2.33333em - 3px);
  text-align: center; margin: 0; text-decoration: none;
}
/* Le bouton suivant/precedent porte du texte : il s'elargit au contenu. */
.ast-pagination .page-numbers.next,
.ast-pagination .page-numbers.prev { width: auto; padding: 0 16px; }

/* ── Page d'article : structure relevee au navigateur sur le site d'origine ──
   Le bloc blanc contient le bandeau de titre, colore par categorie, puis le
   sommaire et la colonne de texte cote a cote. La bordure est presque
   transparente, pas opaque comme je l'avais faite. */
.ast-article-single {
  border: 2px solid rgba(30, 51, 64, 0.1); padding: 40px;
  position: relative; overflow: hidden; margin-bottom: 60px;
}
.ast-article-single .entry-header { padding: 28px 28px 24px; border-radius: 20px; margin: 0 0 32px; }
.ast-article-single .entry-title { font-size: 35.2px; line-height: 1.15; margin: 0 0 10px; color: var(--titre); }
.ast-article-single .entry-meta { font-size: 12px; color: rgba(45, 45, 45, 0.47); }
.entry-meta, .entry-meta * { line-height: 1.45; font-weight: 600; }
h4, .entry-content h4 { line-height: 1.2em; }
/* Ombre douce des images de contenu : posee par le theme Astra, que l'on ne
   porte pas. Valeur relevee au navigateur sur l'image a la une. */
.entry-content img { box-shadow: 0 0 30px rgba(0, 0, 0, 0.15); }
/* Page fixe : meme bloc que l'article, mais sans rembourrage propre, avec un
   bandeau plus plat et un titre plus grand. Releve sur mentions-legales. */
body.page .ast-article-single { padding: 0; margin: 32px 0; }
body.page .ast-article-single .entry-header { padding: 18px 20px 8px; margin: 0 0 24px; }
body.page .ast-article-single .entry-title { font-size: 36px; line-height: 1.15; margin: 0 0 21.6px; }
/* Marge basse des titres et des listes sur une page fixe : elle vient du
   theme Astra, que l'on ne porte pas. Relevee sur mentions-legales et
   politique-confidentialite. */
body.page .entry-content h2 { margin-bottom: 20px; }
body.page .entry-content ul, body.page .entry-content ol { font-size: 16px; margin: 16px 0; padding: 0 0 0 20px; }
body.page .entry-content li { font-size: 16px; margin: 0; }

.ast-article-single .sachat-toc-wrap { display: flex; gap: 32px; align-items: flex-start; }
.ast-article-single .entry-content { flex: 1; min-width: 0; }

/* Sur mobile, le bloc d'article se resserre fortement sur l'original :
   21,888 x 14,592 px au lieu de 40. Garder 40 px volait 39 px de largeur de
   colonne sur un ecran de 375. Valeurs relevees au navigateur. */
@media (max-width: 720px) {
  .ast-article-single { padding: 21.888px 14.592px; }
  body.page .ast-article-single { padding: 0; }
}

/* Le Reflexe Vert arrondit son image d'article a 22 px, releve au navigateur.
   Son original la recadre en bandeau de 340 px : on la montre entiere, comme
   sur les sites chats, pour ne plus couper les photos. */
.theme-vert .article-image img { border-radius: 22px; }

/* L'image d'article du Reflexe Vert : sa feuille d'origine la fige a 340 px de
   haut en fond de div, ce qui la recadre. On la sert en <img> et on lui rend sa
   hauteur, comme sur les sites chats : plus aucune photo coupee. */
img.post-hero { height: auto; width: 100%; object-fit: initial; }