.elementor-703 .elementor-element.elementor-element-674ea05{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS *//* ============================================================
   CoEssence — CSS Page catégorie Blog
   Où coller : Elementor > page Blog > Avancé > CSS personnalisé

   Aucune couleur/police en dur : var(--bg)/var(--text)/var(--h1) viennent
   de ce_couleur_css.php via data-palette ; police/taille des titres et du
   texte viennent de ce_typo_css.php. --accent/--gold2/--green sont des
   constantes de marque fixes (cohérent avec accueil.css et
   ce_categorie_pages.css).

   Le bloc SEO repliable (.ce-cat-seo-*) réutilise EXACTEMENT les mêmes
   classes que ce_categorie_pages.css (Sagesses/Accompagnements) — si les
   deux fichiers sont chargés, pas de conflit, juste de la redondance
   utile en cas de désactivation de l'un des deux snippets.
   ============================================================ */

:root{
  --accent:#b8864e;
  --gold2:#e8c99a;
  --green:#3a6b4a;
}

/* ── HERO ──────────────────────────────────────────────────────── */
.ce-blog-hero{ padding:100px 64px 50px; text-align:center; background:var(--bg); color:var(--text); }
.ce-blog-hero .eyebrow{ justify-content:center; color:var(--accent); }
.ce-blog-hero .eyebrow::before,.ce-blog-hero .eyebrow::after{ background:var(--accent); }
.ce-blog-hero h1{ margin-bottom:20px; } /* taille/police : H1 global */
.ce-blog-hero h1 em{ font-style:italic; color:var(--accent); }
.ce-blog-intro{ max-width:620px; margin:0 auto; opacity:.75; font-size:1.05em; }

/* ── FILTRES ───────────────────────────────────────────────────── */
.ce-blog-filters{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding:0 64px 50px; background:var(--bg); }
.ce-blog-filter{
  font-size:13px; font-weight:600; padding:9px 20px; border-radius:30px;
  border:1px solid color-mix(in srgb, var(--text) 15%, transparent);
  background:var(--bg); color:var(--text); cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.ce-blog-filter[aria-pressed="true"]{ background:var(--h1); color:var(--bg); border-color:var(--h1); }
.ce-blog-filter:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ── GRILLE ────────────────────────────────────────────────────── */
.ce-blog-grid{ padding:0 64px 110px; background:var(--bg); }
.ce-blog-grid-inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }

.ce-blog-card{
  display:flex; flex-direction:column; border-radius:10px; overflow:hidden;
  background:color-mix(in srgb, var(--bg) 96%, var(--text));
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  transition:transform .25s ease, box-shadow .25s ease;
}
.ce-blog-card:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,0,0,.10); }
.ce-blog-card[hidden]{ display:none; }

.ce-blog-card-photo{ aspect-ratio:16/10; overflow:hidden; background:color-mix(in srgb, var(--text) 6%, transparent); position:relative; }
.ce-blog-card-photo img{ width:100%; height:100%; object-fit:cover; }

.ce-blog-badge{ position:absolute; top:14px; left:14px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:5px 12px; border-radius:20px; color:#fff; }
.ce-blog-badge.actu{ background:var(--accent); }
.ce-blog-badge.etude{ background:var(--green); }

.ce-blog-card-body{ padding:22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.ce-blog-card-meta{ font-size:11.5px; opacity:.6; display:flex; gap:8px; align-items:center; }
.ce-blog-card-titre{ font-size:20px; line-height:1.3; }
.ce-blog-card-titre a{ color:var(--h1); text-decoration:none; }
.ce-blog-card-titre a:hover{ color:var(--accent); }
.ce-blog-card-desc{ font-size:.92em; opacity:.75; flex:1; }
.ce-blog-card-more{ margin-top:6px; font-size:.85em; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:6px; }

.ce-blog-empty{ grid-column:1/-1; text-align:center; padding:60px 20px; opacity:.6; font-style:italic; }

/* ── BLOC SEO REPLIABLE (partagé avec ce_categorie_pages.css) ────── */
.ce-cat-seo{ padding:70px 64px 110px; background:var(--bg); color:var(--text); border-top:1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.ce-cat-seo-inner{ max-width:760px; margin:0 auto; }
.ce-cat-seo h2{ margin-bottom:22px; }
.ce-cat-seo-content p{ margin-bottom:16px; opacity:.85; }
.ce-cat-seo-content p:last-child{ margin-bottom:0; }
.ce-cat-seo-content h3{ margin:26px 0 10px; }
.ce-cat-seo-collapsible{ position:relative; }
.ce-cat-seo-content[data-collapsed="true"]{ max-height:280px; overflow:hidden; transition:max-height .35s ease; }
.ce-cat-seo-content[data-collapsed="false"]{ max-height:4000px; transition:max-height .5s ease; }
@media (prefers-reduced-motion: reduce){ .ce-cat-seo-content{ transition:none !important; } }
.ce-cat-seo-fade{ position:absolute; left:0; right:0; bottom:0; height:70px; background:linear-gradient(to bottom, transparent, var(--bg)); pointer-events:none; transition:opacity .2s ease; }
.ce-cat-seo-content[data-collapsed="false"] ~ .ce-cat-seo-fade{ opacity:0; }
.ce-cat-seo-toggle{ margin-top:18px; background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:.9em; font-weight:600; color:var(--accent); padding:8px 2px; }
.ce-cat-seo-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.ce-cat-seo-toggle svg{ width:14px; height:14px; transition:transform .25s ease; }
.ce-cat-seo-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.ce-cat-seo-toggle .txt-less{ display:none; }
.ce-cat-seo-toggle[aria-expanded="true"] .txt-more{ display:none; }
.ce-cat-seo-toggle[aria-expanded="true"] .txt-less{ display:inline; }

/* ── RESPONSIVE (alignée sur Typographie : 600px / 1023px) ───────── */
@media (min-width:601px) and (max-width:1023px){
  .ce-blog-grid-inner{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .ce-blog-hero{ padding:60px 24px 30px; }
  .ce-blog-filters{ padding:0 24px 30px; }
  .ce-blog-grid{ padding:0 24px 70px; }
  .ce-blog-grid-inner{ grid-template-columns:1fr; }
  .ce-cat-seo{ padding:50px 24px 70px; }
}

/* PERFORMANCE / SEO
   - Images de carte en loading="lazy" (posé côté PHP).
   - object-fit + aspect-ratio : dimensions stables (bon score CLS).
   - Le filtre JS masque via [hidden], le contenu reste dans le DOM et
     indexable — contrairement à un rendu qui n'afficherait qu'une
     catégorie à la fois côté serveur. *//* End custom CSS */