/* Site vitrine Cherry Me : compléments à webflow.css (feuille Webflow reprise telle quelle).
   Ici : ce que Webflow faisait par script ou par embed (états initiaux des animations,
   sliders, menu mobile, popup), les messages de formulaire en français, le rich text des
   articles une fois nettoyé, et le respect de prefers-reduced-motion. */

/* Défilement doux vers les ancres de l'accueil (#Fonctionnalit-s, #histoire), comme Webflow. */
html {
  scroll-behavior: smooth;
}

/* --- Barre de navigation (embed <style> présent dans chaque page Webflow) --------------- */

.nav {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* --- Apparitions au défilement (interactions Webflow SCROLL_INTO_VIEW et PAGE_START) ----
   Les états initiaux ne s'appliquent qu'avec JavaScript (classe `js` sur <html>) : sans
   script, tout est visible. site.js ajoute `is-visible` quand l'élément entre à l'écran. */

html.js [data-anim="fade"],
html.js [data-anim="slide-up"],
html.js [data-anim="rise"],
html.js [data-anim="page-fade"] {
  opacity: 0;
}

html.js [data-anim="slide-up"] {
  transform: translate3d(0, 100px, 0);
}

html.js [data-anim="rise"] {
  transform: translate3d(0, 10%, 0);
}

/* Fondu « fadeIn » et glissement « slideInBottom » : 1 000 ms, outQuart. */
[data-anim="fade"],
[data-anim="slide-up"] {
  transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* « Slide To Top » de la section newsletter de l'accueil : 500 ms, ease, après 300 ms. */
[data-anim="rise"] {
  transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}

/* Conteneurs des pages article et catégorie au chargement : 800 ms. */
[data-anim="page-fade"] {
  transition: opacity 0.8s linear;
}

html.js [data-anim].is-visible {
  opacity: 1;
  transform: none;
}

/* Certaines apparitions n'existent qu'à partir de la tablette (768 px) : en dessous,
   l'élément reste visible. */
@media (max-width: 767px) {
  html.js [data-anim][data-anim-min="768"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Effets continus au défilement (site.js) ------------------------------------------- */

.scroll-indicator {
  transform: scale3d(0, 1, 1);
  will-change: transform;
}

.blog_post_image {
  will-change: transform;
}

/* --- Sliders ----------------------------------------------------------------------------
   Mode « fade » (témoignages, photos du hero du blog) : diapositives empilées, la courante
   apparaît en 800 ms. Mode « slide » (cartes Fonctionnalités) : glissement en 500 ms. */

.w-slider-mask.is-fade > .w-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.w-slider-mask.is-fade > .w-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s;
}

.w-slider-mask.is-slide > .w-slide {
  transition: transform 0.5s ease;
}

.w-slider-mask.is-slide.is-dragging > .w-slide {
  transition: none;
}

/* Effet Ken Burns des photos du hero du blog : la photo affichée grossit de 1 à 1,3 en
   20 s (outCirc) ; celle qui s'efface revient à 1 sur la même durée. */
.blog_hero_slide_image {
  transform: scale3d(1, 1, 1);
  transition: transform 20s cubic-bezier(0.075, 0.82, 0.165, 1);
  will-change: transform;
}

.blog_hero_slide.is-active .blog_hero_slide_image {
  transform: scale3d(1.3, 1.3, 1);
}

/* Puces du slider mobile : générées par site.js dans .w-slider-nav. */
.w-slider-nav .w-slider-dot {
  background-color: #23222233;
}

.w-slider-nav .w-slider-dot.w-active {
  background-color: var(--black);
}

/* --- Menu mobile (interactions NAVBAR_OPEN / NAVBAR_CLOSE, easing inOutQuint) ----------- */

.menu-icon_line-top,
.menu-icon_line-bottom {
  transition: translate 0.6s cubic-bezier(0.83, 0, 0.17, 1), rotate 0.4s cubic-bezier(0.83, 0, 0.17, 1);
}

.menu-icon_line-middle {
  transition: width 0.2s cubic-bezier(0.83, 0, 0.17, 1) 0.4s;
}

.nav.is-open .menu-icon_line-top,
.nav.is-open .menu-icon_line-bottom {
  transition: translate 0.4s cubic-bezier(0.83, 0, 0.17, 1), rotate 0.6s cubic-bezier(0.83, 0, 0.17, 1);
}

.nav.is-open .menu-icon_line-top {
  translate: 0 8px;
  rotate: -45deg;
}

.nav.is-open .menu-icon_line-bottom {
  translate: 0 -8px;
  rotate: 45deg;
}

.nav.is-open .menu-icon_line-middle {
  width: 0;
  transition-delay: 0s;
}

.uui-navbar02_menu[data-nav-menu-open] {
  animation: nav-menu-in 0.4s ease;
}

@keyframes nav-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* --- Popup newsletter ------------------------------------------------------------------- */

.newsletter_popup {
  transition: opacity 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.newsletter_popup.is-open {
  display: flex;
  opacity: 1;
}

.newsletter_popup.is-closing {
  transition-duration: 0.4s;
}

.newsletter-note {
  color: #23222299;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 13px;
}

.newsletter .close-wrapper {
  z-index: 3;
}

/* --- Formulaires (messages en français, pot de miel) ------------------------------------ */

/* Webflow masque ces blocs et les affiche par script : ici, la vue (ou site.js) les affiche. */
.w-form-done.is-shown,
.w-form-fail.is-shown {
  display: block;
}

/* Inscription réussie en fetch : les champs laissent la place au message. */
form[data-lead-form].is-done .w-input,
form[data-lead-form].is-done .w-button,
form[data-lead-form].is-done .uui-signup-form_wrapper {
  display: none;
}

.w-form-fail,
.brix---error-message {
  color: var(--rouge);
  font-family: Barlow, sans-serif;
  font-size: 15px;
  line-height: 22px;
}

.brix---error-message {
  text-align: left;
}

.form-error {
  color: var(--rouge);
  margin-top: 8px;
  font-family: Barlow, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.newsletter-form.is-invalid,
.uui-form_input.is-invalid,
.brix---input.is-invalid,
.brix---textarea.is-invalid {
  border-color: var(--rouge);
}

/* Succès du formulaire de contact (le gabarit BRIX prévoyait un texte blanc sur fond
   transparent) : fond dégradé de la marque, texte et coche en blanc. */
.brix---success-message {
  color: #fff;
  text-align: center;
  background-image: linear-gradient(307deg, #ae1833, #e21f42);
}

.brix---success-message h3 {
  color: #fff;
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 30px;
}

.brix---icon-success-message-big {
  width: 48px;
  height: 48px;
}

/* Zone de message du formulaire de contact, dans le style des champs BRIX. */
.brix---textarea {
  color: #000;
  background-color: #fff;
  border: 1px solid #eff0f6;
  border-radius: 24px;
  width: 100%;
  min-height: 160px;
  margin-bottom: 0;
  padding: 16px 24px;
  font-family: inherit;
  font-size: 18px;
  line-height: 24px;
  resize: vertical;
  transition: box-shadow 0.3s, color 0.3s, border-color 0.3s;
  box-shadow: 0 2px 7px #14142b14;
}

.brix---textarea:focus {
  color: #211f54;
  border-color: #ffcdba00;
  outline: 0;
  box-shadow: 0 2px 12px #14142b1f;
}

/* Formulaire de contact sur une colonne (e-mail, message, bouton), à toutes les largeurs. */
.brix---form-grid-2-columns {
  grid-template-columns: 1fr;
}

.brix---form-grid-2-columns > .brix---btn-primary {
  justify-self: start;
}

/* Le pot de miel : hors écran, invisible pour une personne, rempli par les robots. */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Pages -------------------------------------------------------------------------------- */

/* Boutons natifs à la place des <div> cliquables de Webflow (menu, fermeture du popup). */
button.uui-navbar02_menu-button,
button.close-wrapper {
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

/* Titre de l'article : un <h1> (référencement) avec la taille du <h2> Webflow. */
h1.blog-post-title {
  font-size: 40px;
  line-height: 42px;
}

/* Grand titre de l'accueil : la casse et l'italique viennent de la classe Webflow. */
.section-cta h2.uui-heading-xlarge {
  margin-top: 0;
}

/* Carte d'article sans visuel : fond uni plutôt que l'image de substitution de Webflow. */
.story_image,
.card_image_hover_expand,
.travelteller_circle,
.blog_post_image {
  background-color: var(--white-smoke);
}

/* Badges des stores : tous à la même hauteur (le PNG d'Apple est moins large). */
.link-block-3 img {
  height: 44px;
  width: auto;
}

/* Page 404 : le confetti est un détail décoratif, hors du flux. */
.utility-page-wrap .button {
  z-index: 1;
  position: relative;
}

/* --- Rich text des articles --------------------------------------------------------------
   Le nettoyeur HTML (website/sanitize.py) garde <figure>, <img> et <iframe> mais retire
   les <div> intermédiaires, les classes et les styles en ligne que Webflow y mettait :
   les figures sont donc centrées, en pleine largeur de colonne, et les vidéos gardent
   leur format 16:9 par aspect-ratio. */

.w-richtext figure {
  display: block;
  max-width: 60%;
  margin: 24px auto;
  text-align: center;
}

@media (max-width: 479px) {
  .w-richtext figure {
    max-width: 100%;
  }
}

.w-richtext figure > img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.w-richtext figure > iframe,
.w-richtext iframe {
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
}

/* Si une figure a gardé ses classes Webflow, on respecte l'alignement demandé. */
.w-richtext figure.w-richtext-align-floatleft,
.w-richtext figure.w-richtext-align-floatright {
  max-width: 40%;
}

.w-richtext figure.w-richtext-figure-type-video {
  width: 100%;
  height: auto;
  padding-bottom: 0 !important;
}

.w-richtext figure.w-richtext-figure-type-video > iframe {
  position: static;
}

.w-richtext img {
  height: auto;
}

/* --- Mouvement réduit ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .scroll-indicator,
  .blog_post_image,
  .blog_hero_slide_image,
  .w-slider-mask.is-fade > .w-slide,
  .w-slider-mask.is-slide > .w-slide,
  .newsletter_popup,
  .menu-icon_line-top,
  .menu-icon_line-middle,
  .menu-icon_line-bottom,
  .uui-navbar02_menu[data-nav-menu-open] {
    transition: none !important;
    animation: none !important;
  }

  .blog_hero_slide.is-active .blog_hero_slide_image {
    transform: none;
  }

  .card_image_hover_expand,
  .uui-button.first,
  .category.with-margin,
  .story_wrap,
  .button {
    transition: none;
  }
}

@media (max-width: 991px) {
  h1.blog-post-title {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  h1.blog-post-title {
    font-size: 30px;
    line-height: 36px;
  }
}

@media (max-width: 479px) {
  h1.blog-post-title {
    margin-top: -29px;
    line-height: 36px;
  }
}

/* --- Burger mobile visible (Webflow le peignait vert pâle #ecfdf3 sur fond crème sous 480 px) --- */

@media screen and (max-width: 479px) {
  .menu-icon_line-top,
  .menu-icon_line-middle,
  .menu-icon_line-bottom {
    background-color: var(--black, #303030);
  }
}

/* --- Contact en mobile : la grille Webflow fixait 400 px, plus large que l'écran (débordement hérité) --- */

@media screen and (max-width: 479px) {
  .brix---grid-contact-v4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 479px) {
  .brix---card-form-v2 .uui-text-size-xlarge-2 {
    width: auto;
    max-width: 100%;
  }
}