/* ----- RESET & BASE ----- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

#projets,
#contact,
#accueil {
  scroll-margin-top: 100px;
}

body {
  font-family: "Inter", sans-serif;
  background-color: #ffffff;
  color: #003ecb;
  cursor:
    url("images/cursor-default.png") 0 0,
    auto;
}

body.no-scroll {
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}


html, body {
  overflow-x: hidden;
  max-width: 100%;
}

@media (max-width: 768px){
  #site-content{
    transform: translateX(-10px); /* ajuste -6px à -14px */
  }
}




/* Curseur spécifique quand on survole un lien */
a:hover,
button:hover,
[role="button"]:hover {
  cursor:
    url("images/cursor-hover.png") 0 0,
    pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

h1 {
  font-size: 3rem;
}

h1 span {
 display : flex;
  justify-content : left;
}

h2.section-title {
  display: inline-block;
  background: #ffcdff;
  color: #003ecb;
  font-family: "Work Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.6rem);

  padding: 1rem 2rem;
  border-radius: 20px;
  border: 4px solid #003ecb;
  box-shadow: 6px 6px  #003ecb;
  transform: rotate(-2deg);
  margin-left: 5%;
  margin-bottom: 40px;
  margin-top: 40px;
  text-align: left;
}



@media (max-width: 1024px) {
  h1 {
    font-size: 2.4rem;
  }

  h2.section-title {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2.section-title {
    font-size: 3rem;
  }
}

/* ----- NAVIGATION FIXE ----- */
.nav-fixed {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
  z-index: 9999;
  border-bottom: 4px solid #ddd;
  
}

.logo img {
  max-width: 160px;
  height: auto;
}

.menu {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  gap: 0;
}
.menu li a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 24px;
  min-width: 130px;
  font-weight: 600;
  background-color: white;
  color: #003ecb;
  border: 1px solid #003ecb;
  border-left: none;
  border-top: none;
  height: 100%;
  text-align: center;
  font-size: 1rem;
  text-decoration: none;
}

.menu li:first-child a {
  border-left: 1px solid #003ecb;
}

.menu li:last-child a {
  border-right: none;
}

.menu li a.active {
  background-color: #fceffc;
}
.menu li a.etsy {
  background-color: white;
  color: #003ecb;
}

/* ----- BURGER MENU (mobile) ----- */
.burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #003ecb;
}

/* ----- RESPONSIVE NAV ----- */
@media (max-width: 768px) {
  .menu {
    position: absolute;
    top: 60px;
    right: 0;
    background-color: white;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    display: none;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  }
  .menu.active {
    display: flex;
  }
  .burger {
    display: flex;
  }
  .menu li {
    width: 100%;
  }
  .menu li a {
    width: 100%;
  }
}

#accueil {
  background: #ffcdff;
  position: relative;
  
}



/* HEADER VISUEL UNIQUEMENT */
/* Zone VISUELLE uniquement (ta div .header) */
.header{
  position: relative;
  background: #f7c9ff;
  overflow: visible;

  /* garantit assez de rose même sur écrans géants */
  min-height: clamp(640px, 88vh, 980px);

  display: flex;
  flex-direction: column;
  align-items: center;

  /* on laisse le nuage en bas, le titre au centre */
}

/* Conteneur du titre : centre vertical + horizontal */
.header-bg{
  flex: 1; /* prend toute la hauteur dispo au-dessus du nuage */
  width: 100%;

  
  align-items: center;     /* ✅ centrage vertical */
  justify-content: center; /* ✅ centrage horizontal */
  transform: translateY(3rem);

  /* un peu d’air pour éviter que le titre colle la nav sur petit écran */
  padding: clamp(2.5rem, 6vw, 6rem) 1rem;
  box-sizing: border-box;

  /* neutralise d’éventuels “cadres” hérités */
  background: transparent;
  box-shadow: none;
  filter: none;
}

.header-bg{
  position: relative;           /* ancre pour l'absolu */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  overflow: visible;
}

/* titre au-dessus */
.header-title{
  position: relative;
  z-index: 2;
}

/* grille derrière */
.header-grid{
  position: absolute;
  left: 50%;
  top: 55%;                     /* ajuste: 50% / 55% / 60% selon ton visuel */
  transform: translate(-50%, -50%);
  width: min(92vw, 1100px);
  height: auto;
  z-index: 1;                   /* derrière le titre */
  pointer-events: none;
  opacity: 0.35;                /* optionnel, pour la rendre subtile */
}

  
  
.header-title{
  position: relative;
  display: inline-block;
  margin: 0;
  text-align: center;

  font-family: "Momo Trust Display", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  text-transform: lowercase;
  line-height: 1.1;
  letter-spacing: 0.04em;
}







/* texte blanc au-dessus */
.header-title > span{
  position: relative;
  z-index: 2;
  color: #fff;
}

/* contour rose (au milieu, derrière le texte mais pas derrière le parent) */
.header-title::before{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;

  transform: translateX(-6px); /* décalé vers la gauche */
  pointer-events: none;

  color: transparent;
  -webkit-text-stroke: 1px #ff4df5;
}







/* PNG nuage au bas du header */
.nuage{
  width: 100vw;
  max-width: none;
  display: block;

  /* collé en bas */
  margin-top: auto;

  /* parallax : remonte au scroll (valeur négative gérée en JS) */
  transform: translateY(var(--nuage-shift, ));

  z-index: 3;
  pointer-events: none;
  will-change: transform;
}


/* ===== MOBILE : header plus court, contenu remonté ===== */
@media (max-width: 768px){

  .header{
    /* réduit l’espace global rose */
    min-height: 0;
    height: 55vh;          /* ajuste : 65–80vh selon ton feeling */
  }

  .header-bg{
    /* remonte le texte dans la zone rose */
    padding: 1.2rem 1rem;
    transform: translateY(-1.2rem); /* remonte un peu le titre */
  }

  .header-title::before{
    -webkit-text-stroke: 1px #ff4df5; /* moitié moins */
    transform: translateX(-4px);     /* décalage cohérent */
  }

  .nuage{
    /* remonte le bloc nuage dans le header (sans toucher à la jonction blanc) */
    margin-top: 0;
    transform: translateY(-15px); /* remonte visuellement l’ensemble nuage */
  }
}
@media (max-width: 768px){



  /* le plus important : annuler les transforms sur mobile */
  .header-bg{
    transform: none !important;
    padding-top: calc(70px + env(safe-area-inset-top)); /* espace sous la nav */
    padding-bottom: 1.2rem;
  }

  /* si ton header est trop court / crop */
  .header{
    height: auto;
    min-height: 72vh; /* ajuste 65–85vh selon ton visuel */
  }

  /* descendre légèrement le titre */
  .header-title{
    margin-top: 10px;
  }
}




/*animation nuage*/



.nuage{
  width: 100vw;
  max-width: none;
  display: block;

  /* POSITION DE BASE (desktop) */
  transform: translateY(0);

  /* animation active partout */
  animation: cloudFloatDown 6s ease-in-out infinite;

  pointer-events: none;
  will-change: transform;
}

/* Animation : flottement UNIQUEMENT vers le bas
   (0 → +6px → 0) */
@keyframes cloudFloatDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(25px);
  }
}


@media (max-width: 768px){
  .nuage{
    /* ta position validée sur mobile */
    transform: translateY(-15px);
  }

  @keyframes cloudFloatDown {
    0%, 100% {
      transform: translateY(-16px);
    }
    50% {
      transform: translateY(-1px); /* -15 + 6px */
    }
  }
}



/* ===== A PROPOS ===== */
















.a-propos-section {
  padding: 80px 5%;
  background: #ffffff;
  position: relative;
  z-index: 2;          /* au-dessus du header rose */
  margin-top: -1rem;   /* chevauche le header : à ajuster selon ton rendu */
  padding-top: 0;
}

.a-propos-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
}

.a-propos-card {
  background: #ffcdff;
  border: 4px solid #003ecb;
  box-shadow: 8px 8px 0 #003ecb;
  padding: 24px;
  border-radius: 20px;
  max-width: 320px;
  text-align: center;
  font-family: 'Work Sans', sans-serif;
}

.a-propos-img {
  width: 110px;
  height: 110px;
  background-image: url('images/portrait-aurelia-picq-graphiste-illustratrice.jpg');
  background-size: cover;
  background-position: center;
  border: 3px solid #003ecb;
  box-shadow: 4px 4px 0 #003ecb;
  border-radius: 16px;
  margin: 0 auto 12px;
}

.a-propos-name {
  font-weight: 700;
  font-size: 26px;
  margin: 10px 0 4px;
  color: #003ecb;
}

.a-propos-title {
  font-size: 16px;
  margin-bottom: 20px;
}

.a-propos-desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.a-propos-tag {
  background: white;
  padding: 10px;
  font-size: 14px;
  border-radius: 30px;
  border: 2px solid #003ecb;
  box-shadow: 3px 3px 0 #003ecb;
  font-weight: bold;
}

.a-propos-chat {
  margin-top : 5%;
  flex: 1;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-bubble {
  padding: 15px 20px;
  border-radius: 20px;
  font-size: 1rem;
  line-height: 1.5;
  position: relative;
  max-width: 90%;
  width: fit-content;
}

.chat-bubble.left {
  background: #003ecb;
  color: white;
  align-self: flex-start;
  border-top-left-radius: 1px;
}

.chat-bubble.right {
  background: white;
  color: #ff74ff;
  align-self: flex-end;
  border: 1px solid #ffcdff;
  border-top-right-radius: 1px;
}

@media screen and (max-width: 768px) {
  .a-propos-wrapper {
    flex-direction: column;
    align-items: center;
  }
}




.section-title {
  font-family: 'Work Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.6rem);
  background: #ffcdff;
  color: #003ecb;
  padding: 1rem 2rem;
  border-radius: 20px;
  border: 4px solid #003ecb;
  box-shadow: 6px 6px  #003ecb;
  transform: rotate(-2deg);
  margin: 0 auto 40px 5%;
  display: inline-block;
}

.a-propos-competences {
  margin-top: 30px;
  text-align: left;
}

.competences-title {
  font-size: 1.4rem;
  color: #003ecb;
  font-weight: 700;
  margin-bottom: 10px;
}

.competences-list {
  list-style: none;
  padding: 0;
}

.competence-item {
  background: #e3dff2;
  font-family: monospace;
  border: 3px solid #003ecb;
  border-radius: 12px;
  padding: 10px 18px;
  margin-bottom: 12px;
  display: inline-block;
}



/* ----- Rebond au hover ----- */
.a-propos-tag,
.competence-item {
  display: inline-block;          /* permet le transform sans casser la ligne */
  transform: translateZ(0);       /* anti-flou, GPU hint */
  transform-origin: center bottom;
  will-change: transform;
}

/* Lance l’anim au survol et au focus clavier */
.a-propos-tag:hover,
.competence-item:hover,
.a-propos-tag:focus-visible,
.competence-item:focus-visible {
  animation: bounce-appear 600ms ease-out both;
}

/* Keyframes du rebond (léger, élégant) */
@keyframes bounce-appear {
  0%   { transform: translateY(0) scale(1); }
  20%  { transform: translateY(-6px) scale(1.04); }
  40%  { transform: translateY(0) scale(0.98); }
  55%  { transform: translateY(-3px) scale(1.02); }
  70%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}




/* ----- AVIS CLIENTS / COLLEGUES  ----- */


.mots-clients-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom : 20%;
margin-top: 20%;
}

#motsClientsBtn {
  padding: 12px 20px;
  background-color: #5ac9f4;
  color: #000;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  position: relative;
  z-index: 2;
}

.image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.image {
  width: 100px;
  height: 100px;
  background-color: hotpink;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  border-radius: 8px;
  font-weight: bold;
}

/* Position des 8 blocs */
.img1 { transform: translate(-150px, -120px); }
.img2 { transform: translate(0, -150px); }
.img3 { transform: translate(150px, -120px); }
.img4 { transform: translate(-160px, 0); }
.img5 { transform: translate(160px, 0); }
.img6 { transform: translate(-120px, 120px); }
.img7 { transform: translate(0, 150px); }
.img8 { transform: translate(120px, 120px); }

.mots-clients-wrapper.active .image {
  opacity: 1;
  pointer-events: auto;
}









/* ----- FIN A PROPOS  ----- */








/* ----- CAROUSEL ----- */

.figurines-carousel {
  margin-top: -130px; /* chevauche davantage */
  position: relative;
  z-index: 5;
  padding: 80px 0;
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: scrollCarousel 20s linear infinite;
  gap: 40px;
}

.carousel-track img {
  height: 420px;
  flex-shrink: 0;
  object-fit: contain;
}

@keyframes scrollCarousel {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .carousel-track img {
    height: 400px;
  }
  .figurines-carousel {
    margin-top: -100px;
    padding: 60px 0;
  }
}

/* ----- PROJETS SECTION ----- */
.projets-section {
  background: #ffffff;
  padding: 8px 5%;
 
}

.projets-grid {
 text-align: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 40px;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 8%;
  position: relative;
}

.projet-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #ddd;
  transition: transform 0.3s ease;
  position: relative;
  top: 0;
}


.projet-card:nth-child(3n + 2) {
  top: 40px;
}
.projet-card:nth-child(3n + 3) {
  top: 80px;
}

.projet-card:hover {
  transform: translateY(-6px);
}

.projet-card .img-container {
  background: url("images/grille.png");
  background-size: cover;
  background-position: center;
  padding: 20px;
}

.projet-card img {
  width: 100%;
  border-radius: 8px;
}

.projet-card .content {
  background: white;
  padding: 20px;
}

.projet-card h3 {
  margin: 10px 0 5px;
  font-size: 1.1rem;
}

.projet-card p {
  font-size: 0.95rem;
  color: #003ecb;
}

.voir-plus {
  margin-top: 15px;
  padding: 10px 20px;
  background: #003ecb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    background 0.3s;
}

.voir-plus:hover {
  background: #001b85;
  transform: scale(1.05);
}

@media (max-width: 600px) {
  .projet-card {
    top: 0 !important;
  }
}

.projets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.projet-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #ddd;
  padding-bottom: 20px;
  transition: transform 0.3s ease;
}

.projet-card img {
  width: 100%;
  border-radius: 8px 8px 0 0;
}

.projet-card .content {
  padding: 20px;
  text-align: center;
}

.voir-plus {
  margin-top: 10px;
  padding: 10px 20px;
  background: #003ecb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

@media (max-width: 1024px) {
  .projets-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-detail {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .projets-grid {
    grid-template-columns: 1fr;
  }

  .project-detail {
    grid-column: span 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----POP UP -------*/

.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}

.popup-overlay.visible {
  display: flex;
}

.popup-container {
  background: white;
  border: 4px solid #ff9ff3;
  box-shadow:
    0 0 0 8px #ffcdff,
    0 10px 30px rgba(0, 0, 0, 0.3);
  width: 95%;
  max-width: 1400px;
  height: 70vh;
  display: flex;
  flex-direction: column;
  font-family: monospace;
  overflow: hidden;
}

.popup-header {
  background: #ff9ff3;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #003ecb;
}

/* ==== H3 dans les popups qui imitent le style du H1 ==== */
.popup-title-h1 {
  font-size: 3.2rem;
  font-weight: bold;
  text-shadow: 2px 2px 0 #ffcdff;
  color: #003ecb;
  margin-bottom: 20px;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .popup-title-h1 {
    font-size: 2.4rem;
  }
}

.popup-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.2s ease;
}

/* Zoom au survol */
.popup-close:hover {
  transform: scale(1.8);
}

/* Petit rebond au clic */
.popup-close:active {
  transform: scale(0.9);
}

.popup-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.popup-block p {
  margin-bottom: 1em;
  line-height: 1.5;
  font-size: 1rem;
  color: #003ecb;
}

.popup-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 20px;
}

.popup-images img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.popup-images video {
  width: 60%;
  height: auto;
  object-fit: contain;
}



.popup-images .full-width-img {
  grid-column: 1 / -1; /* occupe toute la ligne */
  width: 100%; /* prend toute la largeur dispo */
  height: auto; /* garde ses proportions */
}


/* Images horizontales = prennent 2 colonnes */
.popup-images img.wide {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .popup-images {
    grid-template-columns: 1fr;
  }

  .popup-images img.wide {
    grid-column: span 1;
  }
}



@media (max-width: 768px) {
  .popup-overlay {
    align-items: flex-start;
  }

  .popup-container {
    /* 👇 hauteur réelle de l’écran mobile */
    height: 100dvh;
    max-height: 100dvh;

    /* 👇 marge de sécurité pour barres navigateur */
    padding-top: env(safe-area-inset-top);
    margin-top: 12px;

    border-radius: 0;
  }
}

.popup-overlay {
  overscroll-behavior: contain;
}

@keyframes closePulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.35);
  }
  60% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}
.popup-close {
  animation: closePulse 1.8s ease-in-out infinite;
}
@media (max-width: 768px) {
  .popup-close {
    animation: closePulse 1.8s ease-in-out infinite;
  }
}

@media (max-width: 768px) {
  .popup-header {
    padding-top: calc(10px + env(safe-area-inset-top));
  }
}



/* -----PROJETS */

.video-projet {
  border: 2px solid #003ecb;
  border-radius: 12px;
  box-shadow: 4px 4px 0 #ffcdff;
}


/* Conteneur de la vidéo dans la pop-up */
.popup-video {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Occuper toute la rangée si tu l’insères dans ta grille .popup-images en 2 colonnes */
.popup-video.full-width {
  grid-column: 1 / -1; /* optionnel si utilisé dans .popup-images */
}

/* La vidéo elle-même : 80% du conteneur, centrée */
.popup-video video {
  width: 30%;
  max-width: 30%;
  height: auto;
  display: block;
  object-fit: contain;  /* garde les proportions sans rogner */
  /* optionnel : */
  border-radius: 12px;
}

/* (Option) forcer un ratio si tu veux éviter les sauts de layout
.popup-video video { aspect-ratio: 16 / 9; }
*/








#popup-you img {
  max-width: 500px;
  width: 100%;
  height: auto;
}

/* -----projet illustration bouton */
.btn-instagram {
  display: inline-block;
  padding: 14px 28px;
  background-color: #ff4aff;
  color: white;
  font-weight: bold;
  font-size: 1rem;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-instagram:hover {
  background-color: #e03ae0;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}





/* -----FIN PROJETS SECTION */






/* -----CONTACT SECTION */

.contact-section {
  background: #003ecb;
  color: white;
  padding: 100px 30px;
}

.footer-wrapper {
  max-width: 1100px;
  margin: auto;
}

.footer-top {
  display: flex;
  gap: 40px;
  margin-bottom: 60px;
  align-items: center;
}

.footer-box {
  background: white;
  border-radius: 24px;
  padding: 30px;
  color: #003ecb;
  flex: 1;
}

.footer-box img {
  width: 100%;
  border-radius: 16px;
  justify-content: center;
  object-fit: cover;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.footer-bottom p {
  color: #003ecb;
  font-size: 0.7rem;
  margin-top: 10px;
}
.footer-square {
  background: white;
  border-radius: 24px;
  flex: 1;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-square.social img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  margin: auto;
  transition: transform 0.3s ease;
}

.footer-square.social a:hover img {
  transform: scale(1.2);
}

.footer-box.image-box {
  background-color: #ffcdff;
}

/* Centrage de l'image dans la box */
.footer-box.image-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffa0ff;
  overflow: hidden; /* Pour éviter que le zoom déborde */
}



@media (max-width: 768px){

  .contact-section{
    padding: 70px 18px; /* un peu moins large sur mobile */
  }

  /* TOP: image + texte en colonne */
  .footer-top{
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
  }

  .footer-box{
    width: 100%;
    padding: 22px;
  }

  /* ✅ L'image ne disparait plus + garde un ratio */
  .footer-box.image-box{
    padding: 0;                 /* enlève le padding qui "mange" l'image */
    min-height: 240px;          /* assure une hauteur visible */
    overflow: hidden;
  }

  .footer-box.image-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;          /* remplit sans déformer */
    border-radius: 24px;        /* match la box */
    display: block;
  }

  /* TITRES / TEXTE */
  .footer-box.text-box .section-title{
    font-size: 2rem;
    line-height: 1.05;
    margin-bottom: 10px;
  }

  .footer-box.text-box h3{
    font-size: 1.2rem;
    margin: 0 0 8px 0;
  }

  .footer-box.text-box p{
    font-size: 1rem;
    line-height: 1.35;
    margin: 0;
  }

  /* BOTTOM: les 5 liens en grille, plus lisible */
  .footer-bottom{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* Le dernier bloc (email) prend toute la largeur */
  .footer-bottom .footer-square:last-child{
    grid-column: 1 / -1;
  }

  .footer-square{
    height: 110px;
    border-radius: 22px;
    padding: 10px;
  }

  /* IMPORTANT: centre correctement l'ancre et évite le texte étriqué */
  .footer-square.social a{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }

  .footer-square.social img{
    width: 44px;
    height: 44px;
  }

  .footer-bottom p{
    font-size: 0.95rem;   /* beaucoup plus lisible */
    margin: 0;
    line-height: 1.1;
  }
}

















/* Bas de page  */

.not-wordpress {
  text-align: center;
  font-size: 0.9rem;

  background: #fceaff;
  color: #003ecb;
  font-family: monospace;
  border-top: 2px solid #ff9ff3;
}

/* ----------- PACMAN SCROLL ----------- */



.scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 20px;
  height: 100vh;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  background-color: #ff72ff;
}

/* Dots track */
.dots-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  margin-top: 10px;
}


/* Dots */
.dot {
  width: 6px;
  height: auto;
  aspect-ratio: 1 / 1;     /* 🔥 empêche l’écrasement */
  border-radius: 50%;
  flex: 0 0 auto;
  background-color: rgba(255, 199, 0, 1);
  transition: background-color 0.3s ease;
}

/* Pastille mangée */
.dot.eaten {
  background-color: #ff72ff;
}

/* Pac-Man */
.pacman {
  width: 16px;
  height: 16px;
  background: url("data:image/png;base64,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");
  background-size: 300% 100%;
  transform: rotate(90deg);
  animation: pac 0.5s steps(3, end) infinite;
  position: absolute;
  left: 2px;
  top: 0;
  z-index: 10;
}

@keyframes pac {
  from {
    background-position-x: 0%;
  }
  to {
    background-position-x: -48px;
  }
}