/* CynoFlo 0.6.7 | Hero: une photo animee, un texte strictement immobile.
 * Source: demandes du 14-11-2026 et capture de la home CynoFlo.
 * Le texte, le CTA, le header, les vagues et les avis ne sont PAS animes.
 * Couleurs et bordures deja definies dans les couches 0.6.2 a 0.6.6.
 * Derniere couche CSS, volontairement limitee au hero .cyno-v06.
 */
:root {
  --cf-v067-x: 8px;
  --cf-v067-y: -24px;
  --cf-v067-tilt: 1.65deg;
  --cf-v067-frame-duration: 2s;
  --cf-v067-zoom-duration: 2.25s;
}

/* Le grid RESERVE en permanence les deux colonnes, avant l'animation.
   L'image n'est jamais deplacee vers le texte, meme au demarrage. */
@media (min-width:960px) {
  .cyno-v06 .cf-hero {
    overflow: hidden !important;
    padding-top: clamp(3.4rem, 5.4vw, 5.8rem) !important;
    padding-bottom: clamp(7rem, 11vw, 10rem) !important;
  }
  .cyno-v06 .cf-hero-inner {
    display: grid !important;
    width: min(1320px, calc(100% - 3rem)) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.07fr) !important;
    gap: clamp(3.5rem, 5.1vw, 6.5rem) !important;
    align-items: center !important;
    overflow: visible;
  }
  .cyno-v06 .cf-hero-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100%;
    max-width: 590px !important;
    position: relative;
    z-index: 4;
    /* Pas d'animation et pas de translate dans la colonne du texte. */
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  .cyno-v06 .cf-hero-visual {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative;
    z-index: 2;
    justify-self: end;
    align-self: center;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* La trame du cadre reste beige, dans la continuite du haut de page.
   L'emplacement de l'image ne depend jamais de l'etat de l'animation. */
.cyno-v06 .cf-hero-visual {
  box-sizing: border-box;
  isolation: isolate;
  background: var(--cf-beige, #E6DBD6) !important;
  border-color: var(--cf-beige, #E6DBD6) !important;
  overflow: hidden !important;
  transform-origin: 50% 52%;
  opacity: 1;
  transform: translate3d(var(--cf-v067-x), var(--cf-v067-y), 0)
             rotate(var(--cf-v067-tilt)) scale(1) !important;
  animation: cf-v067-frame var(--cf-v067-frame-duration)
             cubic-bezier(.22, 1, .36, 1) .12s 1 both !important;
}
@keyframes cf-v067-frame {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--cf-v067-x) + 42px),
                           calc(var(--cf-v067-y) + 12px), 0)
               rotate(var(--cf-v067-tilt)) scale(.965);
  }
  100% {
    opacity: 1;
    transform: translate3d(var(--cf-v067-x), var(--cf-v067-y), 0)
               rotate(var(--cf-v067-tilt)) scale(1);
  }
}
.cyno-v06 .cf-hero-img {
  overflow: hidden !important;
  margin: 0 !important;
}
.cyno-v06 .cf-hero-img img {
  width: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  object-position: 52% 46%;
  transform-origin: 52% 46%;
  transform: scale(1) !important;
  animation: cf-v067-image var(--cf-v067-zoom-duration)
             cubic-bezier(.22, 1, .36, 1) .12s 1 both !important;
}
@keyframes cf-v067-image {
  0% {transform: scale(1.075);}
  100% {transform: scale(1);}
}

/* La copie ne peut pas etre masquee par la photo; aucun element du
   titre, du bouton ou de la citation n'est anime. */
.cyno-v06 .cf-hero-copy .cf-kicker,
.cyno-v06 .cf-hero-copy .cf-title,
.cyno-v06 .cf-hero-copy .cf-primary-cta,
.cyno-v06 .cf-hero-copy .cf-quote-hero {
  position: relative;
  z-index: 5;
  transform: none !important;
  animation: none !important;
}

/* Entre 701 et 959px, une seule colonne et photo sous le texte.
   Cela elimine tout risque de chevauchement des tailles intermediaires. */
@media (min-width:701px) and (max-width:959px) {
  :root { --cf-v067-x: 0px; --cf-v067-y: 0px; --cf-v067-tilt: 1deg; }
  .cyno-v06 .cf-hero {overflow:hidden !important; padding-top:2.3rem !important;}
  .cyno-v06 .cf-hero-inner {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:min(720px,calc(100% - 3rem)) !important;
    gap:2rem !important;
  }
  .cyno-v06 .cf-hero-copy {
    grid-column:1;grid-row:1;max-width:none !important;
    transform:none !important;animation:none !important;
  }
  .cyno-v06 .cf-hero-visual {
    grid-column:1;grid-row:2;
    width:min(100%,660px) !important;
    max-width:100% !important;
    margin:0 auto !important;
    justify-self:center;
  }
  .cyno-v06 .cf-hero-img img {height:auto !important;aspect-ratio:1.6 / 1;}
}

/* Mobile : le texte entier d'abord, puis l'image.
   Pas de mouvement horizontal a proximite d'un bouton. */
@media (max-width:700px) {
  :root {
    --cf-v067-x: 0px;
    --cf-v067-y: 0px;
    --cf-v067-tilt: .65deg;
    --cf-v067-frame-duration: 1.65s;
    --cf-v067-zoom-duration: 1.85s;
  }
  .cyno-v06 .cf-hero {overflow:hidden !important; padding-top:2rem !important;}
  .cyno-v06 .cf-hero-inner {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:1.6rem !important;
    width:calc(100% - 2rem) !important;
    max-width:560px !important;
    margin:0 auto !important;
  }
  .cyno-v06 .cf-hero-copy {
    grid-column:1;grid-row:1;
    min-width:0;max-width:none !important;
    width:100%;padding:0 !important;
    transform:none !important;animation:none !important;
  }
  .cyno-v06 .cf-hero-visual {
    grid-column:1;grid-row:2;
    justify-self:center;
    width:calc(100% - 12px) !important;
    max-width:100% !important;
    margin:0 auto !important;
    animation-name:cf-v067-frame-mobile !important;
  }
  .cyno-v06 .cf-hero-img img {
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1.56 / 1 !important;
    object-position:52% 46%;
  }
}
@keyframes cf-v067-frame-mobile {
  0% {opacity:0;transform:translate3d(0,20px,0) rotate(var(--cf-v067-tilt)) scale(.97);}
  100% {opacity:1;transform:translate3d(0,0,0) rotate(var(--cf-v067-tilt)) scale(1);}
}

@media (prefers-reduced-motion: reduce) {
  .cyno-v06 .cf-hero-visual,
  .cyno-v06 .cf-hero-img img {
    animation:none !important;
    transition:none !important;
    opacity:1 !important;
  }
  .cyno-v06 .cf-hero-visual {
    transform: translate3d(var(--cf-v067-x),var(--cf-v067-y),0)
               rotate(var(--cf-v067-tilt)) scale(1) !important;
  }
  .cyno-v06 .cf-hero-img img {transform:none !important;}
}
/* Edition Gutenberg : jamais d'animation pendant la saisie. */
body.block-editor-page .cyno-v06 .cf-hero-visual,
body.block-editor-page .cyno-v06 .cf-hero-img img {animation:none !important;opacity:1 !important;}