/* =========================================================
   H-CHECK Central — feuille de style principale
   Palette et typographie reprises du visuel déjà validé
   (Section 4 de la spec : Inter, direction moderne/professionnelle/
   claire ; violet=Patient, bleu=Professionnel, vert=Chercheur).
   ========================================================= */

:root {
  --hc-patient: #7C3AED;
  --hc-patient-bg: #F5F0FE;
  --hc-pro: #2563EB;
  --hc-pro-bg: #EFF4FE;
  --hc-chercheur: #16A34A;
  --hc-chercheur-bg: #EEFBF3;
  /* Violet exact échantillonné sur les pixels du logo source
     (assets/images/h_check_logo.png) — distinct de --hc-patient
     (violet d'accent plus vif utilisé pour les CTA/liens du profil
     Patient) : le mot "H-CHECK" à côté du logo doit utiliser CETTE
     valeur précise, pas l'accent Patient. */
  --hc-logo-purple: #A53BA3;

  --hc-text: #1A1A2E;
  --hc-text-muted: #5B5B70;
  --hc-border: #E4E4EC;
  --hc-bg: #FFFFFF;
  --hc-bg-soft: #FAFAFC;
  --hc-footer-bg: #14142B;
  --hc-footer-text: #C9C9DA;

  --hc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Réduit légèrement (v9, point 10) — la version précédente
     (clamp(2rem, ..., 3rem)) faisait tenir les 3 slides du hero sur un
     nombre de lignes différent (patient/pro : 4 lignes, chercheur :
     5 lignes, la phrase la plus longue des trois) : mesuré réellement
     avec Range.getClientRects() sur le h1 de chaque slide (voir
     scratchpad), pas visuellement à l'œil. Cette valeur fait tenir les
     3 slides sur exactement 3 lignes chacune, à toutes les largeurs
     d'écran testées (480 à 1920px). */
  --hc-size-h1: clamp(1.75rem, 1.25rem + 1.1vw, 2.125rem);
  --hc-size-h2: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --hc-size-h3: 1.25rem;
  --hc-size-body: 1rem;
  --hc-size-small: 0.875rem;
  --hc-line-height: 1.6;

  --hc-radius: 10px;
  --hc-radius-sm: 6px;
  --hc-radius-lg: 18px;
  --hc-space-1: 0.5rem;
  --hc-space-2: 1rem;
  --hc-space-3: 1.5rem;
  --hc-space-4: 2.5rem;
  --hc-space-5: 4rem;
  --hc-container: 1180px;
  /* Anneau de focus dans la teinte de marque (10e passe, polish visuel) —
     l'ancienne valeur (#1A1A2E, quasi noir) était visible mais sans
     rapport avec l'identité violette du site ; la barre de recherche
     dépliée (ligne ~321 plus bas) utilisait déjà un anneau violet fin,
     ce nouvel anneau global généralise ce même traitement à TOUS les
     éléments interactifs (liens, boutons, champs) pour une cohérence
     totale. Contraste vérifié à la fois sur fond clair et sur le pied
     de page sombre (--hc-footer-bg). */
  --hc-focus-ring: 2px solid var(--hc-patient);
  --hc-focus-glow: 0 0 0 4px rgba(124, 58, 237, .16);
  /* Échelle d'ombres douces multi-couches (10e passe) : une ombre nette
     unique (ex. "0 8px 22px rgba(...,.1)") lit comme datée à cette
     échelle de gris/violet — deux couches superposées (une très proche
     et discrète pour le contact au sol, une plus large et diffuse pour
     la profondeur) donnent un rendu "flottant" plus doux, utilisé pour
     toutes les cartes/boutons/badges du thème. */
  --hc-shadow-sm: 0 1px 2px rgba(26, 26, 46, .04), 0 3px 8px rgba(26, 26, 46, .045);
  --hc-shadow-md: 0 2px 5px rgba(26, 26, 46, .045), 0 12px 26px rgba(26, 26, 46, .09);
  --hc-shadow-lg: 0 4px 10px rgba(26, 26, 46, .06), 0 18px 38px rgba(26, 26, 46, .12);
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  font-family: var(--hc-font);
  font-size: var(--hc-size-body);
  line-height: var(--hc-line-height);
  color: var(--hc-text);
  background: var(--hc-bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: var(--hc-focus-ring);
  outline-offset: 2px;
  /* Halo doux en complément du contour — même esprit que les anneaux de
     focus "glow" des systèmes de design modernes, dans la teinte de
     marque plutôt qu'un simple trait sec. box-shadow épouse le
     border-radius propre de chaque élément (bouton pilule, icône
     ronde, champ...) sans jamais le modifier, et n'affecte jamais la
     mise en page. */
  box-shadow: var(--hc-focus-glow);
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; margin: 0 0 var(--hc-space-2); }
h1 { font-size: var(--hc-size-h1); }
h2 { font-size: var(--hc-size-h2); }
h3 { font-size: var(--hc-size-h3); font-weight: 600; }
p { margin: 0 0 var(--hc-space-2); max-width: 70ch; }

.hc-container {
  max-width: var(--hc-container);
  margin-inline: auto;
  padding-inline: var(--hc-space-3);
}
.hc-section { padding-block: var(--hc-space-4); }
/* Dégradé très subtil plutôt qu'un aplat gris plat (10e passe) — les
   sections "En chiffres" et "FAQ" sont les deux seules bandes de fond
   gris uni de toute la page ; un dégradé diagonal à deux teintes
   quasi identiques (delta de chrominance minime, aucun changement de
   luminosité perceptible sur le texte) donne une légère profondeur
   sans rien changer au rythme d'alternance blanc/teinté déjà validé. */
.hc-section--soft {
  background: linear-gradient(160deg, var(--hc-bg-soft) 0%, #F6F5FB 100%);
}
.hc-eyebrow { color: var(--hc-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--hc-size-small); margin: 0 0 var(--hc-space-1); }
.hc-eyebrow--patient { color: var(--hc-patient); }

.hc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.75em 1.5em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: var(--hc-size-body);
  cursor: pointer;
  text-decoration: none;
  /* Élévation douce au survol (10e passe) : "transform" et "box-shadow"
     rejoignent la liste — jusqu'ici seule la couleur de fond changeait,
     aucun des ~9 boutons du site (CTA blocs, formulaires, commentaires)
     ne se soulevait au survol contrairement aux cartes/stats qui, elles,
     ont déjà ce traitement (.hc-block:hover, .hc-stat:hover) : incohérence
     corrigée ici plutôt qu'une simple retouche locale. */
  box-shadow: var(--hc-shadow-sm);
  transition: background-color 120ms ease, border-color 120ms ease,
    transform 150ms ease, box-shadow 150ms ease;
}
.hc-btn::after {
  content: '\2192';
  display: inline-block;
  transition: transform 120ms ease;
}
.hc-btn:hover:not([aria-disabled="true"])::after { transform: translateX(2px); }
.hc-btn:hover:not([aria-disabled="true"]) { transform: translateY(-2px); }
.hc-btn--outline { border-radius: var(--hc-radius-sm); }
.hc-btn--outline::after { content: none; }
.hc-btn:active:not([aria-disabled="true"]) { transform: translateY(0); box-shadow: var(--hc-shadow-sm); }
.hc-btn[aria-disabled="true"],
.hc-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}
/* Ombre teintée dans la couleur du bouton au survol (10e passe) — un
   halo neutre gris sous un bouton plein violet/bleu/vert lisait comme
   un artefact générique ; teinter légèrement l'ombre dans la même
   teinte que le fond du bouton (pratique courante des systèmes de
   design actuels) la rend cohérente avec la couleur du profil. */
.hc-btn--patient { background: var(--hc-patient); color: #fff; }
.hc-btn--patient:hover:not([aria-disabled="true"]) { background: #6829d1; box-shadow: 0 10px 22px rgba(124, 58, 237, .28); }
.hc-btn--pro { background: var(--hc-pro); color: #fff; }
.hc-btn--pro:hover:not([aria-disabled="true"]) { background: #1d4fc4; box-shadow: 0 10px 22px rgba(37, 99, 235, .28); }
.hc-btn--chercheur { background: var(--hc-chercheur); color: #fff; }
.hc-btn--chercheur:hover:not([aria-disabled="true"]) { background: #128a3e; box-shadow: 0 10px 22px rgba(22, 163, 74, .28); }
.hc-btn--outline {
  background: transparent;
  border-color: var(--hc-border);
  color: var(--hc-text);
  box-shadow: none;
}
.hc-btn--outline:hover { border-color: var(--hc-text); background: var(--hc-bg-soft); box-shadow: var(--hc-shadow-sm); }

.hc-header {
  border-bottom: 1px solid var(--hc-border);
  position: sticky;
  top: 0;
  background: var(--hc-bg);
  z-index: 50;
}
.hc-header__bar {
  position: relative;
  display: grid;
  /* minmax(0,1fr) plutôt que 1fr simple : autorise la colonne du menu
     à se resserrer réellement (jamais en dessous de 0) quand la barre
     de recherche s'ouvre dans .hc-header__tools, au lieu de forcer un
     débordement horizontal de la bande d'en-tête. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--hc-space-3);
  padding-block: var(--hc-space-2);
}
.hc-header__logo img { height: 36px; width: auto; }
.hc-header__logo a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
}
.hc-header__logo-img {
  flex: none;
  height: 38px;
  width: 38px;
  display: block;
}
.hc-logo-word {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--hc-logo-purple);
  white-space: nowrap;
}
.hc-nav { justify-self: center; min-width: 0; overflow: hidden; }
.hc-nav__list {
  display: flex;
  gap: var(--hc-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hc-nav__list a {
  text-decoration: none;
  font-weight: 500;
  padding: 0.5em 0.25em;
  border-bottom: 2px solid transparent;
  transition: border-color 150ms ease, color 150ms ease;
}
.hc-nav__list a:hover {
  border-bottom-color: var(--hc-patient);
  color: var(--hc-patient);
}
.hc-nav__list .current-menu-item > a,
.hc-nav__list .current_page_item > a,
.hc-nav__list a[aria-current="page"] {
  color: var(--hc-patient);
  font-weight: 700;
  border-bottom-color: var(--hc-patient);
}
.hc-header__tools {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--hc-space-2);
  justify-self: end;
}
.hc-header__icon-btn {
  background: none;
  border: none;
  padding: 0.4em;
  cursor: pointer;
  border-radius: var(--hc-radius-sm);
  display: inline-flex;
  transition: background-color 150ms ease, color 150ms ease;
}
.hc-header__icon-btn:hover { background: var(--hc-patient-bg); color: var(--hc-patient); }
.hc-lang-select {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border: 1px solid var(--hc-border);
  border-radius: 8px;
  padding: 0.45em 0.75em;
  background: var(--hc-bg);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--hc-size-small);
  color: var(--hc-text);
  transition: border-color 150ms ease, background-color 150ms ease;
}
/* Le survol/curseur "cliquable" ne s'applique qu'au vrai sélecteur de
   langue (Polylang actif) — le repli statique "FR" affiché tant que
   Polylang n'est pas installé porte déjà aria-disabled="true" et ne
   doit surtout pas donner l'illusion d'être cliquable. */
.hc-lang-select:not([aria-disabled="true"]) { cursor: pointer; }
.hc-lang-select:not([aria-disabled="true"]):hover { border-color: var(--hc-patient); background: var(--hc-patient-bg); }
.hc-lang-select::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.6;
}
.hc-header__burger { display: none; }
.hc-mobile-menu { display: none; }

/* Recherche dépliable EN PLACE dans la bande de menu (v8) : une petite
   barre de longueur adaptée (pas pleine largeur, jamais un overlay qui
   recouvre le logo/menu) qui grandit dans son propre espace, à
   l'intérieur de .hc-header__tools. Comme .hc-header__tools a une
   largeur "auto" dans la grille de .hc-header__bar (colonne du milieu
   .hc-nav en 1fr flexible), le fait de grandir ici pousse tout
   naturellement le menu à se resserrer légèrement plutôt que de
   disparaître ou d'être recouvert. */
.hc-search-panel {
  display: flex;
  align-items: center;
  max-width: 0;
  overflow: hidden;
  transition: max-width 220ms ease;
}
.hc-search-panel.is-open { max-width: 220px; }
.hc-search-panel .hc-search-form { display: flex; gap: 0.4em; width: 220px; flex: none; }
.hc-search-panel input[type="search"] {
  width: 100%;
  min-width: 0;
  padding: 0.5em 0.6em;
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-sm);
  font-family: inherit;
  font-size: var(--hc-size-small);
}
.hc-search-panel .hc-btn--outline { padding: 0.5em 0.7em; flex: none; }
/* Une seule loupe visible (v9, point 6) : le bouton "submit" natif du
   formulaire reste dans le DOM (accessibilité, soumission au clavier
   via Entrée) mais n'affiche plus sa propre icône — le bouton
   #hc-search-toggle, dans la bande d'en-tête, sert seul de loupe
   visible (ouverture ET soumission, voir main.js). */
.hc-search-panel .hc-search-form__submit { display: none; }
/* Accent d'ouverture adouci (point 8) : l'ancien contour de focus par
   défaut (3px, presque noir) était trop appuyé pour un simple champ
   qui vient de s'ouvrir — un anneau plus fin et dans la teinte de la
   marque reste visible sans être agressif. */
.hc-search-panel input[type="search"]:focus-visible {
  outline: 2px solid var(--hc-patient);
  outline-offset: 1px;
}

/* Recherche dans le menu mobile (v9) : même formulaire, réintégré tel
   que documenté en tête de header.php ("recherche repliée dans le
   menu hamburger sur mobile"), manquant jusqu'ici — sans lui, un
   visiteur mobile n'avait aucun moyen de lancer une recherche. */
.hc-mobile-menu__search { margin-bottom: var(--hc-space-2); }
.hc-mobile-menu__search .hc-search-form { display: flex; gap: 0.5em; }
.hc-mobile-menu__search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 0.6em 0.8em;
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-sm);
  font-family: inherit;
  font-size: var(--hc-size-body);
}
.hc-mobile-menu__search .hc-btn--outline { flex: none; padding: 0.6em 0.8em; }

@media (max-width: 860px) {
  .hc-nav, .hc-header__tools > *:not(.hc-header__burger) { display: none; }
  .hc-search-panel { display: none !important; }
  .hc-header__burger { display: inline-flex; }
  .hc-header__bar { grid-template-columns: auto 1fr auto; }
  .hc-mobile-menu {
    border-top: 1px solid var(--hc-border);
    padding: var(--hc-space-2) var(--hc-space-3) var(--hc-space-3);
  }
  .hc-mobile-menu.is-open { display: block; }
  .hc-mobile-menu ul { list-style: none; margin: 0 0 var(--hc-space-2); padding: 0; }
  .hc-mobile-menu a { display: block; padding: 0.6em 0; text-decoration: none; font-weight: 500; }
  .hc-mobile-menu .hc-lang-select { width: 100%; }
}

/* Bannière calée sur le mockup officiel (docs/Visuel_site_central.png) :
   fond clair, photo qui occupe la partie droite et se fond en dégradé
   dans le fond clair à gauche (pas un aplat sombre plein cadre), texte
   sombre superposé à gauche — la photo n'a besoin d'aucun assombrissement
   puisqu'elle ne sert jamais de support direct au texte. */
/* Bande hero : proportion cible ~1920x600 (3.2:1) sur grand écran,
   avec un plancher de hauteur pour que le contenu texte reste lisible
   sur les largeurs intermédiaires (la vraie photo/forme, pas le
   contenu, doit respecter ce ratio — voir clamp ci-dessous calé sur
   100vw/3.2 = 31.25vw). */
/* Même traitement "dégradé subtil" que .hc-section--soft (10e passe) —
   le hero est actuellement un fond plat tant qu'aucune photo n'est
   chargée (HCHECK_DEFAULT_IMAGES_ENABLED = false) ; ce dégradé très
   doux lui donne un peu de profondeur au lieu d'un aplat uni, sans
   toucher au calque photo/voile (.hc-hero__media, inchangé) qui se
   superposera par-dessus le jour où une vraie image sera active. */
.hc-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--hc-bg-soft) 0%, #F6F5FB 100%);
}
.hc-hero__track { display: flex; transition: transform 400ms ease; }
@media (prefers-reduced-motion: reduce) { .hc-hero__track { transition: none; } }
.hc-hero__slide {
  position: relative;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  min-height: clamp(400px, 31vw, 600px);
  padding-block: var(--hc-space-4);
  overflow: hidden;
}
.hc-hero__content { position: relative; z-index: 1; max-width: 560px; }
/* Filet de lisibilité (10/09/2026) : le voile derrière le texte a été
   entièrement retiré pour que la photo reste identique des deux côtés
   (voir .hc-hero__media, plus de fondu ni de voile) — cette double
   ombre portée blanche, quasi invisible sur un fond plein (sans
   photo), est maintenant la SEULE protection de contraste du texte
   sur la photo ; renforcée (deux couches, portée plus large) en
   conséquence. */
.hc-hero__content h1,
.hc-hero__desc {
  text-shadow: 0 1px 4px rgba(250, 250, 252, .9), 0 2px 20px rgba(250, 250, 252, .85);
}
.hc-hero__slide[data-profile="patient"] .hc-hero__eyebrow { color: var(--hc-patient); }
.hc-hero__slide[data-profile="pro"] .hc-hero__eyebrow { color: var(--hc-pro); }
.hc-hero__slide[data-profile="chercheur"] .hc-hero__eyebrow { color: var(--hc-chercheur); }
.hc-hero__eyebrow { font-weight: 700; font-size: var(--hc-size-small); margin-bottom: var(--hc-space-1); min-height: 1.2em; }
/* Symétrie stricte entre les 3 slides : chaque zone (titre, texte)
   réserve la même hauteur quelle que soit la longueur du texte réel,
   pour que le bouton se retrouve toujours à la même position. */
.hc-hero__content h1 {
  min-height: calc(var(--hc-size-h1) * 1.25 * 3);
}
.hc-hero__desc {
  min-height: calc(1em * var(--hc-line-height) * 2);
}
.hc-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hc-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
/* Voile d'atténuation (v9, point 11 ; plusieurs allers-retours le
   10/09/2026, tranché en dernier lieu par "pas de voile pour la dame
   (gauche)" — demande explicite et sans ambiguïté) : PLUS aucun voile
   sur PC/tablette (photo affichée sans aucun traitement, lisibilité du
   texte confiée à l'ombre portée blanche ci-dessus, .hc-hero__content
   h1/.hc-hero__desc). Élément gardé ici, vide (aucun `background`),
   uniquement pour que le sélecteur existe et que la légère atténuation
   mobile ci-dessous (photo différente, portrait recadré serré, demande
   explicite "atténue légèrement") puisse s'accrocher dessus sans dupliquer
   toute la règle. */
.hc-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
}
.hc-highlight--patient { color: var(--hc-patient); }
.hc-highlight--pro { color: var(--hc-pro); }
.hc-highlight--chercheur { color: var(--hc-chercheur); }

/* Repérage d'écran : pilules centrées horizontalement en bas du hero,
   style moderne (barre qui s'allonge sur la slide active plutôt que
   simple point). Plus de flèches précédent/suivant (retirées) : la
   navigation manuelle passe uniquement par ces pilules + l'autoplay. */
.hc-hero__dots {
  position: absolute;
  bottom: var(--hc-space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  gap: 0.5em;
}
.hc-hero__dot {
  /* Zone tactile agrandie sans toucher au rendu visuel (11e passe,
     audit responsive) : mesuré réellement, la pilule ne fait que
     8x8px (26x8px pour la slide active) sans aucun padding — bien en
     dessous d'une cible tactile raisonnable au doigt. position:relative
     + ::before absolument positionné (voir plus bas) étend la zone
     cliquable/tactile d'~12px de chaque côté sans changer la taille,
     la couleur ni l'espacement visuel des pilules (le ::before est hors
     flux, il n'affecte donc pas le "gap" ni la largeur du groupe). */
  position: relative;
  width: 8px; height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(26, 26, 46, .18);
  cursor: pointer;
  padding: 0;
  transition: width 200ms ease, background-color 200ms ease;
}
.hc-hero__dot[aria-current="true"] { background: var(--hc-patient); width: 26px; height: 8px; }
.hc-hero__dot::before {
  content: '';
  position: absolute;
  inset: -13px;
}
@media (max-width: 760px) {
  .hc-hero__slide { min-height: 520px; padding-block: var(--hc-space-4); }
  /* Photo mobile dédiée (hcheck_get_hero_image_mobile()) : portrait
     carré recadré serré, cadrage différent de la bannière PC/tablette
     — "center center" plutôt que "right center" pour rester bien
     centré sur le visage quel que soit le ratio réel du conteneur. */
  .hc-hero__media img { object-position: center center; }
  /* Essai "verre dépoli" (backdrop-filter: blur) fait puis rejeté par
     le porteur de projet le 10/09/2026 ("très nul", retour immédiat à
     la version d'avant) — retour au voile clair uniforme + ombre
     portée renforcée. */
  .hc-hero__media::after {
    background: rgba(255, 255, 255, .42);
  }
  .hc-hero__content h1,
  .hc-hero__desc {
    text-shadow: 0 1px 6px rgba(255, 255, 255, .95), 0 2px 24px rgba(255, 255, 255, .9);
  }
}

.hc-welcome { text-align: center; padding-block: var(--hc-space-3); }
.hc-welcome .hc-container { max-width: 760px; }

.hc-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hc-space-3); }
@media (max-width: 860px) { .hc-blocks { grid-template-columns: 1fr; } }
/* Page Contact en export statique (10/09/2026) : mêmes cartes que les 3
   blocs d'accès ci-dessus (icône/titre/texte/bouton), réutilisées pour
   les 2 méthodes de contact (e-mail/WhatsApp) plutôt qu'inventer un
   nouveau composant — voir page-contact.php. */
/* Les 2 BLOCS sont centrés sur la page (max-width + margin auto),
   leur CONTENU reste aligné à gauche comme les 3 blocs d'accès de
   l'accueil dont ils reprennent le style — précisé le 10/09/2026 après
   un 1er essai qui centrait aussi le contenu à tort. */
.hc-contact-methods-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hc-space-3); max-width: 640px; margin: 0 auto; }
@media (max-width: 640px) { .hc-contact-methods-grid { grid-template-columns: 1fr; } }
.hc-block {
  border-radius: var(--hc-radius-lg);
  display: grid;
  grid-template-columns: 1fr 34%;
  align-items: stretch;
  overflow: hidden;
  box-shadow: var(--hc-shadow-sm);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.hc-block:hover { box-shadow: var(--hc-shadow-md); transform: translateY(-3px); }
.hc-block--no-media { grid-template-columns: 1fr; }
.hc-block__content {
  padding: var(--hc-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-1);
  min-width: 0;
}
/* Symétrie stricte : le CTA (bouton ou badges stores) se cale
   toujours tout en bas de la carte, quelle que soit la longueur du
   texte de description au-dessus — les 3 cartes restent alignées. */
.hc-block__content > .hc-btn,
.hc-block__content > .hc-block__badges {
  margin-top: auto;
}
.hc-block__media { min-width: 0; position: relative; overflow: hidden; }
.hc-block__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Même logique d'atténuation que le hero (point 11) pour les 3 photos
   de blocs (hcheck_get_block_image()) — voile clair uniforme, léger,
   posé au-dessus de la photo une fois qu'une vraie image sera
   chargée, pour qu'elle reste cohérente avec le reste de la charte
   plutôt qu'un aplat de photo brute. */
.hc-block__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .14);
}
@media (max-width: 480px) {
  .hc-block { grid-template-columns: 1fr; }
  .hc-block__media { height: 160px; order: -1; }
}
.hc-block--patient { background: var(--hc-patient-bg); }
.hc-block--pro { background: var(--hc-pro-bg); }
.hc-block--chercheur { background: var(--hc-chercheur-bg); }
.hc-block__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.hc-block__icon svg { width: 22px; height: 22px; }
.hc-block--patient .hc-block__icon { background: var(--hc-patient); }
.hc-block--pro .hc-block__icon { background: var(--hc-pro); }
.hc-block--chercheur .hc-block__icon { background: var(--hc-chercheur); }
/* Hauteur de ligne CTA harmonisée avec .hc-btn (5e passe, point 5) :
   mesuré réellement via getBoundingClientRect() sur les 3 cartes à
   1920/1440/1024px — l'icône, le titre et le début du texte des 3
   blocs sont déjà alignés au pixel près (grid stretch + même
   padding), mais les badges stores (~40px de haut) sont plus bas que
   le bouton pilule des 2 autres blocs (~52px), laissant un espace
   différent entre le texte et le CTA d'un bloc à l'autre. Cette
   hauteur minimale aligne les 3 lignes de CTA sur la même hauteur. */
.hc-block__badges { display: flex; align-items: center; gap: var(--hc-space-2); flex-wrap: wrap; min-height: 52px; }
/* Boîte identique largeur ET hauteur (v9, point 12/20) : les deux SVG
   sources ont des ratios internes différents (App Store ~2.99:1,
   Google Play ~3.37:1), donc une simple largeur commune laissait les
   hauteurs légèrement différentes (l'œil le remarque une fois les
   deux badges côte à côte). object-fit:contain dans une boîte de
   dimension fixe garantit deux badges réellement identiques en
   largeur ET en hauteur, chaque logo restant proportionné (jamais
   étiré) à l'intérieur. */
.hc-badge-img { width: 135px; height: 40px; object-fit: contain; object-position: left center; display: block; }
.hc-badge-img--disabled { opacity: 0.5; filter: grayscale(1); cursor: not-allowed; }
.hc-badge-wrap { display: inline-flex; align-items: center; }

.hc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hc-space-3); }
@media (max-width: 760px) { .hc-stats { grid-template-columns: 1fr; } }
.hc-stat {
  display: flex;
  align-items: flex-start;
  gap: var(--hc-space-2);
  text-align: left;
  padding: var(--hc-space-3);
  background: var(--hc-bg);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius);
  box-shadow: var(--hc-shadow-sm);
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.hc-stat:hover { box-shadow: var(--hc-shadow-md); transform: translateY(-3px); border-color: transparent; }
.hc-stat__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hc-stat--patient .hc-stat__icon { background: var(--hc-patient-bg); color: var(--hc-patient); }
.hc-stat--pro .hc-stat__icon { background: var(--hc-pro-bg); color: var(--hc-pro); }
.hc-stat--chercheur .hc-stat__icon { background: var(--hc-chercheur-bg); color: var(--hc-chercheur); }
.hc-stat__body { display: flex; flex-direction: column; min-width: 0; }
.hc-stat__number { display: block; font-size: 2.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
/* Chaque chiffre dans la couleur de SON profil (5e passe, point 7) —
   plus une seule couleur neutre pour les 3 blocs. */
.hc-stat--patient .hc-stat__number { color: var(--hc-patient); }
.hc-stat--pro .hc-stat__number { color: var(--hc-pro); }
.hc-stat--chercheur .hc-stat__number { color: var(--hc-chercheur); }
.hc-stat__label { color: var(--hc-text-muted); font-size: var(--hc-size-small); }

/* align-items: stretch (et non "start") pour que chaque colonne de la
   ligne s'étire à la hauteur de la plus haute — nécessaire pour que
   les 2 cartes "Dernière actualité" / "Dernier article" (.hc-card,
   height: 100%) se retrouvent à hauteur strictement identique. La
   colonne "Avis" garde son gabarit compact naturel via
   .hc-trio__col--avis { align-self: start; } ci-dessous, pour ne pas
   étirer le carrousel d'avis jusqu'à la hauteur des 2 cartes. */
.hc-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hc-space-2); align-items: stretch; }
@media (max-width: 960px) { .hc-trio { grid-template-columns: 1fr; gap: var(--hc-space-4); } }
.hc-trio__col {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-2);
  padding-inline: var(--hc-space-2);
  border-left: 1px solid var(--hc-border);
  min-width: 0;
}
/* Bordure INVISIBLE plutôt que supprimée sur la 1re colonne (8e passe,
   point 3) — "border-left: none; padding-left: 0" ici retirait aussi
   l'espace réservé (1px de bordure + le padding-left), ce qui rendait
   la 1re colonne ("Dernière actualité") mesurablement plus LARGE que
   les 2 autres (mesuré réellement : carte 350x409 vs 334x395, écart
   qui ne vient donc pas de la vignette mais de cette asymétrie de
   colonne) — les 3 colonnes du trio se partagent pourtant des pistes
   de grille strictement égales (grid-template-columns: repeat(3, 1fr))
   côté .hc-trio. Garder le même espace total (bordure transparente +
   même padding-inline que les autres colonnes) donne 3 cartes de
   largeur strictement identique, sans changer le rendu visuel (pas de
   ligne visible avant la 1re colonne, comme avant). */
.hc-trio__col:first-child { border-left-color: transparent; }
/* Opt-out du stretch de ligne (.hc-trio align-items: stretch) pour la
   colonne Avis : elle garde sa hauteur de contenu naturelle, alignée
   en haut, plutôt que d'être étirée jusqu'à la hauteur des 2 cartes
   actualité/blog. */
.hc-trio__col--avis { align-self: start; }
@media (max-width: 960px) {
  .hc-trio__col { border-left: none; padding-inline: 0; }
}
.hc-trio__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
  flex-wrap: wrap;
}
.hc-trio__header h2 {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.95rem;
  margin: 0;
  white-space: nowrap;
}
.hc-trio__icon { flex: none; color: var(--hc-patient); width: 15px; height: 15px; }
.hc-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--hc-patient);
  font-weight: 600;
  font-size: 0.72rem;
  text-decoration: none;
  white-space: nowrap;
}
.hc-link-arrow::after { content: '\2192'; }
.hc-link-arrow:hover { text-decoration: underline; }
.hc-card {
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius);
  padding: var(--hc-space-3);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  height: 100%;
  /* Ombre de repos légère (10e passe) — box-shadow ne participe jamais
     au box model (ni width ni height), donc n'a aucune incidence sur
     les 420,34px de hauteur mesurés/validés pour ce trio de cartes ;
     seul le survol changeait visuellement la carte jusqu'ici (bordure +
     ombre), incohérent avec .hc-block/.hc-stat qui ont déjà une ombre
     de repos. */
  box-shadow: var(--hc-shadow-sm);
}
/* Cartes actualité/blog : toute la carte est un lien cliquable
   (pas seulement le titre) vers l'article réel. Léger soulèvement au
   survol ajouté ici (transform) — la propriété était déjà annoncée
   dans la transition d'origine mais jamais utilisée, incohérent avec
   les autres cartes du site qui, elles, se soulèvent déjà au survol. */
a.hc-card--link {
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 150ms ease;
}
a.hc-card--link:hover {
  border-color: var(--hc-patient);
  box-shadow: var(--hc-shadow-md);
  transform: translateY(-3px);
}
.hc-card__date { color: var(--hc-text-muted); font-size: var(--hc-size-small); }
.hc-card__title { font-size: 1.05rem; margin: 0; }
.hc-card__title a { text-decoration: none; }
.hc-card__title a:hover { text-decoration: underline; }
/* Cartes du trio (Dernière actualité / Dernier article) : le titre et
   l'extrait réservent chacun une hauteur FIXE, identique quel que soit
   le nombre de lignes réel du texte (1, 2, 3... lignes selon le
   titre/extrait de chaque article) — c'est la vraie cause de l'écart
   résiduel observé (~4,6px) entre les 2 cartes, indépendante de la
   grille (align-items) ci-dessus : à titre égal en nombre de lignes,
   les 2 cartes ont une hauteur de contenu strictement égale. Le
   nombre de lignes est plafonné avec line-clamp (troncature "…"
   propre si le texte réel dépasse), et la hauteur est figée à la
   hauteur de ce plafond (height, pas min-height) pour qu'un texte
   plus court laisse un espace vide plutôt que de rétrécir la carte. */
/* Sélecteur .hc-trio a.hc-card--link (pas ".hc-card" tout court) :
   la carte "Avis" (article.hc-card.hc-avis__slide, plus bas) partage
   aussi la classe .hc-card mais ne doit pas hériter de ce line-clamp —
   seules les 2 cartes cliquables Actualité/Blog portent .hc-card--link. */
.hc-trio a.hc-card--link .hc-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  height: calc(1.05rem * 1.25 * 2);
}
.hc-trio a.hc-card--link p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  height: calc(1em * var(--hc-line-height) * 4);
}
.hc-avis__author { display: flex; align-items: center; gap: 0.6em; }
.hc-avis__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--hc-border); }
.hc-avis__avatar--initial {
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--hc-text-muted);
}
.hc-avis__author span { font-weight: 600; }
.hc-avis__quote { font-style: italic; margin: 0; }

/* Carrousel d'avis : navigation prev/next de part et d'autre de la
   carte. Fonctionnel même avec un seul avis (boutons masqués via
   [disabled], voir main.js). */
.hc-avis-carousel { display: flex; align-items: center; gap: var(--hc-space-1); }
.hc-avis__viewport { flex: 1; min-width: 0; overflow: hidden; }
.hc-avis__track { display: flex; transition: transform 300ms ease; }
.hc-avis__slide { flex: 0 0 100%; min-width: 0; }
.hc-avis__nav {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hc-border);
  background: var(--hc-bg-soft);
  color: var(--hc-text);
  cursor: pointer;
  line-height: 1;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, color 150ms ease;
}
.hc-avis__nav:hover:not(:disabled) { background: var(--hc-patient); border-color: var(--hc-patient); color: #fff; transform: translateY(-2px); }
/* Désactivé = visible mais grisé (v8) : tant qu'il n'y a pas assez
   d'avis pour un vrai défilement, les flèches restent en place
   (repère visuel qu'un carrousel existe) plutôt que de disparaître —
   opacité réduite + curseur "interdit", jamais display:none. */
.hc-avis__nav:disabled { opacity: 0.35; cursor: not-allowed; }

.hc-faq__header {
  display: flex;
  align-items: flex-start;
  gap: var(--hc-space-2);
  margin-bottom: var(--hc-space-3);
}
.hc-faq__header-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--hc-patient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hc-faq__header h2 { margin: 0 0 0.15em; }
.hc-faq__subtitle { margin: 0; color: var(--hc-text-muted); }
/* Largeur raisonnable et centrée (v8) : la passe précédente avait
   élargi les blocs question/réponse à la pleine largeur du conteneur
   (~1180px) pour corriger le débordement du texte de réponse — mais
   à cette largeur les questions courtes flottent dans un bloc bien
   trop large. Un gabarit de lecture ~860px, centré, reste large
   assez pour ne jamais recréer le bug de débordement du texte de
   réponse (voir .hc-faq__answer p ci-dessous), sans être disproportionné. */
.hc-faq__header,
.hc-faq { max-width: 860px; margin-inline: auto; }
.hc-faq { display: flex; flex-direction: column; gap: var(--hc-space-2); }
.hc-faq__item {
  border: 1.5px solid var(--hc-border);
  border-radius: var(--hc-radius);
  padding-inline: var(--hc-space-3);
  background: var(--hc-bg);
  box-shadow: var(--hc-shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.hc-faq__item:hover,
.hc-faq__item:focus-within { border-color: var(--hc-patient); box-shadow: var(--hc-shadow-md); }
.hc-faq__item:has(.hc-faq__question[aria-expanded="true"]) { border-color: var(--hc-patient); box-shadow: var(--hc-shadow-md); }
.hc-faq__question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--hc-space-2) 0;
  font-weight: 600;
  font-size: 1.08rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--hc-space-2);
  cursor: pointer;
}
.hc-faq__icon { flex-shrink: 0; width: 20px; height: 20px; position: relative; }
.hc-faq__icon::before, .hc-faq__icon::after {
  content: ''; position: absolute; background: var(--hc-text);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.hc-faq__icon::before { width: 14px; height: 2px; }
.hc-faq__icon::after { width: 2px; height: 14px; transition: transform 150ms ease; }
.hc-faq__question[aria-expanded="true"] .hc-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.hc-faq__answer { padding: 0 0 var(--hc-space-2); color: var(--hc-text-muted); }
.hc-faq__answer[hidden] { display: none; }
/* Texte justifié, même traitement que la page À propos (6e passe,
   point 9). */
.hc-faq__answer p { text-align: justify; }
/* La règle globale "p { max-width: 70ch }" bridait la largeur du
   texte de réponse à ~70 caractères alors que l'item FAQ occupe
   toute la largeur du conteneur (jusqu'à 1180px) : le texte se
   retrouvait sur une colonne étroite avec beaucoup de vide à droite,
   et le bloc entier s'étirait inutilement en hauteur à cause du
   texte qui retombait sur trop de lignes courtes. */
.hc-faq__answer p { max-width: none; }

.hc-footer { background: var(--hc-footer-bg); color: var(--hc-footer-text); }
.hc-footer a { color: #fff; text-decoration: none; transition: opacity 120ms ease; }
.hc-footer a:hover { text-decoration: underline; opacity: 0.85; }
.hc-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--hc-space-3);
  padding-block: var(--hc-space-4);
}
@media (max-width: 860px) { .hc-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hc-footer__grid { grid-template-columns: 1fr; } }
/* Trait vertical fin entre chaque colonne (desktop uniquement : en
   grille 2 puis 1 colonne sur petit écran, un trait vertical entre
   des colonnes qui ne sont plus côte à côte n'aurait pas de sens). */
@media (min-width: 861px) {
  .hc-footer__grid > div:not(:first-child) {
    border-left: 1px solid rgba(255, 255, 255, .14);
    padding-left: var(--hc-space-3);
  }
}
.hc-footer__logo-row { display: flex; align-items: center; gap: 0.6em; margin: 0 0 var(--hc-space-2); }
.hc-footer .hc-logo-word { color: #fff; }
.hc-footer__grid h3 { color: #fff; font-size: 1.05rem; font-weight: 700; margin-bottom: var(--hc-space-2); }
.hc-footer__grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6em; }
.hc-footer__grid ul a { font-size: var(--hc-size-small); color: var(--hc-footer-text); }
.hc-footer__grid ul a:hover { color: #fff; }
.hc-footer__social { display: flex; gap: var(--hc-space-2); margin-top: var(--hc-space-1); }
/* Fond rond visible + animation au survol (5e passe, point 12) — les
   icônes flottaient jusqu'ici sans aucun repère de zone cliquable. */
.hc-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.hc-footer__social a:hover {
  background: var(--hc-patient);
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 18px rgba(124, 58, 237, .35);
}
.hc-footer__whatsapp { display: inline-flex; align-items: center; gap: 0.5em; }
.hc-footer__whatsapp svg { flex: none; color: #fff; }
/* Repli "numéro non configuré" (6e passe, point 4) — rendu identique
   au vrai lien avant ce correctif : icône + texte blancs, même mise en
   page, aucun repère visuel ne distinguait ce texte statique d'un
   véritable lien WhatsApp cliquable mais cassé. Résultat réel observé
   par le porteur de projet ("numéro pas cliquable") tant que le champ
   Customizer hcheck_whatsapp_number reste vide (état par défaut,
   remis à vide après chaque vérification) : le texte "+229 01 XX XX
   XX XX" ressemble à un vrai numéro renseigné plutôt qu'à un
   emplacement réservé. Ce style l'atténue clairement (couleur muette,
   curseur par défaut) pour qu'il ne soit jamais confondu avec le lien
   réel une fois le vrai numéro renseigné dans le Personnaliseur. */
.hc-footer__whatsapp--placeholder,
.hc-footer__whatsapp--placeholder svg {
  color: var(--hc-footer-text);
  cursor: default;
}
.hc-footer__whatsapp--placeholder:hover { opacity: 1; text-decoration: none; }
.hc-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: var(--hc-space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--hc-space-2);
  font-size: var(--hc-size-small);
}
.hc-footer__bottom ul { display: flex; gap: var(--hc-space-2); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
/* Dénivellement visuel réel (6e passe, point 3) : align-items:center
   sur .hc-footer__bottom ne suffisait pas — la règle globale
   "p { margin: 0 0 var(--hc-space-2) }" (ligne ~124) laisse une marge
   basse sur le <p> de copyright mais pas sur le <ul> des liens
   légaux (déjà à margin:0 ci-dessus) ; centrer deux boîtes de MARGE de
   hauteurs différentes ne centre pas leur CONTENU visible à la même
   hauteur — mesuré réellement via getBoundingClientRect() (écart de
   8px, soit exactement la moitié de --hc-space-2). Neutralise la
   marge du <p> pour que les deux éléments soient alignés sur leur
   propre hauteur de contenu. */
.hc-footer__bottom p { margin: 0; }

.hc-page-header { padding-block: var(--hc-space-4); border-bottom: 1px solid var(--hc-border); text-align: left; }
/* Titre aligné à gauche, pleine largeur du conteneur standard — même
   style que les en-têtes des pages Actualités et Blog (v9, point 27) :
   l'en-tête n'est donc PAS restreint à la largeur de lecture plus
   étroite ci-dessous (qui ne s'applique qu'au corps de la page). Sur
   un grand écran, un h1 confiné à 820px centré se retrouvait poussé
   loin du bord gauche réel de la page et donnait, à tort, une
   impression de titre centré — plus le cas ici : le titre démarre au
   même point que sur Actualités/Blog. */
/* Gabarit "page de texte simple" (À propos, Contact, Accès réservé,
   Accès chercheur, Politique de confidentialité, CGU...) : le CORPS de
   page reste à une largeur de lecture confortable, cohérente sur
   toute la page (v9, point 31 : le bloc photo+contenu d'À propos ne
   dépasse jamais la largeur des paragraphes juste au-dessus, les deux
   étant le même conteneur) — sans affecter les pages de liste
   (Actualités/Blog), qui n'utilisent pas le conteneur .hc-page et ont
   besoin de toute la largeur pour leur grille de cartes. */
.hc-page > .hc-container.hc-section {
  max-width: 820px;
}
/* Largeur alignée sur celle des paragraphes du haut (7e passe, point 4) —
   ces derniers sont bridés à 70ch par la règle globale "p { max-width:
   70ch }" (ligne 124), mais ce bloc est un <div>, donc pas concerné par
   cette règle : sans ce max-width explicite, il s'étire sur toute la
   largeur du conteneur (jusqu'à 820px) et dépasse à droite par rapport
   aux paragraphes. Même valeur "70ch" que ceux-ci -> bord droit
   strictement identique, bord gauche inchangé (aucun des deux blocs
   n'a de centrage horizontal). */
.hc-about__founder { display: grid; grid-template-columns: 220px 1fr; gap: var(--hc-space-4); align-items: start; margin-top: var(--hc-space-4); max-width: 70ch; }
@media (max-width: 700px) { .hc-about__founder { grid-template-columns: 1fr; } }
.hc-about__founder img { border-radius: var(--hc-radius); }
.hc-form-field { margin-bottom: var(--hc-space-2); display: flex; flex-direction: column; gap: 0.4em; }
.hc-form-field label { font-weight: 600; font-size: var(--hc-size-small); }
.hc-form-field input,
.hc-form-field textarea {
  padding: 0.7em 0.8em;
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-sm);
  font-family: inherit;
  font-size: var(--hc-size-body);
  transition: border-color 150ms ease;
}
/* Bordure violette au focus (10e passe), même esprit que le champ de
   recherche déjà traité ainsi (.hc-search-panel input, plus haut) —
   s'ajoute à l'anneau de focus global, ne le remplace pas. */
.hc-form-field input:focus-visible,
.hc-form-field textarea:focus-visible { border-color: var(--hc-patient); }
.hc-form-note { font-size: var(--hc-size-small); color: var(--hc-text-muted); }
.hc-contact-methods { display: flex; flex-direction: column; gap: var(--hc-space-2); margin-block: var(--hc-space-3); }
.hc-required { color: var(--hc-patient); font-weight: 700; }
.hc-contact-social { display: flex; justify-content: center; gap: 1rem; margin-top: var(--hc-space-4); }
/* Même style que les icônes sociales du pied de page (6e passe,
   point 6) : fond rond visible + animation au survol, adapté au fond
   clair de cette page (le pied de page est sur fond sombre). */
.hc-contact-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hc-border);
  color: var(--hc-text);
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.hc-contact-social a:hover {
  background: var(--hc-patient);
  color: #fff;
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 18px rgba(124, 58, 237, .3);
}

/* Anciennement une classe dédiée (.hc-about__intro) posée directement
   sur le <p> codé en dur — depuis le passage de cette page à un vrai
   contenu WordPress (the_content(), 9e passe), le texte est du HTML
   libre édité au clavier sans classe particulière : on retrouve le même
   rendu par sélecteur de position (premier paragraphe du bloc d'intro),
   qui continue de fonctionner quel que soit le nombre de paragraphes
   ajoutés/retirés ensuite par l'administrateur. */
.hc-about__body > p:first-child { font-size: 1.2rem; font-weight: 600; color: var(--hc-text); margin-bottom: var(--hc-space-3); }

/* Même principe pour la citation d'ambition à côté de la photo du
   fondateur — auparavant un style inline sur le <p> codé en dur
   (font-style:italic; font-weight:600;), maintenant appliqué au
   dernier paragraphe du texte "fondateur" édité via the_content(). */
.hc-about__founder-text > p:last-child { font-style: italic; font-weight: 600; }
/* Texte justifié sur la page À propos (5e passe, point 18) — rendu
   jugé "pas encore au goût" du porteur de projet en bord droit
   irrégulier ; tous les paragraphes de texte de cette page seulement. */
.hc-about p { text-align: justify; }

/* Texte justifié sur les pages légales (Politique de confidentialité /
   CGU), même traitement que la page À propos (6e passe, point 11) —
   uniquement les paragraphes : les listes à puces restent alignées à
   gauche, un texte de liste justifié étant souvent moins lisible
   (espacement irrégulier entre les mots sur des lignes courtes). */
.hc-legal-content p { text-align: justify; }

/* Débordement à droite des listes à puces sur les pages légales (7e
   passe, point 5) — même cause que le bloc photo+texte de À propos
   (point 4) : la règle globale "p { max-width: 70ch }" (ligne 124)
   borne les <p>, mais un <ul> n'est pas concerné et s'étire alors
   jusqu'au bord du conteneur .hc-legal-content (jusqu'à 820px), au-delà
   du bord droit des paragraphes justifiés — mesuré réellement à 72px de
   trop (right des <li>/<ul> = 898 contre 826 pour les <p>, à 1024px de
   large). Même valeur "70ch" que les <p> -> bord droit des <ul>
   strictement identique à celui des paragraphes ; les <li>, blocs
   enfants qui remplissent la boîte de contenu du <ul>, s'alignent du
   même coup sur ce même bord droit. */
.hc-legal-content ul { max-width: 70ch; }

/* Pages légales (Politique de confidentialité / CGU) — liens mailto
   dans la couleur exacte du logo, avec un trait fin de soulignement
   dans cette même teinte (v9, point 37). Portée volontairement
   limitée à ces deux pages (voir page.php) : les liens mailto du pied
   de page restent blancs sur fond sombre. */
.hc-legal-content a[href^="mailto:"] {
  color: var(--hc-logo-purple);
  text-decoration: underline;
  text-decoration-color: var(--hc-logo-purple);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Audit responsive dédié (11e passe) — texte justifié repassé en
   alignement à gauche sous 640px : vérifié réellement à 375/390/412px
   (À propos, FAQ, Politique de confidentialité, CGU) via captures
   Playwright, la justification y crée un espacement de mots très
   irrégulier (colonne de lecture ~280-330px, trop étroite pour que le
   navigateur répartisse les espaces proprement) — au pire endroit,
   un numéro de téléphone coupé en fin de ligne justifiée. Revérifié à
   480/560/640px : dès 640px (plus large que .hc-page > .hc-container,
   qui plafonne à 820px sur grand écran) le rendu redevient régulier,
   d'où ce seuil, cohérent avec les autres points de rupture "mobile"
   déjà utilisés dans ce fichier (ex. .hc-blog-item, ligne ~1203).
   Ne touche à rien au-delà de 640px : le rendu desktop/tablette déjà
   validé (justify) est inchangé. */
@media (max-width: 640px) {
  .hc-about p,
  .hc-legal-content p,
  .hc-faq__answer p {
    text-align: left;
  }
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  clip: auto;
}

.hc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--hc-text);
  color: #fff;
  padding: 0.8em 1.2em;
  z-index: 100;
  border-radius: 0 0 var(--hc-radius-sm) 0;
}
.hc-skip-link:focus { left: 0; }

/* =========================================================
   Vignette d'illustration (Actualités/Blog) — v8
   Image mise en avant WordPress standard (the_post_thumbnail),
   avec repli propre si aucune image n'est définie : ici, comme pour
   hc-block--no-media, on omet simplement le bloc média plutôt que
   d'afficher un cadre gris vide ou une photo par défaut inventée.
   ========================================================= */
.hc-card__media {
  display: block;
  border-radius: var(--hc-radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--hc-bg-soft);
  margin-bottom: 0.25em;
}
.hc-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Page Actualités (archive) — grille 3 x 2, pagination réelle,
   carte entièrement cliquable (v8).
   ========================================================= */
.hc-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hc-space-3);
}
@media (max-width: 860px) { .hc-archive-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hc-archive-grid { grid-template-columns: 1fr; } }
.hc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-top: var(--hc-space-4);
  flex-wrap: wrap;
}
.hc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25em;
  height: 2.25em;
  padding-inline: 0.5em;
  border-radius: var(--hc-radius-sm);
  border: 1px solid var(--hc-border);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--hc-size-small);
  color: var(--hc-text);
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.hc-pagination .page-numbers.current { background: var(--hc-patient); border-color: var(--hc-patient); color: #fff; }
.hc-pagination .page-numbers.dots { border-color: transparent; }
.hc-pagination a.page-numbers:hover { border-color: var(--hc-patient); color: var(--hc-patient); background: var(--hc-patient-bg); transform: translateY(-1px); }

/* =========================================================
   Page Blog — liste empilée, plus récent en haut (v8).
   ========================================================= */
.hc-blog-list { display: flex; flex-direction: column; gap: var(--hc-space-4); max-width: 820px; margin-inline: auto; }
.hc-blog-item {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--hc-space-3);
  /* Contour de carte visible (6e passe, point 13) — même logique que
     la carte Actualités (voir .hc-card / a.hc-card--link ci-dessus) :
     bordure + ombre légère au survol, plutôt qu'un simple trait de
     séparation entre éléments empilés. */
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius);
  padding: var(--hc-space-3);
  box-shadow: var(--hc-shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  /* Bloc entièrement cliquable (point 14) : l'élément racine est
     maintenant le <a> lui-même, pas une <article> contenant des liens
     imbriqués — texte hérité, jamais souligné par défaut. */
  text-decoration: none;
  color: inherit;
}
.hc-blog-item:hover {
  border-color: var(--hc-patient);
  box-shadow: var(--hc-shadow-md);
  transform: translateY(-3px);
}
.hc-blog-item--no-media { grid-template-columns: 1fr; }
.hc-blog-item .hc-card__media { aspect-ratio: 4 / 3; margin-bottom: 0; border-radius: var(--hc-radius-sm); overflow: hidden; }
@media (max-width: 640px) {
  .hc-blog-item { grid-template-columns: 1fr; }
  .hc-blog-item .hc-card__media { aspect-ratio: 16 / 9; }
}
.hc-blog-item__title { margin: 0 0 0.35em; font-size: 1.3rem; }
.hc-blog-item__excerpt { color: var(--hc-text-muted); }
.hc-blog-item__more {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--hc-patient);
  font-weight: 600;
  font-size: var(--hc-size-small);
}
.hc-blog-item__more::after { content: '\2192'; }
/* Repère visuel au survol de TOUT le bloc (plus seulement du titre ou
   de "Lire plus" pris isolément), cohérent avec le fait que le bloc
   entier est désormais cliquable. */
.hc-blog-item:hover .hc-blog-item__title,
.hc-blog-item:hover .hc-blog-item__more { text-decoration: underline; }

/* Bloc infos article : auteur, date, catégorie, vues — icônes +
   libellé, séparés par un point médian discret. */
.hc-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3em 0.9em;
  color: var(--hc-text-muted);
  font-size: var(--hc-size-small);
  margin: 0.3em 0 0.6em;
}
.hc-post-meta__item { display: inline-flex; align-items: center; gap: 0.35em; }
.hc-post-meta__item svg { flex: none; width: 15px; height: 15px; opacity: 0.75; }

/* Bouton "j'aime" d'un article de Blog (10/09/2026, remplace les
   commentaires — voir single-post.php, inc/likes.php). Couleur du
   cœur alignée sur celle déjà utilisée pour ce même symbole ailleurs
   sur le site (bloc Patient de l'accueil, --hc-patient). */
.hc-like { margin: 2rem 0 0; }
.hc-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 1.5px solid var(--hc-border);
  border-radius: 999px;
  background: #fff;
  padding: 0.5em 1.1em;
  font: inherit;
  font-weight: 600;
  color: var(--hc-text);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.hc-like-btn:hover { border-color: var(--hc-patient); }
.hc-like-btn:disabled { opacity: 0.7; cursor: default; }
.hc-like-btn__icon { flex: none; width: 20px; height: 20px; transition: fill 150ms ease, stroke 150ms ease, transform 150ms ease; }
.hc-like-btn.is-liked { border-color: var(--hc-patient); background: var(--hc-patient-bg); }
.hc-like-btn.is-liked .hc-like-btn__icon { fill: var(--hc-patient); stroke: var(--hc-patient); animation: hc-like-pop 380ms ease; }
@keyframes hc-like-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hc-like-btn.is-liked .hc-like-btn__icon { animation: none; }
}

/* =========================================================
   Page Accès chercheur — deux blocs de premier niveau, nettement
   distincts (v8).
   ========================================================= */
.hc-chercheur-steps { display: flex; flex-direction: column; gap: var(--hc-space-3); }
.hc-chercheur-step {
  border: 1.5px solid var(--hc-border);
  border-radius: var(--hc-radius-lg);
  padding: var(--hc-space-3);
  background: var(--hc-chercheur-bg);
  box-shadow: var(--hc-shadow-sm);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.hc-chercheur-step:hover { box-shadow: var(--hc-shadow-md); transform: translateY(-2px); }
.hc-chercheur-step__title { display: flex; align-items: center; gap: 0.6em; margin-bottom: 0.5em; }
.hc-chercheur-step__number {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--hc-chercheur);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hc-chercheur-step h2 { margin: 0; }

/* =========================================================
   Bouton flottant "retour en haut" (v9, point 5).
   ========================================================= */
.hc-back-to-top {
  position: fixed;
  right: var(--hc-space-3);
  bottom: var(--hc-space-3);
  z-index: 40;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--hc-patient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--hc-shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, background-color 120ms ease, box-shadow 180ms ease;
}
.hc-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* pointer-events: none tant que le bouton n'est pas .is-visible évite
   tout déclenchement de :hover pendant qu'il est encore hors écran —
   la règle ci-dessous ne s'applique donc en pratique qu'une fois visible. */
.hc-back-to-top:hover { background: #6829d1; box-shadow: var(--hc-shadow-lg), 0 6px 16px rgba(124, 58, 237, .3); }
.hc-back-to-top.is-visible:hover { transform: translateY(-2px); }
@media (max-width: 560px) {
  .hc-back-to-top { right: var(--hc-space-2); bottom: var(--hc-space-2); width: 42px; height: 42px; }
}