/* ============================================
   Seebrale Enhancements
   - Letter-by-letter reveal animation (header text)
   - Hover: full word in place of the abbreviation (top-left),
     same typography/size, letter-by-letter reveal
   - Nuancier touch/click behavior (middle-left)
   - Page brown : vidéo de fond web / mobile
   ============================================ */

/* ---------- 0. Page brown : vidéo de fond ----------
   Deux sources : video-1.mp4 (web) et video-bundle-36.mp4 (mobile).
   On bascule en version mobile pour les téléphones uniquement
   (max 767.98px). À partir de 768px (iPad), on garde la version web.
   Les wrappers sont des .ssr-variant (display:contents) ; on force
   display:none pour masquer la variante inactive. */

.framer-1vrtuvl-container .seebrale-video-mobile {
  display: none;
}

@media (max-width: 767.98px) {
  .framer-1vrtuvl-container .seebrale-video-web {
    display: none;
  }
  .framer-1vrtuvl-container .seebrale-video-mobile {
    display: contents;
  }
}

/* ---------- 1. Letter reveal animation ---------- */

.seebrale-letter-visible {
  opacity: 1 !important;
  transform: translateX(0px) translateY(0px) scale(1) rotate(0deg) skewX(0deg) skewY(0deg) !important;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ---------- 2. Hover : mot complet, même typo/taille,
   apparition lettre par lettre ---------- */

/* Le conteneur garde sa hauteur d'une ligne ; sa largeur est
   animée en JS (de la largeur de l'abréviation à celle du mot
   entier) pour décaler les éléments voisins du header. */
.seebrale-hoverable {
  position: relative;
  cursor: pointer;
  transition: width 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Le mot complet est superposé exactement sur l'abréviation
   (même ligne), donc hors-flux : il ne décale pas la ligne et
   ne change pas la hauteur. Même police / taille / couleur
   (copiées en JS). */
.seebrale-hover-tip {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  padding: 0;
  pointer-events: none;
  z-index: 100;
}

/* État de repos / sortie : la lettre est invisible mais SUR PLACE
   (pas de décalage vertical). À la fermeture, seule l'opacité est
   animée, donc le texte disparaît en fondu sans redescendre. */
.seebrale-hover-letter {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Entrée : montée + apparition, lettre par lettre. Géré par une
   animation (et non une transition) pour ne s'appliquer qu'à
   l'ouverture, sans rejouer en sens inverse à la fermeture. */
@keyframes seebraleLetterIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* L'abréviation s'efface pendant que le mot se révèle */
.seebrale-hoverable .framer-text {
  transition: opacity 0.2s ease;
}

.seebrale-hoverable.seebrale-tip-open .framer-text {
  opacity: 0;
}

.seebrale-hoverable.seebrale-tip-open .seebrale-hover-letter {
  opacity: 1;
  animation: seebraleLetterIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i) * 40ms);
}

/* ---------- 3. Menu nuancier du footer ----------
   Au survol, Framer ajoute la classe `hover` sur la pastille de couleur,
   ce qui élargit le lien (règles `.framer-…hover…` dans common.css /
   les CSS par page). La classe est posée en JS ; ici on ne fait
   qu'animer en douceur le changement de largeur et le recentrage du
   pictogramme interne (au lieu d'un saut instantané). */

[data-framer-name="Menu close"] a {
  transition: width 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-framer-name="Menu close"] a [data-framer-component-type="SVG"] {
  transition: left 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 3 bis. Page brown : retour « Copié ! » ----------
   Bulle affichée sous l'élément cliqué (Mail / Mobile) confirmant
   que l'info a bien été copiée dans le presse-papiers. */

.seebrale-copied {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  white-space: nowrap;
  padding: 4px 0;
  color: rgb(255, 255, 255);
  font-family: "Sofia Pro", "Sofia Pro Placeholder", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 200;
}

.seebrale-copied.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 4. Nuancier (élément à droite, image pivotante) ----------
   Au repos, le conteneur parent est tourné de 180° : seul le bord de
   l'image dépasse à droite de l'écran. Au survol (ou au tap sur
   mobile/tablette) l'image pivote de -180° autour du centre de ce
   bord visible (transform-origin posé par Framer : 587px 122px), ce
   qui « déplie » l'image. Hover terminé → retour à l'état initial. */

.seebrale-nuancier-inner {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Version web : au survol (souris + pointeur fin) */
@media (hover: hover) and (pointer: fine) {
  .seebrale-nuancier-inner:hover {
    transform: rotate(-180deg) !important;
  }
}

/* Version mobile / tablette : au clic (toggle géré en JS) */
.seebrale-nuancier-inner.seebrale-nuancier-active {
  transform: rotate(-180deg) !important;
}

/* La couche carousel mobile est injectée en JS sur toutes les
   tailles d'écran ; elle ne doit apparaître qu'en mobile (la
   media query ci-dessous la réactive). */
.seebrale-m-carousel {
  display: none !important;
}

/* ============================================
   5. Mise en page MOBILE (téléphones, max 767.98px)
   ------------------------------------------------
   L'export statique ne contient que le DOM « desktop » de Framer
   (les variantes mobile/tablette ont été retirées). Tout y est en
   position absolue et se superpose sur petit écran. Le JS pose des
   classes `seebrale-m-*` stables (les hash Framer changent d'une
   page à l'autre) ; on recompose un écran PLEINE PAGE (comme le
   desktop) :

     1. Header  : logo (réduit) centré → texte de gauche collé à
                  gauche → texte de droite collé à droite
     2. Carousel: visuels mobiles dédiés, plein écran (en fond)
     3. Footer  : reste en bas de l'écran, menu centré → réseaux
     4. Nuancier: en bas, image en grande partie hors champ,
                  rotation -180° au clic pour venir à l'écran

   Concerne uniquement les 6 pages couleur (black/blue/brown/green/
   red/yellow), et seulement sur téléphone (≤ 767.98px) : dès 768px
   (iPad) on retombe sur la mise en page web de Framer (nuancier
   inclus, à sa position web). L'accueil garde sa propre mise en page.
   ============================================ */

@media (max-width: 767.98px) {

  /* --- Racine : écran plein (comme le desktop, recomposé) --- */
  .seebrale-m-root {
    position: relative !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* --- 1. Header : logo et texte de droite sur la MÊME ligne
     (logo collé à gauche, texte collé à droite) --- */
  .seebrale-m-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    transform: none !important;
    flex-flow: row nowrap !important;
    place-content: flex-start !important;
    align-items: center !important;     /* logo ↔ texte alignés verticalement */
    gap: 0 16px !important;
    padding: 32px 24px 0 !important;     /* espace haut↔header, 24px sur les bords */
    z-index: 2;
  }

  .seebrale-m-logo {
    order: 0 !important;
    flex: 0 0 auto !important;           /* taille du logo, collé à gauche */
    /* Certaines pages (ex. yellow) codent une largeur fixe énorme
       sur ce conteneur (1085px) → on la neutralise pour qu'il se
       réduise à la taille du logo, comme les autres pages */
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-self: center !important;
    position: static !important;
    transform: none !important;
    padding: 0 !important;
  }

  /* Logo plus petit (≈ la taille du variant mobile d'origine Framer) */
  .seebrale-m-logo a[data-framer-name="Fichier 2"] {
    width: 54px !important;
    height: 36px !important;
  }

  /* 2e ligne : le texte de gauche du header (abréviations « Frame 16 »)
     est masqué en mobile sur toutes les pages couleur — comme l'accueil
     masque déjà son crochet de gauche (.framer-jf3ct dans home.css) */
  .seebrale-m-hleft {
    display: none !important;
  }

  /* … texte de droite, sur la même ligne que le logo (poussé à droite) */
  .seebrale-m-hright {
    order: 2 !important;
    flex: 0 1 auto !important;
    margin-left: auto !important;        /* poussé à droite */
    position: static !important;
    transform: none !important;
    place-content: center flex-end !important;
    justify-content: flex-end !important;
    text-align: right !important;
    padding: 0 !important;
  }

  /* --- 2. Carousel mobile : visuels dédiés, plein écran ---
     Couche injectée en JS depuis assets/images/carousel-<couleur>-m-N.png.
     Le slideshow Framer est masqué dès que la couche existe. */
  .seebrale-m-has-carousel .seebrale-m-slideshow {
    display: none !important;
  }

  .seebrale-m-carousel {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 0;
  }

  .seebrale-m-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.9s ease;
  }

  .seebrale-m-slide.is-active {
    opacity: 1;
  }

  /* Fond : tant qu'il n'y a pas d'images carousel dédiées, le
     slideshow Framer sert de fond et doit couvrir TOUT l'écran
     (largeur + hauteur). */
  .seebrale-m-slideshow {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    z-index: 0;
  }

  .seebrale-m-slideshow > * {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .seebrale-m-slideshow .seebrale-carousel-track {
    width: 100% !important;
    height: 100% !important;
  }

  .seebrale-m-slideshow .seebrale-carousel-track > li > div {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
  }

  .seebrale-m-slideshow img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* --- 3. Footer : remonté du bas (ne chevauche plus le nuancier) ;
     Instagram et LinkedIn centrés chacun entre le menu et le bord
     de l'écran (space-evenly) --- */
  .seebrale-m-footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    transform: none !important;
    flex-flow: row nowrap !important;
    place-content: center !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 12px 86px !important;    /* écart bas pour le nuancier */
    overflow: visible !important;
    z-index: 2;
  }

  /* Frame 17 ET le wrapper réseaux « disparaissent » : leurs
     enfants (icônes + libellé) deviennent des items du footer */
  .seebrale-m-frame17,
  .seebrale-m-social {
    display: contents !important;
  }

  .seebrale-m-footer a[data-framer-name="Instagram"] { order: 1 !important; }
  /* Menu : largeur réduite de 15% → rectangles plus rapprochés
     (conteneur d'origine = 256px sur les 6 pages) */
  .seebrale-m-menu {
    order: 2 !important;
    position: relative !important;
    /* 256×0.85 puis +5px (≈ +1px d'écart entre chaque rectangle) */
    width: calc(256px * 0.85 + 5px) !important;
  }
  .seebrale-m-footer a[data-framer-name="Linkedin"]  { order: 3 !important; }

  /* Pictogrammes réseaux agrandis de 2px en mobile
     (tailles d'origine : Instagram 16×18, LinkedIn 16×16) */
  .seebrale-m-footer a[data-framer-name="Instagram"] {
    width: 18px !important;
    height: 20px !important;
  }
  .seebrale-m-footer a[data-framer-name="Linkedin"] {
    width: 18px !important;
    height: 18px !important;
  }

  /* On masque « Directrice Artistique » et « Graphisme & Communication » */
  .seebrale-m-frame17 [data-framer-component-type="RichTextContainer"],
  .seebrale-m-footer [data-framer-name="Graphisme & Communication"] {
    display: none !important;
  }

  /* Anti-flash : avant que le JS ne pose les classes mobile, le
     nuancier garde sa position desktop (un liseré apparaît à
     droite au centre). On le masque tant qu'il n'est pas re-câblé. */
  [style*="transform-origin: 587px 122px"]:not(.seebrale-m-nuancier-img),
  [style*="transform-origin:587px 122px"]:not(.seebrale-m-nuancier-img) {
    visibility: hidden !important;
  }

  /* --- 4. Nuancier : ROTATION (cohérence web/mobile). Image déjà
     VERTICALE → le conteneur fait toute la rotation, l'image est
     affichée droite (aucune rotation interne). Pivot DANS l'image :
     centré horizontalement (ligne médiane verticale = 1er 50%) et
     à 20px à l'intérieur du bord bas. BASE (fermé) : rotate(-180°)
     → panneau retourné autour de ce point. CLIC : rotation +180°
     (-180°→0°) → le panneau se redresse. Easing : 0.5s
     cubic-bezier(0.66,-0.01,0.35,1).

     Taille FIXE : largeur figée (256px) et hauteur = largeur /
     ratio réel de l'image (mesuré en JS via --seebrale-nuancier-ar
     = largeur / hauteur). Le nuancier ne change donc plus de taille
     selon l'écran. Le pivot reste sur le bord bas pour garder un
     petit « bout » visible au repos.

     Valeurs à ajuster à l'œil :
       • --seebrale-nuancier-w   : largeur du panneau
       • --seebrale-nuancier-gap : distance pivot ↔ bas de l'écran
                                    (= bout visible au repos) */
  .seebrale-m-nuancier {
    /* TAILLE FIXE : ne dépend plus du viewport (ni vw ni dvh) →
       le nuancier ne change plus de taille d'un écran à l'autre */
    --seebrale-nuancier-w: 256px;
    --seebrale-nuancier-gap: 12px;       /* image redescendue (56→44px) */
    --seebrale-nuancier-ar: 774 / 2025;            /* repli portrait, écrasé par le JS */
    /* hauteur = largeur ÷ ratio réel de l'image (constante, car
       largeur fixe et ratio fixe) */
    --seebrale-nuancier-h: calc(
      var(--seebrale-nuancier-w) / (var(--seebrale-nuancier-ar))
    );
    --seebrale-ease: cubic-bezier(0.66, -0.01, 0.35, 1);
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: var(--seebrale-nuancier-gap) !important;        /* pivot à --gap du bas */
    margin-left: calc(var(--seebrale-nuancier-w) / -2) !important; /* centré */
    width: var(--seebrale-nuancier-w) !important;
    height: var(--seebrale-nuancier-h) !important;
    transform: rotate(-180deg) !important;                  /* base : panneau retourné */
    /* pivot : centré horizontalement (ligne médiane verticale),
       à 20px à l'intérieur depuis le bord bas de l'image */
    transform-origin: 50% calc(100% - 30px) !important;
    transition: transform 0.5s var(--seebrale-ease);
    overflow: hidden !important;
    border-radius: 18px 18px 0 0;                           /* coins arrondis (haut) */
    z-index: 3;
    cursor: pointer;
  }

  .seebrale-m-nuancier.seebrale-m-nuancier-open {
    /* +180° autour du pivot → panneau droit, ancré en centre-bas */
    transform: rotate(0deg) !important;
  }

  /* Image verticale affichée telle quelle : remplit le panneau */
  .seebrale-m-nuancier-img {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    background-image: var(--seebrale-nuancier-img) !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transform: none !important;                     /* plus aucune rotation */
    transform-origin: center !important;
    cursor: pointer;
  }

  /* La rotation hover/desktop ne doit pas s'appliquer sur mobile */
  .seebrale-m-nuancier-img.seebrale-nuancier-active {
    transform: none !important;
  }
}