/*
 * Page « Pour les pharmacien·nes & infirmier·ères » — styles.
 *
 * Repris du prototype « pharmaciens », chargés UNIQUEMENT sur le gabarit
 * template-pharmaciens.php (voir inc/enqueue.php). Tout est scopé sous « .ph-page » : plusieurs
 * classes (.wrap, .hl, .eyebrow, .kick, .sec-title, .reveal, .sfield, .f-select-wrap,
 * .contact-card, .contact-row) sont partagées avec d'autres pages du site et ne doivent fuir ni
 * vers elles, ni vers l'en-tête, ni vers le pied de page. Les polices « Anton » et « Open Sans »
 * sont fournies globalement par style.css (@font-face + enqueue) → non redéclarées ici.
 *
 * Écarts assumés par rapport au prototype (rendu identique, feuille sans code mort) :
 *   • le prototype scopait ses styles sous « .contact-page » (sa feuille avait été copiée depuis
 *     la page Contact) : le gabarit pose « .ph-page », qui porte le même habillage ;
 *   • la PREMIÈRE section en flux reçoit le retrait haut qui dégage l'en-tête fixe du site. Le
 *     prototype s'affichait sans en-tête : sa bannière partait du haut de la page et se
 *     retrouverait cachée derrière la barre de navigation, qui est opaque (voir « Dégagement de
 *     l'en-tête » plus bas) ;
 *   • la BARRE DE FILTRES collante se cale SOUS l'en-tête fixe (« top » = hauteur de l'en-tête),
 *     là où le prototype la collait à 0 : sans en-tête, elle y disparaîtrait derrière la barre de
 *     navigation. Elle reste sous l'en-tête dans l'ordre de peinture (z-index 40 contre 1000) ;
 *   • les COULEURS posées par CLASSE (« .ord-card.sti », « .derma », « .protocol » pour le filet
 *     de gauche et la pastille) sont remplacées par la variable « --ph-ord-color », servie en
 *     style en ligne. La couleur vient de la THÉMATIQUE de l'ordonnance (champ ACF « couleur » du
 *     terme, comme partout sur le site) : la feuille ne connaît donc pas la liste des
 *     thématiques, et une thématique ajoutée au back-office arrive avec sa couleur sans toucher
 *     au CSS ;
 *   • les couleurs des cartes de clinique, elles, passent de « :nth-child(1) / (2) » à la
 *     variable « --ph-clin-bg », calculée sur le RANG AFFICHÉ (voir MDM_PH_CLIN_COLORS,
 *     inc/acf-pharmaciens.php). Une carte vidée au back-office n'est pas rendue : un
 *     « nth-child » décalerait alors toute la palette, et une troisième carte n'aurait aucune
 *     couleur. Le libellé du bouton reprend la même variable, comme dans le prototype ;
 *   • le POINT MÉDIAN devant la date (« .oc-date::before ») ne s'affiche plus que si la mention
 *     des cliniques le précède réellement (« .oc-meta + .oc-date »). Le prototype le posait sans
 *     condition : une ordonnance sans clinique cochée aurait affiché « · En vigueur depuis… »,
 *     un séparateur orphelin ;
 *   • la carte d'ordonnance est réellement CLIQUABLE quand un fichier est joint (classe
 *     « .ord-card--link », posée par le gabarit). Le prototype lui donnait « cursor: pointer »
 *     sans jamais traiter le clic : la main annonçait une action inexistante. Sans fichier, ni
 *     curseur main, ni clic (voir pharmaciens.js) ;
 *   • le FOCUS clavier est reposé après les « outline: none » du prototype, sur le menu, la
 *     recherche et les liens. Une neutralisation du liseré rend la page inutilisable au clavier,
 *     et à spécificité égale c'est la dernière règle du fichier qui gagne ;
 *   • LIENS : style.css pose « a { display: block } » pour tout le site, et le scope de la page
 *     remet « text-decoration: none » et « color: inherit ». Chaque lien reçoit donc ici un
 *     « display » explicite, et le libellé d'un bouton plein garde sa couleur au survol (aucun
 *     « a:hover » global ne doit pouvoir le repeindre) ;
 *   • la classe de masquage du filtrage est « .is-hidden » et non « .hidden » : la page emploie
 *     par ailleurs l'ATTRIBUT « hidden » (message « aucun résultat »), et deux mécanismes
 *     homonymes finiraient par se confondre. Même nom que sur la page Espace média ;
 *   • l'icône de la recherche est celle du thème (assets/svgs/header/magnifying-glass.svg) :
 *     vérifié identique au tracé du prototype, il n'y avait pas d'asset à ajouter ;
 *   • ne sont PAS reprises de la feuille du prototype, faute d'être posées par son balisage : le
 *     @font-face d'Anton (global), le box-sizing global (scopé ici), le lissage de défilement et
 *     le masquage des barres de défilement sur « html » (qui fuiraient sur tout le site), le
 *     bloc de définition de la bannière (.def-box, .def-title, .ph-links), les deux boutons
 *     génériques (.btn-orange, .btn-ghost-line) et cinq sections entières héritées d'une autre
 *     maquette (.ph-gallery/.gal-cell, .ph-actu/.actu-*, .ph-publi/.publi-*, .ph-engage/.eng-*,
 *     .ph-don/.don-*) ;
 *   • sans JavaScript, les blocs « .reveal » sont visibles d'office (@media scripting: none) ;
 *     l'apparition est aussi neutralisée en « mouvement réduit ». Aucun contenu ne peut rester
 *     invisible faute de script.
 */

/* ============================================================================
 * Cadre de la page
 * ========================================================================= */

.ph-page,
.ph-page *,
.ph-page *::before,
.ph-page *::after {
  box-sizing: border-box;
}
.ph-page {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  color: #1d1a55;
  background: #fff;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.ph-page p {
  margin: 0;
}
.ph-page a {
  text-decoration: none;
  color: inherit;
}
.ph-page input,
.ph-page select {
  font-family: inherit;
}
.ph-page .wrap {
  max-width: none;
  margin: 0;
  padding: 0 var(--ph-gutter);
}

/* ============================================================================
 * Dégagement de l'en-tête
 *
 * L'en-tête du thème est en position:fixed et opaque : sans retrait, il recouvrirait le haut de
 * la première section. Le retrait est porté par la première section EN FLUX, quelle qu'elle
 * soit : la bannière d'ordinaire, la barre de filtres si la bannière est entièrement vidée au
 * back-office.
 *
 * L'en-tête n'a pas une hauteur unique : la bande d'alerte qui le surmonte s'affiche ou non
 * selon un interrupteur du back-office (« alert_show »). Les deux états sont traités, au lieu
 * de réserver toujours la hauteur maximale : sinon un ruban blanc s'intercalerait entre la
 * barre de navigation et la bannière dès que la bande d'alerte est masquée.
 *
 * Hauteurs mesurées, en pixels :
 *
 *                    sans la bande   avec la bande
 *   ≥ 1280 px             104             146
 *   ≤ 1279 px              59             101
 *
 * La bannière a son propre retrait haut (76 px dans le prototype) : les deux s'ajoutent, la
 * variable « --ph-head » portant la seule part de l'en-tête. C'est aussi elle qui donne son
 * « top » à la barre de filtres collante — les deux valeurs ne peuvent donc pas se désaccorder.
 * ========================================================================= */

.ph-page {
  --ph-head: 104px;
  --ph-gutter: 26px;
}
body:has(.alert-section) .ph-page {
  --ph-head: 146px;
}
.ph-page > :first-child {
  padding-top: var(--ph-head);
}
/* Si la bannière est entièrement vidée au back-office, la première section en flux devient la
   barre de filtres — qui est COLLANTE. Un retrait interne la ferait mesurer 104 px de plus et
   s'additionnerait à son « top ». Elle reçoit donc une marge EXTERNE, qui dégage l'en-tête sans
   la gonfler. */
.ph-page > .filter-zone:first-child {
  padding-top: 0;
  margin-top: var(--ph-head);
}

/* ============================================================================
 * Éléments communs : pastille, sur-titre, grands titres, apparitions
 * ========================================================================= */

.ph-page .ph-hero .title .section-tag {
  z-index: 2;
  left: 0;
  top: -53px;
}
.ph-page .sec-title {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #1d1a55;
}
.ph-page .sec-title .hl {
  background: linear-gradient(#bddfec, #bddfec) no-repeat;
  background-size: 100% 52%;
  background-position: 0 72%;
}
.ph-page .kick {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #e9511c;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ph-page .kick::before {
  content: '';
  width: 22px;
  height: 2px;
  background: #e9511c;
  border-radius: 2px;
}

@keyframes ph-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ph-page .hr {
  animation: ph-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.ph-page .hr2 {
  animation-delay: 0.12s;
}
.ph-page .hr3 {
  animation-delay: 0.22s;
}
.ph-page .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ph-page .reveal.in {
  opacity: 1;
  transform: none;
}

/* ============================================================================
 * Bannière — pastille, grand titre, chapeau
 * ========================================================================= */

.ph-page .ph-hero {
  position: relative;
  overflow: hidden;
  background: #055da8;
  color: #fff;
}
.ph-page .ph-hero .wrap {
  position: relative;
  z-index: 1;
  padding-top: 76px;
  padding-bottom: 70px;
}
/* La bannière porte le dégagement de l'en-tête : il s'ajoute à son retrait propre, sur le
   conteneur qui porte celui-ci (la section, elle, n'a pas de retrait). */
.ph-page > .ph-hero:first-child {
  padding-top: 0;
}
.ph-page > .ph-hero:first-child .wrap {
  padding-top: calc(var(--ph-head) + 96px);
}
.ph-page .ph-hero h1 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(42px, 5.4vw, 84px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.ph-page .ph-hero h1 .hl {
  color: #bddfec;
}
.ph-page .ph-lead {
  font-size: 17px;
  line-height: 1.75;
  color: #dbe8f5;
  max-width: 600px;
}

/* ============================================================================
 * Barre de filtres — menu « thématique », recherche, compteur
 * ========================================================================= */

.ph-page .filter-zone {
  position: sticky;
  top: var(--ph-head);
  z-index: 40;
  background: #fff;
  border-top: 1px solid #e1e8f3;
  border-bottom: 1px solid #e1e8f3;
}
.ph-page .filter-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  padding: 14px var(--ph-gutter);
  flex-wrap: wrap;
}
.ph-page .filter-left,
.ph-page .filter-right {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.ph-page .f-label {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #8a90ad;
  white-space: nowrap;
}
.ph-page .f-select-wrap {
  position: relative;
}
.ph-page .f-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 40px 10px 18px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
  font-weight: 400;
  color: #055da8;
  border: 1px solid #055da8;
  border-radius: 50px;
  background: #fff;
  cursor: pointer;
  outline: none;
  height: 40px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.ph-page .f-select-wrap select:hover {
  border-color: #055da8;
  background: #eef6fb;
}
.ph-page .f-select-wrap select:focus {
  border-color: #055da8;
  box-shadow: 0 0 0 3px rgba(5, 93, 168, 0.15);
}
.ph-page .f-select-wrap .f-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #055da8;
  pointer-events: none;
}
.ph-page .sfield {
  position: relative;
}
.ph-page .sfield input {
  border: 1px solid #cfd9e8;
  border-radius: 50px;
  padding: 9px 16px 9px 38px;
  font-size: 14px;
  background: #fff;
  outline: none;
  width: 220px;
  max-width: 100%;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.ph-page .sfield input:focus {
  border-color: #055da8;
  box-shadow: 0 0 0 3px rgba(5, 93, 168, 0.15);
}
.ph-page .sfield::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url('../svgs/header/magnifying-glass.svg') center/contain no-repeat;
  opacity: 0.55;
}

/* ============================================================================
 * Les ordonnances — cartes, pastille de thématique, bouton de téléchargement
 * ========================================================================= */

.ph-page .ph-ord {
  padding: 64px 0 80px;
}
.ph-page .ord-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.ph-page .ord-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 6px;
}
.ph-page .ord-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border: 1px solid #c9d3e0;
  border-left-width: 4px;
  /* Couleur de la thématique, servie en style en ligne par le gabarit ; le bleu du site sert de
     repli, comme dans le prototype. */
  border-left-color: var(--ph-ord-color, #055da8);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
}
/* La main n'apparaît que sur une carte réellement cliquable — celle qui porte un fichier. */
.ph-page .ord-card--link {
  cursor: pointer;
}
.ph-page .ord-card:hover,
.ph-page .ord-card:focus-within {
  transform: rotate(-0.8deg);
  box-shadow: 0 16px 36px rgba(13, 16, 50, 0.1);
}
.ph-page .ord-card.is-hidden {
  display: none;
}
/* Le titre et la mention restent l'un SOUS l'autre, dans la première colonne, que la carte porte
   un bouton ou non. Sans cette contrainte, une carte sans bouton (aucun fichier joint) laisse la
   deuxième colonne libre : la grille y place alors la mention « cliniques · date », qui remonte
   en haut à droite au lieu de suivre le titre. Le prototype ne montrait pas le défaut — toutes
   ses cartes avaient un bouton, qui occupait la colonne. */
.ph-page .oc-head,
.ph-page .oc-body {
  grid-column: 1;
}
.ph-page .oc-head {
  padding: 24px 30px 0;
}
.ph-page .oc-theme {
  display: inline-block;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--ph-ord-color, #055da8);
  border-radius: 4px;
  padding: 5px 11px;
  margin-bottom: 12px;
}
.ph-page .oc-head h3 {
  font-family: 'Open Sans', sans-serif;
  text-transform: none;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #1d1a55;
  text-wrap: pretty;
}
.ph-page .oc-body {
  padding: 11px 30px 24px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
}
.ph-page .oc-meta,
.ph-page .oc-date {
  font-size: 14px;
  font-weight: 500;
  color: #5b6078;
}
/* Séparateur porté par la DATE, donc seulement quand une mention la précède (voir l'en-tête). */
.ph-page .oc-meta + .oc-date::before {
  content: '· ';
}
.ph-page .oc-foot {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: flex;
  align-items: center;
  padding: 0 24px 0 0;
}
.ph-page .oc-dl {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #e9511c;
  color: #fff;
  border: 1px solid #e9511c;
  border-radius: 5px;
  padding: 12px 22px;
  font-family: 'Open Sans', sans-serif;
  text-transform: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.ph-page .ord-card:hover .oc-dl,
.ph-page .ord-card:focus-within .oc-dl {
  background: #fff;
  color: #e9511c;
}
.ph-page .ord-empty {
  padding: 60px 0;
  text-align: center;
  font-size: 16px;
  color: #8a90ad;
}

/* ============================================================================
 * Nos cliniques — cartes de renvoi
 * ========================================================================= */

.ph-page .ph-clin {
  padding: 0 0 80px;
}
.ph-page .clin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ph-page .clin-card {
  position: relative;
  /* Couleur du rang affiché, servie en style en ligne par le gabarit (voir l'en-tête). */
  background: var(--ph-clin-bg, #1d1a55);
  border-radius: 10px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s;
}
.ph-page a.clin-card {
  color: #fff;
}
.ph-page .clin-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(29, 26, 85, 0.18);
}
.ph-page .clin-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ph-page .clin-tag {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85);
}
.ph-page .clin-card h3 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(26px, 2.4vw, 32px);
  letter-spacing: 0.005em;
  color: #fff;
  line-height: 1.02;
}
.ph-page .clin-card p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}
.ph-page .clin-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 26px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  /* Le libellé reprend la couleur de la carte, comme dans le prototype. */
  color: var(--ph-clin-bg, #1d1a55);
  transition: background-color 0.3s, color 0.3s;
}
.ph-page .clin-card:hover .clin-btn {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* ============================================================================
 * Carte de contact
 * ========================================================================= */

.ph-page .ph-contact {
  padding: 0 0 44px;
}
.ph-page .contact-card {
  position: relative;
  overflow: hidden;
  background: #1d1a55;
  border-radius: 24px;
  padding: 60px 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  color: #fff;
}
.ph-page .contact-card .k {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #ff7a45;
  margin-bottom: 16px;
}
.ph-page .contact-card h2 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 0.98;
  margin-bottom: 14px;
}
.ph-page .contact-card h2 .hl {
  color: #bddfec;
}
.ph-page .contact-card p {
  font-size: 16px;
  line-height: 1.7;
  color: #c4cde3;
  max-width: 560px;
}
.ph-page .contact-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 300px;
}
.ph-page .contact-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  transition: background-color 0.25s;
}
.ph-page a.contact-row:hover {
  background: rgba(255, 255, 255, 0.14);
}
.ph-page .contact-row .ck {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #9fb4d6;
}
.ph-page .contact-row .cv {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ============================================================================
 * Responsive (reprend les paliers du prototype)
 * ========================================================================= */

@media (max-width: 1279px) {
  .ph-page {
    --ph-head: 59px;
    --ph-gutter: 10px;
  }
  body:has(.alert-section) .ph-page {
    --ph-head: 101px;
  }
}

@media (max-width: 1040px) {
  .ph-page .clin-grid {
    grid-template-columns: 1fr;
  }
  .ph-page .contact-card {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 44px 30px;
  }
  .ph-page .contact-rows {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .ph-page .filter-bar {
    padding: 12px var(--ph-gutter);
  }
  .ph-page .filter-right {
    margin-left: 0;
    width: 100%;
  }
  .ph-page .sfield {
    flex: 1;
  }
  .ph-page .sfield input {
    width: 100%;
  }
  .ph-page .ph-hero .wrap {
    padding-top: 56px;
    padding-bottom: 52px;
  }
  .ph-page > .ph-hero:first-child .wrap {
    padding-top: calc(var(--ph-head) + 56px);
  }
  .ph-page .ord-card {
    grid-template-columns: 1fr;
  }
  .ph-page .oc-foot {
    grid-row: auto;
    grid-column: 1;
    padding: 0 30px 24px;
  }
  /* Les cartes de clinique passent en carrousel horizontal, comme dans le prototype. */
  .ph-page .clin-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--ph-gutter) * -1);
    padding: 0 var(--ph-gutter) 10px;
    scroll-padding-left: var(--ph-gutter);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .ph-page .clin-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .ph-page .clin-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
  .ph-page .contact-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ============================================================================
 * Focus clavier
 *
 * Le prototype neutralise le liseré du menu et de la recherche (« outline: none ») : la page
 * devenait inutilisable au clavier. Le focus est donc reposé ICI, après ces déclarations — à
 * spécificité égale, c'est la dernière règle du fichier qui gagne. Même correctif que sur la
 * page Espace média.
 * ========================================================================= */

.ph-page .f-select-wrap select:focus-visible,
.ph-page .sfield input:focus-visible,
.ph-page .oc-dl:focus-visible,
.ph-page a.clin-card:focus-visible,
.ph-page a.contact-row:focus-visible {
  outline: 3px solid #e9511c;
  outline-offset: 3px;
}
.ph-page .ord-card--link:focus-visible {
  outline: 3px solid #e9511c;
  outline-offset: 3px;
}

/* ============================================================================
 * Mouvement réduit et absence de script
 *
 * ⚠ Ces deux blocs neutralisent des déclarations posées plus haut avec la MÊME spécificité : ils
 * doivent rester EN FIN DE FEUILLE, sinon ils perdent (à spécificité égale, c'est l'ordre du
 * fichier qui tranche) et les contenus animés resteraient invisibles sans script.
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .ph-page .hr,
  .ph-page .reveal,
  .ph-page .reveal.in {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ph-page .ord-card,
  .ph-page .clin-card {
    transition: none;
  }
  .ph-page .ord-card:hover,
  .ph-page .ord-card:focus-within,
  .ph-page .clin-card:hover {
    transform: none;
  }
}

@media (scripting: none) {
  .ph-page .reveal,
  .ph-page .reveal.in {
    opacity: 1;
    transform: none;
  }
  /* Sans script, le filtrage n'existe pas : toutes les cartes s'affichent, et la barre de
     filtres n'a plus rien à piloter. */
  .ph-page .ord-card.is-hidden {
    display: grid;
  }
  .ph-page .filter-zone {
    display: none;
  }
}

@media (max-width: 1279px) {
  .ph-page .ph-hero .title .section-tag {
    top: -39px;
  }
}

@media (max-width: 767px) {
  .ph-page .ph-hero .title .section-tag {
    top: -34px;
  }
}

@media (min-width: 1700px) {
  .ph-page {
    --ph-head: 7.2227vw;
    --ph-gutter: 1.8057vw;
  }
  body:has(.alert-section) .ph-page {
    --ph-head: 10.1395vw;
  }
  .ph-page .ph-hero .title .section-tag {
    top: -3.6808vw;
  }
  .ph-page .sec-title {
    font-size: clamp(1.9446vw, 3.6vw, 3.1946vw);
  }
  .ph-page .kick {
    font-size: 0.9723vw;
    margin-bottom: 0.9723vw;
    gap: 0.6945vw;
  }
  .ph-page .kick::before {
    width: 1.5279vw;
    height: 0.1389vw;
    border-radius: 0.1389vw;
  }
  .ph-page .reveal {
    transform: translateY(1.5279vw);
  }
  .ph-page .ph-hero .wrap {
    padding-top: 5.2781vw;
    padding-bottom: 4.8614vw;
  }
  .ph-page > .ph-hero:first-child .wrap {
    padding-top: calc(var(--ph-head) + 6.6671vw);
  }
  .ph-page .ph-hero h1 {
    font-size: clamp(2.9168vw, 5.4vw, 5.8337vw);
    margin-bottom: 1.5279vw;
  }
  .ph-page .ph-lead {
    font-size: 1.1806vw;
    max-width: 41.6692vw;
  }
  .ph-page .filter-zone {
    border-top: 0.0694vw solid #e1e8f3;
    border-bottom: 0.0694vw solid #e1e8f3;
  }
  .ph-page .filter-bar {
    gap: 1.2501vw;
    padding: 0.9723vw var(--ph-gutter);
  }
  .ph-page .filter-left,
  .ph-page .filter-right {
    gap: 0.6945vw;
  }
  .ph-page .f-label {
    font-size: 0.9723vw;
  }
  .ph-page .f-select-wrap select {
    padding: 0.6945vw 2.7779vw 0.6945vw 1.2501vw;
    font-size: 0.9028vw;
    border: 0.0694vw solid #055da8;
    border-radius: 3.4724vw;
    height: 2.7779vw;
  }
  .ph-page .f-select-wrap select:focus {
    box-shadow: 0 0 0 0.2083vw rgba(5, 93, 168, 0.15);
  }
  .ph-page .f-select-wrap .f-arrow {
    right: 0.9723vw;
    font-size: 0.7639vw;
  }
  .ph-page .sfield input {
    border: 0.0694vw solid #cfd9e8;
    border-radius: 3.4724vw;
    padding: 0.625vw 1.1112vw 0.625vw 2.639vw;
    font-size: 0.9723vw;
    width: 15.2787vw;
  }
  .ph-page .sfield input:focus {
    box-shadow: 0 0 0 0.2083vw rgba(5, 93, 168, 0.15);
  }
  .ph-page .sfield::before {
    left: 0.9723vw;
    width: 0.9723vw;
    height: 0.9723vw;
  }
  .ph-page .ph-ord {
    padding: 4.4447vw 0 5.5559vw;
  }
  .ph-page .ord-head {
    gap: 2.2224vw;
    margin-bottom: 2.5002vw;
  }
  .ph-page .ord-grid {
    gap: 1.1112vw;
    padding-top: 0.4167vw;
  }
  .ph-page .ord-card {
    border: 0.0694vw solid #c9d3e0;
    border-left-width: 0.2778vw;
    border-radius: 0.2778vw;
  }
  .ph-page .ord-card:hover,
  .ph-page .ord-card:focus-within {
    box-shadow: 0 1.1112vw 2.5002vw rgba(13, 16, 50, 0.1);
  }
  .ph-page .oc-head {
    padding: 1.6668vw 2.0835vw 0;
  }
  .ph-page .oc-theme {
    font-size: 0.9723vw;
    border-radius: 0.2778vw;
    padding: 0.3472vw 0.7639vw;
    margin-bottom: 0.8334vw;
  }
  .ph-page .oc-head h3 {
    font-size: clamp(1.2501vw, 1.7vw, 1.5973vw);
  }
  .ph-page .oc-body {
    padding: 0.7639vw 2.0835vw 1.6668vw;
    gap: 0.6945vw;
  }
  .ph-page .oc-meta,
  .ph-page .oc-date {
    font-size: 0.9723vw;
  }
  .ph-page .oc-foot {
    padding: 0 1.6668vw 0 0;
  }
  .ph-page .oc-dl {
    gap: 0.8334vw;
    border: 0.0694vw solid #e9511c;
    border-radius: 0.3472vw;
    padding: 0.8334vw 1.5279vw;
    font-size: 0.9723vw;
  }
  .ph-page .ord-empty {
    padding: 4.1669vw 0;
    font-size: 1.1112vw;
  }
  .ph-page .ph-clin {
    padding: 0 0 5.5559vw;
  }
  .ph-page .clin-grid {
    gap: 1.2501vw;
  }
  .ph-page .clin-card {
    border-radius: 0.6945vw;
    padding: 2.0835vw;
  }
  .ph-page .clin-card:hover {
    transform: translateY(-0.4167vw);
    box-shadow: 0 1.6668vw 3.3335vw rgba(29, 26, 85, 0.18);
  }
  .ph-page .clin-body {
    gap: 0.8334vw;
  }
  .ph-page .clin-tag {
    font-size: 0.9723vw;
  }
  .ph-page .clin-card h3 {
    font-size: clamp(1.8057vw, 2.4vw, 2.2224vw);
  }
  .ph-page .clin-card p {
    font-size: 1.0417vw;
  }
  .ph-page .clin-btn {
    gap: 0.6945vw;
    margin-top: 1.8057vw;
    border: 0.0694vw solid #fff;
    border-radius: 0.3472vw;
    padding: 0.8334vw 1.5279vw;
    font-size: 1.0417vw;
  }
  .ph-page .ph-contact {
    padding: 0 0 3.0557vw;
  }
  .ph-page .contact-card {
    border-radius: 1.6668vw;
    padding: 4.1669vw 3.8891vw;
    gap: 3.3335vw;
  }
  .ph-page .contact-card .k {
    font-size: 0.9723vw;
    margin-bottom: 1.1112vw;
  }
  .ph-page .contact-card h2 {
    font-size: clamp(1.8057vw, 3.2vw, 3.0557vw);
    margin-bottom: 0.9723vw;
  }
  .ph-page .contact-card p {
    font-size: 1.1112vw;
    max-width: 38.8912vw;
  }
  .ph-page .contact-rows {
    gap: 0.8334vw;
    min-width: 20.8346vw;
  }
  .ph-page .contact-row {
    grid-template-columns: 6.3893vw 1fr;
    gap: 0.9723vw;
    padding: 0.9723vw 1.2501vw;
    border: 0.0694vw solid rgba(255, 255, 255, 0.16);
    border-radius: 0.3472vw;
  }
  .ph-page .contact-row .ck {
    font-size: 0.9723vw;
  }
  .ph-page .contact-row .cv {
    font-size: 0.9723vw;
  }
  .ph-page .f-select-wrap select:focus-visible,
  .ph-page .sfield input:focus-visible,
  .ph-page .oc-dl:focus-visible,
  .ph-page a.clin-card:focus-visible,
  .ph-page a.contact-row:focus-visible {
    outline: 0.2083vw solid #e9511c;
    outline-offset: 0.2083vw;
  }
  .ph-page .ord-card--link:focus-visible {
    outline: 0.2083vw solid #e9511c;
    outline-offset: 0.2083vw;
  }
}