/* types.css — les trois dentiers, /dentier-prix-maroc/ (2026-10-27).

   Demandé par le client le 2026-10-27 : une section pleine largeur qui éduque,
   où l'image et le texte changent pour chaque type de dentier, avec un
   défilement automatique et des commandes de navigation, parce que les patients
   confondent la résine, le stellite et le Valplast.

   · Trois onglets nommés, chacun avec sa jauge : le lecteur voit où il est et
     combien de temps reste avant le suivant.
   · Le défilement s'arrête dès que le lecteur prend la main (un onglet, une
     flèche, un glissé), au survol et au focus, hors de l'écran, et ne part pas
     du tout si moins d'animation est demandée. Le bouton pause le reprend.
   · Chaque panneau garde les quatre mêmes points dans le même ordre : c'est ce
     qui rend la différence lisible.
   · Sans JavaScript, les trois panneaux se suivent, sans onglets ni commandes :
     tout le texte reste lu, par le patient comme par Google.

   Chargé par cette seule page (son build:head). Les assets partagent une version
   unique (build-pages.js, VERSION) : écrire ces règles dans components.css aurait
   demandé de changer les 34 pages. À fondre dans components.css à la prochaine
   montée de version des assets. Bureau d'abord, requêtes max-width. */

.types {
  --types-delay: 12000ms;
  position: relative;
  margin-top: var(--space-10);
  border-block: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* ── La barre des onglets ─────────────────────────────────────────────── */

.types-bar {
  display: none;
}

.types.is-enhanced .types-bar {
  display: block;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.types-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 760px;
}

.types-tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-6) var(--space-6) var(--space-5) 0;
  border: 0;
  background: none;
  color: var(--color-ink-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}

.types-tab:hover,
.types-tab[aria-selected="true"] {
  color: var(--color-ink);
}

.types-tab:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-focus);
}

.types-tab-num {
  font-size: var(--text-micro);
  font-weight: var(--w-medium);
  font-feature-settings: var(--font-tabular);
  letter-spacing: var(--track-label);
}

.types-tab-name {
  font-size: var(--text-strong);
  font-weight: var(--w-medium);
}

.types-tab-gauge {
  position: absolute;
  right: var(--space-6);
  bottom: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-border);
}

.types-tab-gauge i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-cta);
  transform: scaleX(0);
  transform-origin: left center;
}

.types-tab[aria-selected="true"] .types-tab-gauge i {
  transform: scaleX(1);
}

/* La jauge n'avance que pendant le défilement ; c'est sa fin qui fait passer au
   dentier suivant (types.js), pour que la barre et le minuteur ne divergent
   jamais. Survol, focus ou section hors de l'écran : elle se fige. */
.types.is-running .types-tab[aria-selected="true"] .types-tab-gauge i {
  animation: types-jauge var(--types-delay) linear forwards;
}

.types.is-running.is-held .types-tab[aria-selected="true"] .types-tab-gauge i {
  animation-play-state: paused;
}

@keyframes types-jauge {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── La scène : l'image à gauche, bord à bord ; le texte à droite ──────── */

.types-stage {
  position: relative;
}

.types.is-enhanced .types-stage {
  display: grid;
  border-top: 1px solid var(--color-border);
  touch-action: pan-y;
}

.types-panel {
  display: grid;
  /* La colonne de l'image s'arrête à 640 px : les fichiers du cabinet font de
     554 à 736 px de large, et la vidéo 576. Plus large, ils s'agrandiraient. */
  grid-template-columns: min(45vw, 640px) minmax(0, 1fr);
  min-height: clamp(520px, 70vh, 660px);
}

.types-panel + .types-panel {
  border-top: 1px solid var(--color-border);
}

.types.is-enhanced .types-panel {
  grid-area: 1 / 1;
  border-top: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out),
              visibility 0s linear var(--dur-slow);
}

.types.is-enhanced .types-panel.is-active {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease-out);
}

/* L'image remplit sa colonne, bord à bord (le client, 2026-10-27). */
.types-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--color-ink);
}

.types-media img,
.types-media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.types.is-enhanced .types-media img,
.types.is-enhanced .types-media video {
  transform: scale(1.06);
  transition: transform 1400ms var(--ease-out);
}

.types.is-enhanced .types-panel.is-active .types-media img,
.types.is-enhanced .types-panel.is-active .types-media video {
  transform: scale(1);
}

/* Le texte s'aligne sur la colonne du site, même quand la section est pleine
   largeur : la marge droite rejoint celle du container. */
.types-copy {
  align-self: center;
  padding: var(--space-12)
           max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)))
           var(--space-12)
           var(--space-16);
}

.types-kicker {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-cta);
  font-size: var(--text-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.types-copy h3 {
  margin: 0 0 var(--space-8);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--w-regular);
  line-height: var(--lh-title);
  letter-spacing: var(--track-title);
}

.types-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  margin: 0;
}

.types-points > div {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.types-points dt {
  margin-bottom: var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: var(--w-medium);
}

.types-points dd {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

/* Le texte monte en place, ligne après ligne, quand son dentier arrive. */
.types.is-enhanced .types-copy > *,
.types.is-enhanced .types-points > div {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.types.is-enhanced .types-panel.is-active .types-copy > *,
.types.is-enhanced .types-panel.is-active .types-points > div {
  opacity: 1;
  transform: none;
}

.types.is-enhanced .types-panel.is-active .types-kicker { transition-delay: 80ms; }
.types.is-enhanced .types-panel.is-active .types-copy h3 { transition-delay: 140ms; }
.types.is-enhanced .types-panel.is-active .types-points > div:nth-child(1) { transition-delay: 220ms; }
.types.is-enhanced .types-panel.is-active .types-points > div:nth-child(2) { transition-delay: 280ms; }
.types.is-enhanced .types-panel.is-active .types-points > div:nth-child(3) { transition-delay: 340ms; }
.types.is-enhanced .types-panel.is-active .types-points > div:nth-child(4) { transition-delay: 400ms; }

/* ── Les commandes, posées sur l'image ────────────────────────────────── */
/* Elles vivent dans .types-stage : leur position se compte depuis le haut de
   l'image, sous la barre des onglets. */

.types-controls {
  display: none;
}

.types.is-enhanced .types-controls {
  position: absolute;
  bottom: var(--space-6);
  /* Centrées en bas de l'image : la moitié de sa colonne. */
  left: calc(min(45vw, 640px) / 2);
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-deep);
}

.types-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.types-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-cta);
}

.types-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.types-btn svg {
  display: block;
}

/* Le bouton lecture/pause commande la vidéo : il n'existe que sur le dentier qui
   en porte une (le client, 2026-10-27). Il montre « pause » pendant la lecture. */
.types:not(.has-video) [data-types-video] { display: none; }
.types-btn .types-icon-play { display: none; }
.types:not(.is-video-playing) [data-types-video] .types-icon-pause { display: none; }
.types:not(.is-video-playing) [data-types-video] .types-icon-play { display: block; }

.types-count {
  min-width: 5ch;
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  font-feature-settings: var(--font-tabular);
  text-align: center;
}

.types-count b {
  color: var(--color-ink);
  font-weight: var(--w-medium);
}

@media (prefers-reduced-motion: reduce) {
  .types.is-enhanced .types-panel,
  .types.is-enhanced .types-panel.is-active,
  .types.is-enhanced .types-media img,
  .types.is-enhanced .types-media video,
  .types.is-enhanced .types-copy > *,
  .types.is-enhanced .types-points > div {
    transition: none;
    transform: none;
  }
}

/* ── 1280 et moins ────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .types-copy {
    padding-left: var(--space-12);
  }
}

/* ── 1024 et moins : les quatre points en une colonne ──────────────────── */

@media (max-width: 1024px) {
  .types-panel {
    min-height: 560px;
  }

  .types-copy {
    padding: var(--space-10) var(--gutter) var(--space-10) var(--space-10);
  }

  .types-copy h3 {
    margin-bottom: var(--space-6);
  }

  .types-points {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ── 768 et moins : l'image au-dessus, le texte dessous ────────────────── */

@media (max-width: 768px) {
  .types {
    margin-top: var(--space-8);
  }

  .types.is-enhanced .types-bar {
    padding: 0;
  }

  .types-tabs {
    max-width: none;
  }

  .types-tab {
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-2) var(--space-4);
    text-align: center;
  }

  .types-tab-gauge {
    right: var(--space-2);
    left: var(--space-2);
  }

  .types-panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* Sur téléphone, l'image remplit la largeur : c'est elle qu'on voit d'abord. */
  .types-media {
    aspect-ratio: 4 / 5;
  }

  .types-copy {
    max-width: none;
    padding: var(--space-8) var(--gutter) var(--space-10);
  }

  .types-copy h3 {
    font-size: var(--text-title);
    margin-bottom: var(--space-5);
  }

  /* Les commandes restent sur l'image : son bas est à 4/5 de la largeur. */
  .types.is-enhanced .types-controls {
    top: calc(100vw * 1.25 - 44px - var(--space-1) * 2 - var(--space-4));
    right: var(--space-4);
    bottom: auto;
    left: auto;
    transform: none;
  }
}

/* ── 480 et moins : une image carrée, pour que le texte monte ─────────── */

@media (max-width: 480px) {
  .types-tab-name {
    font-size: var(--text-small);
  }

  .types-media {
    aspect-ratio: 1 / 1;
  }

  .types.is-enhanced .types-controls {
    top: calc(100vw - 44px - var(--space-1) * 2 - var(--space-4));
  }

  .types-copy {
    padding: var(--space-6) var(--gutter) var(--space-8);
  }
}