/**
 * Personnalisations Phinyx — septembre 2026.
 *
 * CSS NATIF VOLONTAIREMENT : le Tailwind du thème est pré-compilé
 * (style-tailwind.css) et node_modules est absent. Une classe `tw-` ajoutée
 * dans un template ne produirait aucun style. Voir inc/phinyx-custom.php.
 *
 * Sommaire
 *   1. En-tête mobile (logo invisible + burger hors écran)
 *   2. Titre d'article sur petit écran
 *   3. Cadrage des vignettes d'articles
 *   4. Ancres « Nos prestations » + ouverture de la bonne carte
 *   5. FAQ crawlable mais non visible
 */

/* ==========================================================================
   1. EN-TÊTE MOBILE
   --------------------------------------------------------------------------
   Relevé de l'existant (largeur du logo / bord droit du burger) :

       320-430px   logo   0 px      burger à 417 px   HORS ÉCRAN
       430-500px   logo  20-64 px   burger OK
       500-767px   logo  64 px      burger OK
       768px et +  logo 173 px      burger OK

   Deux défauts distincts, donc deux portées distinctes :

   · Jusqu'à 767 px la colonne du logo s'écrase (`tw-w-fit` sur un enfant en
     `tw-w-full`, et le `md:tw-w-1/5` qui devait la tenir ne s'applique qu'à
     partir de 768 px) — sous 430 px le logo disparaît complètement, alors que
     c'est le seul lien de retour vers l'accueil.

   · Sous 500 px, le bouton « Réservez votre audit » (180 px) et les deux
     pastilles contact (321 px à eux trois) poussent le burger jusqu'à 417 px :
     menu mobile inatteignable, plus aucune navigation possible.

   Au-delà de 768 px, RIEN n'est touché : la bande d'en-tête desktop reste
   pixel pour pixel identique (vérifié par diff d'image à 1280 et 1440 px).
   ========================================================================== */

@media (max-width: 767px) {
  /* La colonne du logo reprend une largeur réelle. */
  #site-header-13 .phinyx-nav-logo {
    width: 112px;
    min-width: 112px;
    flex: 0 0 auto;
    padding: 0.4rem 0.6rem;
  }

  #site-header-13 .phinyx-nav-logo > a.logo {
    position: relative;
    width: 100%;
    height: 100%;
  }

  #site-header-13 .phinyx-nav-logo > a.logo img {
    height: 58px;
    width: auto;
    max-width: 100%;
    padding: 0;
  }

  /* Zone contact et burger : chacune sa place, plus de débordement. */
  #site-header-13 .phinyx-nav-contact,
  #site-header-13 .phinyx-nav-burger {
    flex: 0 0 auto;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  #site-header-13 .phinyx-nav-contact {
    gap: 0.4rem;
  }
}

/* Sous 500 px : on garde le bouton de réservation (c'est la conversion) et on
   retire les pastilles e-mail/téléphone, redondantes avec le pied de page. */
@media (max-width: 499px) {
  #site-header-13 .phinyx-nav-logo {
    width: 104px;
    min-width: 104px;
  }

  #site-header-13 .phinyx-nav-logo > a.logo img {
    height: 50px;
  }

  #site-header-13 .phinyx-nav-contact .phinyx-nav-pastille {
    display: none;
  }

  #site-header-13 a.contactButton.phinyx-nav-cta {
    width: auto;
    min-width: 0;
    margin-right: 0;
    padding: 0.6rem 0.9rem;
    font-size: 0.78rem;
    line-height: 1.15;
    text-align: center;
  }
}

/* ==========================================================================
   2. TITRE D'ARTICLE SUR PETIT ÉCRAN
   --------------------------------------------------------------------------
   `tw-text-[3.5rem]` / `tw-leading-[4rem]` sont fixes : sur un quiz au titre
   long (« Quiz — Quel médecin êtes-vous ? ») le texte débordait de sa colonne.
   ========================================================================== */

.entry-content .entry-header h1 {
  /* Plafond à 3.5rem = la valeur d'origine exacte : le desktop ne bouge pas
       d'un pixel, seuls les petits écrans réduisent. */
  font-size: clamp(28px, 8vw, 3.5rem);
  line-height: 1.15;
  overflow-wrap: break-word;
}

/* ==========================================================================
   3. CADRAGE DES VIGNETTES D'ARTICLES
   --------------------------------------------------------------------------
   Les visuels de quiz sont des carrés 1024×1024 (avec une bande blanche morte
   en bas) affichés dans une carte en arche au ratio 1/1.5 : `object-cover`
   rognait ~175 px de chaque côté (boussole et stéthoscope coupés).
   On ancre le cadrage en haut — le titre du visuel est en haut, la bande morte
   en bas — et on adoucit le ratio sur mobile pour diviser le rognage par trois.
   Vaut pour l'archive, le bloc blog et le bloc « Nos derniers articles ».
   ========================================================================== */

a[class*="tw-aspect-[1/1.5]"] .zoom > img {
  object-position: center top;
}

@media (max-width: 767px) {
  a[class*="tw-aspect-[1/1.5]"] {
    aspect-ratio: 1 / 1.15;
  }
}

/* ==========================================================================
   4. ANCRES « NOS PRESTATIONS »
   --------------------------------------------------------------------------
   L'en-tête est en `position:fixed` : sans marge de défilement, l'ancre arrive
   sous le bandeau. `scroll-margin-top` s'en charge nativement.
   La classe `.is-open`, posée par js/phinyx-custom.js quand l'URL cible une
   carte, rejoue l'état de survol pour révéler la bonne prestation.
   ========================================================================== */

.phinyx-presta-section,
.phinyx-presta-card {
  scroll-margin-top: 130px;
}

/* Sélecteur en descendant, pas en enfant direct : la vignette est un <a> ou un
   <div> selon le champ « Cacher les liens ? » du bloc. Il n'y a qu'un panneau
   par carte, donc aucune ambiguïté. */
.phinyx-presta-card.is-open .phinyx-presta-panel {
  bottom: 100%;
}

@media (min-width: 768px) {
  /* Le survol Tailwind ne fait que réécrire cette variable : on l'imite,
       plutôt que d'écraser `transform` et de perdre la transition. */
  .phinyx-presta-card.is-open .phinyx-presta-inner {
    --tw-translate-y: 40%;
  }
}

/* ==========================================================================
   5. FAQ CRAWLABLE MAIS NON VISIBLE
   --------------------------------------------------------------------------
   Le bloc FAQ du modèle 13 est déjà rendu en modale : `#modalFaq` est en
   `visibility:hidden` et ne s'ouvre qu'au clic sur la pastille flottante.
   Retirer la pastille suffit donc à rendre la FAQ inatteignable, SANS
   `display:none` sur le contenu — qui reste dans le DOM, donc lisible par les
   robots, exactement comme un accordéon replié.
   `pointer-events:none` est une ceinture de sécurité au cas où un script
   tierce retirerait la classe d'invisibilité.
   ========================================================================== */

body.phinyx-faq-seo-only .modalFaq {
  display: none !important;
}

/* Verrou : `openFaq()` retire la classe d'invisibilité du thème. Comme le
   lanceur n'est plus cliquable, seul un script pourrait encore l'appeler — on
   maintient donc l'état masqué en dur. `visibility:hidden` (et jamais
   `display:none`) : c'est déjà l'état par défaut de cette modale sur TOUTES les
   pages du site, on ne fait que le rendre définitif ici. Le texte reste dans le
   DOM et indexable. */
body.phinyx-faq-seo-only #modalFaq,
body.phinyx-faq-seo-only #modalFaq.tw-invisible {
  visibility: hidden !important;
  pointer-events: none !important;
}