/* ==========================================================================
   ACCROKITE — FICHES ET ARCHIVES
   Habillage des vues rendues par inc/single-views.php : fiches cours, spot,
   moniteur, hébergement, grilles d'archive et résultats de recherche.
   N'utilise que les tokens de tokens.css — aucune couleur en dur.
   Chargé après components.css.
   ========================================================================== */

.ak-view {
  max-width: var(--ak-content-max);
  margin-inline: auto;
  padding-inline: var(--ak-gutter);
  padding-block: var(--ak-space-10) var(--ak-space-14);
  color: var(--ak-foreground);
}

@media (max-width: 1024px) { .ak-view { padding-inline: var(--ak-gutter-tablet); } }
@media (max-width: 640px)  { .ak-view { padding-inline: var(--ak-gutter-mobile); padding-block: var(--ak-space-7) var(--ak-space-10); } }

/* --------------------------------------------------------------------------
   1. EN-TÊTE DE FICHE
   -------------------------------------------------------------------------- */

.ak-view-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ak-grid-gap-wide);
  align-items: center;
  margin-bottom: var(--ak-space-10);
}

.ak-view-hero--flat { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 860px) {
  .ak-view-hero { grid-template-columns: minmax(0, 1fr); gap: var(--ak-space-6); }
  /* La photo passe au-dessus du texte : c'est elle qui situe le lieu. */
  .ak-view-hero__media { order: -1; }
}

.ak-view-kicker {
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  font-weight: var(--ak-weight-semibold);
  letter-spacing: var(--ak-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ak-primary);
  margin: 0 0 var(--ak-space-2);
}

.ak-view-title {
  font-family: var(--ak-font-display);
  font-weight: var(--ak-weight-display);
  font-size: var(--ak-fluid-display);
  line-height: 1.08;
  letter-spacing: var(--ak-tracking-tight);
  text-wrap: balance;
  margin: 0;
  color: var(--ak-foreground);
}

.ak-view-lead {
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-subhead);
  line-height: var(--ak-lh-subhead);
  color: var(--ak-muted-foreground);
  max-width: 46ch;
  margin: var(--ak-space-4) 0 0;
}

.ak-view-hero__media { margin: 0; }

.ak-view-hero__img,
.ak-view-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ak-radius-xl);
  box-shadow: var(--ak-shadow-card);
}

/* --------------------------------------------------------------------------
   2. PRIX ET BOUTONS
   -------------------------------------------------------------------------- */

.ak-view-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ak-space-2);
  margin: var(--ak-space-6) 0 0;
}

.ak-view-price__now {
  font-family: var(--ak-font-display);
  font-weight: var(--ak-weight-display);
  font-size: var(--ak-size-section);
  line-height: 1;
  letter-spacing: var(--ak-tracking-tight);
  color: var(--ak-foreground);
}

.ak-view-price__was {
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-body);
  color: var(--ak-muted-foreground);
  text-decoration: line-through;
}

.ak-view-price__unit {
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  color: var(--ak-muted-foreground);
}

.ak-view-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ak-space-3);
  margin: var(--ak-space-6) 0 0;
}

/* --------------------------------------------------------------------------
   3. TABLEAU DE CARACTÉRISTIQUES
   -------------------------------------------------------------------------- */

/* Les séparateurs sont portés par les cellules, pas par un fond visible à
   travers les gouttières : une ligne incomplète laissait sinon un pavé gris. */
.ak-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-lg);
  overflow: hidden;
  margin: 0 0 var(--ak-space-10);
}

.ak-fact {
  padding: var(--ak-space-4) var(--ak-space-5);
  border-right: 1px solid var(--ak-border);
  border-bottom: 1px solid var(--ak-border);
}

.ak-fact dt {
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  font-weight: var(--ak-weight-semibold);
  letter-spacing: var(--ak-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ak-muted-foreground);
  margin: 0 0 var(--ak-space-1);
}

.ak-fact dd {
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-body);
  line-height: var(--ak-lh-body);
  color: var(--ak-foreground);
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. CORPS ÉDITORIAL
   -------------------------------------------------------------------------- */

.ak-view-body {
  max-width: 68ch;
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-body);
  line-height: var(--ak-lh-body);
  color: var(--ak-foreground);
}

.ak-view-body > * + * { margin-top: var(--ak-space-4); }

.ak-view-body h2,
.ak-view-body h3 {
  font-family: var(--ak-font-display);
  font-weight: var(--ak-weight-display);
  letter-spacing: var(--ak-tracking-tight);
  color: var(--ak-foreground);
  margin-top: var(--ak-space-8);
}

.ak-view-body h2 { font-size: var(--ak-size-subhead); }
.ak-view-body h3 { font-size: var(--ak-size-card); }
.ak-view-body a  { color: var(--ak-primary); }
.ak-view-body img { max-width: 100%; height: auto; border-radius: var(--ak-radius-lg); }

/* --------------------------------------------------------------------------
   5. ENCARTS
   -------------------------------------------------------------------------- */

.ak-view-outcome,
.ak-view-included,
.ak-view-note {
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-body);
  line-height: var(--ak-lh-body);
  border-radius: var(--ak-radius-lg);
  padding: var(--ak-space-4) var(--ak-space-5);
  margin: 0 0 var(--ak-space-8);
  max-width: 68ch;
}

.ak-view-outcome {
  background: var(--ak-surface-light);
  border-left: 3px solid var(--ak-cta);
  color: var(--ak-foreground);
}

.ak-view-outcome span {
  display: block;
  font-size: var(--ak-size-small);
  font-weight: var(--ak-weight-semibold);
  letter-spacing: var(--ak-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ak-muted-foreground);
  margin-bottom: var(--ak-space-1);
}

.ak-view-included { background: var(--ak-surface-light); color: var(--ak-foreground); }
.ak-view-note     { background: var(--ak-card); border: 1px solid var(--ak-border); color: var(--ak-muted-foreground); }
.ak-view-note strong,
.ak-view-included strong { color: var(--ak-foreground); }

.ak-view-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ak-grid-gap);
  margin-top: var(--ak-space-8);
}

.ak-view-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ak-radius-lg);
}

/* --------------------------------------------------------------------------
   6. RENVOIS EN BAS DE FICHE
   -------------------------------------------------------------------------- */

.ak-view-more {
  margin-top: var(--ak-space-12);
  padding-top: var(--ak-space-8);
  border-top: 1px solid var(--ak-border);
}

.ak-view-more h2 {
  font-family: var(--ak-font-display);
  font-weight: var(--ak-weight-display);
  font-size: var(--ak-size-subhead);
  letter-spacing: var(--ak-tracking-tight);
  margin: 0 0 var(--ak-space-5);
  color: var(--ak-foreground);
}

.ak-view-more ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ak-grid-gap);
}

.ak-view-more li {
  background: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-lg);
  padding: var(--ak-space-4) var(--ak-space-5);
}

.ak-view-more a {
  display: block;
  font-family: var(--ak-font-display);
  font-weight: var(--ak-weight-semibold);
  font-size: var(--ak-size-card);
  color: var(--ak-foreground);
  text-decoration: none;
}

.ak-view-more a:hover { color: var(--ak-primary); }

.ak-view-more span {
  display: block;
  margin-top: var(--ak-space-1);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  line-height: var(--ak-lh-small);
  color: var(--ak-muted-foreground);
}

/* --------------------------------------------------------------------------
   7. GRILLES D'ARCHIVE
   -------------------------------------------------------------------------- */

.ak-view-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--ak-grid-gap);
}

.ak-view-card {
  background: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-xl);
  overflow: hidden;
  transition: box-shadow var(--ak-duration) var(--ak-ease),
              transform var(--ak-duration) var(--ak-ease);
}

.ak-view-card:hover {
  box-shadow: var(--ak-shadow-card);
  transform: translateY(-2px);
}

.ak-view-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.ak-view-card__link:focus-visible {
  outline: 2px solid var(--ak-primary);
  outline-offset: 2px;
}

.ak-view-card__media { display: block; }

.ak-view-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.ak-view-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--ak-space-2);
  padding: var(--ak-space-5);
  flex: 1;
}

.ak-view-card__kicker {
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  font-weight: var(--ak-weight-semibold);
  letter-spacing: var(--ak-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ak-primary);
}

.ak-view-card__title {
  font-family: var(--ak-font-display);
  font-weight: var(--ak-weight-display);
  font-size: var(--ak-size-card);
  line-height: var(--ak-lh-card);
  letter-spacing: var(--ak-tracking-tight);
  color: var(--ak-foreground);
  text-wrap: balance;
}

.ak-view-card__summary {
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  line-height: var(--ak-lh-small);
  color: var(--ak-muted-foreground);
}

.ak-view-card__price {
  margin-top: auto;
  padding-top: var(--ak-space-2);
  font-family: var(--ak-font-display);
  font-weight: var(--ak-weight-display);
  font-size: var(--ak-size-subhead);
  color: var(--ak-foreground);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. RÉSULTATS DE RECHERCHE
   -------------------------------------------------------------------------- */

.ak-view-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 72ch;
}

.ak-view-results li {
  padding: var(--ak-space-5) 0;
  border-bottom: 1px solid var(--ak-border);
}

.ak-view-results li:last-child { border-bottom: none; }

.ak-view-results a {
  font-family: var(--ak-font-display);
  font-weight: var(--ak-weight-semibold);
  font-size: var(--ak-size-card);
  color: var(--ak-foreground);
  text-decoration: none;
}

.ak-view-results a:hover { color: var(--ak-primary); }

.ak-view-results__type {
  display: inline-block;
  margin-left: var(--ak-space-3);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  letter-spacing: var(--ak-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ak-muted-foreground);
}

.ak-view-results__excerpt {
  display: block;
  margin-top: var(--ak-space-2);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  line-height: var(--ak-lh-small);
  color: var(--ak-muted-foreground);
}

/* --------------------------------------------------------------------------
   9. HÉBREU — mise en page de droite à gauche
   -------------------------------------------------------------------------- */

[dir="rtl"] .ak-view-outcome { border-left: 0; border-right: 3px solid var(--ak-cta); }
[dir="rtl"] .ak-view-results__type { margin-left: 0; margin-right: var(--ak-space-3); }

/* --------------------------------------------------------------------------
   10. MOUVEMENT RÉDUIT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ak-view-card { transition: none; }
  .ak-view-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   11. PASTILLES ET ÉTAT VIDE
   Définies ici parce qu'elles n'existaient que dans le <style> du snippet,
   lequel n'est imprimé que sur les pages qui utilisent ses shortcodes.
   -------------------------------------------------------------------------- */

.ak-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  font-weight: var(--ak-weight-semibold);
  letter-spacing: var(--ak-tracking-eyebrow);
  text-transform: uppercase;
  padding: 2px var(--ak-space-3);
  border-radius: var(--ak-radius-pill);
  background: var(--ak-surface-light);
  color: var(--ak-primary);
  border: 1px solid var(--ak-border);
}

.ak-chip--low { background: var(--ak-accent); color: var(--ak-foreground); border-color: transparent; }

.ak-empty {
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-body);
  line-height: var(--ak-lh-body);
  color: var(--ak-muted-foreground);
  background: var(--ak-card);
  border: 1px dashed var(--ak-border);
  border-radius: var(--ak-radius-lg);
  padding: var(--ak-space-6);
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. EN-TÊTES D'ARCHIVE, RECHERCHE ET 404
   -------------------------------------------------------------------------- */

.ak-view-header { margin-bottom: var(--ak-space-10); max-width: 60ch; }
.ak-view-header .ak-view-lead { margin-top: var(--ak-space-3); }

.ak-view-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ak-space-3);
  margin-top: var(--ak-space-6);
}

.ak-view-search input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
  height: var(--ak-control-md);
  padding-inline: var(--ak-space-5);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-body);
  color: var(--ak-foreground);
  background: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-pill);
}

.ak-view-search input[type="search"]:focus-visible {
  outline: 2px solid var(--ak-primary);
  outline-offset: 1px;
}

.ak-view-quicklinks {
  list-style: none;
  margin: 0 0 var(--ak-space-8);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ak-space-3);
}

.ak-view-quicklinks a {
  display: inline-flex;
  align-items: center;
  height: var(--ak-control-sm);
  padding-inline: var(--ak-space-6);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-ui);
  font-weight: var(--ak-weight-semibold);
  color: var(--ak-primary);
  text-decoration: none;
  background: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-pill);
}

.ak-view-quicklinks a:hover { background: var(--ak-surface-light); color: var(--ak-primary-hover); }

/* --------------------------------------------------------------------------
   13. PAGINATION
   -------------------------------------------------------------------------- */

.ak-view-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ak-space-2);
  margin-top: var(--ak-space-8);
}

.ak-view-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ak-control-sm);
  height: var(--ak-control-sm);
  padding-inline: var(--ak-space-4);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-ui);
  font-weight: var(--ak-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ak-primary);
  text-decoration: none;
  background: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-pill);
}

.ak-view-pagination .page-numbers:hover { background: var(--ak-surface-light); }
.ak-view-pagination .page-numbers.current {
  background: var(--ak-primary);
  color: var(--ak-primary-foreground);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   14. CARTE SANS PHOTO
   Bandeau de repli : même hauteur que les autres, pour que la grille reste
   alignée quand une fiche n'a pas encore de visuel.
   -------------------------------------------------------------------------- */

.ak-view-card__media--empty {
  display: block;
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(120% 90% at 20% 0%, var(--ak-sky) 0%, transparent 60%),
    linear-gradient(160deg, var(--ak-surface-light) 0%, var(--ak-accent) 100%);
}

/* --------------------------------------------------------------------------
   15. PIED DE PAGE — colonnes de liens
   Les trois colonnes étaient des listes écrites en dur dans des widgets HTML.
   Ce sont désormais des menus WordPress (widget « Menu »), pour que WPML
   puisse servir un menu par langue.

   Le widget applique la typographie « Primary » du kit (38 px) via
   .elementor-widget-nav-menu .elementor-nav-menu .elementor-item — d'où des
   sélecteurs d'un cran au-dessus ici, sans !important.
   -------------------------------------------------------------------------- */

.elementor-widget-nav-menu.ak-footer-nav .elementor-nav-menu .elementor-item,
.elementor-widget-nav-menu.ak-footer-nav .elementor-nav-menu .elementor-item:hover,
.elementor-widget-nav-menu.ak-footer-nav .elementor-nav-menu .elementor-item:focus,
.elementor-widget-nav-menu.ak-footer-nav .elementor-nav-menu .elementor-item.elementor-item-active {
  padding: 0;
  background: none;
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-ui);
  line-height: var(--ak-lh-ui);
  font-weight: var(--ak-weight-regular);
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color var(--ak-duration) var(--ak-ease);
}

.elementor-widget-nav-menu.ak-footer-nav .elementor-nav-menu .elementor-item:hover,
.elementor-widget-nav-menu.ak-footer-nav .elementor-nav-menu .elementor-item:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ak-footer-nav .elementor-nav-menu li { margin-bottom: var(--ak-space-2); }
.ak-footer-nav .elementor-nav-menu li:last-child { margin-bottom: 0; }

/* Le widget dessine un soulignement animé au survol : superflu ici. */
.ak-footer-nav .e--pointer-underline .elementor-item:before,
.ak-footer-nav .e--pointer-underline .elementor-item:after { display: none; }

/* --------------------------------------------------------------------------
   16. CARTES À MÉDIA — flotte, matériel, moniteurs
   Même composant sur la page Location et sur l'accueil : une photo à fond
   perdu, puis du texte. Elles étaient à padding:0 alors que les autres cartes
   du site sont écartées, et en overflow:visible, si bien que les angles carrés
   de la photo dépassaient de l'arrondi de la carte.

   On écarte le contenu sans toucher à la photo, qui reste à fond perdu.
   .ak-rent-card est conservé comme alias : c'est le nom posé en base avant
   que le composant ne serve aussi à l'accueil.
   -------------------------------------------------------------------------- */

.ak-media-card,
.ak-rent-card {
  overflow: hidden;              /* la photo se découpe enfin à l'arrondi */
}

.ak-media-card > .elementor-widget:not(.ak-media),
.ak-rent-card > .elementor-widget:not(.ak-media) {
  padding-inline: var(--ak-space-6);
}

/* Un peu d'air entre la photo et le titre : la gouttière de 10 px du
   conteneur est trop serrée face aux 24 px des côtés.
   Elementor remet à zéro la marge des widgets d'un conteneur avec un
   sélecteur à trois classes : il en faut quatre ici pour passer devant,
   ce qui évite un !important. */
.e-con.ak-media-card > .elementor-widget.ak-media,
.e-con.ak-rent-card > .elementor-widget.ak-media {
  margin-bottom: var(--ak-space-2);
}

/* Toutes les cartes d'une grille ont la même hauteur ; sans cette ligne,
   l'appel à l'action flotte à une hauteur différente selon la longueur du
   descriptif. */
.ak-media-card > .elementor-widget:last-child,
.ak-rent-card > .elementor-widget:last-child {
  margin-top: auto;
  padding-bottom: var(--ak-space-6);
}

/* En dessous de 220 px de large — les cartes moniteurs à deux par ligne sur
   téléphone — 24 px d'écart ne laissent que 112 px de texte utile et font
   partir un sous-titre de 34 signes sur quatre lignes. L'écart suit donc la
   carte, et non le point d'arrêt de la page : une carte étroite se resserre
   où qu'elle se trouve. */
.ak-media-card { container-type: inline-size; }

@container (max-width: 220px) {
  .ak-media-card > .elementor-widget:not(.ak-media) { padding-inline: var(--ak-space-4); }
  .ak-media-card > .elementor-widget:last-child     { padding-bottom: var(--ak-space-4); }
}

/* --------------------------------------------------------------------------
   17. PHOTO ENCASTRÉE DANS UNE CARTE
   .ak-image-plain met le rayon des images à zéro, ce qui est juste pour une
   photo à fond perdu — mais la classe est posée sur toutes les images du site,
   y compris celles qui sont encastrées dans une carte arrondie. Une photo à
   angles droits au milieu d'une carte à 20 px de rayon fait inachevé.
   -------------------------------------------------------------------------- */

/* .ak-image-plain carre les angles avec un sélecteur à deux classes, dans une
   feuille chargée après celle-ci : le modificateur doit passer devant sa base. */
.elementor-widget-image.ak-image-plain.ak-media--inset img {
  border-radius: var(--ak-radius-md);
}

/* --------------------------------------------------------------------------
   18. SÉLECTEUR DE COURS — cartes « Choose your activity »
   Le libellé de la carte est un <span> dans un <button>, dont le
   white-space:nowrap se transmet par héritage. Le descriptif ne se repliait
   donc pas : il était coupé en plein mot à l'écran et poussait le document
   à 727 px de large sur un téléphone de 390 px, mettant toute la page en
   défilement latéral. C'était l'unique débordement horizontal du site.
   -------------------------------------------------------------------------- */

.ak-activity,
.ak-activity__text,
.ak-activity__name {
  white-space: normal;
}

/* Ceinture et bretelles : un mot trop long ne doit pas rouvrir la brèche. */
.ak-activity__text {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   19. TABLEAUX DE TARIFS SANS EN-TÊTE, EN MOBILE
   .ak-table--stack empile les lignes en cartes et écrit le libellé de colonne
   via td::before { content: attr(data-label) }. Ces deux tableaux n'ont pas de
   <thead> : le script du thème n'a rien à y lire, le pseudo-élément reste vide
   et, avec justify-content:space-between, renvoie chaque valeur à droite.
   La bande alternée, elle, était portée par la cellule : elle ne couvrait que
   266 px sur les 300 de la ligne.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  .ak-table--flush.ak-table--stack td::before { content: none; }

  .ak-table--flush.ak-table--stack td {
    justify-content: flex-start;
    text-align: start;
    background: transparent;
  }

  /* La bande remonte sur la ligne, qui devient une petite fiche. */
  .ak-table--flush.ak-table--stack tbody tr {
    padding: var(--ak-space-3) var(--ak-space-4);
    border-radius: var(--ak-radius-md);
  }

  .ak-table--flush.ak-table--stack tbody tr:nth-child(odd) {
    background: var(--ak-surface-light);
  }

  /* Intitulé, détail, tarif : une hiérarchie lisible sans en-tête de colonne. */
  .ak-table--flush.ak-table--stack td:first-child {
    font-family: var(--ak-font-display);
    font-size: var(--ak-size-card);
    font-weight: var(--ak-weight-display);
    color: var(--ak-foreground);
  }

  .ak-table--flush.ak-table--stack td:last-child {
    font-weight: var(--ak-weight-semibold);
    color: var(--ak-foreground);
  }
}

/* --------------------------------------------------------------------------
   20. FICHE PRODUIT — choix de la variation
   Le gabarit JetWooBuilder pose un fond presque noir sur la cellule qui
   contient le menu déroulant, tandis que le texte hérite du bleu marine de la
   charte : le champ le plus important de la fiche était illisible.
   -------------------------------------------------------------------------- */

.woocommerce .variations td.value,
.woocommerce .variations .value {
  background: transparent;
  padding: 0;
}

.woocommerce .variations label {
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  font-weight: var(--ak-weight-semibold);
  letter-spacing: var(--ak-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ak-muted-foreground);
}

.woocommerce .variations select {
  min-height: var(--ak-control-md);
  padding-inline: var(--ak-space-5);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-body);
  color: var(--ak-foreground);
  background: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-pill);
}

.woocommerce .variations select:focus-visible {
  outline: 2px solid var(--ak-primary);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   21. CARROUSEL D'AVIS
   Le texte était en gris secondaire sur le bleu ciel de la section : 4,1:1,
   sous le seuil AA pour du 14 px. Et les trois avis tiennent tous à l'écran en
   grand format, ce qui laisse des flèches et des pastilles sans fonction.
   -------------------------------------------------------------------------- */

.elementor-widget-testimonial-carousel .elementor-testimonial__text {
  color: var(--ak-foreground);
}

.elementor-widget-testimonial-carousel .elementor-testimonial__name {
  color: var(--ak-foreground);
}

.elementor-widget-testimonial-carousel .elementor-testimonial__title {
  color: var(--ak-muted-foreground);
}

/* Au-dessus de la tablette, les trois avis sont visibles simultanément :
   les commandes n'ont plus rien à commander. */
@media (min-width: 1025px) {
  .elementor-widget-testimonial-carousel .elementor-swiper-button,
  .elementor-widget-testimonial-carousel .swiper-pagination {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   22. WIDGET DE RÉSERVATION FLOTTANT
   Il est servi dans une iframe fixée en bas de fenêtre, sur toute la largeur :
   son habillage appartient au prestataire, mais il recouvrait en permanence la
   dernière ligne du pied de page. On réserve la hauteur correspondante.
   -------------------------------------------------------------------------- */

body {
  --ak-booking-widget-h: 88px;
}

.elementor-location-footer {
  padding-bottom: var(--ak-booking-widget-h);
}

/* --------------------------------------------------------------------------
   23. ATTENTE DE CHARGEMENT DES VISUELS
   Les images réservent bien leur place (attributs width/height et ratio CSS),
   donc pas de saut de mise en page — mais une grande zone blanche pendant le
   chargement différé donne l'impression d'un bloc cassé. Un aplat doux tient
   la place en attendant.
   -------------------------------------------------------------------------- */

.ak-media,
.ak-view-card__media {
  background: var(--ak-surface-light);
}

/* --------------------------------------------------------------------------
   24. FICHE PRODUIT — zone d'achat
   Suite de la section 20. Le tableau des variations garde deux scories du
   gabarit précédent : un aplat gris derrière le libellé de l'option, et un
   bouton d'ajout au panier ramené à 50 % d'opacité tant qu'aucune option n'est
   choisie — il ne se lit pas comme « en attente » mais comme cassé.
   -------------------------------------------------------------------------- */

.woocommerce .variations th.label,
.woocommerce .variations td.label,
.woocommerce .variations .label {
  background: transparent;
  padding: 0 var(--ak-space-4) 0 0;
  vertical-align: middle;
}

/* Le bouton d'ajout au panier restait gris avec du texte blanc dans les deux
   états — donc illisible, y compris une fois la variation choisie. Une règle
   concurrente l'emporte à spécificité égale parce qu'elle est chargée après :
   on monte d'un cran plutôt que de poser un !important. */
.woocommerce div.product form.cart button.single_add_to_cart_button:not(.disabled):not(:disabled) {
  background-color: var(--ak-cta);
  color: var(--ak-cta-foreground);
  border-color: transparent;
  opacity: 1;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:not(.disabled):not(:disabled):hover {
  background-color: var(--ak-cta-hover);
  color: #fff;
}

/* NOTE — état « en attente » du bouton d'ajout au panier.
   Tant qu'aucune option n'est choisie, WooCommerce pose .disabled sur le bouton
   et bloque le clic, mais rien ne le signale visuellement : il garde la couleur
   d'action. Trois pistes ont été tentées sans succès — recoloration à forte
   spécificité, ciblage par la classe d'état du conteneur, désaturation — toutes
   perdues face au CSS que le widget « Ajouter au panier » d'Elementor Pro génère
   pour cet élément (couleurs et filtres).
   Le réglage doit donc se faire à la source, dans le gabarit 11639 : sélectionner
   le widget, onglet Style, et définir l'état désactivé du bouton. On évite ainsi
   un !important qui se retournerait contre la prochaine personne. */

.woocommerce-variation-add-to-cart-disabled button.single_add_to_cart_button {
  cursor: not-allowed;
}

/* Références et catégorie : une ligne chacune, en information secondaire. */
.woocommerce .product_meta > span {
  display: block;
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  line-height: var(--ak-lh-small);
  color: var(--ak-muted-foreground);
}

.woocommerce .product_meta .detail-label {
  font-weight: var(--ak-weight-semibold);
  letter-spacing: var(--ak-tracking-eyebrow);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   25. FIL D'ARIANE
   Le fil de WooCommerce n'existait que sur la boutique et les fiches produit,
   d'où une navigation qui apparaissait et disparaissait selon les pages. Celui
   du thème est posé sous l'en-tête, sur toutes les vues sauf l'accueil.
   -------------------------------------------------------------------------- */

.ak-crumbs {
 /* Le fil flottait sur le fond de page, sans padding bas : le texte se
     retrouvait colle au bord de la premiere section, y compris quand
     celle-ci portait une bande foncee. Il devient une barre pleine largeur
     posee sous l'en-tete, dont elle reprend le fond et la ligne de separation. */
  background-color: var(--ak-card);
  border-bottom: 1px solid var(--ak-border);
  max-width: none;
  margin-inline: 0;
  padding: 0;
}

.ak-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ak-space-2);
  list-style: none;
  margin-inline: auto;
  /* La gouttiere est dans le padding : la largeur maximale l'inclut, sinon
     elle serait comptee deux fois et le fil se retrouverait indente de
     72px de plus que le logo et le titre de page. */
  max-width: calc(var(--ak-content-max) + 2 * var(--ak-gutter));
  padding: var(--ak-space-3) var(--ak-gutter);
}

/* En dessous du desktop, les conteneurs Elementor n'utilisent pas les
   gouttieres du theme : leur boite interne passe a 3% en tablette et a un
   16px fixe en mobile. Le fil s'aligne sur cette geometrie reelle, sans quoi
   il se decale par rapport au titre de page (40 contre 27, 20 contre 16). */
@media (max-width: 1024px) {
  .ak-crumbs ol {
    max-width: none;
    padding-inline: 3%;
  }
}

@media (max-width: 640px) {
  .ak-crumbs ol {
    max-width: none;
    padding-inline: 16px;
  }
}

.ak-crumbs li {
  display: flex;
  align-items: center;
  gap: var(--ak-space-2);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  line-height: var(--ak-lh-small);
  color: var(--ak-muted-foreground);
}

/* Le séparateur est décoratif : il n'est pas lu par les lecteurs d'écran. */
.ak-crumbs li + li::before {
  content: "/";
  color: var(--ak-border);
}

.ak-crumbs a {
  color: var(--ak-muted-foreground);
  text-decoration: none;
}

.ak-crumbs a:hover,
.ak-crumbs a:focus-visible {
  color: var(--ak-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ak-crumbs [aria-current="page"] { color: var(--ak-foreground); }

[dir="rtl"] .ak-crumbs li + li::before { content: "\\\\"; }

/* --------------------------------------------------------------------------
   26. CARTES DE SPOTS — page The Spot
   Ces quatre encarts décrivaient les spots sans mener nulle part. Ils sont
   devenus des liens : trois vers la fiche du spot, le dernier vers le contact.
   Il faut donc qu'ils se comportent comme des liens, sans en prendre l'allure.
   -------------------------------------------------------------------------- */

a.ak-fit__card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--ak-duration) var(--ak-ease),
              transform var(--ak-duration) var(--ak-ease);
}

a.ak-fit__card:hover {
  box-shadow: var(--ak-shadow-card);
  transform: translateY(-2px);
}

a.ak-fit__card:focus-visible {
  outline: 2px solid var(--ak-primary);
  outline-offset: 3px;
}

a.ak-fit__card:hover .ak-fit__name { color: var(--ak-primary); }

@media (prefers-reduced-motion: reduce) {
  a.ak-fit__card { transition: none; }
  a.ak-fit__card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   27. EN-TÊTE COLLANT ET MENUS DÉROULANTS
   Deux demandes du document client : garder le menu visible au défilement,
   et faire apparaître les sous-pages au survol des entrées principales.
   Le widget Nav Menu d'Elementor Pro ouvre déjà ses sous-menus tout seul ;
   il ne leur donne en revanche aucune allure. On la lui donne ici.
   Les sélecteurs passent par .ak-nav parce que la feuille d'Elementor est
   chargée après celle-ci : à égalité de spécificité, c'est elle qui gagne.
   -------------------------------------------------------------------------- */

/* C'est le <header> qui colle, pas le conteneur Elementor : ce dernier fait
   exactement la hauteur de son parent, un élément collant n'y a donc aucune
   course à parcourir et ne décolle jamais. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 90;
}

.ak-header {
  background-color: var(--ak-card);
  border-bottom: 1px solid var(--ak-border);
}

/* La barre d'administration de WordPress n'est fixe qu'au-delà de 600px. */
@media screen and (min-width: 783px) {
  body.admin-bar .elementor-location-header { top: 32px; }
}

@media screen and (min-width: 601px) and (max-width: 782px) {
  body.admin-bar .elementor-location-header { top: 46px; }
}

/* Une ancre ne doit pas atterrir sous l'en-tête. */
html { scroll-padding-top: var(--ak-header-offset, 120px); }

/* --- Sous-menus, version bureau ------------------------------------------ */

/* SmartMenus, le script d'Elementor, ouvre les sous-menus au survol — mais il
   bascule en mode « tactile » dès qu'il n'a pas détecté de souris, et le
   sous-menu ne s'ouvre alors qu'au clic. Le survol est ici garanti en CSS :
   quand le script fait son travail les deux règles disent la même chose,
   quand il s'abstient le menu s'ouvre quand même. Le pointeur fin exclut les
   écrans tactiles, où l'ouverture au clic reste le bon comportement. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .ak-header .elementor-widget-nav-menu.ak-nav .elementor-nav-menu--main li.menu-item-has-children:hover > ul.elementor-nav-menu--dropdown,
  .ak-header .elementor-widget-nav-menu.ak-nav .elementor-nav-menu--main li.menu-item-has-children:focus-within > ul.elementor-nav-menu--dropdown {
    display: block;
  }
}

.ak-header .elementor-widget-nav-menu.ak-nav .elementor-nav-menu--main ul.elementor-nav-menu--dropdown {
  z-index: 10;
  padding: var(--ak-space-2) 0;
  background-color: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-md);
  box-shadow: var(--ak-shadow-card);
}

.ak-header .elementor-widget-nav-menu.ak-nav .elementor-nav-menu--main ul.elementor-nav-menu--dropdown a.elementor-item,
.ak-header .elementor-widget-nav-menu.ak-nav .elementor-nav-menu--main ul.elementor-nav-menu--dropdown a.elementor-sub-item {
  padding: var(--ak-space-3) var(--ak-space-5);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-ui);
  line-height: var(--ak-lh-ui);
  font-weight: var(--ak-weight-regular);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ak-foreground);
  white-space: nowrap;
  transition: background-color var(--ak-duration) var(--ak-ease),
              color var(--ak-duration) var(--ak-ease);
}

.ak-header .elementor-widget-nav-menu.ak-nav .elementor-nav-menu--main ul.elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.ak-header .elementor-widget-nav-menu.ak-nav .elementor-nav-menu--main ul.elementor-nav-menu--dropdown a.elementor-sub-item:focus,
.ak-header .elementor-widget-nav-menu.ak-nav .elementor-nav-menu--main ul.elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active {
  background-color: var(--ak-surface-light);
  color: var(--ak-primary);
}

/* --- Sous-menus, version mobile ------------------------------------------ */

.ak-header .elementor-widget-nav-menu.ak-nav nav.elementor-nav-menu--dropdown a.elementor-sub-item {
  padding-inline-start: var(--ak-space-10);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-ui);
  line-height: var(--ak-lh-ui);
  color: var(--ak-muted-foreground);
}

@media (prefers-reduced-motion: reduce) {
  .ak-header .elementor-widget-nav-menu.ak-nav .elementor-nav-menu--main ul.elementor-nav-menu--dropdown a.elementor-sub-item {
    transition: none;
  }
}
/* --------------------------------------------------------------------------
   28. GALERIE DE LA FICHE PRODUIT
   « Le slider et les encarts sous la photo principale ne sont pas finis. »
   WooCommerce empile ici onze vignettes en quatre colonnes flottantes, sans
   espacement ni état actif : trois rangées de carrés collés. On en fait une
   bande qui défile horizontalement, dans les formes du reste du site.
   -------------------------------------------------------------------------- */

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
  border-radius: var(--ak-radius-lg);
  overflow: hidden;
}

.woocommerce div.product div.images ol.flex-control-thumbs {
  display: flex;
  gap: var(--ak-space-3);
  margin: var(--ak-space-4) 0 0;
  padding: 0 0 var(--ak-space-2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--ak-border) transparent;
}

.woocommerce div.product div.images ol.flex-control-thumbs::-webkit-scrollbar {
  height: 6px;
}

.woocommerce div.product div.images ol.flex-control-thumbs::-webkit-scrollbar-thumb {
  background-color: var(--ak-border);
  border-radius: var(--ak-radius-pill);
}

.woocommerce div.product div.images ol.flex-control-thumbs li {
  flex: 0 0 auto;
  width: 88px;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-snap-align: start;
}

.woocommerce div.product div.images ol.flex-control-thumbs li img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-md);
  opacity: 1;
  cursor: pointer;
  transition: border-color var(--ak-duration) var(--ak-ease),
              box-shadow var(--ak-duration) var(--ak-ease);
}

.woocommerce div.product div.images ol.flex-control-thumbs li img:hover {
  border-color: var(--ak-sea);
}

/* FlexSlider marque la vignette courante ; elle n'avait aucun signe distinctif. */
.woocommerce div.product div.images ol.flex-control-thumbs li img.flex-active {
  border-color: var(--ak-primary);
  box-shadow: 0 0 0 2px var(--ak-primary);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product div.images ol.flex-control-thumbs li img { transition: none; }
}

/* --------------------------------------------------------------------------
   29. PANIER DE L'EN-TÊTE
   Le widget panier reprend par defaut le style des boutons du theme, soit un
   padding de 15px 28px : le bouton peint faisait 89px pour une boite de 61 et
   chevauchait « Book now ». Ici c'est une icone, pas un CTA.
   -------------------------------------------------------------------------- */

.ak-cart .elementor-menu-cart__toggle_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--ak-space-2);
  border: 0;
  background-color: transparent;
}

/* Le sous-total n'est pas affiche : il doublait la largeur du bouton. */
.ak-cart .elementor-menu-cart__toggle_button .elementor-button-text {
  display: none;
}

.ak-cart .elementor-menu-cart__toggle_button:hover,
.ak-cart .elementor-menu-cart__toggle_button:focus-visible {
  background-color: var(--ak-surface-light);
}


/* --------------------------------------------------------------------------
   31. HAUTEUR DES CARTES DE COURS
   La grille JetEngine egalise bien la hauteur de ses items, mais la carte a
   l'interieur gardait sa hauteur de contenu : dans une meme rangee, les items
   faisaient 905px et les cartes 851 ou 885, donc les cartes ne finissaient
   pas au meme niveau. On etire toute la chaine.
   -------------------------------------------------------------------------- */

/* Meme traitement pour les cartes d'articles et d'instructeurs. */
.jet-listing-grid__item:has(.ak-offer, .ak-story, .ak-inst),
.jet-listing-grid__item:has(.ak-offer, .ak-story, .ak-inst) > .elementor,
.jet-listing-grid__item:has(.ak-offer, .ak-story, .ak-inst) .e-con,
.jet-listing-grid__item:has(.ak-offer, .ak-story, .ak-inst) .elementor-widget-shortcode,
.jet-listing-grid__item:has(.ak-offer, .ak-story, .ak-inst) .elementor-widget-container,
.jet-listing-grid__item:has(.ak-offer, .ak-story, .ak-inst) .elementor-shortcode {
  height: 100%;
}

.ak-offer,
.ak-story,
.ak-inst {
  height: 100%;
}

/* L'arrondi global des images n'a pas sa place dans une carte : le visuel
   file bord a bord, c'est la carte qui porte l'arrondi. */
.ak-story__media img,
.ak-offer__media img,
.ak-inst__media img {
  border-radius: 0;
}


/* --------------------------------------------------------------------------
   32. ARTICLES DU JOURNAL
   Corps de lecture : mesure de 70 caracteres, interligne genereux, images
   arrondies comme partout, titres intermediaires dans la typographie du site.
   -------------------------------------------------------------------------- */

.ak-article {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ak-text);
}
.ak-article > *:first-child { margin-top: 0; }
.ak-article p,
/* La remise à zéro générique de listings.css (.elementor-widget[class*="ak-"]
   .elementor-widget-container > p) écrasait cette marge : les paragraphes
   des articles de blog se collaient les uns aux autres. */
.elementor-widget.ak-article .elementor-widget-container > p { margin: 0 0 1.25em; }
.elementor-widget.ak-article .elementor-widget-container > p:last-child { margin-bottom: 0; }
.ak-article h2,
.ak-article h3,
.ak-article h4 {
  font-family: var(--ak-font-display);
  color: var(--ak-foreground);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 2em 0 .7em;
}
.ak-article h2 { font-size: clamp(24px, 2.6vw, 30px); }
.ak-article h3 { font-size: clamp(20px, 2vw, 24px); }
.ak-article h4 { font-size: 18px; }
.ak-article ul,
.ak-article ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.ak-article li { margin-bottom: .4em; }
.ak-article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em auto;
  border-radius: var(--ak-radius-lg);
}
.ak-article a { color: var(--ak-primary); }
.ak-article blockquote {
  margin: 2em 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid var(--ak-accent);
  background: var(--ak-surface-light);
  border-radius: 0 var(--ak-radius-lg) var(--ak-radius-lg) 0;
}
.ak-article__cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ak-radius-lg);
  box-shadow: 0 18px 40px -26px rgba(11, 37, 69, .4);
}

/* --------------------------------------------------------------------------
   FICHE COURS — MISE EN PAGE DEUX COLONNES (17/09/2026)
   Contenu éditorial à gauche, fiche « At a glance » collante à droite.
   Sous 1024 px la fiche passe au-dessus du contenu.
   -------------------------------------------------------------------------- */
.e-con.e-flex > .elementor-widget.elementor-element.ak-glance, .elementor-widget.ak-glance {margin: 0;}
.ak-glance .jet-listing-dynamic-field, .ak-glance .elementor-widget-container {margin: 0; padding: 0;}
.ak-glance .jet-listing-dynamic-field__content {display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--ak-border);}
.ak-glance__label {font-family: var(--ak-font-body); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ak-muted-foreground);}
.ak-glance__value {font-family: var(--ak-font-body); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ak-foreground);}
.ak-side-card .elementor-widget.ak-view-price .jet-listing-dynamic-field__content strong {font-size: 2rem;}
.ak-side-card .elementor-widget.ak-view-packages .jet-listing-dynamic-field__content {margin: 0;}
.elementor-widget-jet-listing-dynamic-link.ak-side-cta {width: 100%;}
.elementor-widget-jet-listing-dynamic-link.ak-side-cta .jet-listing-dynamic-link__link {display: flex; justify-content: center; width: 100%; box-sizing: border-box;}
.ak-side-card .elementor-widget.ak-b-stack {margin: 0;}
@media (max-width: 1024px) {
  .e-con.ak-course-grid {grid-template-columns: minmax(0, 1fr) !important;}
  .e-con.ak-course-grid > .e-con.ak-side {order: -1;}
}
.e-con.ak-course-grid > .e-con {min-width: 0; max-width: 100%;}
.elementor-widget.ak-view-outcome .elementor-widget-container {display: block;}
.elementor-widget.ak-view-outcome .jet-listing-dynamic-field__content {max-width: min(68ch, 100%); min-width: 0; box-sizing: border-box;}
/* Corps de lecture : plus de contraste et des intertitres qui structurent. */
.elementor-widget.ak-view-body.ak-article, .elementor-widget.ak-view-body.ak-article p, .elementor-widget.ak-view-body.ak-article li {color: var(--ak-foreground); font-size: 17px; line-height: 1.7;}
.elementor-widget.ak-view-body.ak-article h3 {font-size: 24px; line-height: 1.2; margin: 40px 0 14px; padding-top: 22px; border-top: 1px solid var(--ak-border); color: var(--ak-foreground);}
.elementor-widget.ak-view-body.ak-article h3:first-child {margin-top: 0; padding-top: 0; border-top: 0;}
.elementor-widget.ak-view-body.ak-article strong {color: var(--ak-foreground);}
.elementor-widget.ak-view-outcome {margin: 0 0 8px;}
.elementor-widget.ak-view-outcome .jet-listing-dynamic-field__content {font-size: 17px; line-height: 1.6; color: var(--ak-foreground);}
/* Fiche cours : l'encart « How it works » ne porte son filet qu'une fois (le
   contenu interne est déjà stylé) ; la carte collante passe sous l'en-tête. */
.elementor-widget.ak-view-outcome {background: none; border-left: 0; border-right: 0; padding: 0; margin: 0 0 8px; max-width: none;}
.elementor-widget.ak-view-outcome .jet-listing-dynamic-field__content {max-width: 68ch;}
.e-con.ak-side-card.elementor-sticky, .e-con.ak-side-card.elementor-sticky--active, .e-con.ak-side-card.elementor-sticky__spacer {z-index: 1 !important;}

/* Hero de fiche : l'accroche ne déborde jamais de sa colonne. */
.elementor-widget.ak-view-lead .jet-listing-dynamic-field__content {max-width: 100%;}
.e-con.ak-view-hero__text {min-width: 0;}


/* --------------------------------------------------------------------------
   30. SÉLECTEUR DE LANGUE
   Shortcode [accrokite_language_switcher] du thème, placé dans le bloc droit
   de l'en-tête à côté du panier. Bouton drapeau · code · chevron, liste
   déroulante habillée comme les sous-menus de la section 27.
   -------------------------------------------------------------------------- */

.ak-lang {
  position: relative;
  display: inline-block;
}

/* .ak-lang en préfixe : le kit Elementor stylise tous les <button> avec
   .elementor-kit-N button, il faut passer devant. */
.ak-lang .ak-lang__button {
  display: inline-flex;
  align-items: center;
  gap: var(--ak-space-2);
  min-height: var(--ak-control-sm);
  padding: var(--ak-space-2) var(--ak-space-3);
  border: 0;
  border-radius: var(--ak-radius-sm);
  background-color: transparent;
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-ui);
  line-height: var(--ak-lh-ui);
  font-weight: var(--ak-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ak-foreground);
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--ak-duration) var(--ak-ease);
}

.ak-lang .ak-lang__button:hover,
.ak-lang .ak-lang__button:focus-visible,
.ak-lang.is-open .ak-lang__button {
  background-color: var(--ak-surface-light);
  color: var(--ak-primary);
}

.ak-lang .ak-lang__button:focus-visible {
  outline: 2px solid var(--ak-primary);
  outline-offset: 2px;
}

.ak-lang__flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--ak-border);
}

.ak-lang__chevron {
  transition: transform var(--ak-duration) var(--ak-ease);
}

.ak-lang.is-open .ak-lang__chevron {
  transform: rotate(180deg);
}

.ak-lang__list {
  position: absolute;
  top: calc(100% + var(--ak-space-1));
  right: 0;
  z-index: 20;
  min-width: 180px;
  margin: 0;
  padding: var(--ak-space-2) 0;
  list-style: none;
  background-color: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-md);
  box-shadow: var(--ak-shadow-card);
}

.ak-lang__list[hidden] {
  display: none;
}

.ak-lang__link {
  display: flex;
  align-items: center;
  gap: var(--ak-space-3);
  padding: var(--ak-space-3) var(--ak-space-5);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-ui);
  line-height: var(--ak-lh-ui);
  color: var(--ak-foreground);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ak-duration) var(--ak-ease),
              color var(--ak-duration) var(--ak-ease);
}

.ak-lang__link:hover,
.ak-lang__link:focus-visible,
.ak-lang__item.is-current .ak-lang__link {
  background-color: var(--ak-surface-light);
  color: var(--ak-primary);
}

.ak-lang__item.is-current .ak-lang__link {
  font-weight: var(--ak-weight-semibold);
}

/* Dès que le menu passe en burger (≤ 1024 px, point de rupture tablette
   d'Elementor), le sélecteur de langue quitte la barre : il vit dans le menu
   déroulant (section 31). Le bloc d'actions ne garde que le bouton
   « Réserver ». */
@media (max-width: 1024px) {
  .ak-header .elementor-widget.ak-lang-wrap {
    display: none;
  }
}

/* Sur mobile, logo · hamburger · « Réserver » tiennent sur une ligne, dans
   toutes les langues (le russe « Забронировать » est la plus longue). */
@media (max-width: 640px) {
  /* Les trois colonnes de l'en-tête (14 / 64 / 20 %) sont pensées pour le
     bureau : sur mobile, logo et hamburger prennent leur largeur naturelle
     et le bloc d'actions ce qui reste, sans retour à la ligne. */
  .ak-header .e-con.ak-header__brand,
  .ak-header .e-con.ak-header__nav {
    width: auto;
    flex: 0 0 auto;
  }
  .ak-header .e-con.ak-header__actions {
    width: auto;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: var(--ak-space-2);
  }
  .ak-header .elementor-widget-button.ak-b-stack,
  .ak-header .elementor-widget-button.ak-b-stack .elementor-button {
    width: auto;
  }
  /* Budget de largeur sur 375 px : logo 110, hamburger 33, bouton compact
     (12 px, 40 px de haut) — il reste ~185 px pour le bouton. */
  .ak-header .ak-header__brand img {
    width: 110px;
  }
  .ak-header .elementor-widget-button.ak-b-stack .elementor-button {
    min-height: 40px;
    padding: 0 var(--ak-space-4);
    font-size: var(--ak-size-small);
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
  }
}

/* Bureau : la colonne d'actions faisait 20 % de l'en-tête, partagés entre le
   sélecteur de langue, le panier et le bouton — « Book now » se retrouvait
   sur deux lignes dès 1 280 px. Les actions prennent leur largeur naturelle,
   la navigation absorbe le reste, et le libellé ne se coupe jamais. */
.ak-header .e-con.ak-header__actions {
  width: auto;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  --flex-wrap: nowrap;
}
.ak-header .e-con.ak-header__nav {
  width: auto;
  min-width: 0;
  flex: 1 1 0;
}
.ak-header .e-con:has(> .ak-header__nav) {
  --flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.ak-header .elementor-widget-button.ak-b-stack {
  width: auto;
  flex: 0 0 auto;
}
.ak-header .elementor-widget-button.ak-b-stack .elementor-button {
  white-space: nowrap;
}

/* Entre le point de rupture du burger (1 024 px) et ~1 366 px, sept entrées
   de menu à 20 px de marge passaient sur deux lignes en allemand, espagnol
   et russe. On resserre par paliers : marges des entrées, puis code de
   langue masqué (drapeau seul) et bouton compact. */
@media (min-width: 1025px) and (max-width: 1366px) {
  .ak-header .elementor-widget-nav-menu.ak-nav .elementor-nav-menu--main > ul > li > a.elementor-item {
    padding-inline: var(--ak-space-3);
  }
  .ak-header .elementor-widget-nav-menu.ak-nav .elementor-nav-menu--main ul.elementor-nav-menu {
    flex-wrap: nowrap;
  }
  .ak-header .elementor-widget-nav-menu.ak-nav .elementor-nav-menu--main a.elementor-item {
    white-space: nowrap;
  }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .ak-header .elementor-widget-nav-menu.ak-nav .elementor-nav-menu--main > ul > li > a.elementor-item {
    padding-inline: var(--ak-space-2);
    font-size: 13px;
  }
  .ak-header .e-con.ak-header__actions {
    gap: var(--ak-space-2);
  }
  .ak-lang .ak-lang__code {
    display: none;
  }
  .ak-header .elementor-widget-button.ak-b-stack .elementor-button {
    min-height: var(--ak-control-sm);
    padding: 0 var(--ak-space-4);
    font-size: 13px;
  }
}

/* Le bouton « Réserver » est un inline-block dont la hauteur mini dépasse
   celle de sa ligne de texte : le libellé restait collé en haut. En flex, il
   est centré dans les deux sens quelle que soit la hauteur. */
.ak-header .elementor-widget-button.ak-b-stack .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ak-header .elementor-widget-button.ak-b-stack .elementor-button .elementor-button-content-wrapper {
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .ak-lang .ak-lang__button,
  .ak-lang__chevron,
  .ak-lang__link {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   31. MENU BURGER (≤ 1024 px)
   Le menu déroulant d'Elementor reçoit, en pied, le panneau .ak-mnav rendu
   par le sélecteur de langue (inc/language-switcher.php) : pastilles de
   langues, puis lien vers le panier. Le menu est borné à la hauteur de
   l'écran et défile — neuf langues plus huit entrées, ça dépasse un iPhone.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .ak-header .elementor-widget-nav-menu.ak-nav nav.elementor-nav-menu--dropdown {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: var(--ak-space-6);
    border-top: 1px solid var(--ak-border);
    box-shadow: var(--ak-shadow-card);
  }
  .ak-header .elementor-widget-nav-menu.ak-nav nav.elementor-nav-menu--dropdown a.elementor-item {
    padding: var(--ak-space-4) var(--ak-gutter-mobile);
    font-family: var(--ak-font-body);
    font-size: 15px;
    line-height: var(--ak-lh-ui);
    font-weight: var(--ak-weight-semibold);
    letter-spacing: 0.02em;
    color: var(--ak-foreground);
    border-bottom: 1px solid var(--ak-border);
  }
  .ak-header .elementor-widget-nav-menu.ak-nav nav.elementor-nav-menu--dropdown a.elementor-sub-item {
    padding: var(--ak-space-3) var(--ak-gutter-mobile) var(--ak-space-3) var(--ak-space-10);
    font-weight: var(--ak-weight-regular);
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 0;
  }
  .ak-header .elementor-widget-nav-menu.ak-nav nav.elementor-nav-menu--dropdown li:last-child > a.elementor-item {
    border-bottom: 0;
  }
  .ak-header .elementor-widget-nav-menu.ak-nav nav.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
  .ak-header .elementor-widget-nav-menu.ak-nav nav.elementor-nav-menu--dropdown a.elementor-item:hover,
  .ak-header .elementor-widget-nav-menu.ak-nav nav.elementor-nav-menu--dropdown a.elementor-item:focus {
    background-color: var(--ak-surface-light);
    color: var(--ak-primary);
  }
}

.ak-mnav {
  margin: 0;
  padding: 0 var(--ak-gutter-mobile);
}

.ak-mnav[hidden] {
  display: none;
}

.ak-mnav__section {
  padding-block: var(--ak-space-4);
  border-top: 1px solid var(--ak-border);
}

.ak-mnav__section--langs {
  border-top: 0;
}

.ak-mnav__label {
  margin: 0 0 var(--ak-space-3);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  line-height: 1.2;
  font-weight: var(--ak-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ak-muted-foreground);
}

.ak-mnav__langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ak-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ak-mnav__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--ak-space-2);
  min-height: 36px;
  padding: var(--ak-space-1) var(--ak-space-3);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-pill);
  background-color: var(--ak-card);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  line-height: 1;
  font-weight: var(--ak-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ak-foreground);
  text-decoration: none;
}

.ak-mnav__lang:hover,
.ak-mnav__lang:focus-visible {
  border-color: var(--ak-primary);
  color: var(--ak-primary);
}

.ak-mnav__lang.is-current {
  border-color: var(--ak-primary);
  background-color: var(--ak-surface-light);
  color: var(--ak-primary);
}

.ak-mnav__lang .ak-lang__flag {
  width: 18px;
  height: 13px;
}

.ak-mnav__cart {
  display: flex;
  align-items: center;
  gap: var(--ak-space-3);
  min-height: var(--ak-control-sm);
  font-family: var(--ak-font-body);
  font-size: 15px;
  line-height: var(--ak-lh-ui);
  font-weight: var(--ak-weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ak-foreground);
  text-decoration: none;
}

.ak-mnav__cart:hover,
.ak-mnav__cart:focus-visible {
  color: var(--ak-primary);
}

.ak-mnav__cart-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding-inline: var(--ak-space-1);
  border-radius: var(--ak-radius-pill);
  background-color: var(--ak-cta);
  color: var(--ak-cta-foreground);
  font-size: var(--ak-size-small);
  line-height: 1;
}

.ak-mnav__cart-qty[hidden] {
  display: none;
}

.ak-mnav__cart-total {
  margin-inline-start: auto;
  font-weight: var(--ak-weight-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ak-muted-foreground);
}

.ak-mnav__cart-total[hidden] {
  display: none;
}

@media (min-width: 1025px) {
  .ak-mnav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   32. PIED DE PAGE SUR MOBILE
   Les quatre blocs du pied de page (marque, Cours, Sur place, Accrokite)
   s'empilaient sur une colonne : près de 900 px à faire défiler pour trois
   listes de quatre liens. Sur mobile les listes se rangent sur deux colonnes,
   la marque garde toute la largeur. Ciblage par la structure (le conteneur
   dont les enfants portent un menu .ak-footer-nav) : aucun id de template,
   les neuf pieds de page traduits sont couverts.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Conteneur en grille Elementor (e-grid), une colonne sur mobile : on lui
     en donne deux, la marque occupe toute la première ligne. */
  .elementor-location-footer .e-con.e-con:has(> .e-con > .ak-footer-nav) {
    --e-con-grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ak-space-4);
    row-gap: var(--ak-space-8);
  }
  .elementor-location-footer .e-con.e-con:has(> .e-con > .ak-footer-nav) > .e-con {
    min-width: 0;
  }
  .elementor-location-footer .e-con.e-con:has(> .e-con > .ak-footer-nav) > .e-con:not(:has(> .ak-footer-nav)) {
    grid-column: 1 / -1;
  }
  /* Le dernier bloc (Accrokite, six liens) prend toute la largeur et range
     ses liens sur deux colonnes, comme les deux blocs au-dessus. */
  .elementor-location-footer .e-con.e-con:has(> .e-con > .ak-footer-nav) > .e-con:has(> .ak-footer-nav):last-child {
    grid-column: 1 / -1;
  }
  .elementor-location-footer .e-con.e-con:has(> .e-con > .ak-footer-nav) > .e-con:has(> .ak-footer-nav):last-child ul.elementor-nav-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ak-space-4);
  }
  .elementor-location-footer .ak-footer-nav a.elementor-item {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-block: var(--ak-space-2);
  }
}

/* Logos partenaires sous la grille Location (accueil et page Location). */
.elementor-widget.ak-rent-partners { margin-top: var(--ak-space-8); }
.ak-rent-partners .ak-partners { justify-content: flex-start; }
@media (max-width: 640px) { .ak-rent-partners .ak-partners { justify-content: center; } }

/* Formulaire contact (JetFormBuilder) : case à cocher alignée sur la première ligne du libellé, pas centrée sur le bloc. */
.jet-form-builder .jet-form-builder__field-wrap.checkradio-wrap span { align-items: flex-start; gap: 10px; line-height: 1.5; }
.jet-form-builder .field-type-checkbox-field .jet-form-builder__field-label.for-checkbox > span::before { margin-top: 2px; }

@media (max-width: 640px) { .jet-form-builder .jet-form-builder__action-button-wrapper, .jet-form-builder .jet-form-builder__submit { width: 100%; justify-content: center; } }