/* ==========================================================================
   Carrousel des soins (raccourci [2mindev_carrousel] du greffon 2minDev).

   ⭐ CETTE FEUILLE VIT DANS LE THEME DEPUIS LE 16/10/2026. Elle etait imprimee
   dans chaque page par le greffon : 6,9 Ko retelecharges a chaque visite, et
   une charte dispersee entre deux depots. Le greffon la demande desormais au
   theme par le filtre `deuxmindev_feuille` (functions.php).
   ========================================================================== */

.aimes-carrousel {
  position: relative;
  margin: 0;
  /* La vague de la section suivante remonte : on lui laisse sa place, comme
     le fait .image-bande, sinon elle mord sur les fleches. */
  padding-bottom: var(--vague-hauteur, clamp(28px, 4vw, 54px));
}
/* ⛔ `height` ICI COUPAIT LE BOUTON. Les vues etaient en position absolue :
   rien ne pouvait pousser la bande, donc un resume un peu long debordait sous
   le cadre et le bouton disparaissait (mesure du 06/10 : 31 px coupes a
   1920 px de large). La scene est maintenant une grille d UNE SEULE CASE ou
   toutes les vues se superposent : la bande prend la hauteur de LA PLUS HAUTE,
   `min-height` n etant plus qu un plancher.
   ⭐ Effet de bord voulu : la bande ne saute plus d une hauteur a l autre en
   changeant de vue, puisque les vues cachees comptent elles aussi. */
.aimes-carrousel__scene {
  position: relative;
  display: grid;
  grid-template-areas: "vue";
  min-height: clamp(380px, 44vw, 540px);
  border-radius: var(--rayon, 14px);
  overflow: hidden;
  background: var(--anchor, #004D51);
}
.aimes-carrousel__vue {
  grid-area: vue;
  position: relative;
  display: grid;
  align-items: center;
  /* Le texte se cale sur la colonne du site. C est la VUE qui porte le
     decalage, plus le bloc : voir le commentaire du bloc. */
  padding-block: clamp(26px, 3.6vw, 48px);
  padding-left: max(var(--gouttiere, 24px),
                    calc((100% - var(--largeur, 1240px)) / 2 + var(--gouttiere, 24px)));
  padding-right: clamp(18px, 2.5vw, 40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}
.aimes-carrousel__vue.est-vue {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms ease;
}
.aimes-carrousel__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.aimes-carrousel__voile {
  position: absolute;
  inset: 0;
  /* ⚠ Retendu le 06/10 : la colonne de texte ne s arrete plus a 540 px du
     bord mais suit la colonne du site, donc elle va plus loin a droite. Le
     degrade devait suivre, sans quoi la fin des lignes tombait sur la photo. */
  background: linear-gradient(90deg,
    rgba(0, 77, 81, .95) 0%,
    rgba(0, 77, 81, .91) 32%,
    rgba(0, 77, 81, .72) 50%,
    rgba(0, 77, 81, .34) 70%,
    rgba(0, 77, 81, .08) 86%,
    rgba(0, 77, 81, 0) 96%);
}
/* ⛔ LE BLOC ETAIT EN POSITION ABSOLUE, LARGE DE `min(48%, 540px)`, AVEC LE
   DECALAGE DE COLONNE EN PADDING INTERIEUR. Deux consequences, mesurees :
   1. il ne poussait RIEN, donc la bande ne pouvait pas grandir ;
   2. plus l ecran etait large, plus la colonne de lecture RETRECISSAIT — le
      decalage mangeait les 540 px par la gauche. Mesure : 472 px de texte a
      1280 px de large, 388 px a 1440, et **148 px a 1920**. Un resume de deux
      lignes en prenait alors huit, et le bouton passait sous le cadre.
   Le decalage est donc remonte sur la vue, et le bloc garde une largeur de
   lecture franche, la meme a toutes les tailles. */
.aimes-carrousel__bloc {
  position: relative;
  width: min(100%, 520px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  color: var(--creme, #FAE8D1);
}
.aimes-carrousel__famille {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dore, #ECCEA1);
}
.aimes-carrousel__nom {
  margin: 0;
  font-family: var(--font-titre, Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
  line-height: 1.08;
  color: var(--creme, #FAE8D1);
}
.aimes-carrousel__texte {
  margin: 0;
  max-width: 46ch;
  font-size: .97rem;
  line-height: 1.6;
  color: rgba(250, 232, 209, .88);
}
.aimes-carrousel__detail {
  margin: 0;
  font-size: .84rem;
  letter-spacing: .06em;
  color: var(--dore, #ECCEA1);
}
.aimes-carrousel__lien {
  align-self: flex-start;
  margin-top: 6px;
  text-decoration: none;
}
.aimes-carrousel__pilotage {
  position: absolute;
  bottom: calc(var(--vague-hauteur, clamp(28px, 4vw, 54px)) + clamp(16px, 2.2vw, 28px));
  right: max(var(--gouttiere, 24px),
             calc((100% - var(--largeur, 1240px)) / 2 + var(--gouttiere, 24px)));
  display: flex;
  align-items: center;
  gap: 12px;
  /* ⚠ Les vues vont du teint clair a la lumiere rouge : un contour creme a
     45 % disparait sur la moitie des photos. On pose une ombre portee sur tout
     le pilotage plutot que de forcer lopacite, qui alourdirait la bande. */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}
.aimes-carrousel__fleche {
  width: 44px; height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--creme, #FAE8D1);
  background: rgba(0, 77, 81, .34);
  border: 1px solid rgba(250, 232, 209, .62);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 200ms ease, color 200ms ease;
}
.aimes-carrousel__fleche:hover,
.aimes-carrousel__fleche:focus-visible {
  background: var(--creme, #FAE8D1);
  color: var(--anchor, #004D51);
}
.aimes-carrousel__puces { display: flex; align-items: center; gap: 7px; }
.aimes-carrousel__puce {
  width: 8px; height: 8px;
  padding: 0;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: rgba(250, 232, 209, .62);
  transition: width 220ms ease, background 220ms ease;
}
.aimes-carrousel__puce.est-vue { width: 24px; background: var(--dore, #ECCEA1); }

/* ⛔ SOUS 860 px LE BLOC PASSE SOUS LIMAGE. En surimpression, un texte de
   quatre lignes sur une photo de 300 px de haut deborde ou devient illisible,
   quelle que soit lopacite du voile. */
@media (max-width: 860px) {
  .aimes-carrousel__scene { min-height: 0; }
  .aimes-carrousel__vue { display: none; padding: 0; opacity: 1; visibility: visible; transition: none; }
  .aimes-carrousel__vue.est-vue { display: block; }
  .aimes-carrousel__photo { position: relative; height: clamp(190px, 50vw, 300px); }
  .aimes-carrousel__voile { display: none; }
  .aimes-carrousel__bloc {
    width: auto;
    background: var(--anchor, #004D51);
    padding: 26px var(--gouttiere, 24px) 32px;
  }
  .aimes-carrousel__pilotage {
    position: relative;
    inset: auto;
    right: auto;
    bottom: auto;
    justify-content: center;
    padding-top: 16px;
  }
  .aimes-carrousel__pilotage { filter: none; }
  .aimes-carrousel__fleche { color: var(--espresso, #3B2E25); background: rgba(59, 46, 37, .08); border-color: rgba(59, 46, 37, .3); }
  .aimes-carrousel__puce { background: rgba(59, 46, 37, .3); }
  .aimes-carrousel__puce.est-vue { background: var(--anchor, #004D51); }
}

@media (prefers-reduced-motion: reduce) {
  .aimes-carrousel__vue { transition: none; }
  .aimes-carrousel__puce { transition: none; }
}

/* ── 0.6.0 (16/10/2026) : tous les soins, onglets de familles, compteur,
      photos en portrait ─────────────────────────────────────────────────── */

/* Les onglets de familles passent AU-DESSUS de la bande : sous elle, ils
   auraient decale les fleches, calees sur le bas du bloc. */
.aimes-carrousel { display: flex; flex-direction: column; }
.aimes-carrousel__familles {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--gouttiere, 24px) 16px;
}
.aimes-carrousel__onglet {
  font: inherit;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--espresso, #3B2E25);
  background: transparent;
  border: 1px solid rgba(59, 46, 37, .28);
  border-radius: 999px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.aimes-carrousel__onglet:hover,
.aimes-carrousel__onglet:focus-visible { border-color: var(--anchor, #004D51); }
.aimes-carrousel__onglet.est-vue {
  color: var(--creme, #FAE8D1);
  background: var(--anchor, #004D51);
  border-color: var(--anchor, #004D51);
}

.aimes-carrousel__navigation { display: flex; align-items: center; gap: 12px; }
/* ⚠ Le compteur porte la meme pastille que les fleches : en texte nu, il
   disparaissait sur la partie claire des photos (mesure a l'ecran le 16/10). */
.aimes-carrousel__compteur {
  margin: 0;
  min-width: 4.6em;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(0, 77, 81, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
  font-size: .9rem;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--creme, #FAE8D1);
}

/* ⛔ UNE PHOTO DE MOINS DE 1200 PX N'EST PAS ETIREE. Posee a droite, a sa
   hauteur, sur le fond de la bande : l'image BBL (524 px de large) restait
   sinon grossie trois fois — la photo « pixelisee » signalee le 15/09. */
@media (min-width: 861px) {
  .aimes-carrousel__vue.est-portrait .aimes-carrousel__photo {
    inset: 0 max(var(--gouttiere, 24px), calc((100% - var(--largeur, 1240px)) / 2 + var(--gouttiere, 24px))) 0 auto;
    width: auto;
    max-width: 40%;
    height: 100%;
    object-fit: cover;
  }
  .aimes-carrousel__vue.est-portrait .aimes-carrousel__voile {
    background: linear-gradient(90deg, rgba(0, 77, 81, .96) 0%, rgba(0, 77, 81, .9) 55%, rgba(0, 77, 81, 0) 75%);
  }
}

@media (max-width: 860px) {
  .aimes-carrousel__compteur { color: var(--espresso, #3B2E25); background: rgba(59, 46, 37, .08); }
  /* Sur telephone, une seule rangee qui defile au doigt : trois rangees
     d'onglets repoussaient le carrousel de 110 px (mesure du 16/10). */
  .aimes-carrousel__familles {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 12px;
  }
  .aimes-carrousel__familles::-webkit-scrollbar { display: none; }
  .aimes-carrousel__onglet { flex: none; white-space: nowrap; padding: 6px 11px; font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .aimes-carrousel__onglet { transition: none; }
}