/* ============================================================
   pharmaciepourtier.fr — feuille de style de la génération 2026
   (« Pharmacie Nouvelle »), ÉCRITE À LA MAIN.

   🚨 CE N'EST PAS LA FEUILLE D'ORIGINE, ET ELLE N'EXISTE NULLE PART.
      Le site a été refondu en 2025 avec le générateur « Ambiance » de
      Linkeo. Toutes les captures de /css/ambiance.min.css s'arrêtent au
      2023-09-04 (build v=1580532054) : archive.org n'a plus ramassé un
      seul CSS après cette date, et les builds de la refonte
      (v=1764707296, v=1757522533, v=1743182471) n'ont jamais été
      capturées. Les 14 pages de 2026 rendaient donc NUES.

      Palette relevée dans le SVG du logo (#163e3d), polices relevées
      dans le <link> Google Fonts de la page (Playfair Display + Nunito
      Sans), grille déduite des classes présentes dans le balisage.

   ⚠ ELLE NE PRÉTEND PAS REPRODUIRE L'ORIGINAL. Aucune capture d'écran
     du site de 2026 n'existe pour s'y comparer.

   ⚠ Servie UNIQUEMENT aux pages 2026, via la query string, dans
     .htaccess. Les 12 pages restées en version POURTIER gardent leur
     vraie feuille de 2023, qui existe, elle.
   ============================================================ */

:root {
  --vert: #163e3d;          /* relevé dans .cls-1 du logo */
  --vert-clair: #2c5f5c;
  --vert-pale: #eaf0ed;
  --sable: #f5f3ec;
  --encre: #1c2322;
  --gris: #5b6462;
  --trait: #dcd8ca;
  --blanc: #fff;
  --rayon: 8px;
  --large: 1180px;
  --gouttiere: 32px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .blk-brand__name, .blk-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  color: var(--vert);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.05em; max-width: 68ch; }
a { color: var(--vert); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--vert-clair); }
img, svg, video { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--vert-clair); outline-offset: 2px; }

/* ============================================================
   GRILLE
   🚨 LE THÈME EST EN CSS GRID, PAS EN FLOTTANTS. Le balisage porte
      `col-span-N`, `col-start-N`, `row-span-N` et `grid-content-*` :
      ce sont des propriétés de grille. Ma première version l'avait lu
      comme une grille Foundation en flex, et c'est ce qui produisait
      les défauts d'alignement — une rangée de trois colonnes cumulait
      1 235 px pour 1 140 disponibles et la troisième retombait seule
      à la ligne.
   ============================================================ */
.container-grid { width: 100%; }
.container-grid > * { max-width: var(--large); margin-inline: auto; padding-inline: 20px; }

.row {
  display: grid;
  /* ⚠ `1fr` ET NON `minmax(0, 1fr)` FAISAIT DÉBORDER LA PAGE EN MOBILE :
     le plancher implicite d'un `1fr` est `min-content`, donc un contenu
     insécable (ici l'adresse sur une ligne) élargit la piste au-delà du
     conteneur. Mesuré à 390 px de large : le document défilait sur
     548 px. */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gouttiere);
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: 20px;
  align-items: start;
}
/* Variantes de densité relevées dans le balisage. */
.row.collapse { gap: 0; }
.row.tight { gap: 16px; }
.row.broad { gap: 40px; }
.row.full-broad { gap: 48px; }
.row.blk-level-medium { row-gap: 40px; }

.columns, .column { grid-column-end: span 12; min-width: 0; }

/* 🚨 LE BALISAGE PORTE DEUX GRILLES SUPERPOSÉES, et les départager au
      hasard est exactement ce qui cassait la mise en page. On lit par
      exemple `class="large-4 columns large-5 column"` : `large-4
      columns` est l'héritage de l'ancien thème, `large-5 column`
      (COLUMN AU SINGULIER) est la valeur du thème actuel. À
      spécificité égale, c'est l'ordre de déclaration qui tranchait —
      donc tantôt la bonne valeur, tantôt l'ancienne.
      On cible donc la forme au singulier avec une spécificité
      supérieure : elle gagne toujours, quelle que soit la valeur de
      l'autre. Vérifié sur la rangée fautive : 5 + 3 + 4 = 12. */
@media (min-width: 900px) {
  .large-1  { grid-column-end: span 1; }
  .large-2  { grid-column-end: span 2; }
  .large-3  { grid-column-end: span 3; }
  .large-4  { grid-column-end: span 4; }
  .large-5  { grid-column-end: span 5; }
  .large-6  { grid-column-end: span 6; }
  .large-7  { grid-column-end: span 7; }
  .large-8  { grid-column-end: span 8; }
  .large-9  { grid-column-end: span 9; }
  .large-10 { grid-column-end: span 10; }
  .large-12 { grid-column-end: span 12; }

  .column.large-1  { grid-column-end: span 1; }
  .column.large-2  { grid-column-end: span 2; }
  .column.large-3  { grid-column-end: span 3; }
  .column.large-4  { grid-column-end: span 4; }
  .column.large-5  { grid-column-end: span 5; }
  .column.large-6  { grid-column-end: span 6; }
  .column.large-7  { grid-column-end: span 7; }
  .column.large-8  { grid-column-end: span 8; }
  .column.large-9  { grid-column-end: span 9; }
  .column.large-10 { grid-column-end: span 10; }
  .column.large-12 { grid-column-end: span 12; }
}
@media (min-width: 640px) {
  .medium-4 { grid-column-end: span 4; }
  .medium-6 { grid-column-end: span 6; }
  .medium-8 { grid-column-end: span 8; }
  .medium-12{ grid-column-end: span 12; }
}

/* Grille explicite du thème — déclarée APRÈS les classes héritées :
   quand le balisage donne un col-span, c'est lui qui fait foi. */
@media (min-width: 640px) {
  .md\:col-span-8 { grid-column-end: span 8; }
  .md\:col-start-1 { grid-column-start: 1; }
}
@media (min-width: 900px) {
  .lg\:col-span-2 { grid-column-end: span 2; }
  .lg\:col-span-6 { grid-column-end: span 6; }
  .lg\:col-span-8 { grid-column-end: span 8; }
  .lg\:col-span-9 { grid-column-end: span 9; }
  .lg\:col-start-7 { grid-column-start: 7; }
  .lg\:row-span-2 { grid-row-end: span 2; }
  .lg\:row-span-3 { grid-row-end: span 3; }
  .lg\:row-span-4 { grid-row-end: span 4; }
  .lg\:row-start-1 { grid-row-start: 1; }
  .lg\:row-start-2 { grid-row-start: 2; }
  .lg\:row-start-3 { grid-row-start: 3; }
  .lg\:row-start-4 { grid-row-start: 4; }
  .lg\:row-start-initial { grid-row-start: auto; }
}
@media (min-width: 1200px) {
  .xxl\:col-span-6 { grid-column-end: span 6; }
  .xxl\:col-start-6 { grid-column-start: 6; }
  .xxl\:col-start-7 { grid-column-start: 7; }
}

/* Alignement du contenu dans sa cellule — c'est ce que décrivent les
   classes `grid-content-*`, et elles n'étaient pas implémentées. */
.grid-content-center,
.lg\:grid-content-center-left,
.grid-content-center-left { align-self: center; }
.md\:grid-content-top-left { align-self: start; }
.grid-content-bottom-left { align-self: end; }
.self-end { align-self: end; }
.grid-content-center { text-align: center; }
.text-center { text-align: center; }
.text-center p, .text-center h1, .text-center h2, .text-center h3 { margin-inline: auto; }
.align-center { text-align: center; }
.align-left { text-align: left; }

/* Espacements logiques du thème. */
.pbs-large { padding-block-start: 56px; }
.pbe-large { padding-block-end: 56px; }
.mbs-tiny  { margin-block-start: 12px; }
.mbs-medium{ margin-block-start: 28px; }
.mbe-large { margin-block-end: 56px; }

/* ============================================================
   EN-TÊTE ET NAVIGATION
   ============================================================ */
.header {
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--trait);
}
.header.sticky-top { position: sticky; top: 0; z-index: 50; }
.header__body {
  max-width: var(--large);
  margin-inline: auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 🚨 LE LOGO D'ORIGINE ÉTAIT TRONQUÉ DANS L'ARCHIVE ELLE-MÊME. Son tracé
   ne couvrait que 399 unités sur une zone de dessin de 933 (mesuré au
   getBBox) : il dessinait « Pharma » et s'arrêtait, et les glyphes
   manquants n'existent nulle part. L'emplacement est donc resté vide et
   masqué. Il porte désormais /logo-marque.svg, redessiné à la main dans
   la palette relevée sur ce même SVG — la croix seule, parce que le nom
   est déjà composé en Playfair juste à côté : le lockup complet
   (/logo.svg) le répéterait. */
.blk-brand { flex: 0 0 auto; }
.blk-brand__link { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.blk-brand__logo { display: block; flex: none; width: 36px; line-height: 0; }
.blk-brand__logo img { display: block; width: 100%; height: auto; }
.blk-brand__name {
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  margin: 0;
  white-space: nowrap;
}

.header__body--nav { flex: 1 1 auto; min-width: 0; }
/* ⚠ La navigation passe AVANT les actions quand la place manque :
     c'est elle qui porte le site. Les actions se compriment
     (`flex: 0 1 auto`), la navigation non. */
.header__body--actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: 0 1 auto; min-width: 0; }

.blk-nav ul { list-style: none; margin: 0; padding: 0; }
/* Navigation fluide : une seule ligne qui défile horizontalement si
   elle déborde, plutôt qu'un retour à la ligne qui décale tout
   l'en-tête et fait sauter la hauteur du bandeau collant. */
.blk-nav--horizontal ul {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.blk-nav--horizontal ul::-webkit-scrollbar { display: none; }
.blk-nav--horizontal li { flex: 0 0 auto; }
.blk-nav--horizontal a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--rayon);
  font-size: .92rem;
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.blk-nav--horizontal a:hover { background: var(--vert-pale); color: var(--vert); }
.blk-nav--horizontal a.home-link { color: var(--vert); }

/* ============================================================
   BOUTONS
   ============================================================ */
.blk-button { display: inline-block; }
.buttons-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.blk-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--rayon);
  font-weight: 700;
  font-size: .94rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.blk-button__icon { display: inline-flex; flex: 0 0 auto; }
.blk-button__icon svg { width: 20px; height: 20px; }

.blk-button--lead-bold .blk-button__link,
.blk-button--bold .blk-button__link { background: var(--vert); color: var(--blanc); }
.blk-button--lead-bold .blk-button__link:hover,
.blk-button--bold .blk-button__link:hover { background: var(--vert-clair); color: var(--blanc); }

.blk-button--outline .blk-button__link { border-color: var(--vert); color: var(--vert); }
.blk-button--outline .blk-button__link:hover { background: var(--vert); color: var(--blanc); }

.blk-button--text .blk-button__link { color: var(--vert); padding-inline: 10px; }
.blk-button--text .blk-button__link:hover { background: var(--vert-pale); }

.blk-button--no-label .blk-button__label { display: none; }

/* 🚨 L'infobulle n'est pas du texte de bouton. `blk-button__tooltip`
   porte « Coordonnées, réseaux sociaux ... » : le thème l'affiche au
   survol, sans CSS elle s'écrit DANS le bouton et le fait passer à
   378 px, ce qui écrasait la navigation à 177 px. */
.blk-button__tooltip { display: none; }

/* 🚨 UN BOUTON QUI NE FAIT RIEN EST PIRE QUE PAS DE BOUTON. « Menu »,
   « Infos utiles » et « Préférences » sont des <button> SANS href :
   ils ouvraient les tiroirs `blk-sheet` par un script qui n'a pas été
   rapatrié. On les retire plutôt que d'offrir trois commandes mortes.
   ⚠ On cible la présence d'un <button>, pas le libellé : « Contactez-
     nous » est un vrai <a href="/contactez-nous.php"> et doit rester.
     Leur contenu reste dans le document pour qui le cherche. */
.header__body--actions .blk-button:has(button) { display: none; }

/* 🚨 Liens d'évitement : accessibles au clavier, invisibles sinon.
   Sans cette règle, ce sont les « Aller au contenu / Aller aux
   coordonnées » empilés en haut de la page nue. */
.blk-button--a11y {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.blk-button--a11y:focus-within {
  position: fixed; top: 10px; left: 10px;
  width: auto; height: auto; margin: 0;
  clip-path: none; z-index: 100;
  background: var(--vert); border-radius: var(--rayon);
}
.blk-button--a11y:focus-within .blk-button__link { color: var(--blanc); }

/* 🚨 Tiroirs latéraux (contact, réglages, menu) : ce sont des panneaux,
   pas du contenu de page. Le JS qui les ouvre n'a pas été rapatrié ;
   sans cette règle leur contenu se déverse en haut du document. */
.blk-sheet { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { background: var(--sable); border-bottom: 1px solid var(--trait); }
.hero__body { padding-block: clamp(40px, 6vw, 80px); align-items: center; }
.hero__eyebrow p {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  font-weight: 800;
  color: var(--vert-clair);
  margin-bottom: .6em;
}
.hero__copy p {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  line-height: 1.18;
  color: var(--vert);
  margin-bottom: .5em;
  max-width: 20ch;
}
/* 🚨 LE VISUEL DU HERO N'EXISTE PAS et ne peut pas exister (voir le
   bloc « images » plus bas). Plutôt que de laisser la moitié droite du
   hero vide, on y installe le panneau « Infos pratiques » : adresse,
   téléphone, horaires et réseaux sociaux passent ainsi au-dessus de la
   ligne de flottaison, ce que cherche en premier le visiteur du site
   d'une officine. Le diaporama mort, lui, disparaît. */
.hero__media > .blk-slideshow { display: none; }
.lhf-hero-infos { align-self: center; }
.lhf-hero-infos .bg-accent-1 {
  background: var(--blanc);
  box-shadow: 0 1px 3px rgba(22,62,61,.08);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.wrapper { display: block; }
.layer-background { display: none; }
/* Rythme vertical. ⚠ Deux échelles distinctes : l'écart entre les
   grandes SECTIONS (hero, services, contenu, pied) et l'écart entre les
   BLOCS d'une même section. Sans le second, les compositions
   éditoriales se touchaient et la page se lisait comme un seul pavé. */
.precontent, .content, .prefooter { padding-block: clamp(52px, 6vw, 92px); }
.content > .row + .row { margin-block-start: clamp(44px, 5.5vw, 80px); }
.precontent > .row + .row { margin-block-start: clamp(36px, 4vw, 56px); }
.hero + * { margin-block-start: 0; }
/* Une bande colorée marque déjà la rupture : on ne double pas l'écart. */
.content > .row.bg-accent-1 + .row { margin-block-start: clamp(44px, 5.5vw, 80px); }
.bg-color-layout { background: var(--blanc); }
.blk-separator, .block-separator { border: 0; border-top: 1px solid var(--trait); margin-block: 20px; }
.blk-text > :last-child, .my-content > :last-child { margin-bottom: 0; }

/* ============================================================
   PANNEAU « INFOS PRATIQUES »
   Adresse, horaires, téléphone, liens utiles et réseaux sociaux.
   C'est le bloc que le visiteur cherche en premier sur le site d'une
   officine : on lui donne un vrai traitement de carte, lisible d'un
   coup d'œil, posée dans le hero.
   ============================================================ */
/* 🚨 PAS DE `position: sticky` ICI. Je l'avais posé pour que le panneau
   d'infos suive la lecture — mais `bg-accent-1` n'est pas réservée à ce
   panneau : le bandeau d'appel à l'action « Contactez-nous pour nous
   poser vos questions ! » la porte aussi, et se mettait donc à flotter
   en haut de l'écran pendant tout le défilement. Une classe de FOND ne
   doit pas décider d'un COMPORTEMENT. Le panneau d'infos vit
   maintenant dans le hero, où il n'a plus besoin d'être collant. */
.bg-accent-1 {
  background: var(--vert-pale);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 26px 24px;
  align-self: start;
}

/* Le bandeau d'appel à l'action est une bande, pas une carte : il
   occupe toute la largeur et respire davantage. */
.row.bg-accent-1 { padding-block: clamp(28px, 3.5vw, 44px); }
.row.bg-accent-1 h2 { margin-bottom: .35em; }
.row.bg-accent-1 p { margin-inline: auto; }
.bg-accent-1 .txt-custom {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--vert);
  margin: 0 0 .5em;
}
.bg-accent-1 address { font-style: normal; margin-bottom: 4px; }
.bg-accent-1 address a { display: block; text-decoration: none; color: var(--encre); font-weight: 600; }
.bg-accent-1 address a:hover { color: var(--vert); text-decoration: underline; }
.bg-accent-1 address span.hide { display: none; }

.lhf-contact__tel { display: block; margin-top: 10px; }
.lhf-contact__tel a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--vert);
  text-decoration: none;
}
.lhf-contact__tel a::before { content: "\260E"; font-size: 1em; }
.lhf-contact__tel a:hover { text-decoration: underline; }

.blk-opening-hours .data { display: block; font-size: .98rem; }
.blk-opening-hours .data strong { color: var(--vert); }

.blk-links ul, .blk-socialbar ul { list-style: none; padding: 0; margin: 0; }
.blk-links li { padding: 5px 0; border-bottom: 1px solid var(--trait); font-size: .93rem; }
.blk-links li:last-child { border-bottom: 0; }
.blk-links a { text-decoration: none; }
.blk-links a:hover { text-decoration: underline; }

.lhf-contact__social { margin-top: 18px; }
.lhf-contact__social ul { display: flex; flex-wrap: wrap; gap: 8px; }
.lhf-contact__social a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--vert);
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
}
.lhf-contact__social a:hover { background: var(--vert); color: var(--blanc); }


/* ============================================================
   COMPOSITIONS ÉDITORIALES (rangées 2, 5 et 8 de l'accueil)
   🚨 C'EST CE QUI MANQUAIT, ET C'EST LA CAUSE DU « TOUT EST ALIGNÉ À
      GAUCHE ». Ces rangées ne sont pas du texte sur douze colonnes :
      ce sont des collages. Un grand visuel occupe les colonnes 7 à 12
      sur quatre lignes de grille, une carte de texte se pose par-dessus
      sur les colonnes 1 à 6 (`zi-1`, `bg-surface-0`, `p-medium`), et un
      second visuel plus petit vient mordre en bas à droite (`zi-2`).
      Faute d'implémenter `col-start-1`, `p-medium`, `zi-*`,
      `bg-surface-0` et `reverse`, les trois enfants retombaient les uns
      sous les autres, collés à gauche, et les visuels disparaissaient
      de la composition.
   ============================================================ */
.col-start-1 { grid-column-start: 1; }

/* Un z-index n'a d'effet que sur un élément positionné. */
.zi-1 { position: relative; z-index: 1; }
.zi-2 { position: relative; z-index: 2; }

.p-medium { padding: clamp(22px, 2.4vw, 36px); }

/* La carte de texte doit se détacher du visuel qu'elle recouvre. */
.bg-surface-0 {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: 0 10px 30px rgba(22, 62, 61, .10);
}

/* 🚨 `reverse` MIROITE LA COMPOSITION, elle ne réordonne pas les
   enfants : chacun porte son propre `col-start`, donc inverser l'ordre
   ne suffirait pas. On retourne l'axe de la grille et on remet le sens
   de lecture sur les enfants — le texte reste en français, la
   composition bascule à droite. */
.row.reverse { direction: rtl; }
.row.reverse > * { direction: ltr; }

/* Les visuels de ces blocs remplissent leur cellule plutôt que de
   flotter à leur taille naturelle. */
.row.collapse > div > picture,
.row.collapse > div > picture > img,
.row.grid-content-bottom-left > div > picture,
.row.grid-content-bottom-left > div > picture > img { height: 100%; width: 100%; display: block; }
.row.collapse > div > picture > img,
.row.grid-content-bottom-left > div > picture > img { object-fit: cover; border-radius: var(--rayon); }

/* ⚠ `sticky-offset-top` rendrait le grand visuel collant pendant le
   défilement. On s'en tient à un alignement haut : le JS du thème qui
   calculait l'offset n'a pas été rapatrié, et un élément collant mal
   calé se superpose au bloc suivant. */
.lg\:sticky-offset-top, .xl\:sticky-offset-top { align-self: stretch; }
.lg\:sticky-offset-bottom { align-self: end; }

/* ============================================================
   CARTES ET COLLECTIONS
   ============================================================ */
.blk-carousel__scene, .blk-slideshow__container {
  display: grid;
  /* ⚠ Un minimum trop petit répartissait les 6 services en 5 + 1, un
     orphelin seul sur sa ligne. À 320 px la grille tombe sur 3 × 2 en
     grand écran, 2 × 3 sur tablette, 1 colonne sur mobile. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
.collection-item {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.collection-item:hover { box-shadow: 0 6px 18px rgba(22,62,61,.10); }
/* Les cartes sans visuel gardent une hauteur de texte correcte. */
.collection-item > a, .collection-item > * { padding-inline: 20px; }
.collection-item > a > img, .collection-item > img { padding-inline: 0; }
.collection-item:hover { border-color: var(--vert); transform: translateY(-2px); }
.collection-item > a { display: block; text-decoration: none; color: inherit; }
.collection-item h2, .collection-item h3 { font-size: 1.02rem; margin: 14px 0 .3em; text-wrap: balance; hyphens: auto; }
.collection-item p { font-size: .91rem; color: var(--gris); margin-bottom: 16px; }
.blk-slideshow__controls { display: none; }

/* 🚨 AUCUNE IMAGE DE LA VERSION 2026 N'EST ARCHIVÉE. Le thème les charge
   en différé (`data-src` + un SVG transparent en `src`), et archive.org
   n'a ramassé aucune ressource après le 2023-09-04 : les 34 images de
   cette génération sont introuvables. Vérifié une par une.
   Les 19 images de l'ACCUEIL ont été REGÉNÉRÉES (Imagen) et basculées
   de `data-src` vers `src` dans le HTML — elles s'affichent donc
   normalement et ne sont plus concernées par cette règle.
   ⚠ Ce qui reste en `data-src` est ce qui n'a PAS de fichier : les
     visuels des 13 autres pages 2026. On les masque plutôt que
     d'afficher des icônes d'image cassée. */
img[data-src] { display: none; }
.collection-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* 🚨 Le bloc d'avis Google (`feedget-widget gmb-brick`) est piloté par
   un script de tiers non rapatrié : il occupait 959 px de vide au
   milieu de l'accueil. Il n'a pas vocation à revenir — ce sont les avis
   de l'ANCIEN exploitant, au même titre que ses témoignages. */
.feedget-widget, .gmb-brick { display: none; }
/* Une rangée vidée de son seul contenu ne doit pas laisser son
   espacement derrière elle. */
.row:has(> .columns > .blk-html:empty) { display: none; }


/* ============================================================
   BLOCS DU THÈME RESTÉS SANS STYLE
   🚨 RELEVÉ PAR INVENTAIRE, PAS AU COUP PAR ŒIL. J'ai comparé toutes
      les classes présentes dans l'accueil à celles que cette feuille
      déclare : 41 classes de mise en page n'étaient couvertes par
      aucune règle. C'est pour ça que des sections entières
      retombaient en texte brut aligné à gauche — elles n'étaient pas
      mal alignées, elles n'étaient pas mises en page du tout.
   ============================================================ */

/* --- Mesures de texte ---------------------------------------- */
.mw-30 { max-width: 30%; }
.mw-50 { max-width: 50%; }
.m-auto { margin-inline: auto; }
.blk-text--intro p { font-size: 1.06rem; color: var(--gris); }
/* ⚠ Une largeur en pourcentage n'a pas de sens sur un écran étroit :
     en dessous de 900 px elle enferme le texte dans une colonne
     illisible. */
@media (max-width: 899px) {
  .mw-30, .mw-50 { max-width: none; }
}

/* --- Grilles de blocs ---------------------------------------- */
.blk-grid__container {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* ⚠ Le nombre de colonnes est DANS LE NOM DE CLASSE : `split2` veut
     dire deux colonnes. Laisser `auto-fill` décider donnait 3 + 1,
     avec une carte orpheline sur sa ligne. */
@media (min-width: 900px) {
  .split2 > .blk-grid__container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split3 > .blk-grid__container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split4 > .blk-grid__container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .split2 > .blk-grid__container,
  .split3 > .blk-grid__container,
  .split4 > .blk-grid__container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .blk-grid__container,
  .split2 > .blk-grid__container,
  .split3 > .blk-grid__container,
  .split4 > .blk-grid__container { grid-template-columns: minmax(0, 1fr); }
}

/* --- Cartes « Nos plus » -------------------------------------- */
.blk-card { display: flex; flex-direction: column; padding: 22px 24px; }
.blk-card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.blk-card__icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--vert-pale);
  color: var(--vert);
}
.blk-card__icon svg { width: 22px; height: 22px; }
.blk-card__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05rem; font-weight: 600; color: var(--vert);
  margin: 0; align-self: center; text-wrap: balance;
}
.blk-card__content { padding: 0; }
.blk-card__description { font-size: .94rem; color: var(--gris); margin: 0; max-width: none; }

/* --- Figures -------------------------------------------------- */
.blk-image { margin: 0; height: 100%; }
.blk-image__image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--rayon); }

/* --- Cartes d'articles ---------------------------------------- */
.blk-newscard { display: flex; flex-direction: column; overflow: hidden; }
.blk-newscard__cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.blk-newscard__head, .blk-newscard__content { padding: 0 20px; }
.blk-newscard__infos { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding-top: 14px; }
.blk-newscard__category {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 800; color: var(--vert-clair);
}
.blk-newscard__date { font-size: .8rem; color: var(--gris); }
.blk-newscard__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05rem; color: var(--vert); margin: 6px 0 10px; text-wrap: balance;
}
.blk-newscard__content { padding-bottom: 18px; font-size: .93rem; color: var(--gris); }

/* --- Placement sans préfixe ----------------------------------- */
.row-start-1 { grid-row-start: 1; }

/* --- Barre sociale -------------------------------------------- */
.blk-socialbar.bg-bold a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.blk-socialbar.bg-bold a:hover { background: rgba(255,255,255,.24); }

/* --- Signature de l'agence ------------------------------------
   ⚠ `blk-linkeo` est la signature de LINKEO, l'agence qui avait fait
     le site de l'ancien exploitant. Elle reste dans le pied de page
     parce qu'elle fait partie de l'archive, mais on ne la met pas en
     avant : discrète, et son lien n'est pas suivi côté référencement
     (à traiter dans le HTML si tu veux le retirer tout à fait). */
.blk-linkeo { opacity: .55; font-size: .75rem; }
.blk-linkeo__logo svg, .blk-linkeo__logo img { max-height: 16px; width: auto; }


/* ============================================================
   PAGES INTÉRIEURES : BLOG, CONTACT, MENTIONS
   🚨 CES STRUCTURES N'EXISTENT PAS SUR L'ACCUEIL, donc rien ne les
      avait jamais stylées. Mesuré sur /news/ : `article__wrapper` était
      en `display: block` sans largeur ni gouttière — la colonne
      latérale s'empilait AU-DESSUS de l'article, le tout collé au bord
      gauche de la fenêtre, à x = 0.
   ============================================================ */

/* --- Gabarit du blog ------------------------------------------ */
.article__wrapper {
  max-width: var(--large);
  margin-inline: auto;
  padding: clamp(40px, 5vw, 72px) 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}
.article__section { order: 1; min-width: 0; }
.article__sidenav { order: 2; min-width: 0; }
/* ⚠ Le conteneur imbriqué ne doit pas re-contraindre la largeur : sans
     ça l'article se retrouvait centré DANS sa cellule, avec une
     gouttière en double. */
.article__wrapper .container-grid > *,
.article__wrapper .row { max-width: none; padding-inline: 0; margin-inline: 0; }
@media (max-width: 899px) {
  .article__wrapper { grid-template-columns: minmax(0, 1fr); }
}

/* --- Colonne latérale et widgets ------------------------------ */
.blk-nav--side-nav { display: block; }
.blk-newswidget {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.blk-newswidget__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.05rem; font-weight: 600; color: var(--vert);
  margin-bottom: 10px;
}
.blk-newswidget__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.blk-newswidget__all, .blk-newswidget__more {
  display: inline-block; margin-top: 12px;
  font-size: .86rem; font-weight: 700;
}
.blk-newswidget--card-style1 .blk-newscard { border: 0; padding: 0; }
.blk-newswidget--card-style1 .blk-newscard__head,
.blk-newswidget--card-style1 .blk-newscard__content { padding-inline: 0; }

/* Étiquettes rondes des catégories et archives. */
.blk-button--pils {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 6px 13px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--vert-pale);
  font-size: .85rem; font-weight: 600;
  text-decoration: none; color: var(--vert);
}
.blk-button--pils:hover { background: var(--vert); color: var(--blanc); border-color: var(--vert); }
.blk-button--pils small { opacity: .7; font-size: .8em; }

/* --- Fil d'Ariane --------------------------------------------- */
.blk-news-breadcrumb__list {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: .85rem; color: var(--gris);
}
.blk-news-breadcrumb__list li + li::before { content: "›"; margin-right: 6px; color: var(--trait); }
.blk-news-breadcrumb__list a { text-decoration: none; }
.blk-news-breadcrumb__list a:hover { text-decoration: underline; }
.blk-news-breadcrumb__list a.active { color: var(--gris); pointer-events: none; }

/* --- Article et listes d'articles ------------------------------ */
.blk-news-category__intro { margin-bottom: 8px; }
.blk-news-article__infos { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.blk-news-article__category {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 800; color: var(--vert-clair);
}
.blk-news-article__intro p, .blk-news-article__description { color: var(--gris); }
.masonry > .blk-grid__container { align-items: start; }
.news-card-style1 .blk-newscard {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
/* Une carte entière est cliquable : souligner son titre ET sa date la
   fait lire comme une liste de liens bruts. */
.blk-newscard a { text-decoration: none; color: inherit; }
.blk-newscard a:hover .blk-newscard__title { text-decoration: underline; }
.blk-newscard__date { text-decoration: none; }

/* --- Formulaire de contact ------------------------------------ */
.blk-form { padding: clamp(22px, 2.4vw, 32px); }
.blk-form .form-hr h2 { margin-bottom: .3em; }
.blk-form hr { border: 0; border-top: 1px solid var(--trait); margin: 0 0 18px; }
.form-section { margin-bottom: 16px; }
.form-section label { margin-bottom: 6px; }
.label-desc { display: block; font-weight: 400; font-size: .82rem; color: var(--gris); }
.blk-form button, .blk-form input[type="submit"] {
  width: auto; padding: 11px 22px;
  border: 0; border-radius: var(--rayon);
  background: var(--vert); color: var(--blanc);
  font-weight: 700; cursor: pointer;
}

/* 🚨 LE FORMULAIRE NE POSTE NULLE PART. Le restaurateur l'a marqué
   `data-lhf-formulaire-mort` : son point d'arrivée d'origine est mort.
   Un visiteur qui le remplit croit avoir envoyé sa demande, et rien
   n'arrive. On ne le masque pas en douce — c'est une décision de
   contenu, pas de style — mais on le signale visiblement plutôt que de
   le laisser passer pour fonctionnel. */
form[data-lhf-formulaire-mort] { position: relative; }
form[data-lhf-formulaire-mort]::before {
  content: "⚠ Ce formulaire n'est pas encore relié : utilisez le téléphone ou l'adresse e-mail ci-contre.";
  display: block;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #c9a227;
  border-radius: var(--rayon);
  background: #fdf6e3;
  color: #6b5200;
  font-size: .88rem;
  font-weight: 600;
}

/* --- Bloc carte ------------------------------------------------
   🚨 L'IMAGE DE LA CARTE RESTE DÉSACTIVÉE, ET C'EST VOULU. Son URL est
   un appel à l'API Google Static Maps portant la CLÉ DE L'ANCIEN
   PROPRIÉTAIRE (`key=AIzaSy…`). La charger ferait facturer nos
   visiteurs sur son compte. Elle est inerte parce qu'elle est restée
   en `data-src` ; on garde la légende, qui porte l'adresse. */
.blk-map { margin: 0; }
.blk-map figcaption { padding-top: 10px; }
.blk-map__address { font-style: normal; display: block; }
.blk-map__name { font-weight: 700; color: var(--vert); display: block; }
.blk-map__addresse-link { text-decoration: none; }
.blk-map__addresse-link:hover { text-decoration: underline; }

/* --- Barre sociale hors pied de page --------------------------- */
.blk-socialbar ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.blk-socialbar a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--trait); color: var(--vert);
}
.blk-socialbar a:hover { background: var(--vert-pale); }
.blk-socialbar svg { width: 20px; height: 20px; }
/* La variante du panneau d'infos garde ses pastilles à libellé. */
.lhf-contact__social a { width: auto; height: auto; border-radius: 999px; }

/* --- Divers ---------------------------------------------------- */
.blk-card__list { list-style: none; padding: 0; margin: 10px 0 0; }
.blk-card__list li { padding: 5px 0; border-bottom: 1px solid var(--trait); font-size: .92rem; }
.blk-card__list li:last-child { border-bottom: 0; }
.blk-termsandconditions { font-size: .95rem; }
.blk-termsandconditions h2, .blk-termsandconditions h3 { margin-top: 1.4em; }
.mw-45 { max-width: 45%; }
@media (max-width: 899px) { .mw-45 { max-width: none; } }
.sticky-position, .xl\:sticky-offset-top { align-self: start; }

/* 🚨 Le bloc d'évaluation affiche les NOTES DE L'ANCIEN EXPLOITANT,
   au même titre que ses avis Google et ses témoignages. Même doctrine :
   on ne republie pas la réputation de quelqu'un d'autre. */
.blk-evaluation { display: none; }


/* ============================================================
   RYTHME VERTICAL DES PAGES INTÉRIEURES
   🚨 LES RÈGLES D'ESPACEMENT POSÉES POUR L'ACCUEIL NE LES ATTEIGNAIENT
      PAS. Elles ciblent `.content > .row + .row` — or les pages du blog
      n'ont pas de `.content` : leur contenu vit dans
      `.article__section`. Mesuré sur un article : écart de 0 px entre
      le bloc d'introduction et le corps de texte, et tous les
      `.blk-text` à `margin-bottom: 0`. Le texte se lisait d'un seul
      tenant.
   ============================================================ */
.article__section > .row + .row { margin-block-start: clamp(32px, 4vw, 56px); }
.article__section > .row { row-gap: clamp(24px, 3vw, 40px); }

/* Les blocs de texte successifs ne doivent pas se toucher. */
.blk-text + .blk-text { margin-block-start: 14px; }
.article__section .blk-text p:last-child,
.blk-news-article__description p:last-child { margin-bottom: 0; }
.blk-news-article__description { margin-block-end: 6px; }

/* Respiration interne du corps d'article. */
.article__section .blk-text p { margin-bottom: 1.15em; }
.article__section .blk-text h2 { margin-top: 1.5em; }
.article__section .blk-text h3 { margin-top: 1.3em; }

/* 🚨 LE TITRE EST DIMENSIONNÉ SUR LA FENÊTRE, PAS SUR SA COLONNE.
   Sur un article, l'introduction se partage en deux moitiés : le titre
   dispose de 385 px, mais `clamp(…, 4vw, …)` lui donnait 46 px de corps
   — quatre lignes et 278 px de haut pour un seul titre. On le cale sur
   une échelle adaptée à sa colonne. */
.blk-news-article__intro h1 { font-size: clamp(1.55rem, 2.2vw, 2.1rem); }
.blk-news-category__intro h1 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }

/* Le bloc d'introduction et son visuel s'alignent en haut. */
.blk-news-article__intro { align-items: start; }
.blk-news-article__intro .blk-image img { border-radius: var(--rayon); }

/* Pages de service et pages légales : même respiration que l'accueil. */
.article__section { padding-block: clamp(8px, 1vw, 16px); }
.blk-termsandconditions > * + * { margin-block-start: 1.1em; }


/* ============================================================
   SECTIONS VIDES DES PAGES INTÉRIEURES
   🚨 MESURÉ : sur /teleconsultation.php, `.hero` fait 155 px et
      `.precontent` 154 px — tous deux SANS le moindre texte ni la
      moindre image. Plus de 300 px de vide en tête de chaque page
      intérieure, qui repoussaient le contenu vers le bas et se
      lisaient comme un défaut d'affichage. Ces zones sont des
      emplacements que l'ancien site remplissait et que la restauration
      laisse vides.
   ⚠ La garde `:has()` est essentielle : elle ne replie QUE ce qui n'a
     ni texte, ni image, ni lien. L'accueil, dont le hero porte le
     titre et le panneau d'infos, n'est pas concerné — vérifié.
   ============================================================ */
.hero:not(:has(p, h1, h2, h3, h4, img, a, .bg-accent-1)),
.precontent:not(:has(p, h1, h2, h3, h4, img, a, .collection-item)),
.prefooter:not(:has(p, h1, h2, h3, h4, img, a)) { display: none; }


/* ============================================================
   SECTION « NOUS TROUVER »
   Carte Google de la fiche d'établissement, adresse, téléphone,
   horaires et liens. ⚠ L'iframe est en `loading="lazy"` : elle ne
   charge — et ne dépose donc ses cookies Google — qu'au moment où le
   visiteur l'atteint, pas au chargement de la page.
   ============================================================ */
.lhf-trouver__corps { align-items: stretch; }
.lhf-carte {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.lhf-trouver__infos .bg-accent-1 { height: 100%; }
.lhf-trouver__infos address { margin-bottom: 0; }
@media (max-width: 899px) {
  .lhf-carte { min-height: 260px; }
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.footer { background: var(--vert); color: #dce7e2; margin-top: 56px; }
.footer__body { padding-block: 36px; }
.footer a, .footer h2, .footer h3, .footer .txt-custom { color: var(--blanc); }
.footer address { font-style: normal; }
.blk-nav--footer ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.blk-nav--footer a { font-size: .89rem; text-decoration: none; }
.blk-nav--footer a:hover { text-decoration: underline; }
.footer .blk-socialbar ul { display: flex; gap: 12px; }
.footer .blk-socialbar svg { width: 22px; height: 22px; }
.footer__poweredby {
  font-size: .78rem; opacity: .7;
  padding-block: 14px;
  border-top: 1px solid rgba(255,255,255,.18);
  text-align: center;
}

/* ============================================================
   FORMULAIRES ET TABLEAUX
   ============================================================ */
input, select, textarea {
  font: inherit; width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
}
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
button { font: inherit; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--trait); }

/* ============================================================
   BASCULES RESPONSIVES : DERNIER MOT
   ⚠ DÉCLARÉES ICI, EN FIN DE FEUILLE, ET PAS AILLEURS. Elles n'ont
     qu'une classe de spécificité, exactement comme `.blk-button` :
     placées plus haut, c'est `.blk-button { display:inline-block }`
     qui gagnait, et les boutons « Menu » et « Infos utiles » —
     réservés au mobile — restaient visibles en grand écran. À
     spécificité égale, c'est l'ordre qui tranche.
   ============================================================ */
.xxl\:show { display: none; }
.xxl\:hide { display: block; }
@media (min-width: 1100px) {
  .xxl\:show { display: block; }
  .xxl\:hide { display: none; }
}

/* 🚨 SOUS 900 px, LA GRILLE PASSE À UNE SEULE COLONNE — et ce n'est pas
   cosmétique, c'est ce qui faisait déborder la page. Les douze pistes
   tombent à 0 px quand tout le contenu occupe déjà la largeur entière,
   mais les ONZE GOUTTIÈRES SUBSISTENT : à 48 px (`full-broad`), elles
   réclament 528 px à elles seules pour 350 px disponibles. Mesuré à
   390 px de large : le document défilait horizontalement sur 548 px.
   ⚠ Une gouttière ne disparaît pas avec la piste qu'elle sépare. */
@media (max-width: 899px) {
  /* ⚠ Les variantes sont énumérées : `.row.full-broad` (deux classes)
     l'emporte sur `.row` (une seule), donc une règle écrite pour `.row`
     seul laissait la gouttière de 48 px en place et ne corrigeait rien.
     C'est la spécificité qui tranche, pas l'ordre, dès que le nombre de
     classes diffère. */
  .row,
  .row.collapse,
  .row.tight,
  .row.broad,
  .row.full-broad,
  .row.blk-level-medium {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
}

/* Mobile : le panneau d'infos ne colle plus, et la grille se replie. */
@media (max-width: 1099px) {
  .header__body { flex-wrap: wrap; gap: 10px; }
  .header__body--actions { margin-left: auto; }

  /* 🚨 SANS CETTE RÈGLE, LE MOBILE N'A PLUS AUCUNE NAVIGATION. Le thème
     masque la barre horizontale sous xxl (`xxl:show`) parce qu'un bouton
     « Menu » ouvre un tiroir — tiroir piloté par un script non rapatrié,
     donc bouton mort, que l'on a retiré. Retirer le menu ET laisser la
     barre masquée, c'est un site sans navigation : on réaffiche donc la
     barre, qui défile horizontalement. Défaut introduit par moi au tour
     précédent, trouvé au contrôle mobile. */
  .header__body--nav.xxl\:show { display: block; width: 100%; order: 3; }
  .blk-nav--horizontal ul { padding-block: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   MASQUAGE DES IMAGES NON ACTIVÉES — DERNIER MOT
   🚨 DÉCLARÉ EN TOUT DERNIER, ET C'EST LE SEUL ENDROIT QUI MARCHE.
      `img[data-src]` et `.collection-item img` ont la MÊME spécificité
      (une classe + un élément) : placée plus haut, la règle de masquage
      se faisait battre par la suivante, et une image non activée
      réapparaissait en icône cassée sur les cartes d'articles.
      Ce qui reste en `data-src` est ce qu'on a délibérément NON activé :
      aujourd'hui la seule image de la carte du contact, dont l'URL
      appelle l'API Google Static Maps avec la CLÉ DE L'ANCIEN
      PROPRIÉTAIRE. La charger ferait facturer nos visiteurs sur son
      compte.
   ============================================================ */
img[data-src] { display: none; }