/*
 * Pro/Active — « Le centre » et « Clubs & entreprises » (chantier 11/09/2026).
 * Styles additionnels au-dessus de proactive.css et vitrine.css (non modifiés).
 * Mêmes conventions que vitrine.css : design anguleux, mobile d'abord,
 * point de rupture à 900px. Pictogrammes SVG maison (pas d'émoji) dans le
 * même style de trait que le sprite `ic-*` de l'accueil (stroke fin, accent).
 */

/* ==========================================================================
   Pictogrammes
   ========================================================================== */

.cn-picto {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pa-fond);
  border: 2px solid var(--pa-bordure-douce);
  flex: none;
  margin-bottom: 18px;
}
.cn-picto svg {
  width: 28px;
  height: 28px;
  stroke: var(--pa-accent);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Sur un fond déjà clair (carte accent, panneau), le picto repasse sur le
   fond profond pour garder le contraste : une teinte plus sombre que son
   support, à l'inverse de la règle générale des cartes. */
.cn-picto--sombre {
  background: var(--pa-fond-profond);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Légère mise en avant au survol d'une carte — cosmétique, jamais porteuse
   de contenu : sans elle rien ne manque. Coupée si l'utilisateur préfère
   moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
  .cn-carte-picto {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cn-carte-picto:hover .cn-picto,
  .cn-carte-picto:focus-within .cn-picto {
    transform: translateY(-3px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ==========================================================================
   Cartes « Ce qu'on y trouve » illustrées d'un visuel généré (chantier
   photos du 11/09/2026). Remplace le pictogramme par une photo pleine
   largeur sur les cartes qui en ont une ; les autres gardent `.cn-picto`
   sans rien laisser de vide à la place.
   ========================================================================== */

.cn-carte-picto--photo {
  padding: 0 0 30px;
  overflow: hidden;
}
.cn-carte-picto__photo {
  display: block;
  width: 100%;
  /* `height: auto` est nécessaire malgré `aspect-ratio` : l'attribut HTML
     `height="1080"` (posé contre les sauts de mise en page) devient sinon
     un indice de présentation qui fixe la hauteur en dur à 1080px et rend
     `aspect-ratio` inopérant (constaté à la capture : l'image s'étirait
     sur toute la hauteur de la carte). */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 20px;
}
.cn-carte-picto--photo h3,
.cn-carte-picto--photo p {
  margin-inline: 26px;
}

/* ==========================================================================
   Étapes numérotées (déroulé d'une visite, d'une demande de devis…)
   ========================================================================== */

.cn-etape__n {
  font-family: var(--pa-police-titre);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--pa-accent);
  margin-bottom: 14px;
}

/* ==========================================================================
   Où c'est / comment venir
   ========================================================================== */

.cn-acces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .cn-acces { grid-template-columns: 1fr; gap: 26px; }
}
.cn-acces__carte {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cn-acces__ligne {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cn-acces__ligne .cn-picto {
  width: 44px;
  height: 44px;
  margin-bottom: 0;
}
.cn-acces__ligne .cn-picto svg { width: 22px; height: 22px; }

/* ==========================================================================
   Marqueur « à confirmer » — convention du projet : jamais un chiffre ou un
   détail inventé, ce badge dit clairement que la donnée manque encore.
   ========================================================================== */

.cn-confirmer {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--pa-placeholder);
  border: 1px solid var(--pa-bordure-vive);
  padding: 3px 8px;
  margin-left: 8px;
  white-space: nowrap;
  vertical-align: middle;
}

/* ==========================================================================
   Note de cadrage (mentions contractuelles, précisions)
   ========================================================================== */

.cn-note {
  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);
}

/* ==========================================================================
   Publics (clubs / entreprises)
   ========================================================================== */

.cn-public__entete {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}
.cn-public__entete .cn-picto { margin-bottom: 0; }
.cn-public .pa-liste-slash { margin-top: 16px; }


/* « Ce qu'on y trouve » : quatre cartes, donc quatre colonnes sur grand écran
   (trois laissaient une carte orpheline en seconde ligne), deux sur écran
   moyen, une seule sur téléphone via la règle générale de .vt-grille-3. */
@media (min-width: 1101px) {
  .cn-grille-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .cn-grille-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Grille tarifaire (chantier 15/09/2026 : « Intervention mobile, club ou
   événement »). Un vrai <table> (accessibilité, demande client), pas des
   div : le conteneur défile horizontalement si jamais la fenêtre est trop
   étroite pour la largeur minimale du tableau, sans casser le reste de la
   page (même logique défensive que les rails de cartes du parc BE WEB).
   ========================================================================== */

.cn-tarifs-intro {
  max-width: 640px;
  margin-bottom: 22px;
}

.cn-tarifs-scroll {
  overflow-x: auto;
  border: 1px solid var(--pa-bordure-douce);
  margin-bottom: 16px;
}

.cn-tarifs {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
}

.cn-tarifs caption {
  caption-side: top;
  text-align: left;
  padding: 14px 20px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--pa-texte-3);
  background: var(--pa-carte-alt);
  white-space: nowrap;
}

.cn-tarifs th,
.cn-tarifs td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid var(--pa-bordure-douce);
}

.cn-tarifs thead th {
  font-family: var(--pa-police-titre);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pa-sourdine);
  background: var(--pa-carte-alt);
}

.cn-tarifs tbody th {
  font-weight: 700;
  color: var(--pa-texte);
}

.cn-tarifs tbody td {
  font-family: var(--pa-police-titre);
  color: var(--pa-accent);
  font-size: 18px;
  white-space: nowrap;
}

.cn-tarifs tbody tr:last-child th,
.cn-tarifs tbody tr:last-child td {
  border-bottom: none;
}

/* --- Section « Le lieu » en clair (18/09/2026) -------------------------- */
.cn-lieu {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: start;
  margin-top: 40px;
}
.cn-lieu .vt-titre-marketing--sm {
  margin: 10px 0 18px;
}
.cn-lieu__independante {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--pa-texte-2);
}
@media (max-width: 900px) {
  .cn-lieu {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 28px;
  }
}