/*
 * Pro/Active — « Le centre », « Pour qui », « En images », « Rejoindre l'équipe »
 * et composants partagés avec « L'équipe » et « Clubs & entreprises »
 * (refonte V3, 19/10/2026).
 *
 * Styles additionnels au-dessus de proactive.css et vitrine.css (non modifiés).
 * Règles du chantier : téléphone d'abord (390 px), une photo avant chaque bloc de
 * texte, aucun pictogramme décoratif, aucun border-radius, aucun reflet qui balaie
 * les photos. Point de rupture unique : 900 px (comme vitrine.css).
 * Le masquage d'animation n'existe que sous `.js-anim` (socle animations.js) :
 * rien ici ne cache du contenu sans JavaScript.
 *
 * Sommaire
 *   1. Boutons en rangée
 *   2. Vignettes photo (.cn-tuile)
 *   3. Pastilles, étapes numérotées, notes, mentions
 *   4. Page « Le centre » : bandeau, diaporama, « où venir »
 *   5. Visionneuse plein écran (créée par static/js/centre.js)
 *   6. Page « En images » : mosaïque
 *   7. Page « Rejoindre l'équipe »
 */

/* Les blocs `data-anim="cote"` / `"cote-droite"` partent décalés de 56 px avant
   d'apparaître : sur téléphone, ce décalage élargissait la page de 36 px
   (défilement horizontal avant l'apparition). On rogne donc chaque section sur
   les côtés ; `clip` ne crée pas de zone de défilement, `hidden` sert de repli. */
.vt-section,
.vt-entete-page {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ==========================================================================
   1. Boutons en rangée
   ========================================================================== */

.cn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin-top: 26px;
}
.cn-actions--centre { justify-content: center; }
.cn-actions .pa-btn--auto,
.cn-actions .pa-btn-secondaire--auto { text-align: center; }
@media (max-width: 600px) {
  .cn-actions > * { flex: 1 1 100%; width: auto; }
}

/* ==========================================================================
   2. Vignettes photo : une photo, un nom, au plus une ligne
   ========================================================================== */

.cn-tuiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
/* « Pour qui » : une ligne de texte sous chaque nom, donc des vignettes plus hautes sur téléphone. */
@media (max-width: 900px) {
  .cn-tuiles--lignes .cn-tuile { aspect-ratio: 2 / 3; }
}
@media (min-width: 901px) {
  .cn-tuiles { gap: 14px; }
  .cn-tuiles--3 { grid-template-columns: repeat(3, 1fr); }
  .cn-tuiles--4 { grid-template-columns: repeat(4, 1fr); }
}
/* Trois vignettes (équipe, journées) : une colonne sur téléphone, plus larges. */
@media (max-width: 900px) {
  .cn-tuiles--3:not(.cn-tuiles--lignes) { grid-template-columns: 1fr; }
  .cn-tuiles--3:not(.cn-tuiles--lignes) .cn-tuile { aspect-ratio: 4 / 3; }
}

.cn-tuile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--pa-carte-alt);
  color: var(--pa-blanc);
  text-decoration: none;
}
.cn-tuile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Visuel 16/9 des bottes de pressothérapie dans une vignette en hauteur : les bottes à l'image. */
.cn-tuile img.cn-tuile__img--bottes { object-position: 38% 60%; }
.cn-tuile:hover img,
.cn-tuile:focus-visible img { transform: scale(1.06); }
.cn-tuile:focus-visible { outline: 3px solid var(--pa-accent); outline-offset: 2px; }
.cn-tuile__nom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 64px 14px 14px;
  background: linear-gradient(0deg, rgba(1, 26, 47, 0.96) 30%, rgba(1, 26, 47, 0));
  font-family: var(--pa-police-titre);
  text-transform: uppercase;
  font-size: clamp(14px, 3.9vw, 19px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--pa-blanc);
}
.cn-tuile__ligne,
.cn-tuile__lien {
  display: block;
  margin-top: 7px;
  font-family: var(--pa-police-texte);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  line-height: 1.35;
}
.cn-tuile__ligne { font-weight: 600; color: var(--pa-texte-2); }
.cn-tuile__lien {
  font-weight: 800;
  color: var(--pa-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 901px) {
  .cn-tuile__nom { font-size: clamp(17px, 1.5vw, 22px); padding: 80px 20px 20px; }
  .cn-tuile__ligne, .cn-tuile__lien { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-tuile img { transition: none; }
  .cn-tuile:hover img, .cn-tuile:focus-visible img { transform: none; }
}

/* ==========================================================================
   3. Pastilles, étapes numérotées, notes, mentions
   ========================================================================== */

.cn-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.cn-pastilles li {
  padding: 11px 16px;
  border: 2px solid var(--pa-bordure-btn);
  font-size: 14px;
  font-weight: 700;
  color: var(--pa-texte-2);
}

.cn-etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
@media (max-width: 700px) {
  .cn-etapes { grid-template-columns: 1fr; }
}
.cn-etapes li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px 16px 70px;
  background: var(--pa-panneau);
  border-top: 3px solid var(--pa-accent);
  counter-increment: etape;
}
.cn-etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 20px;
  top: 12px;
  font-family: var(--pa-police-titre);
  font-size: 36px;
  line-height: 1;
  color: var(--pa-accent);
}
.cn-etapes strong {
  font-family: var(--pa-police-titre);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.1;
  color: var(--pa-blanc);
}
.cn-etapes span {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--pa-texte-2);
}

/* Note de cadrage (mention contractuelle) */
.cn-note {
  margin: 26px 0 0;
  border-left: 3px solid var(--pa-accent);
  padding: 13px 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--pa-texte-3);
  background: rgba(255, 108, 2, 0.06);
}

/* Mention de bas de page : « porté par… » + phrase « structure indépendante »
   du client (texte repris mot pour mot, templates/vitrine/_independance.html). */
.cn-mention {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pa-texte);
}
.cn-mention-independance { max-width: 640px; }
.cn-lieu__independante {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--pa-sourdine);
}

/* ==========================================================================
   4. Page « Le centre »
   ========================================================================== */

/* Bandeau : l'adresse est lisible et cliquable dès le premier écran. */
.cn-hero .vt-hero__contenu { padding-block: 44px; }
@media (max-width: 900px) {
  .cn-hero { min-height: 60vh; }
}
/* Téléphone (QA 19/10/2026) : le voile horizontal couvrait toute la photo. Le
   texte descend en bas, sur un voile vertical ; le haut du bandeau laisse
   voir la photo (geste, visage). Le bouton reste visible sans défiler. */
@media (max-width: 700px) {
  .cn-hero { align-items: flex-end; }
  .cn-hero .vt-hero__contenu { padding-block: 150px 36px; }
  .cn-hero .vt-hero__voile {
    background: linear-gradient(0deg, var(--pa-fond) 0%, rgba(1, 38, 71, 0.88) 55%, rgba(1, 38, 71, 0.28) 100%);
  }
}
.cn-hero__adresse {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  padding: 6px 0 6px 14px;
  border-left: 3px solid var(--pa-accent);
  color: var(--pa-blanc);
  text-decoration: none;
}
.cn-hero__adresse strong {
  font-size: clamp(17px, 4.6vw, 24px);
  font-weight: 800;
  line-height: 1.25;
}
.cn-hero__adresse span {
  font-size: 14px;
  font-weight: 700;
  color: var(--pa-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cn-hero__adresse:hover span,
.cn-hero__adresse:focus-visible span { color: var(--pa-blanc); }
.cn-hero__parking {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pa-texte);
}

/* Diaporama de la visite. Piste à défilement natif et accrochage : sans
   JavaScript, on la fait glisser au doigt ; le script ajoute flèches et
   compteur (cachés par l'attribut `hidden` tant qu'il n'a pas démarré). */
.cn-diapo { position: relative; }
.cn-diapo__piste {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cn-diapo__piste::-webkit-scrollbar { display: none; }
.cn-diapo__slide {
  position: relative;
  flex: 0 0 100%;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--pa-carte-alt);
  cursor: zoom-in;
}
@media (min-width: 701px) { .cn-diapo__slide { aspect-ratio: 3 / 2; } }
@media (min-width: 1101px) { .cn-diapo__slide { aspect-ratio: 16 / 9; } }
.cn-diapo__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.cn-diapo__slide:hover img { transform: scale(1.04); }
.cn-diapo__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 56px 18px 16px;
  background: linear-gradient(0deg, rgba(1, 26, 47, 0.94), rgba(1, 26, 47, 0));
  font-family: var(--pa-police-titre);
  text-transform: uppercase;
  font-size: clamp(16px, 4.6vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--pa-blanc);
}
.cn-diapo__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--pa-bordure-vive);
  background: rgba(1, 26, 47, 0.82);
  color: var(--pa-blanc);
  font-family: var(--pa-police-texte);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.cn-diapo__nav:hover,
.cn-diapo__nav:focus-visible {
  background: var(--pa-accent);
  border-color: var(--pa-accent);
  color: var(--pa-fond);
}
.cn-diapo__nav--prev { left: 10px; }
.cn-diapo__nav--next { right: 10px; }
.cn-diapo__nav[hidden],
.cn-diapo__compteur[hidden] { display: none; }
.cn-diapo__compteur {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;
  padding: 6px 12px;
  background: rgba(1, 26, 47, 0.84);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--pa-blanc);
  pointer-events: none;
}
/* Téléphone (QA 19/10/2026) : la photo suivante dépasse à droite, on comprend
   qu'il faut glisser. Sur écran tactile, les flèches (48 px au milieu de
   chaque bord) masquaient le quart de la photo et bloquaient le balayage qui
   commençait dessus : elles disparaissent, le doigt suffit. */
@media (max-width: 700px) {
  .cn-diapo__piste { gap: 8px; }
  .cn-diapo__slide { flex-basis: 86%; }
}
@media (hover: none) and (pointer: coarse) {
  .cn-diapo__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-diapo__slide img { transition: none; }
  .cn-diapo__slide:hover img { transform: none; }
}

/* Où venir : photo de l'entrée + adresse, téléphone, parking */
.cn-ou {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .cn-ou { grid-template-columns: 1fr; gap: 22px; }
}
.cn-ou__photo {
  position: relative;
  display: block;
  min-height: 320px;
  overflow: hidden;
  background: var(--pa-carte-alt);
  cursor: zoom-in;
}
@media (max-width: 900px) {
  .cn-ou__photo { min-height: 0; aspect-ratio: 1 / 1; }
}
.cn-ou__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.cn-ou__infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.cn-ou__adresse {
  align-self: flex-start;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--pa-accent);
  font-family: var(--pa-police-titre);
  text-transform: uppercase;
  font-size: clamp(24px, 6.4vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--pa-blanc);
  text-decoration: none;
}
.cn-ou__adresse:hover,
.cn-ou__adresse:focus-visible { color: var(--pa-accent); }
.cn-ou__commune {
  margin: -4px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--pa-sourdine);
}
.cn-ou__parking {
  align-self: flex-start;
  margin: 6px 0 0;
  padding: 9px 14px;
  background: var(--pa-accent-tint-badge);
  border-left: 3px solid var(--pa-accent);
  font-size: 14px;
  font-weight: 800;
  color: var(--pa-blanc);
}
.cn-ou__tel {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 48px;
  font-family: var(--pa-police-titre);
  font-size: clamp(22px, 6vw, 30px);
  color: var(--pa-blanc);
  text-decoration: none;
}
.cn-ou__tel:hover,
.cn-ou__tel:focus-visible { color: var(--pa-accent); }
.cn-ou__horaires { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pa-texte-2); }
.cn-ou .cn-actions { margin-top: 10px; }
.cn-fin .cn-actions { margin-top: 22px; }

/* ==========================================================================
   5. Visionneuse plein écran (static/js/centre.js)
   ========================================================================== */

html.cn-vis-ouverte { overflow: hidden; }
.cn-vis {
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* Au doigt : le balayage est géré par centre.js (photo suivante, fermer vers
     le bas), le pincement reste au navigateur ; la page dessous ne défile pas. */
  touch-action: pinch-zoom;
  overscroll-behavior: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 10, 20, 0.96);
}
.cn-vis[hidden] { display: none; }
.cn-vis__fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}
.cn-vis__img {
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
  -webkit-user-drag: none;
  user-select: none;
  max-width: 100vw;
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
  object-fit: contain;
}
.cn-vis__legende {
  min-height: 56px;
  padding: 14px 72px 0;
  box-sizing: border-box;
  max-width: 720px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: var(--pa-texte-2);
}
.cn-vis__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--pa-bordure-vive);
  background: var(--pa-fond);
  color: var(--pa-blanc);
  font-family: var(--pa-police-texte);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.cn-vis__btn:hover,
.cn-vis__btn:focus-visible {
  background: var(--pa-accent);
  border-color: var(--pa-accent);
  color: var(--pa-fond);
}
.cn-vis__fermer { top: 12px; right: 12px; }
.cn-vis__prec { left: 10px; top: 50%; transform: translateY(-50%); }
.cn-vis__suiv { right: 10px; top: 50%; transform: translateY(-50%); }
.cn-vis__btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cn-vis__img { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .cn-vis { animation: cn-vis-entree 0.25s ease-out; }
  @keyframes cn-vis-entree { from { opacity: 0; } to { opacity: 1; } }
}

/* ==========================================================================
   6. Page « En images » : mosaïque de photos (portrait = 2 lignes, paysage =
      2 colonnes x 2 lignes), le tout s'ouvre dans la visionneuse.
   ========================================================================== */

.cn-groupe { margin-bottom: 44px; }
.cn-groupe:last-child { margin-bottom: 0; }
.cn-groupe__titre { margin-bottom: 16px; }
.cn-groupe__resume { max-width: 640px; margin: -6px 0 16px; }
.cn-mosaique {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(120px, 38vw, 190px);
  grid-auto-flow: dense;
  gap: 6px;
}
@media (min-width: 901px) {
  .cn-mosaique {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 230px;
    gap: 8px;
  }
}
.cn-mosaique__tuile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--pa-carte-alt);
  cursor: zoom-in;
}
.cn-mosaique__tuile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cn-mosaique__tuile:hover img,
.cn-mosaique__tuile:focus-visible img { transform: scale(1.06); }
.cn-mosaique__tuile:focus-visible { outline: 3px solid var(--pa-accent); outline-offset: -3px; }
.cn-mosaique__tuile.est-portrait { grid-row: span 2; }
.cn-mosaique__tuile.est-paysage { grid-column: span 2; grid-row: span 2; }
/* Section des albums vide (seul un album de démonstration publié) : masquée. */
.cn-albums:not(:has(.cn-groupe)) { display: none; }
/* Albums du back-office : photos de format inconnu, toutes en 3:4. */
.cn-mosaique--album { grid-auto-rows: auto; }
.cn-mosaique--album .cn-mosaique__tuile { aspect-ratio: 3 / 4; }
@media (prefers-reduced-motion: reduce) {
  .cn-mosaique__tuile img { transition: none; }
  .cn-mosaique__tuile:hover img, .cn-mosaique__tuile:focus-visible img { transform: none; }
}

/* ==========================================================================
   7. Page « Rejoindre l'équipe »
   ========================================================================== */

.re-entete {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 44px;
  align-items: center;
}
@media (max-width: 900px) {
  .re-entete { grid-template-columns: 1fr; gap: 26px; }
}
.re-entete__photo img {
  width: 100%;
  /* `height: auto` : l'attribut HTML `height` fixerait sinon la hauteur et
     rendrait `aspect-ratio` inopérant (même piège que .eq-carte__photo). */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
}
@media (max-width: 900px) {
  .re-entete__photo img { aspect-ratio: 4 / 3; }
}
.re-intro { max-width: 640px; margin-bottom: 24px; }
.re-profils {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .re-profils { grid-template-columns: 1fr; }
}
.re-profil {
  padding: 20px 22px 22px;
  background: var(--pa-carte-alt);
  border-top: 4px solid var(--pa-accent);
}
.re-profil .pa-titre-2 { margin-bottom: 8px; font-size: 20px; }
.re-colonne .vt-titre-marketing { margin-bottom: 22px; }
.re-etapes { grid-template-columns: 1fr; margin-bottom: 20px; }