/* Family blog: 404, blog-categorie, blog-page2, blog-recherche, blog-vide.
   The four blog listing states, plus the 404 which reuses their shell. Overlap measured at extraction, once the hero was pulled out into variables: 100.0 %.
   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}
  }

/* ============ BLOG : composants communs aux etats derives ============
     Recherche, taxonomie, grille et pagination sont repris a l'identique de
     maquette-conseils.html : ces pages sont le MEME gabarit de liste, servi par
     archive.php, search.php et 404.php. A l'integration, ce bloc n'est ecrit
     qu'une seule fois dans la feuille chargee par wp_enqueue_style(). */

  /* Recherche */
  .blog-search{margin-top:2.2rem;max-width:34rem}

/* 22/10, Lucas: « juste le titre sur la photo et en dessous le texte qui l'accompagne ».
   The search field left the photo for .hero-intro, whose bottom padding is 0, and the
   next section opens on a rule with no padding: without this gap the button sits on it. */
.hero-intro .blog-search{margin-bottom:clamp(2rem,1.4rem + 2vw,3rem)}

.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 (categories) */
  .taxo{display:flex;flex-wrap:wrap;gap:.7rem}
/* 22/10: « Médias » is a menu of its three kinds (parts/blog-taxonomies.php), a
   <details> styled as a chip. The panel opens under it, above the grid. */
.chip-menu{position:relative}
.chip-menu > summary{list-style:none;cursor:pointer;gap:.6rem}
.chip-menu > summary::-webkit-details-marker{display:none}
.chip-menu > summary::after{content:"";width:.42rem;height:.42rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.chip-menu[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.chip-menu-list{position:absolute;left:0;top:calc(100% + .4rem);z-index:20;min-width:12rem;margin:0;padding:.4rem;
  list-style:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);
  box-shadow:0 10px 24px rgba(12,14,16,.12)}
.chip-menu-list a{display:flex;align-items:center;min-height:var(--target);padding:0 .9rem;border-radius:var(--r);
  color:var(--ink);text-decoration:none;font-weight:600}
@media (hover:hover){.chip-menu-list a:hover{background:var(--tint)}}
.chip-menu-list a[aria-current="page"]{background:var(--ink);color:var(--paper)}

.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)}}

/* Deux valeurs acceptees : "true" pour le filtre JavaScript de la liste
     principale, "page" ici, ou le chip est un vrai lien vers l'archive affichee. */
  .chip[aria-current="true"],.chip[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* 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}

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

.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-prev{gap:.35rem}

.pg-prev::before{content:"←";color:var(--accent)}

.pg-next{gap:.35rem}

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

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

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

/* Reperage dans la serie. Utile a tout le monde, indispensable a qui revient
     sur la page par un favori et ne sait plus ou il en etait. */
  .pg-pos{color:var(--muted);font-size:.95rem}

/* 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}

/* ============ EN-TETE D'ETAT ============
     Recherche, liste vide, page introuvable. Pas de bandeau photo : on arrive
     ici apres une deception, l'ornement passerait pour de l'indifference. Le
     titre garde la taille d'un h2 : ce que la personne a tape n'est pas un
     titre de journal. */
  .state{background:var(--surface);border-bottom:1px solid var(--line);
    padding-block:clamp(2.8rem,2rem + 3vw,4.2rem) clamp(2rem,1.5rem + 2vw,2.8rem)}

/* Le H1 reprend mot pour mot ce qui a ete tape, donc n'importe quoi : un mot
     plus long que l'ecran deborderait et ferait defiler toute la page
     horizontalement. La cesure n'est pas une precaution, c'est la regle. */
  .state h1{font-size:var(--h2);margin-bottom:1.1rem;overflow-wrap:break-word;hyphens:auto}

.state .q{color:var(--accent);overflow-wrap:break-word}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   The results sentence is running text. Was 1.08rem (17.3 px). */
.count{color:var(--ink-2);font-size:var(--body)}

.count b{font-family:"Source Serif 4",Georgia,serif;font-weight:600;color:var(--ink)}

/* ============ ETAT VIDE ============
     Une recherche sans resultat et une adresse introuvable sont le meme
     probleme : quelqu'un est arrive quelque part et n'a rien. Le bloc rouvre
     trois chemins (chercher autrement, parcourir, appeler) au lieu d'un
     cul-de-sac. C'est la page la plus rentable du site a bien traiter : elle
     n'est vue que par des gens deja engages, qui cherchaient quelque chose. */
  .empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    padding:clamp(1.7rem,1rem + 3vw,3rem)}

.empty h2{margin-bottom:1.1rem}

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

.empty p + p{margin-top:1rem}

.empty .blog-search{margin-top:2rem}

.empty-sep{margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--line)}

.empty-actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center}

.empty-tel{margin-top:2rem}

/* 07/10, « partout pareil »: the number keeps the size of the callback block
   (base.css .cv-tel) instead of a fixed 27.2 px of its own. */

/* Raccourcis vers les pages principales (404). Des liens hauts de 48px, en
     colonne : a 65 ans, sur un telephone, une liste de liens serres se rate. */
  .quick{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.4rem}

.quick a{display:flex;align-items:center;gap:.6rem;min-height:var(--target);
    padding:.6rem 0;border-bottom:1px solid var(--line);text-decoration:none;
    color:var(--ink);font-weight:600}

.quick a::before{content:"→";color:var(--accent)}

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

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

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

/* 23/10, Lucas: « dans blog il faut que les boutons Actualités, Médias soient
   plus gros ». Valérie had asked the same on the phone (« un peu plus gros, les
   boutons »). Two sections only: they can take the size of a real button. The
   .taxo prefix outranks the copy of .chip that pages/conseils.css still holds. */
.taxo{gap:1rem}
.taxo .chip{min-height:58px;padding:.75rem 1.9rem;font-size:1.2rem}
.taxo .chip-menu > summary{gap:.8rem}
.taxo .chip-menu > summary::after{width:.55rem;height:.55rem}
.taxo .chip-menu-list a{font-size:1.1rem}
@media (max-width:560px){
  .taxo .chip{min-height:52px;padding:.65rem 1.4rem;font-size:1.1rem}}

/* 23/10, Lucas: « quand on clique en déroulant Médias, survoler les items en
   rouge » (Valérie on the phone: « mettre en rouge TV, presse, radio », « le
   même bordeaux que de partout »). The logo red on the light panel: 8.6:1. */
@media (hover:hover){.chip-menu-list a:hover{background:var(--tint);color:var(--logo-red)}}
.chip-menu-list a:focus-visible{color:var(--logo-red)}
.chip-menu-list a:active{color:var(--logo-red)}

/* 23/10: the list heading of a blog section, « À regarder », « À écouter »,
   « À lire », in the logo red (archive.php). 7.5:1 on the band. */
.list-verb{color:var(--logo-red)}

/* 23/10, Lucas: « quand on clique sur le menu déroulant Médias, l'élément
   sélectionné doit être sur fond rouge ». The current section (TV, Presse or
   Radio) takes the logo red, white on it: 9.2:1. Was the ink blue. */
.chip-menu-list a[aria-current="page"]{background:var(--logo-red);color:#fff}
@media (hover:hover){.chip-menu-list a[aria-current="page"]:hover{background:var(--logo-red);color:#fff}}