/* Specific to the conseils page.
   Extracted from the mockups by pilotage/extract-css.ts.
   Do not edit by hand while the theme is incomplete: the mockups are still
   the source, and an edit here would be overwritten on the next run. */

.has-bg .field label{color:#fff}

.has-bg .search-row input{border-color:rgba(255,255,255,.5)}

@media (max-width:900px){
    .hero-grid,.founder-grid,.cv-grid{grid-template-columns:1fr}
    .founder-photo{aspect-ratio:16/11;max-width:520px}
    .steps{grid-template-columns:1fr}
    .step{border-left:0;border-top:1px solid var(--line);padding:1.8rem 0}
    .step:first-child{padding-top:0;border-top:0}
    .quotes{grid-template-columns:1fr}
    .cities{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }

/* ============ CONSEILS (blog) : composants propres à cette page ============ */
  /* Recherche */
  .blog-search{margin-top:2.2rem;max-width:34rem}

.blog-search .field label{display:block;font-weight:600;font-size:.98rem;margin-bottom:.4rem}

.search-row{display:flex;gap:.8rem;flex-wrap:wrap}

.search-row input{flex:1;min-width:12rem;min-height:var(--target);padding:.7rem .9rem;
    border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);font:inherit;color:var(--ink)}

@media (hover:hover){.search-row input:hover{border-color:var(--muted)}}

/* Taxonomie (filtres catégories) */
  .taxo{display:flex;flex-wrap:wrap;gap:.7rem}

.chip{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.15rem;
    border:1px solid var(--line-strong);border-radius:var(--r);text-decoration:none;
    color:var(--ink-2);font-weight:600;font-size:1rem;background:var(--surface);
    transition:background .18s ease,color .18s ease,border-color .18s ease}

@media (hover:hover){.chip:hover{color:var(--ink);border-color:var(--muted)}}

.chip[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Article à la une */
  .feature{display:grid;grid-template-columns:3fr 2fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);align-items:stretch}

.feature-media{min-height:300px;background:#E6E2D8 center/cover no-repeat}

.feature-media-init{background:var(--warm);display:grid;place-items:center;
    font-family:"Source Serif 4",Georgia,serif;font-size:clamp(3.4rem,2.4rem + 4vw,5.4rem);
    font-weight:600;color:var(--accent);letter-spacing:.02em}

.feature-body{padding:clamp(1.6rem,1rem + 2vw,2.6rem);display:flex;flex-direction:column;justify-content:center}

.feature-body .eyebrow{margin-bottom:.9rem}

.feature-title{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);font-weight:500;letter-spacing:-.01em;line-height:1.14;margin-bottom:.9rem}

.feature-title a{text-decoration:none}

@media (hover:hover){.feature-title a:hover{color:var(--accent)}}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   The featured post's preview is running text. Was 1.05rem (16.8 px). */
.feature-excerpt{color:var(--ink-2);font-size:var(--body);margin-bottom:1.4rem}

.meta{color:var(--muted);font-size:.9rem;letter-spacing:.02em}

.feature-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center;justify-content:space-between}

/* Grille d'articles */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,1rem + 2vw,2.6rem)}

.card{display:flex;flex-direction:column}

.card-media{aspect-ratio:3/2;background:#E6E2D8 center/cover no-repeat;border:1px solid var(--line-strong);border-radius:var(--r);margin-bottom:1.1rem}

/* Vignette sans visage : une lettrine sur fond chaud, reprise du titre.
     Un portrait de banque d'images à côté d'un article signé laisse croire
     à une personne réelle ; la lettre ne prétend à rien. */
  .card-media-init{background:var(--warm);display:grid;place-items:center;
    font-family:"Source Serif 4",Georgia,serif;font-size:clamp(2.4rem,1.8rem + 2.4vw,3.6rem);
    font-weight:600;color:var(--accent);letter-spacing:.02em}

.card .eyebrow{margin-bottom:.6rem}

.card-title{font-family:"Source Serif 4",Georgia,serif;font-size:1.3rem;font-weight:500;letter-spacing:-.008em;line-height:1.2;margin-bottom:.7rem}

.card-title a{text-decoration:none}

@media (hover:hover){.card-title a:hover{color:var(--accent)}}

.card .meta{margin-top:auto}

/* Une carte masquee par le filtre : sans cette regle, le display:flex de .card
     l'emporte sur l'attribut hidden et la carte reste visible. */
  .card[hidden]{display:none}

/* Etat de la liste : compteur discret et message de liste vide. Un filtre ne
     doit jamais laisser une zone muette, sinon on croit la page cassee. */
  .list-state{color:var(--muted);font-size:.95rem;margin-bottom:1.6rem}

.list-empty{padding:2.2rem 0 .5rem}

.list-empty p{color:var(--ink-2)}

.list-empty p + p{margin-top:1.1rem}

.more-row{margin-top:clamp(2.5rem,1.5rem + 2vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}

/* Pagination numerotee : de vrais liens, indexables et utilisables sans script. */
  .pagination{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

.pagination[hidden]{display:none}

.pg{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
    padding:.5rem .9rem;border:1px solid var(--line-strong);border-radius:var(--r);
    background:var(--surface);color:var(--ink-2);font-weight:600;font-size:1rem;text-decoration:none;
    transition:background .18s ease,color .18s ease,border-color .18s ease}

@media (hover:hover){a.pg:hover{color:var(--ink);border-color:var(--muted)}}

.pg[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.pg-next{gap:.35rem}

.pg-next::after{content:"→";color:var(--accent)}

@media (hover:hover){a.pg-next:hover::after{color:currentColor}}

.pg[aria-current="page"]::after{color:currentColor}

/* Texte reserve aux lecteurs d'ecran : "Page 2" plutot qu'un "2" nu. */
  .vh{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}

@media (max-width:820px){
    /* minmax(0,1fr) et non 1fr : une piste 1fr a un minimum automatique egal au
       contenu, or .feature-media combine aspect-ratio:16/9 et min-height:300px,
       ce qui lui donne une largeur minimale de 533px. La colonne entiere etait
       donc dilatee a 533px dans un conteneur de 335px, et les deux enfants avec
       elle. Le overflow:hidden de .feature masquait le debordement, mais l'image
       de fond etait recadree bien plus serre que prevu. */
    .feature{grid-template-columns:minmax(0,1fr)}
    .feature-media{aspect-ratio:16/9;order:-1;width:100%}
    .cards{grid-template-columns:1fr 1fr}
  }

@media (max-width:560px){
    .cards{grid-template-columns:1fr}
  }

/* 12/10: the featured preview keeps the post's shape (perinel_blog_preview): its
   paragraphs, and its list as a real numbered list. The keycap emojis of the
   imported posts give way to the site's own numerals, in the serif and the red of
   the eyebrows, so the list reads at a glance without looking like a social post. */
.feature-excerpt p + p{margin-top:.6rem}
.feature-list{list-style:none;counter-reset:feat;margin:.9rem 0 0;padding:0;display:grid;gap:.55rem}
/* 21/10, same request: a numbered list item is 1.6 on /label-oncrh/. Was 1.5. */
.feature-list li{counter-increment:feat;position:relative;padding-left:2.1rem;line-height:1.6}
.feature-list li::before{content:counter(feat);position:absolute;left:0;top:-.05em;
  width:1.5rem;text-align:center;font-family:"Source Serif 4",Georgia,serif;
  font-size:1.25rem;font-weight:600;color:var(--accent);line-height:1.3}
.feature-list b{color:var(--ink);font-weight:600}