/* ==========================================================================
   COMPETENCES (verticale, clone logique de Projets)
   Classes dédiées : stancreation-competences-*
   ========================================================================== */

/* ==========================================================================
   0) VARIABLES + FOND PAGE
   ========================================================================== */

   :root{
    /* Orange sombre, chaud, maîtrisé */
    --stancreation-competences-bg: rgb(255, 147, 30);
  }
  
  /* IMPORTANT : cible Compétences seulement */
  .stancreation-page-competences{
    background-color: var(--stancreation-competences-bg);
  }
  
  /* ==========================================================================
     1) WRAPPER + HERO
     ========================================================================== */
  
  .stancreation-competences{
    position: relative;
    z-index: 2;
  }
  
  .stancreation-competences-hero{
    position: relative;
    z-index: 2;
    padding: 10% 13% 0 13%;
  }
  
  .stancreation-competences-hero-contenu{
    max-width: var(--container);
    margin: 0 auto;
  }
  
  .stancreation-competences-titre{
    margin: 0 0 1.2rem 0;
    text-align: right;
  }
  
  /* Texte intro */
  .stancreation-competences-texte{
    margin: 0 40% 5% 0;
    max-width: 100ch;
    text-align: left;
  }
  




/* ==========================================================================
   COMPÉTENCES — SVG SOUS H1 (clone Projets)
   ========================================================================== */

   :root {

    --stancreation-competences-svg-delay: .55s;
  
    --stancreation-competences-svg-line-dur: .75s;
    --stancreation-competences-svg-square-dur: .55s;
  
    --stancreation-competences-svg-line-gap: .12s;
    --stancreation-competences-svg-square-gap: .18s;
  }
  
  .stancreation-competences-hero-svg {
    margin-bottom: clamp(1.8rem, 3.2vw, 2.8rem);
  }
  
  /* rotation (comme tu veux l’avoir) */
  .stancreation-competences-hero-svg.is-rotate-180 svg{
    transform: rotate(180deg);
    transform-origin: center;
  }
  
  .stancreation-competences-hero-svg svg {
    display: block;
    width: 100%;
    height: auto;
  }
  
  
  /* INIT */
  
  .stancreation-competences-hero-svg #sc-line-1,
  .stancreation-competences-hero-svg #sc-line-2 {
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0);
    will-change: transform;
  }
  
  .stancreation-competences-hero-svg #sc-square {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    transform: translateY(.35rem) scale(.7);
    will-change: transform, opacity;
  }
  
  
  /* ENTRÉE */
  
  body.stancreation-competences-loaded .stancreation-competences-hero-svg #sc-line-1 {
    animation: scCompetencesLineGrow var(--stancreation-competences-svg-line-dur) cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: var(--stancreation-competences-svg-delay);
  }
  
  body.stancreation-competences-loaded .stancreation-competences-hero-svg #sc-line-2 {
    animation: scCompetencesLineGrow var(--stancreation-competences-svg-line-dur) cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(var(--stancreation-competences-svg-delay) + var(--stancreation-competences-svg-line-gap));
  }
  
  body.stancreation-competences-loaded .stancreation-competences-hero-svg #sc-square {
    animation: scCompetencesSquarePop var(--stancreation-competences-svg-square-dur) cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(
      var(--stancreation-competences-svg-delay)
      + var(--stancreation-competences-svg-line-gap)
      + var(--stancreation-competences-svg-square-gap)
    );
  }
  
  
  /* SORTIE */
  
  body.stancreation-transition-active .stancreation-competences-hero-svg #sc-line-1,
  body.stancreation-transition-active .stancreation-competences-hero-svg #sc-line-2 {
    animation: scCompetencesLineOut .35s cubic-bezier(.22, .61, .36, 1) forwards;
  }
  
  body.stancreation-transition-active .stancreation-competences-hero-svg #sc-square {
    animation: scCompetencesSquareOut .35s cubic-bezier(.22, .61, .36, 1) forwards;
  }
  
  
  /* KEYFRAMES (noms uniques pour éviter collisions globales) */
  
  @keyframes scCompetencesLineGrow {
    to { transform: scaleX(1); }
  }
  
  @keyframes scCompetencesLineOut {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
  }
  
  @keyframes scCompetencesSquarePop {
    0% { opacity: 0; transform: translateY(.35rem) scale(.7); }
    70% { opacity: 1; transform: translateY(0) scale(1.08); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  
  @keyframes scCompetencesSquareOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(.35rem) scale(.7); }
  }









  /* ==========================================================================
     3) EXPERTISES (3 cartes flottantes + SVG gauche)
     ========================================================================== */
  
  .stancreation-competences-expertises{
    position: relative;
    z-index: 2;
    padding: 5% 0 10% 0;
  }
  
  .stancreation-competences-expertises-conteneur{
    max-width: var(--container);
    margin: 0 auto;
  
    display: flex;
    align-items: flex-start;
    gap: clamp(2.5rem, 5vw, 6rem);
  
    /* FLOAT GLOBAL (desktop) */
    animation: scFloatGlobal 6s ease-in-out infinite;
    will-change: transform;
  }
  
  /* 3.1) SVG GAUCHE */
  .stancreation-competences-expertises-svg{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: fit-content;
  
    --sc-svg-float-x: 0%;
    --sc-svg-float-y: 15%;
    --sc-svg-float-dur: 5s;
  
    will-change: transform;
    color: black !important;
  }
  
  .stancreation-competences-expertises-svg svg{
    width: 5%;
    min-width: 0.5rem;
    max-width: 0.5rem;
    height: auto;
    display: block;
  
    animation: scSvgFloat var(--sc-svg-float-dur) ease-in-out infinite;
    animation-delay: -2.7s;
  
    transform: translate3d(0, 0, 0);
    will-change: transform;
  
    color: black !important;
  }
  



  /* 3.2) ZONE CARTES (canvas de placement) */
.stancreation-competences-expertises-cartes{
  position: relative;
  flex: 1;
  min-height: clamp(30rem, 65vh, 48rem);
}

/* Carte — taille au contenu */
.stancreation-competences-carte{
  position: absolute;
  background: black;
  color: #fff;
  padding: clamp(1.1rem, 1.6vw, 1.6rem);
  box-sizing: border-box;

  width: max-content;
  max-width: min(42vw, 36rem);

  /* repel vars (desktop) */
  --sc-rx: 0px;
  --sc-ry: 0px;

  /* IMPORTANT : si repel JS actif, il écrase le float (même propriété transform)
     => on garde ta structure actuelle. */
  transform: translate3d(var(--sc-rx), var(--sc-ry), 0);

  will-change: transform;
}

/* Titre souligné */
.stancreation-competences-carte-titre{
  margin: 0 0 1rem 0;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.45vw, 1.6rem);
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: .5rem;
  text-decoration-thickness: .20rem;
}

/* Liste */
.stancreation-competences-carte-liste{
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Poppins", sans-serif;
  font-size: clamp(.65rem, 1vw, 1.2rem);
  font-weight: 200;
  line-height: 1.35;
  opacity: .95;
}

.stancreation-competences-carte-liste li{
  margin: .25rem 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ==========================================================
   FLOATS DÉSYNCHRO + AXES DIFFÉRENTS
   - Graphisme : petit X / gros Y
   - Site internet : X moyen / gros Y (phase différente)
   - Marketing : gros X / petit Y
   Durées longues + delays différents => naturel
   ========================================================== */

/* Graphisme */
.stancreation-competences-carte--graphisme{
  left: 10rem;
  top: 0;

  /* amplitude */
  --sc-float-x: 43%;
  --sc-float-y: -6%;

  /* plus lent */
  --sc-float-dur: 62s;

  animation: scFloatGraphisme var(--sc-float-dur) ease-in-out infinite;
  animation-delay: -9.4s;
}

/* Site internet */
.stancreation-competences-carte--siteinternet{
  right: 5%;
  top: -20%;

  /* amplitude */
  --sc-float-x: -14%;
  --sc-float-y: 12%;

  /* plus lent */
  --sc-float-dur: 26s;

  animation: scFloatSite var(--sc-float-dur) ease-in-out infinite;
  animation-delay: -127.2s;
}

/* Marketing digital */
.stancreation-competences-carte--marketingdigital{
  left: 40%;
  top: 16rem;

  /* amplitude */
  --sc-float-x: 24%;
  --sc-float-y: 34%;

  /* plus lent */
  --sc-float-dur: 20s;

  animation: scFloatMarketing var(--sc-float-dur) ease-in-out infinite;
  animation-delay: -12.6s;
}

/* ==========================================================
   KEYFRAMES (sans rotation, trajectoires différentes)
   - on reste en X/Y uniquement
   - on évite les loops trop symétriques (désestructuré)
   ========================================================== */

   @keyframes scFloatGraphisme{
    0%   { transform: translate3d(0, 0, 0); }
    9%   { transform: translate3d(calc(var(--sc-float-x) * 0.18),  calc(var(--sc-float-y) * -0.92), 0); }
    21%  { transform: translate3d(calc(var(--sc-float-x) * -0.64), calc(var(--sc-float-y) * -0.22), 0); }
    33%  { transform: translate3d(calc(var(--sc-float-x) * 0.12),  calc(var(--sc-float-y) * 0.98), 0); }
    49%  { transform: translate3d(calc(var(--sc-float-x) * -0.38), calc(var(--sc-float-y) * 0.31), 0); }
    62%  { transform: translate3d(calc(var(--sc-float-x) * 0.26),  calc(var(--sc-float-y) * -0.56), 0); }
    78%  { transform: translate3d(calc(var(--sc-float-x) * -0.22), calc(var(--sc-float-y) * 0.62), 0); }
    91%  { transform: translate3d(calc(var(--sc-float-x) * 0.06),  calc(var(--sc-float-y) * -0.18), 0); }
    100% { transform: translate3d(0, 0, 0); }
  }
  
  @keyframes scFloatSite{
    0%   { transform: translate3d(0, 0, 0); }
    12%  { transform: translate3d(calc(var(--sc-float-x) * -0.72), calc(var(--sc-float-y) * 0.44), 0); }
    26%  { transform: translate3d(calc(var(--sc-float-x) * 0.28),  calc(var(--sc-float-y) * -0.88), 0); }
    40%  { transform: translate3d(calc(var(--sc-float-x) * 0.86),  calc(var(--sc-float-y) * 0.16), 0); }
    55%  { transform: translate3d(calc(var(--sc-float-x) * -0.16), calc(var(--sc-float-y) * 0.78), 0); }
    69%  { transform: translate3d(calc(var(--sc-float-x) * 0.52),  calc(var(--sc-float-y) * -0.24), 0); }
    83%  { transform: translate3d(calc(var(--sc-float-x) * -0.46), calc(var(--sc-float-y) * -0.06), 0); }
    93%  { transform: translate3d(calc(var(--sc-float-x) * 0.10),  calc(var(--sc-float-y) * 0.58), 0); }
    100% { transform: translate3d(0, 0, 0); }
  }
  
  @keyframes scFloatMarketing{
    0%   { transform: translate3d(0, 0, 0); }
    10%  { transform: translate3d(calc(var(--sc-float-x) * 0.92),  calc(var(--sc-float-y) * -0.08), 0); }
    24%  { transform: translate3d(calc(var(--sc-float-x) * -0.34), calc(var(--sc-float-y) * -0.78), 0); }
    37%  { transform: translate3d(calc(var(--sc-float-x) * -1.00), calc(var(--sc-float-y) * 0.22), 0); }
    53%  { transform: translate3d(calc(var(--sc-float-x) * 0.44),  calc(var(--sc-float-y) * 0.70), 0); }
    67%  { transform: translate3d(calc(var(--sc-float-x) * -0.18), calc(var(--sc-float-y) * -0.26), 0); }
    81%  { transform: translate3d(calc(var(--sc-float-x) * 0.62),  calc(var(--sc-float-y) * 0.14), 0); }
    92%  { transform: translate3d(calc(var(--sc-float-x) * -0.52), calc(var(--sc-float-y) * 0.86), 0); }
    100% { transform: translate3d(0, 0, 0); }
  }
  /* ==========================================================================
     4) SECTIONS DÉTAILLÉES (texte + visuels)
     ========================================================================== */
  
  .stancreation-competences-section{
    position: relative;
    z-index: 2;
    padding: 7% 13%;
  }
  
  .stancreation-competences-section-contenu{
    max-width: var(--container);
    margin: 0 auto;
  
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 3rem);
    align-items: center;
  }
  
  .stancreation-competences-section-texte{
    text-align: left;
    max-width: 85%;
  }
  
  .stancreation-competences-section-titre{
    margin: 0 0 1rem 0;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    letter-spacing: 0;
    text-decoration-line: underline;
    text-decoration-thickness: .25rem;
    text-underline-offset: .5rem;
    text-decoration-color: currentColor;
  }
  
  .stancreation-competences-section-intro{
    margin: 5% 0 5% 0;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 100;
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    letter-spacing: 0;
    text-align: justify;
    text-justify: inter-word;
  }
  
  /* Tags */
  .stancreation-competences-tags{
    margin: 0 0 1.8rem 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
  }
  
  .stancreation-competences-tag{
    display: inline-flex;
    align-items: center;
    padding: .35rem .65rem;
    border: 1px solid #000;
    border-radius: 999px;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: .85rem;
    font-weight: 500;
  }
  
  

  .stancreation-competences-bouton {
    display: inline-block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid #000;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  
  .stancreation-competences-bouton:hover {
    background: black;
    color: white;
    border: 1px solid #000;
  }
  

/* ✅ Décalage gauche uniquement du TEXTE – section Site internet */
#competences-siteinternet .stancreation-competences-section-texte{
  margin-left: clamp(1.5rem, 4vw, 4rem);
}
  
  /* ==========================================================================
     4.1) VISUELS — MOSAIQUE
     ========================================================================== */
  
  .stancreation-competences-section-visuels{
    width: 100%;
  }
  
  .stancreation-competences-mosaique{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.6rem, 3vw, 2.6rem);
    height: var(--stancreation-image-bandeau-height);
  }
  
  .stancreation-competences-mosaique-item-1{
    margin-top: 30%;
    overflow: hidden;
    height: 100%;
    animation: scMosaicFloat 9s ease-in-out infinite;
    will-change: transform;
  }
  
  .stancreation-competences-mosaique-item-2{
    margin: 0;
    overflow: hidden;
    height: 100%;
    animation: scMosaicFloat 11s ease-in-out infinite;
    animation-delay: -4.5s;
    will-change: transform;
  }
  
  .stancreation-competences-mosaique-item-1 img,
  .stancreation-competences-mosaique-item-2 img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter .3s ease;
  }
  
  .stancreation-competences-mosaique-item-1:hover img,
  .stancreation-competences-mosaique-item-2:hover img{
    filter: grayscale(0%);
  }
  
  /* ==========================================================================
     5) ANIMS — FLOAT
     ========================================================================== */
  
  @keyframes scMosaicFloat{
    0%{ transform: translateY(0); }
    50%{ transform: translateY(-1.2rem); }
    100%{ transform: translateY(0); }
  }
  
  @keyframes scFloatXY{
    0%{ transform: translate3d(0, 0, 0); }
    25%{ transform: translate3d(calc(var(--sc-float-x, 18px) * 1), calc(var(--sc-float-y, 22px) * -1), 0); }
    50%{ transform: translate3d(calc(var(--sc-float-x, 18px) * -1), calc(var(--sc-float-y, 22px) * 0.6), 0); }
    75%{ transform: translate3d(calc(var(--sc-float-x, 18px) * 0.6), calc(var(--sc-float-y, 22px) * -0.4), 0); }
    100%{ transform: translate3d(0, 0, 0); }
  }
  
  @keyframes scSvgFloat{
    0%{ transform: translate3d(0, 0, 0); }
    25%{ transform: translate3d(var(--sc-svg-float-x), calc(var(--sc-svg-float-y) * -0.6), 0); }
    50%{ transform: translate3d(calc(var(--sc-svg-float-x) * -0.7), var(--sc-svg-float-y), 0); }
    75%{ transform: translate3d(calc(var(--sc-svg-float-x) * 0.6), calc(var(--sc-svg-float-y) * 0.4), 0); }
    100%{ transform: translate3d(0, 0, 0); }
  }
  
  @keyframes scFloatGlobal{
    0%{ transform: translate3d(0, 0, 0); }
    25%{ transform: translate3d(18px, -14px, 0); }
    50%{ transform: translate3d(-16px, 18px, 0); }
    75%{ transform: translate3d(14px, -10px, 0); }
    100%{ transform: translate3d(0, 0, 0); }
  }
  
  /* ==========================================================================
     6) COUCHE JS (repel) — offsets via CSS vars (desktop)
     NOTE : ta config actuelle met transform sur la carte.
     En mobile, on neutralise juste le repel (vars à 0) + on remet transform compatible.
     ========================================================================== */
  
  .stancreation-competences-expertises-svg,
  .stancreation-competences-expertises-cartes{
    will-change: transform;
    transform: translate3d(var(--sc-rx, 0px), var(--sc-ry, 0px), 0);
    transition: transform .18s cubic-bezier(.22, .61, .36, 1);
  }
  
  /* ==========================================================================
     7) RESPONSIVE — COMPÉTENCES (<= 900px)
     ========================================================================== */
  
  @media (max-width: 900px){
  
    /* =========================
       HERO
       ========================= */
    .stancreation-competences-hero{
      padding: 20% 8% 0 8%;
    }
  
  
    /* on passe en colonne (y compris le bloc --inverse) */
    .stancreation-competences-section-contenu,
    .stancreation-competences-section-contenu--inverse{
      display: flex;
      flex-direction: column;
    }
  
    /* texte puis visuels */
    .stancreation-competences-section-texte{ order: 1; max-width: 100%; }
    .stancreation-competences-section-visuels{ order: 2; }
  
    /* visuels plus hauts en mobile */
    .stancreation-competences-mosaique{
      height: clamp(26rem, 55vh, 38rem);
    }
  
    .stancreation-competences-mosaique-item-1,
    .stancreation-competences-mosaique-item-2{
      height: 100%;
    }
  
    .stancreation-competences-mosaique-item-1 img,
    .stancreation-competences-mosaique-item-2 img{
      height: 100%;
      object-fit: cover;
    }
  
    /* =========================
       EXPERTISES — LAYOUT MOBILE
       ========================= */
  
    .stancreation-competences-expertises{
      padding: 10% 13% 12% 13%;
    }
  
    .stancreation-competences-expertises-conteneur{
      flex-direction: column;
      align-items: stretch;
      gap: clamp(1.2rem, 4vw, 2rem);
      height: 70rem;
      animation: none;
      transform: none;
    }
  
    /* SVG supprimé */
    .stancreation-competences-expertises-svg{
      display: none;
    }

      /* Texte intro */
  .stancreation-competences-texte{
    margin: 0 0 5% 0;
  }
  
    .stancreation-competences-expertises-cartes{
      min-height: 0;
      transform: none;
    }
  
    /* cartes : on garde l'esprit flottant, mais lisible */
    .stancreation-competences-carte{
      position: relative;
      inset: auto;
      top: 2rem;
      right: auto;
      bottom: auto;
      left: auto;
      max-width: min(70vw, 34rem);
      margin: 0 auto clamp(.9rem, 2.4vw, 1.2rem) auto;
      box-sizing: border-box;
      --sc-rx: 0px;
      --sc-ry: 0px;
      transform: translate3d(0,0,0);
    }
  
    /* offsets visuels (sans absolute) */
    .stancreation-competences-carte--graphisme{
      margin-left: 0;   /* base auto via margin */
      transform: translate3d(-6vw, 0, 0);
    }
  
    .stancreation-competences-carte--siteinternet{
      right: -10%;
    }
  
    .stancreation-competences-carte--marketingdigital{
      transform: translate3d(0, 0, 0);
      top: 2rem;
    }

    /* ✅ Décalage gauche uniquement du TEXTE – section Site internet */
#competences-siteinternet .stancreation-competences-section-texte{
  margin-left: 0;
}

.stancreation-competences-section {
  padding: 8% 8%;
}
  }