/* ==========================================================================
   ACCROKITE — BASE ET COMPOSANTS
   S'appuie exclusivement sur les variables de tokens.css.
   Aucune valeur codée en dur : toute modification passe par les tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background-color: var(--ak-background);
  color: var(--ak-foreground);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-body);
  line-height: var(--ak-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ak-font-display);
  font-weight: var(--ak-weight-display);
  color: var(--ak-foreground);
  letter-spacing: var(--ak-tracking-tight);
  margin-block: 0 var(--ak-space-4);
}

h1 { font-size: var(--ak-fluid-hero);    line-height: 1.08; }
h2 { font-size: var(--ak-fluid-section); line-height: 1.16; }
h3 { font-size: var(--ak-fluid-subhead); line-height: 1.22; }
h4 { font-size: var(--ak-fluid-card);    line-height: 1.30; }
h5 { font-size: var(--ak-size-body);     line-height: var(--ak-lh-body); }
h6 { font-size: var(--ak-size-ui);       line-height: var(--ak-lh-ui); }

p { margin-block: 0 var(--ak-space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--ak-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ak-primary-hover); }

strong, b { font-weight: var(--ak-weight-semibold); }
small { font-size: var(--ak-size-small); line-height: var(--ak-lh-small); }
hr { border: 0; border-top: 1px solid var(--ak-border); margin-block: var(--ak-space-12); }

img, video { max-width: 100%; height: auto; }

::selection { background: var(--ak-accent); color: var(--ak-foreground); }

/* Focus clavier — absent des maquettes, ajouté pour l'accessibilité (WCAG 2.4.7) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ak-primary-glow);
  outline-offset: 2px;
  border-radius: var(--ak-radius-sm);
}

/* Lien d'évitement */
.ak-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--ak-primary); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--ak-radius-md) 0; font-size: var(--ak-size-ui); font-weight: var(--ak-weight-semibold);
}
.ak-skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   2. MISE EN PAGE
   -------------------------------------------------------------------------- */

.ak-container {
  width: 100%;
  max-width: calc(var(--ak-content-max) + (2 * var(--ak-gutter)));
  margin-inline: auto;
  padding-inline: var(--ak-gutter);
}

.ak-section        { padding-block: var(--ak-space-24); }
.ak-section--tight { padding-block: var(--ak-space-16); }
.ak-section--alt   { background-color: var(--ak-surface-light); }
.ak-section--dark  { background-color: var(--ak-background-strong); color: #fff; }
.ak-section--dark :is(h1,h2,h3,h4,h5,h6) { color: #fff; }
.ak-section--dark p { color: rgba(255,255,255,.82); }

@media (max-width: 1024px) { .ak-section { padding-block: var(--ak-space-16); } }
@media (max-width: 640px)  { .ak-section { padding-block: var(--ak-space-12); } }

/* Grilles de cartes — se replient automatiquement */
.ak-grid   { display: grid; gap: var(--ak-grid-gap); }
.ak-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ak-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ak-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .ak-grid-3, .ak-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ak-grid-2, .ak-grid-3, .ak-grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE UTILITAIRE
   -------------------------------------------------------------------------- */

.ak-eyebrow {
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-small);
  line-height: var(--ak-lh-small);
  font-weight: var(--ak-weight-semibold);
  letter-spacing: var(--ak-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ak-primary);
  margin-block: 0 var(--ak-space-3);
}
.ak-lede  { font-size: var(--ak-size-body); color: var(--ak-muted-foreground); max-width: 62ch; }
.ak-muted { color: var(--ak-muted-foreground); }
.ak-hero-title { font-size: var(--ak-fluid-hero); line-height: 1.08; letter-spacing: var(--ak-tracking-tight); }

/* --------------------------------------------------------------------------
   4. BOUTONS
   -------------------------------------------------------------------------- */

.ak-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ak-space-2);
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-ui); line-height: 18px;
  font-weight: var(--ak-weight-semibold); letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--ak-radius-pill);
  padding-inline: var(--ak-space-7);
  height: var(--ak-control-md);
  box-shadow: var(--ak-shadow-button);
  transition: background-color var(--ak-duration) var(--ak-ease),
              color var(--ak-duration) var(--ak-ease),
              transform var(--ak-duration) var(--ak-ease),
              box-shadow var(--ak-duration) var(--ak-ease);
}
.ak-btn:hover  { transform: translateY(-1px); box-shadow: 0 8px 14px rgba(13,36,51,.20); }
.ak-btn:active { transform: translateY(0); box-shadow: var(--ak-shadow-button); }
.ak-btn[disabled], .ak-btn.is-disabled { opacity: .45; pointer-events: none; }

.ak-btn--cta       { background: var(--ak-cta); color: var(--ak-cta-foreground); }
.ak-btn--cta:hover { background: var(--ak-cta-hover); color: var(--ak-cta-foreground); }

.ak-btn--primary       { background: var(--ak-primary); color: var(--ak-primary-foreground); height: var(--ak-control-sm); }
.ak-btn--primary:hover { background: var(--ak-primary-hover); color: #fff; }

.ak-btn--ghost       { background: var(--ak-card); color: var(--ak-primary); border-color: var(--ak-border); }
.ak-btn--ghost:hover { background: var(--ak-surface-light); color: var(--ak-primary-hover); }

.ak-btn--link {
  background: none; box-shadow: none; color: var(--ak-primary);
  padding-inline: 0; height: auto; border-radius: 0; text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid currentColor;
}
.ak-btn--link:hover { transform: none; box-shadow: none; color: var(--ak-primary-hover); }

.ak-btn--lg    { height: var(--ak-control-lg); padding-inline: var(--ak-space-8); }
.ak-btn--block { display: flex; width: 100%; }

/* Sur mobile, les boutons d'action passent en pleine largeur */
@media (max-width: 640px) {
  .ak-btn--stack-mobile { display: flex; width: 100%; }
}

/* --------------------------------------------------------------------------
   5. CARTES ET SURFACES
   -------------------------------------------------------------------------- */

.ak-card {
  background: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-xl);
  box-shadow: var(--ak-shadow-card);
  padding: var(--ak-space-6);
  overflow: hidden;
}
.ak-card--flat   { box-shadow: none; }
.ak-card--float  { box-shadow: var(--ak-shadow-float); }
.ak-card--media  { padding: 0; }
.ak-card--media .ak-card__body { padding: var(--ak-space-5); }

.ak-card--link { transition: transform var(--ak-duration) var(--ak-ease), box-shadow var(--ak-duration) var(--ak-ease); }
.ak-card--link:hover { transform: translateY(-3px); box-shadow: var(--ak-shadow-float); }

.ak-card__media { aspect-ratio: 5 / 4; overflow: hidden; background: var(--ak-sky); }
.ak-card__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 400ms var(--ak-ease); }
.ak-card--link:hover .ak-card__media img { transform: scale(1.04); }
.ak-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); margin-block: 0 var(--ak-space-2); }
.ak-card__meta  { color: var(--ak-muted-foreground); font-size: var(--ak-size-ui); }

/* Badge / pastille */
.ak-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ak-accent); color: var(--ak-foreground);
  font-size: var(--ak-size-small); line-height: 1; font-weight: var(--ak-weight-semibold);
  letter-spacing: var(--ak-tracking-eyebrow); text-transform: uppercase;
  padding: 7px 12px; border-radius: var(--ak-radius-pill);
}
.ak-badge--primary { background: var(--ak-primary); color: #fff; }
.ak-badge--cta     { background: var(--ak-cta); color: #fff; }

/* --------------------------------------------------------------------------
   6. FORMULAIRES
   -------------------------------------------------------------------------- */

.ak-field { margin-bottom: var(--ak-space-5); }
.ak-field > label,
.ak-label {
  display: block;
  font-size: var(--ak-size-small); line-height: var(--ak-lh-small);
  font-weight: var(--ak-weight-semibold); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ak-muted-foreground); margin-bottom: var(--ak-space-2);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="date"], input[type="password"],
select, textarea {
  width: 100%;
  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-lg);
  padding-inline: var(--ak-space-4);
  height: var(--ak-control-sm);
  box-shadow: var(--ak-shadow-field);
  transition: border-color var(--ak-duration) var(--ak-ease), box-shadow var(--ak-duration) var(--ak-ease);
}
textarea { height: auto; min-height: 92px; padding-block: var(--ak-space-3); resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ak-primary);
  box-shadow: 0 0 0 3px rgba(0, 100, 168, .15);
}
input::placeholder, textarea::placeholder { color: var(--ak-muted-foreground); opacity: .75; }
input[aria-invalid="true"], .ak-field--error input { border-color: #C0392B; }
.ak-field__error { color: #C0392B; font-size: var(--ak-size-small); margin-top: 6px; }

/* --------------------------------------------------------------------------
   7. TABLEAUX
   Le comparatif de formats de cours des maquettes passe en cartes sur mobile.
   -------------------------------------------------------------------------- */

.ak-table { width: 100%; border-collapse: collapse; font-size: var(--ak-size-body); }
.ak-table th, .ak-table td { text-align: start; padding: var(--ak-space-4) var(--ak-space-5);
  border-bottom: 1px solid var(--ak-border); }
.ak-table th {
  font-size: var(--ak-size-small); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ak-muted-foreground); font-weight: var(--ak-weight-semibold);
}
.ak-table tbody tr:last-child td { border-bottom: 0; }
.ak-table td:first-child { font-weight: var(--ak-weight-semibold); }

@media (max-width: 768px) {
  .ak-table--stack thead { display: none; }
  .ak-table--stack tr {
    display: block; background: var(--ak-card); border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius-xl); box-shadow: var(--ak-shadow-card);
    padding: var(--ak-space-4); margin-bottom: var(--ak-space-4);
  }
  .ak-table--stack td {
    display: flex; justify-content: space-between; gap: var(--ak-space-4);
    padding: var(--ak-space-2) 0; border-bottom: 0; text-align: end;
  }
  .ak-table--stack td::before {
    content: attr(data-label);
    font-size: var(--ak-size-small); letter-spacing: .06em; text-transform: uppercase;
    color: var(--ak-muted-foreground); font-weight: var(--ak-weight-semibold); text-align: start;
  }
}

/* --------------------------------------------------------------------------
   8. DÉCORS
   Bulles et barres colorées présentes dans les hero des maquettes.
   -------------------------------------------------------------------------- */

.ak-gradient-sea { background: linear-gradient(120deg,
  var(--ak-primary) 0%, var(--ak-sea) 45%, var(--ak-primary-glow) 100%); }

.ak-orb { position: absolute; border-radius: var(--ak-radius-pill);
  background: rgba(255,255,255,.16); pointer-events: none; z-index: 0; }

.ak-overlay-hero::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ak-overlay-hero); pointer-events: none;
}

@media (max-width: 640px) { .ak-orb { display: none; } }

/* --------------------------------------------------------------------------
   9. PIED DE PAGE
   -------------------------------------------------------------------------- */

.ak-footer-links { list-style: none; margin: 0; padding: 0; }
.ak-footer-links li { margin-bottom: var(--ak-space-2); }
.ak-footer-links a {
  color: rgba(255, 255, 255, .72);
  font-size: var(--ak-size-ui);
  line-height: var(--ak-lh-ui);
  text-decoration: none;
  transition: color var(--ak-duration) var(--ak-ease);
}
.ak-footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   10. IMPRESSION
   -------------------------------------------------------------------------- */

@media print {
  .ak-btn, .ak-orb, nav, footer { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   TABLEAUX — correctifs constatés sur la page d'accueil le 07/08/2026
   -------------------------------------------------------------------------- */

/* Les colonnes se dimensionnaient sur leur contenu : dans une carte étroite,
   le tableau wingfoil débordait et la colonne « From » était coupée. */
.ak-table { table-layout: fixed; }
.ak-table th, .ak-table td { overflow-wrap: anywhere; }
.ak-table td:last-child, .ak-table th:last-child { text-align: end; }

/* Sur les bandes bleu clair, le tableau comparatif doit se lire comme une carte
   blanche posée sur le fond, comme dans la maquette. */
.ak-table {
  background: var(--ak-card);
  border: 1px solid var(--ak-border);
  border-radius: var(--ak-radius-xl);
  box-shadow: var(--ak-shadow-card);
  overflow: hidden;
}
@media (max-width: 768px) {
  .ak-table--stack { background: none; border: 0; box-shadow: none; }
}

/* Visuels de carte : hauteur constante d'une carte à l'autre. Sans ça, deux
   photos de proportions différentes décalent tout le contenu en dessous. */
.elementor-widget-image.ak-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.elementor-widget-image.ak-media--portrait img {
  aspect-ratio: 3 / 4;
  height: 100%;
}

/* Grille tarifaire des cours : filets fins, pas de fond de carte — le tableau
   est déjà DANS une carte, un second cadre ferait doublon (maquette
   « Courses & levels »). */
.ak-table--flush {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.ak-table--flush td { padding-inline: 0; }
.ak-table--flush td.ak-price { color: var(--ak-muted-foreground); }
.ak-table--flush td.ak-price a { color: var(--ak-primary); text-decoration: none; }
.ak-table--flush td.ak-price a:hover { text-decoration: underline; }

/* Course finder : les quatre sélecteurs sur une ligne, le bouton centré en
   dessous et non collé au dernier champ. */
.ak-finder .elementor-field-group.e-form__buttons { justify-content: center; margin-top: var(--ak-space-6); }
.ak-finder .elementor-field-group > label { color: var(--ak-primary); }

/* Le thème parent peint un fond alterné et des filets verticaux sur les
   tableaux. Dans la grille tarifaire, la maquette ne montre que des filets
   horizontaux : on neutralise le reste explicitement. */
.ak-table td, .ak-table th { border-inline: 0; background: transparent; }
.ak-table tbody tr { background: transparent; }
.ak-table--flush tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   11. EXCLUSIVITÉ IKO & TARIFS BASSE SAISON        (ajout du 31/08/2026)
   Deux pastilles et une cellule de prix. La pastille IKO répond à la demande
   client : « le seul centre affilié IKO de Koh Phangan » doit se lire avant
   même de scroller. La cellule de prix affiche l'ancien tarif barré, le tarif
   basse saison et le pourcentage de remise, dans cet ordre de lecture.
   -------------------------------------------------------------------------- */

/* .ak-badge et .ak-badge--cta sont déjà définis en section 5. On n'ajoute ici
   que la variante IKO : même pastille, mais en casse normale et un cran plus
   grande, parce qu'elle porte une phrase et non une étiquette. */
.ak-badge.ak-badge--iko {
  text-transform: none; letter-spacing: 0;
  font-size: var(--ak-size-ui); line-height: 1.25; padding: 8px 14px;
}
.ak-badge.ak-badge--iko::before { content: "\2605"; font-size: 1.05em; line-height: 1; }

.ak-price__was {
  text-decoration: line-through; opacity: .5; font-weight: 400;
  margin-inline-end: .45em; white-space: nowrap;
}
.ak-price__now { font-weight: 700; white-space: nowrap; color: var(--ak-foreground, #011B35); }
.ak-price__off {
  display: inline-block; margin-inline-start: .5em;
  padding: .15em .5em; border-radius: 6px;
  background: var(--ak-accent, #B0EAF4); color: var(--ak-foreground, #011B35);
  font-size: .78em; font-weight: 600; white-space: nowrap;
}

/* Sur fond navy (carte « 5-Day Package », section « Why choose us »). */
.ak-on-dark .ak-price__now { color: #fff; }

@media (max-width: 640px) {
  /* En pile, la ligne de prix passe sous le libellé : on la laisse respirer. */
  .ak-table--stack td.ak-price { display: block; }
  .ak-price__off { margin-inline-start: 0; margin-block-start: .35em; }
}

/* --------------------------------------------------------------------------
   12. LOCATION — LIGNE DE PRIX                     (ajout du 31/08/2026)
   Les cartes de location renvoient vers la fiche produit WooCommerce, où le
   visiteur choisit sa durée (1 h à 1 mois). La carte n'affiche donc que le
   tarif plancher, en gardant la même mécanique typographique que les grilles
   de cours : le montant ressort, l'unité reste secondaire.
   -------------------------------------------------------------------------- */

.ak-rent-price {
  margin: 0;
  font-family: var(--ak-font-body);
  font-size: var(--ak-size-ui);
  line-height: var(--ak-lh-ui);
  color: var(--ak-muted-foreground);
}
.ak-rent-price .ak-price__now {
  font-family: var(--ak-font-display);
  font-size: var(--ak-size-card);
  line-height: var(--ak-lh-card);
  color: var(--ak-foreground);
  margin-inline-start: .25em;
}
.ak-rent-unit { color: var(--ak-muted-foreground); }


/* --------------------------------------------------------------------------
   LOGOS PARTENAIRES
   Geometries reprises de la maquette (415:3406). Ce composant vivait dans le
   CSS du snippet « Course offers & finder », charge paresseusement : il ne
   sortait que sur les pages contenant un filtre JetSmartFilters ou un
   shortcode accrokite_. La boutique n'a aucune donnee Elementor, donc les
   logos y arrivaient sans style. Il est desormais disponible partout.
   -------------------------------------------------------------------------- */

.ak-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 3rem;
}

.ak-partner { position: relative; display: block; overflow: hidden; flex: 0 0 auto; }
.ak-partner img { position: absolute; display: block; max-width: none; border-radius: 0; }

.ak-partner--north   { width: 162px; height: 53px; }
.ak-partner--north img   { width: 110.49%; height: 98.9%; left: -5.56%; top: .55%; }
.ak-partner--mystic  { width: 163px; height: 42px; }
.ak-partner--mystic img  { width: 100%; height: 100%; left: 0; top: 0; }
.ak-partner--duotone { width: 165px; height: 53px; }
.ak-partner--duotone img { width: 110.3%; height: 100%; left: -5.45%; top: 0; }
.ak-partner--ion     { width: 163px; height: 42px; }
.ak-partner--ion img     { width: 100%; height: 100%; left: 0; top: 0; }
.ak-partner--iwo     { width: 103px; height: 103px; }
.ak-partner--iwo img     { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; }
.ak-partner--ikopro  { width: 158px; height: 46px; }
.ak-partner--ikopro img  { width: 111.01%; height: 100%; left: -10.56%; top: 0; }

@media (max-width: 640px) { .ak-partners { gap: 1.75rem 2rem; } }

/* Logos partenaires en widgets Image (bloc de bibliotheque « Logos partenaires ») */
.e-con.ak-partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.e-con.e-flex > .elementor-widget.elementor-element.ak-partner { --container-widget-flex-grow: 0; flex: 0 0 auto; margin: 0; }
.elementor-widget.ak-partner--north   { --container-widget-width: 162px; }
.elementor-widget.ak-partner--mystic  { --container-widget-width: 163px; }
.elementor-widget.ak-partner--duotone { --container-widget-width: 165px; }
.elementor-widget.ak-partner--ion     { --container-widget-width: 163px; }
.elementor-widget.ak-partner--iwo     { --container-widget-width: 103px; }
.elementor-widget.ak-partner--ikopro  { --container-widget-width: 158px; }
.elementor-widget-image.ak-partner .elementor-widget-container { position: static; }
.elementor-widget-image.ak-partner img { position: absolute; display: block; max-width: none; border-radius: 0; }
/* Elementor force les SVG dans un lien a 48px : on rend la main au calibrage des logos. */
.elementor-widget-image.ak-partner a img[src$=".svg"] { width: 100%; height: 100%; }

/* Pastilles et prix en widgets natifs */
.elementor-widget.ak-badge .elementor-heading-title { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; margin: 0; }
.e-con.e-flex > .elementor-widget.elementor-element.ak-badge { --container-widget-width: auto; --container-widget-flex-grow: 0; width: auto; }
.elementor-widget.ak-rent-price p { margin: 0; }