* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #cb6de5;
  color: white;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.6;
  z-index: 1;
  font-family: "Fredoka One", sans-serif;
}

/* =========================
   TOP HEADER
========================= */
.top-header {
  background-color: #9400d9;
  color: white;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* gauche / centre / droite */
  align-items: center;
  padding: 8px 40px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  gap: 12px;
}

/* Colonnes */
.top-header .left,
.top-header .center,
.top-header .right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.top-header .center { justify-content: center; }
.top-header .right  { justify-content: flex-end; }

.separator {
  color: #D9D9D9;
  font-weight: bold;
}

/* Liens base */
.top-header a { color: white; text-decoration: none; }

/* Téléphone / mail */
.top-link {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.top-link i {
  color: #f5bd4f;
  transition: transform 0.2s ease, color 0.2s ease;
}

.top-link:hover { color: #f0b134; }
.top-link:hover i { transform: scale(1.2); color: #fc952e; }

/* Bouton menu (au centre) */
.dropbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;

  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: white;
  white-space: nowrap;
}

.dropbtn i {
  color: #ff3c3c;
  transition: transform 0.2s ease, color 0.2s ease;
}

.dropbtn:hover { background: rgba(255,255,255,0.15); }
.dropbtn:hover i { transform: scale(1.15); color: #ebe7dd; }

/* Bouton devis (sans icône) */
.devis-btn {
  background: white;
  color: #D9006E !important;
  font-weight: bold;
  padding: 5px 14px;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.devis-btn:hover {
  background: #D9006E;
  color: white !important;
}

/* Important : par défaut on affiche le texte complet */
.devis-short { display: none; }

/* Réseaux */
.social-link {
  color: white;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.social-link:hover { color: #F4C542; }

.social-link i {
  color: #ff3c3c;
  transition: transform 0.2s ease, color 0.2s ease;
}

.social-link:hover i {
  transform: scale(1.2);
  color: #ebe7dd;
}

/* =========================
   RESPONSIVE (dès 940px)
========================= */
@media (max-width: 940px) {
  /* On évite les comportements "1fr" qui peuvent forcer des retours */
  .top-header {
    grid-template-columns: auto auto auto;
    padding: 8px 16px;
  }

  .separator { display: none; }

  /* Tout sur une ligne */
  .top-header .left,
  .top-header .center,
  .top-header .right {
    flex-wrap: nowrap;
  }

  /* On cache les textes (icônes seules), SAUF le devis */
  .top-header .text,
  .top-header .label {
    display: none;
  }

  /* Le bouton devis reste en texte */
  .devis-btn { padding: 6px 14px; }
}

/* =========================
   TRÈS PETIT ÉCRAN
   Empêche "Devis" de passer au-dessus du menu
========================= */
@media (max-width: 370px) {
  /* On remplace le texte long par "Devis" */
  .devis-full { display: none; }
  .devis-short { display: inline; }

  /* Compacte légèrement pour rester sur une ligne */
  .devis-btn {
    padding: 6px 10px;
    font-size: 10px;
  }
}

/* =========================
   MENU OVERLAY
========================= */
.menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 9999;
}

.menu-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   PANEL
========================= */
.menu-panel{
  width: min(520px, 92vw);
  background: #fff;
  border-radius: 18px;
  padding: 18px 18px 22px;
  position: relative;
  transform: translateY(8px);
  transition: transform .25s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden; /* évite les dépassements */
}

.menu-overlay.is-open .menu-panel{
  transform: translateY(0);
}

/* =========================
   BOUTON FERMER
========================= */
.menu-close{
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: #f3f3f3;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.menu-close i{
  color: #9400d9;
  font-size: 18px;
}

.menu-close:hover{
  transform: scale(1.05);
  background: #eaeaea;
}

/* =========================
   LOGO
========================= */
.menu-logo{
  display: flex;
  justify-content: center;
  margin-top: 12px;
  margin-bottom: 20px;
}

.menu-logo img{
  width: 220px;
  max-width: 65%;
  height: auto;
  transition: transform .25s ease;
}

.menu-overlay.is-open .menu-logo img{
  transform: scale(1.08);
}

/* =========================
   LISTE DES BOUTONS
========================= */
.menu-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;   /* mobile first */
  gap: 14px;
  align-items: center;
}

.menu-list li{
  width: 100%;
  display: flex;
  justify-content: center;
}

/* boutons */
.menu-list a.element{
  display: inline-flex;
  justify-content: center;
  align-items: center;

  /* ✅ moins large sur mobile (<900) */
  width: min(360px, 78vw);

  padding: 14px 18px;
  font-size: 1.05em;
  color: rgb(19,17,17);
  text-decoration: underline;              /* ✅ souligné */
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;

  text-align: center;
  border-radius: 30px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  box-sizing: border-box;
  transform-origin: center;
}

/* couleurs */
.menu-list .bouton1{ background: #ff4d4d; }
.menu-list .bouton2{ background: #ffcc00; }
.menu-list .bouton3{ background: #6a0dad; color: #fff; }

/* rotation alternée */
.menu-list li:nth-child(odd)  a.element{ transform: rotate(-5deg); }
.menu-list li:nth-child(even) a.element{ transform: rotate( 5deg); }

/* hover */
.menu-list a.element:hover{
  background: #f4f4f4;
  color: #000 !important;
  transform: scale(1.06) rotate(0deg);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

/* =========================
   DESKTOP / LARGE (>= 900px)
   ✅ 2 boutons en haut + 3e centré dessous
========================= */
@media (min-width: 900px){
  .menu-list{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px 18px;
  }

  /* 2 premiers = 2 colonnes */
  .menu-list li{
    width: auto;
    flex: 0 0 calc(50% - 18px);
    justify-content: center;
  }

  .menu-list a.element{
    width: 100%;
    max-width: 420px;
  }

  /* ✅ 3e bouton = ligne entière, centré */
  .menu-list li:nth-child(3){
    flex: 0 0 100%;
    justify-content: center;
  }
  .menu-list li:nth-child(3) a.element{
    width: min(420px, 50%);
  }
}

/* =========================
   TABLET / SMALL (< 900px)
   ✅ boutons plus fins
========================= */
@media (max-width: 899px){
  .menu-panel{ width: min(480px, 92vw); }

  .menu-list a.element{
    width: min(250px, 74vw);   /* ✅ réduit */
    padding: 13px 16px;
  }

   .menu-list a.element{
    font-size: 1.02em;
   }
}

/* =========================
   SMALL (<= 500px)
========================= */
@media (max-width: 500px){
  .menu-panel{ padding: 16px 16px 20px; }

  .menu-list a.element{
    width: min(220px, 72vw);   /* ✅ encore moins large */
    padding: 12px 14px;
    border-radius: 24px;
  }

  .menu-list a.element{
    font-size: 1em;
  }

  .menu-list li:nth-child(odd)  a.element{ transform: rotate(-4deg); }
  .menu-list li:nth-child(even) a.element{ transform: rotate( 4deg); }
}

/* =========================
   ULTRA SMALL (<= 350px)
   ✅ éviter tout dépassement avec l'oblique
========================= */
@media (max-width: 350px){
  .menu-panel{ padding: 14px 14px 18px; }

  .menu-list li{
    padding: 0 16px;           /* zone tampon pour la rotation */
    box-sizing: border-box;
  }

  .menu-list a.element{
    width: 100%;
    max-width: 100%;
    padding: 11px 12px;
    border-radius: 22px;
  }

  .menu-list a.element{
    font-size: 0.95em;
  }

  .menu-list li:nth-child(odd)  a.element{ transform: rotate(-3deg); }
  .menu-list li:nth-child(even) a.element{ transform: rotate( 3deg); }

  .menu-list a.element{
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
  }
}



.banniere {
  position: relative;
  width: 100%;
  min-height: 45vh;                 /* hauteur adaptable */
  background-image: url("Images/IMG_20250629_093626.jpg"); /* remplace par ta photo */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;              /* centrage vertical */
  justify-content: center;          /* centrage horizontal */

  text-align: center;
  overflow: hidden;
}

/* Overlay pour la lisibilité */
.banniere::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);  /* foncé léger */
  z-index: 1;
}

.banniere h1 {
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: 1px;
  margin: 0;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .banniere {
    min-height: 35vh;
  }
}

@media (max-width: 480px) {
  .banniere {
    min-height: 30vh;
  }

  .banniere h1 {
    font-size: 1.9rem;
  }
}

/* =========================
   CTA BUTTONS (ton HTML)
========================= */

.cta-buttons{
  --gap: 22px;

  display: grid;
  gap: var(--gap);
  justify-content: center;     /* centre le bloc */
  align-items: start;
  margin-top: 50px;

  /* Desktop par défaut : 3 colonnes */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 14px;
}

/* = Boutons (largeur selon texte, mais bornée) = */
.cta-buttons .cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* largeur selon texte */
  width: fit-content;
  max-width: 100%;

  /* bornes */
  min-width: 250px;      /* ✅ largeur mini */
  min-height: 75px;      /* ✅ hauteur mini */

  padding: 14px 22px;
  font-size: 1.2em;
  line-height: 1.15;
  text-align: center;
  white-space: normal;

  color: #000;
  text-decoration: underline;

  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  cursor: pointer;

  /* important pour ne pas “étirer” dans la cellule */
  justify-self: center;

  /* rotation alternée via variable */
  transform: rotate(var(--rot)) translateY(var(--y, 0px));
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  box-sizing: border-box;
}

/* alternance gauche / droite */
.cta-buttons .cta-btn:nth-child(odd){  --rot: -6deg; }
.cta-buttons .cta-btn:nth-child(even){ --rot:  6deg; }

/* petit méli-mélo en hauteur (très léger) */
.cta-buttons .cta-btn:nth-child(1){ --y:  0px; }
.cta-buttons .cta-btn:nth-child(2){ --y:  6px; }
.cta-buttons .cta-btn:nth-child(3){ --y:  0px; }
.cta-buttons .cta-btn:nth-child(4){ --y:  8px; }
.cta-buttons .cta-btn:nth-child(5){ --y:  8px; }
.cta-buttons .cta-btn:nth-child(6){ --y:  0px; }
.cta-buttons .cta-btn:nth-child(7){ --y:  6px; }
.cta-buttons .cta-btn:nth-child(8){ --y:  0px; }

/* Hover : garde une oblique (ne revient pas à 0deg) */
.cta-buttons .cta-btn:hover{
  transform: rotate(calc(var(--rot) * 0.6)) scale(1.05) translateY(var(--y, 0px));
  box-shadow: 0 8px 18px rgba(0,0,0,.26);
  filter: brightness(1.05);
}

/* =========================
   Couleurs (tes classes)
========================= */
.cta--chateaux { background:#ff4d4d; }
.cta--photo    { background:#ffcc00; }
.cta--audio    { background:#6a0dad; color:#fff; }
.cta--deco     { background:#4caf50; }
.cta--horeca   { background:#2196f3; color:#fff; }
.cta--jeux     { background:#ff5722; }
.cta--mascottes{ background:#9c27b0; color:#fff; }
.cta--partners { background:#f3b221; }

/* =========================
   ≥ 700px : 3-2-3 “emboîté”
   (les 2 du milieu se placent
   entre col1/2 et col2/3)
========================= */
@media (min-width: 750px){
  /* On force le placement des 2 boutons du milieu (4 et 5) */
  .cta-buttons .cta-btn:nth-child(4){
    grid-column: 1 / span 2;   /* entre bouton 1 et 2 */
    grid-row: 2;               /* ✅ même ligne */
    justify-self: center;
  }
  .cta-buttons .cta-btn:nth-child(5){
    grid-column: 2 / span 2;   /* entre bouton 2 et 3 */
    grid-row: 2;               /* ✅ même ligne */
    justify-self: center;
  }
  /* Le reste se place naturellement : 1-2-3 puis 6-7-8 */
}

/* =========================
   700px → 500px : 2-1-2-1-2...
========================= */
@media (max-width: 750px) and (min-width: 500px){
  .cta-buttons{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
  }

  /* 2-1-2-1-2… sur 8 boutons :
     ligne1: 1-2
     ligne2: 3 (span 2)
     ligne3: 4-5
     ligne4: 6 (span 2)
     ligne5: 7-8
  */
  .cta-buttons .cta-btn:nth-child(3),
  .cta-buttons .cta-btn:nth-child(6){
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* =========================
   < 500px : 1 bouton par ligne
========================= */
@media (max-width: 499px){
  .cta-buttons{
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .cta-buttons .cta-btn{
    width: fit-content;
    justify-self: center;
    min-width: 240px;     /* tu peux monter à 260/280 si tu veux */
    max-width: 100%;
    font-size: 1.05em;
    padding: 14px 18px;
  }

  /* on annule les spans des règles tablette */
  .cta-buttons .cta-btn:nth-child(3),
  .cta-buttons .cta-btn:nth-child(6){
    grid-column: auto;
  }
}



/* =======================
   FONTS
======================= */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700&family=Inter:wght@400;600;700&display=swap');

/* =======================
   VARIABLES & RESET
======================= */
:root{
  --violet-bg:#C97AE6;
  --violet:#8E3CCB;
  --violet-d:#5F1FA2;
  --lilac:#EED6FA;
  --white:#fff;
  --text:#2c2c2c;

  --shadow:0 14px 36px rgba(0,0,0,.22);
  --shadow-strong:0 34px 80px rgba(0,0,0,.45);

  --r-xl:28px;

  /* Largeur max d'une carte (≈ 3 cartes par ligne) */
  --card-max: 520px;

  /* Largeur max de la grille (3 colonnes) */
  --grid-max: 1240px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img{ display:block; max-width:100%; height:auto; }

/* =======================
   TITRES
   + espace sous le titre
======================= */
h2{
  font-size: clamp(2.5rem, 2.2vw + 1.2rem, 3.2rem);
  text-align:center;
  color:#fff;
  font-family:"Baloo 2", system-ui, sans-serif;
  padding: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}

@media (max-width:1000px){
  h2{
    font-size: clamp(2.2rem, 3vw, 2.8rem);
    padding: 16px;
    margin-top: 26px;
    margin-bottom: 26px;
  }
}

@media (max-width:700px){
  h2{
    font-size: clamp(1.9rem, 4.5vw, 2.4rem);
    padding: 14px 12px;
    margin-top: 22px;
    margin-bottom: 22px;
    line-height: 1.2;
  }
}

@media (max-width:420px){
  h2{
    font-size: 1.75rem;
    padding: 12px 10px;
    margin-top: 18px;
    margin-bottom: 18px;
    line-height: 1.15;
  }
}

h4{
  color:#fff;
  text-align:center;
  margin: 0 0 32px;
  font-family:"Baloo 2", system-ui, sans-serif;
}

/* =======================
   SECTION
======================= */
.section{
  padding:52px 24px 80px;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* =======================
   GRILLE
======================= */
.container,
#chateaux .container,
section.catalog .container{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 72px;
  max-width: var(--grid-max);
  margin: 0 auto 64px;
  align-items:stretch;
  justify-items:center;
}

/* =======================
   CARTE (fermée)
======================= */
.card{
  position:relative;
  width:100%;
  max-width: var(--card-max);
  background:var(--lilac);
  border-radius:var(--r-xl);
  padding:28px;
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow);
  cursor:pointer;
  overflow:visible;
  transition:transform .25s ease, box-shadow .25s ease;
}

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

/* Image fermée */
.card > img{
  width:84%;
  max-height:260px;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));
}

/* Badge (FERMÉ) : + grand */
.card .badge{
  position:absolute;
  top:-36px;
  right:-30px;
  z-index:3;
  padding:18px 38px;
  background:var(--violet);
  color:#fff;
  border-radius:28px;
  font-weight:900;
  letter-spacing:.6px;
  font-size:26px;            /* ✅ + grand */
  transform:rotate(12deg);
  pointer-events:none;
  box-shadow:0 14px 26px rgba(0,0,0,.20);
  text-transform:uppercase;
}

/* Bouton X (fermée : discret) */
.card .close-btn{
  position:absolute;
  top:14px; right:14px;
  width:40px;height:40px;border:0;border-radius:50%;
  background:#fff;color:var(--violet);font-size:18px;
  display:grid;place-items:center;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  opacity:0; transform:scale(.85);
  transition:opacity .2s, transform .2s;
}

.card:hover .close-btn{ opacity:.12; }
.card .close-btn:hover{ opacity:1; transform:scale(1); }

/* Contenu caché quand fermé */
.card .card-content{ display:none; }

/* =======================
   OVERLAY MODAL
======================= */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(20,6,35,.45);
  backdrop-filter:blur(1.5px);
  opacity:0; pointer-events:none;
  transition:opacity .25s;
  z-index:80;
}
.modal-overlay.show{ opacity:1; pointer-events:auto; }

/* =======================
   CARTE OUVERTE (modal)
======================= */
.card.open{
  position:fixed;
  z-index:99;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width: min(640px, calc(100vw - 32px));
  max-width: 640px;

  max-height: calc(100dvh - 24px);
  overflow:hidden;

  border-radius:var(--r-xl);
  box-shadow:var(--shadow-strong);
  padding:22px 22px 26px;

  background:linear-gradient(var(--white) 0 50%, var(--violet) 50% 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Badge (OUVERT) : + grand */
.card.open .badge{
  position:static;
  transform:none;
  background:transparent;
  color:var(--violet-d);
  box-shadow:none;
  text-transform:uppercase;
  font-size:38px;            /* ✅ + grand */
  letter-spacing:.7px;
  margin-top:16px;
  margin-bottom:18px;
  pointer-events:auto;
}

/* Image modal */
.card.open > img{
  width: 320px;
  max-width: 72%;
  flex: 0 0 auto;
  margin: 0 auto 6px;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.25));
}

/* Zone contenu : scroll interne */
.card.open .card-content{
  display:block;
  width:100%;
  margin-top:auto;

  padding:18px 26px 16px;
  color:#fff;

  overflow:auto;
  max-height: calc(100dvh - 24px - 22px - 26px - 120px);
  scrollbar-width: thin;
}

/* Liste : base (desktop) */
.card.open .card-content ul{
  list-style:none;
  padding:0;
  margin:0;
  font-size:19px;            /* base */
  line-height:1.6;
  text-align:left;
}
.card.open .card-content li{ margin:10px 0; }

/* Bouton X visible en modal */
.card.open .close-btn{ opacity:1; transform:none; }

/* =======================
   RESPONSIVE
======================= */
@media (max-width:1000px){
  .container,
  #chateaux .container,
  section.catalog .container{
    gap: 40px;
    max-width: 920px;
    margin: 0 auto 44px;
  }

  .card{
    max-width: 340px;
    min-height: 320px;
    padding: 24px;
  }
  .card > img{ max-height: 220px; }

  /* Badge fermé : reste grand */
  .card .badge{
    padding: 14px 30px;
    right: 10px;
    top: -18px;
    transform: rotate(10deg);
    font-size:24px;          /* ✅ + grand */
  }

  .card.open{
    width: min(560px, calc(100vw - 28px));
    max-height: calc(100dvh - 20px);
  }

  /* Badge ouvert : reste grand */
  .card.open .badge{ font-size:32px; }  /* ✅ */
  .card.open > img{ width: 260px; }

  /* ✅ Liste : diminue SEULEMENT en responsive */
  .card.open .card-content ul{ font-size:17px; }
}

@media (max-width:700px){
  .container,
  #chateaux .container,
  section.catalog .container{
    grid-template-columns: 1fr;
    gap: 26px;
    margin: 0 auto 32px;
    padding: 0 12px;
  }

  .card{
    max-width: 360px;
    min-height: 280px;
    padding: 22px;
  }
  .card > img{ max-height: 190px; }

  .card .badge{
    padding: 12px 24px;
    font-size:22px;          /* ✅ + grand */
  }

  .card.open{
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 16px);
    padding: 18px 16px 18px;
  }

  .card.open .badge{ font-size:28px; }  /* ✅ + grand */
  .card.open > img{ width: 230px; }

  /* ✅ Liste : diminue uniquement ici */
  .card.open .card-content ul{ font-size:15px; }
}

@media (max-width:420px){
  .card{
    max-width: 340px;
    min-height: 260px;
  }

  .card .badge{
    right: 10px;
    top: -16px;
    transform: rotate(8deg);
    padding: 10px 18px;
    font-size:20px;          /* ✅ + grand */
  }

  .card.open .badge{ font-size:24px; }  /* ✅ + grand */
  .card.open > img{ width: 210px; }

  /* ✅ Liste : diminue uniquement ici */
  .card.open .card-content ul{ font-size:13px; }
}


/* =======================
   CTA BOUTONS (remis)
======================= */
.section-cta{
  text-align:center;
  margin: 10px 0 80px;               /* espace propre autour */
}

.section-cta .btn-cta{
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .2px;
  padding: 16px 28px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--violet);
  border: 3px solid var(--violet);
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 14px 26px rgba(0,0,0,.16);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}

.section-cta .btn-cta:hover{
  transform: translateY(-1px);
  background: var(--violet);
  color: #fff;
  box-shadow: 0 18px 30px rgba(0,0,0,.22);
}

@media (max-width: 520px){
  .section-cta .btn-cta{
    font-size: 20px;
    padding: 14px 22px;
    border-width: 2px;
  }
}

/* =======================
   Bandeau “nouveautés”
======================= */
.site-update{
  text-align:center;
  color:#1c1030;
  background:#ffffff;
  border:3px dashed var(--violet);
  padding:18px 16px;
  border-radius:18px;
  max-width:980px;
  margin:48px auto 0;
  box-shadow:0 14px 32px rgba(0,0,0,.12);
  font-family:"Inter", system-ui, sans-serif;
}
.site-update strong{
  display:block;
  font-family:"Baloo 2", system-ui, sans-serif;
  font-size:22px;
  color:var(--violet);
  margin-bottom:4px;
}
.site-update small{
  display:block;
  opacity:.85;
  font-weight:600;
}


.bubble-container {
position: absolute; 
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; 
overflow: hidden; 
z-index: -1; 
}

.bubble-container {
position: fixed; 
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden; 
z-index: -1; 
}

.bubble {
position: absolute;
width: 60px;  
height: 60px; 
border-radius: 50%; 
opacity: 0.8;
animation: float 20s infinite;
}

@keyframes float {
0% {
  transform: translate(0, 0);
  opacity: 0.8;
}
25% {
  transform: translate(-30px, -50px);
  opacity: 1;
}
50% {
  transform: translate(40px, 30px);
  opacity: 0.7;
}
75% {
  transform: translate(-20px, -20px);
  opacity: 0.9;
}
100% {
  transform: translate(30px, 40px);
  opacity: 0.8;
}
}

.bubble:nth-child(1) { background-color: #ff7f50; left: 5%; top: 10%; animation-duration: 15s; animation-delay: 0s; }
.bubble:nth-child(2) { background-color: #2ecc71; left: 15%; top: 15%; animation-duration: 18s; animation-delay: 2s; }
.bubble:nth-child(3) { background-color: #1abc9c; left: 25%; top: 20%; animation-duration: 16s; animation-delay: 1.5s; }
.bubble:nth-child(4) { background-color: #f39c12; left: 50%; top: 30%; animation-duration: 20s; animation-delay: 3s; }
.bubble:nth-child(5) { background-color: #e74c3c; left: 70%; top: 25%; animation-duration: 12s; animation-delay: 0.5s; }
.bubble:nth-child(6) { background-color: #9b59b6; left: 85%; top: 5%; animation-duration: 22s; animation-delay: 2.5s; }
.bubble:nth-child(7) { background-color: #3498db; left: 10%; top: 50%; animation-duration: 18s; animation-delay: 1s; }
.bubble:nth-child(8) { background-color: #f1c40f; left: 30%; top: 75%; animation-duration: 14s; animation-delay: 1.5s; }
.bubble:nth-child(9) { background-color: #2ecc71; left: 60%; top: 10%; animation-duration: 16s; animation-delay: 0s; }
.bubble:nth-child(10) { background-color: #3498db; left: 45%; top: 50%; animation-duration: 12s; animation-delay: 2s; }
.bubble:nth-child(11) { background-color: #e67e22; left: 90%; top: 60%; animation-duration: 17s; animation-delay: 3s; }
.bubble:nth-child(12) { background-color: #9b59b6; left: 20%; top: 85%; animation-duration: 15s; animation-delay: 1s; }
.bubble:nth-child(13) { background-color: #1abc9c; left: 40%; top: 45%; animation-duration: 19s; animation-delay: 0.5s; }
.bubble:nth-child(14) { background-color: #e74c3c; left: 60%; top: 10%; animation-duration: 13s; animation-delay: 2.5s; }
.bubble:nth-child(15) { background-color: #ff7f50; left: 80%; top: 90%; animation-duration: 18s; animation-delay: 3s; }
.bubble:nth-child(16) { background-color: #f1c40f; left: 25%; top: 35%; animation-duration: 15s; animation-delay: 2s; }
.bubble:nth-child(17) { background-color: #3498db; left: 35%; top: 20%; animation-duration: 14s; animation-delay: 1.5s; }
.bubble:nth-child(18) { background-color: #2ecc71; left: 55%; top: 80%; animation-duration: 20s; animation-delay: 0.5s; }
.bubble:nth-child(19) { background-color: #9b59b6; left: 75%; top: 10%; animation-duration: 17s; animation-delay: 2s; }
.bubble:nth-child(20) { background-color: #f39c12; left: 90%; top: 70%; animation-duration: 18s; animation-delay: 3s; }


.scroll-indicator {
position: fixed;
bottom: 20px; 
left: 50%;
transform: translateX(-50%);
font-size: 30px;
color: #fff;
animation: bounce 1s infinite;
z-index: -1;
}

@keyframes bounce {
0% {
  transform: translateX(-50%) translateY(0);
}
50% {
  transform: translateX(-50%) translateY(-15px);
}
100% {
  transform: translateX(-50%) translateY(0);
}
}

/* Footer plein écran + couleur demandée */
.site-footer{
  font-family: "Poppins", Arial, sans-serif; 
  width:100%;
  background:#9400d9;              /* couleur demandée */
  color:#fff;
  padding:14px clamp(12px,4vw,18px);
  margin:32px 0 0;                 /* colle au bas de page */
  text-align:center;
  border-radius:0;                  /* plein écran, pas de coins */
  box-shadow:none;                  /* look plus flat */
}

/* “Header” de footer : liens sur toute la largeur */
.legal-links{
  width:100%;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  font-weight:600;
  line-height:1.25;
}

.legal-links a{
  color:#fff;
  text-decoration:none;
  position:relative;
  padding:6px 8px;                  /* zones tactiles mais sobres */
  border-radius:6px;
  font-size:clamp(12px, 1.9vw, 14px);  /* ← plus petit */
  opacity:.95;                      /* moins imposant */
}

/* Séparateur | en clair */
.legal-links a + a::before{
  content:"|";
  margin-right:8px;
  opacity:.5;
}

/* hover/focus discrets */
.legal-links a:hover{ text-decoration:underline }
.legal-links a:focus-visible{
  outline:2px solid rgba(255,255,255,.6);
  outline-offset:3px;
}

/* Crédit plus discret */
.credit{
  margin:6px 0 0;
  font-size:clamp(11px, 1.7vw, 13px);  /* ← plus petit */
  opacity:.85;
}

/* ---------- Responsive ---------- */
/* Mobile : liens empilés, séparés par une ligne claire, toujours plein écran */
@media (max-width:520px){
  .legal-links{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .legal-links a{
    padding:10px 12px;
    font-size:13px;
  }
  .legal-links a + a::before{ content:none }
  .legal-links a + a{
    border-top:1px solid rgba(255,255,255,.25);
  }
}