/* ==========================================================
   assets/css/style.css
   Feuille de style complète unifiée — thème bleu-vert + CTA jaune
   Inclut : typographie, header, hero (image responsive), features,
   contact, footer, contrôles, accessibilité et petites animations.
   Remplace entièrement ton fichier CSS par ce contenu.
   ========================================================== */

/* Import police */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
/* mobile menu helper: class-based fallback for older browsers */
/* moved into the responsive block further down to avoid interfering with desktop layout */
#primary-menu.open {
  display: flex; /* ou block selon le layout */
  flex-direction: column;
  gap: 12px;
}

/*photo page d'accueil*/
.photo-ga {
    margin: 24px auto;
    max-width: 100%;
}

.photo-row {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.photo-row img {
    width: 48%;
    border-radius: 12px;
    object-fit: cover;
    height: 260px;
    border: 2px solid var(--cta-600);
}


/* Galerie pour les photos de la section Cours intensifs */
.course-gallery {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;          /* permet de descendre sur mobile */
  margin: 24px 0;
  width: 100%;
  box-sizing: border-box;
}
.course-gallery .photo-card {
  background: #fff;
  border: 2px solid var(--salmon);
  border-radius: 12px;
  overflow: hidden;
  flex: 1 1 calc(33.333% - 10px);
  max-width: 300px;
  min-width: 0;
}
.course-gallery .photo-card img {
  display: block;
  width: 100%;
  height: auto;            /* aucune déformation */
  max-width: 100%;
}
[data-i18n="presentation_1"] {
    white-space: pre-line;
}

@media (max-width: 768px) {
  .course-gallery {
    padding: 0 8px;
  }
  .course-gallery .photo-card {
    flex: 1 1 calc(50% - 8px);
    max-width: 100%;
  }
}


@media (max-width: 480px) {
  .course-gallery {
    gap: 12px;
    padding: 0 4px;
  }
  .course-gallery .photo-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.about-content p {
    text-align: justify; /* Justifier le texte dans la section "About" */
}
/* Section photos du 
 */
/* Section photos du lieu */
.place-section {
  margin: 48px auto;
  text-align: center;
}

.place-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 18px;
}

/* Grille principale */
.place-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;                 /* photos proches */
  max-width: 880px;          /* taille maîtrisée */
  margin: 0 auto;
}

/* Carte photo */
.place-photo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15,23,42,0.05);
  transition: transform var(--transition), box-shadow var(--transition);
}

.place-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;      /* tailles homogènes */
}

/* Hover desktop uniquement */
@media (hover: hover) {
  .place-photo:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(15,23,42,0.08);
  }
}

/* 📱 Mobile */
/* Pour écrans petits (smartphones) */
@media (max-width: 600px) {
  .place-grid {
    grid-template-columns: 1fr; /* une seule colonne sur mobile */
    gap: 12px; /* un peu plus d'espacement si nécessaire */
  }



  .place-grid {
    gap: 8px;               /* encore plus compact */
    max-width: 100%;
  }

  .place-title {
    font-size: 1.15rem;
    margin-bottom: 14px;
  }
}
.features {
  position: relative;
  overflow: hidden; /* pour que le flou ne dépasse pas */
  padding: 16px 0; /* espace autour des cartes */
  z-index: 0;
 min-height: auto;
 max-height: none;
  padding-top: 16px;
  padding-bottom: 16px;

}

.features {
    margin-bottom: 24px !important;
}

/* Titre principal au-dessus des arches : petit espace après le grand titre */
.stagiaires-title { margin: 20px 0 12px; }
.features { margin-top: 8px; }

/* Aligner les titres des arches en haut et augmenter leur taille */
.features-grid { align-items: start; }
.feature-card { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; align-self: start; padding: 6px 10px; min-height: 0; height: auto; max-width: 100%; border-radius: 12px; }
.feature-card .feature-content { display: flex; flex-direction: column; flex: 0; align-items: center; justify-content: flex-start; text-align: center; padding: 4px 8px 2px; }
.feature-card h3 { margin: 4px 0 6px; font-size: 1.18rem; line-height: 1.1; color: #fe9538; }

/* Limiter la taille des images de la page "Qui suis-je?" sur mobile */
@media (max-width: 600px) {
  .about-image, img.about-image {
    max-width: 220px;
    width: 60%;
    height: auto;
  }
}


.features-grid {
  position: relative; /* pour que les cartes restent au-dessus du background */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: min-content;
  gap: 24px;
  z-index: 1;
}

.feature-card {
  background: rgba(255,255,255,0.95); /* semi-transparent pour bien lire le texte */
  padding: 6px; /* espace compact autour du cadre */
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  color: var(--text);
}

/* Paragraphes sans marge et avec très peu d'espace sous le texte */
.feature-card p { margin: 0; padding: 0 0 4px 0; }
.feature-card .feature-content { padding-bottom: 2px; }


.test{
  text-align: center;
}
/* -------------------------
   Mentions légales - mise en page
   ------------------------- */
.legal-intro{margin-bottom:12px;color:var(--muted)}
.legal-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:20px;margin:10px 0 32px}
@media(max-width:900px){.legal-grid{grid-template-columns:1fr}}
.legal-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;box-shadow:0 8px 24px rgba(15,23,42,0.04);text-align:left}
.legal-card h2{margin:0 0 8px;font-size:1.05rem;color:var(--primary);font-weight:800}
.legal-card p{margin:0 0 10px;line-height:1.6;color:var(--text)}
.legal-card a{color:var(--primary)}
/* -------------------------
   Variables de thème
   ------------------------- */
   p {
    text-align: center; /* ou left, right, center selon ton besoin */
}
/* Justifier tout le texte du site */
p{
    text-align: center;
    color:#000000;
}
.hero4 {
    text-align: right;
    text-indent: 10px;
   
}
/* heading color uses salmon variable, defined below with a slightly deeper tone */
h1, h2, h3, h4, h5, h6 {
    color: var(--salmon); /* remplace la couleur bleue */
}

:root{
      --bg: #FFF8F2;          /* fond très clair, neutre */
  --surface: #FFFFFF;      /* cartes et sections */
  --text: #000000;         /* texte principal — forcé noir */
  --muted: #000000;        /* texte secondaire — forcé noir */

  /* Couleurs principales */
  --primary: #FFB87C;      /* orange pâle dominant */
  --primary-600: #FFA15A;  /* orange un peu plus foncé pour hover */
  --accent: #A3D5FF;       /* bleu pastel secondaire */
  --cta: #FFB87C;          /* CTA orange pâle */
  --cta-600: #FFA15A;       /* hover des boutons */
  --salmon: #E96E5D;       /* intensité renforcée pour titres saumon */

  /* Bordures et ombres */
  --border: #E8E2DE;
  --shadow: 0 24px 60px rgba(15,23,42,0.08);
  --radius: 16px;

 
  --transition:200ms cubic-bezier(.2,.9,.2,1);
  --max-width:1200px;

  --base-font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --h1-size: clamp(2.4rem, 5.2vw, 3.6rem);
  --h2-size: clamp(1.6rem, 2.6vw, 2.2rem);
  --h3-size: 1.1rem;
}

/* Dark theme */
html[data-theme="dark"]{
  --bg:#071026;
  --surface:#0f1724;
  --text:#e6eefc;
  --muted:#98a2b3;

  --primary:#FFA07A;
  --primary-600:#FF8C69;
  --accent:#FFDAB9;
  --cta:#ffd85a;
  --cta-600:#ffcf2a;

  --border:#122033;
  --shadow:0 20px 60px rgba(0,0,0,0.45);
}

/* -------------------------
   Reset & base
   ------------------------- */
*{box-sizing:border-box}
html{font-family:var(--base-font);-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}
.container{width:min(94%,var(--max-width));margin:0 auto}

/* Headings uniformes */
h1{font-family:var(--base-font);font-weight:900;font-size:var(--h1-size);line-height:1.02;margin:0 0 12px;text-align:center}
h2{font-family:var(--base-font);font-weight:800;font-size:var(--h2-size);margin:0 0 10px;text-align:center}
h3{font-family:var(--base-font);font-weight:800;font-size:var(--h3-size);margin:0 0 8px;text-align:center}
p{margin:0;color:var(--muted)}

/* -------------------------
   Header / Nav
   ------------------------- */
.header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:120;padding:18px 0;
  box-shadow: 0 6px 18px rgba(15,23,42,0.02);
}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-weight:900;color:var(--primary);font-size:1.15rem}
.nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* --- Navigation principale --- */
.nav-list {
  display: flex;          /* visible par défaut sur desktop */
  flex-direction: row;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  transition: all var(--transition);
  background: rgba(255, 184, 124, 0.1); /* léger fond orange pâle */
}

.nav-list a:hover {
  background: var(--cta);
  color: #071026;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15,79,230,0.12);
}

.nav-cta {
  background: var(--cta);
  color: #071026;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(15,79,230,0.12);
  transition: all var(--transition);
}

.nav-cta:hover {
  transform: translateY(-3px);
  background: var(--cta-600);
}

.nav-toggle {
  display: none;  /* desktop : on cache le bouton */
  background: var(--cta);
  color: #071026;
  border: none;
  padding: 8px 16px;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
}

/* --- Menu responsive (mobile) --- */
@media(max-width: 920px) {
  .navbar {
    display: flex;
    justify-content: space-between; /* logo à gauche, boutons à droite */
    align-items: center;
    position: relative;
  }

  /* Groupe select + bouton menu */
  .navbar > .lang-selector,
  .navbar > .nav {
    display: inline-flex;          /* alignement horizontal */
    align-items: center;
    gap: 8px;                     /* espace entre select et bouton */
  }

  /* Sélecteur de langue */
  .lang-selector {
    flex: 0 0 auto;
    width: auto;
    max-width: 150px;
  }

  /* Bouton hamburger */
  .nav-toggle {
    display: inline-block;
    position: relative;  /* plus de absolute pour qu’il reste à côté */
    margin: 0;
    padding: 8px 16px;
    font-size: 1rem;
    border-radius: 6px;
    border: none;
    background: var(--cta);
    color: #071026;
    cursor: pointer;
    z-index: 1001;
  }

  /* Menu vertical sous le header */
  .nav-list {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;    /* sous le header */
    right: 0;
    width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    padding: 12px 0;
    z-index: 1000;
  }

  /* Affichage menu quand le bouton est cliqué (via aria-expanded or class=open) */
  .nav-toggle[aria-expanded="true"] + .nav-list,
  #primary-menu.open {
    display: flex;
  }
}




/* -------------------------
   Hero (layout)
   ------------------------- */
.hero{padding:24px}
.hero-inner{display:grid;grid-template-columns:1fr 520px;gap:36px;align-items:center}
@media(max-width:1100px){.hero-inner{grid-template-columns:1fr 420px}}
@media(max-width:880px){.hero-inner{grid-template-columns:1fr;gap:28px;padding:48px 0}}

.hero-left{display:flex;flex-direction:column;justify-content:center;gap:14px}
.hero-eyebrow{display:inline-block;background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;padding:6px 12px;border-radius:999px;font-weight:800;margin-bottom:6px;font-size:0.9rem;animation:slideInLeft 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;transform:translateX(-30px);opacity:0}
@keyframes slideInLeft{to{transform:translateX(0);opacity:1}}
.hero-title{
  font-size:clamp(2.6rem,6.5vw,4.2rem);
  line-height:1;
  margin:0 0 12px;
  animation:slideInLeft 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.1s forwards;
  text-align:center;
}
.hero-sub{
  color:var(--muted);
  font-size:1.05rem;
  max-width:56ch;
  text-align:center;
  animation:slideInLeft 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.2s forwards;
}

.cta-row{display:flex;gap:14px;align-items:center}
.btn-cta{background:var(--cta);color:#071026;padding:14px 22px;border-radius:12px;font-weight:900;box-shadow:0 18px 40px rgba(15,79,230,0.12);transition:transform var(--transition)}
.btn-cta:hover{transform:translateY(-4px);background:var(--cta-600)}
.btn-outline{padding:12px 18px;border-radius:12px;border:1px solid var(--border);font-weight:800;color:var(--text);background:transparent}

.hero-features{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.hero-feature{background:rgba(15,79,230,0.04);padding:8px 12px;border-radius:999px;font-weight:700;color:var(--primary)}

/* -------------------------
   Hero image wrapper (responsive, shape, overlay)
   ------------------------- */
.hero-right{margin-top:40px;display:flex;align-items:center;justify-content:center;position:relative;perspective:1200px}



/* -------------------------
   Hero Château (background image with blur and gradient)
   ------------------------- */
.hero-chateau {
  text-align: center;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Ensure blur doesn't overflow */
}


.hero-chateau h1, .hero-chateau h11 {
  color: var(--cta-600);
  text-align: center;
}

/* -------------------------
   Background image for arches (features)
   ------------------------- */


/* -------------------------
   About section
   ------------------------- */
.about{padding:64px 0}
.about-inner{display:grid;grid-template-columns:1fr 520px;gap:48px;align-items:center}
@media(max-width:1100px){.about-inner{grid-template-columns:1fr}}
@media(max-width:880px){.about-inner{gap:32px}}
.about-content{display:flex;flex-direction:column;gap:18px}
.about-content h2{font-size:var(--h2-size);margin-bottom:12px;color:var(--text)}
.about-content p{text-align:justify;color:var(--muted);line-height:1.8;font-size:1rem;margin:0}
.about-images{display:flex;align-items:center;justify-content:center}
.about-image{width:100%;max-width:520px;height:auto;border-radius:18px;box-shadow:var(--shadow);border:1px solid var(--border);object-fit:cover}
@media(max-width:880px){.about-image{max-width:100%;height:300px}}

/* -------------------------
   Features grid (4 items)
   ------------------------- */
.features-grid,
.arches-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
  gap: 24px;
  
}

@media(max-width:1100px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.features-grid{grid-template-columns:1fr}}
.arche,
.feature-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px; /* plus compact */
  text-align: center;
  min-height: 0; /* taille s'ajuste au contenu */
  box-shadow: 0 6px 18px rgba(15,23,42,0.06);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* texte en haut */
  align-items: center;
}
.course-section schedule p{
  text-align: center;
}
.arche:hover,
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(15,23,42,0.12);
  border-color: var(--primary);
}
.hero-sub {
  color: var(--muted);
  font-size: 1.3rem;   /* plus petit que le H1 */
  font-weight: 600;
  margin-top: 8px;
  line-height: 1.4;
}

.arche h3,
.feature-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 8px 0 6px;
  color: var(--primary);
}
.h3{
  text-align: center;
}
.arche p,
.feature-card p {
  font-size: 0.95rem;
  color:#000000;
  line-height: 1.4;
  margin: 0 0 4px; /* petit espace sous le texte si besoin */
}

.feature-card{ text-align: center; display:flex; gap:8px; align-items:center; background:var(--surface); border:1px solid var(--border); padding:10px 12px; border-radius:12px; box-shadow:0 8px 24px rgba(15,23,42,0.04); transition:transform var(--transition); flex-direction:column; justify-content:flex-start; }
.feature-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(15,23,42,0.08)}
.feature-icon{width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900}
.feature-content p{margin:0;color:#000000;font-size:0.95rem}

/* Ensure feature content doesn't stretch the card and sits at the top */
.feature-content{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:0}
.feature-content h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 6px;
  text-align: center;
  line-height: 1.4;
}

.stagiaires-title {
  text-align: center;
  /* custom hue between salmon and peach, not using the default variables directly */
  color: color-mix(in srgb, var(--salmon) 50%, var(--primary) 50%);
  font-weight: 800;
}

/* -------------------------
   Testimonials
   ------------------------- */

.testimonials h2{color:var(--text)}
.testimonials .grid-3 {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}
@media(max-width:900px){
    .testimonials .grid-3 {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
}

.card {
    background: var(--surface);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(15,23,42,0.04);
    color: var(--text);
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    text-align: center;
}
/* Container de la section (centrage global) */
/* Container général identique aux autres sections */
.container {
  width: 100%;
  max-width: 1200px; /* même max-width que tes autres sections */
  margin: 0 auto;
  padding: 0 16px;   /* espace latéral pour mobile */
  box-sizing: border-box;
}

/* Section titre */
.intro-section {
  text-align: center;
  padding: 40px 0 16px 0;
}

.intro-title {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 2.2rem;
  font-weight: 800;

}

/* Section bulle */
.intro-bubble {
  display: flex;
  justify-content: center; /* centre la bulle dans le container */
  margin: 28px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Bulle intérieure : encadré avec fond, border, ombre */
.intro-bubble-inner {
  display: flex;
  flex-direction: row;       /* desktop : icône + texte côte à côte */
  align-items: center;
  gap: 20px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 12px 30px rgba(15,23,42,0.06);
  max-width: 600px;          /* largeur max comme les autres sections */
  width: 100%;
  margin: 0 -10px 0 ;    /* pousse fortement vers la droite */
  box-sizing: border-box;
  animation: fadeUp 0.52s ease both;
}

/* Icône */
.intro-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  flex: 0 0 56px;
}

/* Texte */
.intro-text {
  text-align: center;
}
.intro-text p {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
}
.btn-cta {
  justify-content: center;
}
/* Bouton */
.intro-cta {
  display: inline-block;
  margin-top: 12px;
  justify-content: center;
}

/* Animation fade-in */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile : empilement et centrage texte + icône */
@media (max-width: 800px) {
  .intro-bubble-inner {
    flex-direction: column;
    align-items: center; /* centré horizontalement */
    text-align: center;
    padding: 16px;
  }

  .intro-text {
    width: 100%;
  }
}



.contact-teaser{padding:36px 0}
.contact-teaser-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}

/* -------------------------
   Contact page specific (kept here for single-file)
   ------------------------- */
.contact-hero{padding:48px 0}
.contact-grid{display:grid;grid-template-columns:420px 1fr;gap:28px;align-items:start}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr}}
.contact-info{background:var(--surface);border:1px solid var(--border);padding:22px;border-radius:14px;box-shadow:var(--shadow)}
.contact-info h2{margin:0 0 12px;font-size:1.25rem;color:var(--primary)}
.contact-block{margin:18px 0;padding:12px;border-radius:10px;background:color-mix(in oklab,var(--surface) 92%,var(--primary) 2%);border:1px solid color-mix(in oklab,var(--border) 80%,var(--primary) 8%)}
.contact-block h3{margin:0 0 6px;font-size:0.95rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--text);font-weight:800}
.contact-block p,.contact-block a{margin:0;color:var(--muted);font-weight:700;font-size:0.98rem}
.contact-meta{margin-top:12px;color:var(--muted);font-size:0.95rem;line-height:1.45}
.contact-panel{background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 96%,white),var(--surface));border:1px solid var(--border);padding:22px;border-radius:14px;box-shadow:var(--shadow)}
.contact-panel h2{margin:0 0 12px;color:var(--primary);font-size:1.25rem}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.contact-form .form-row{grid-template-columns:1fr}}
.form-group{margin-bottom:12px;display:flex;flex-direction:column;gap:8px}
label{font-weight:700;color:var(--text);font-size:0.95rem}
input[type="text"],input[type="email"],textarea,select{padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:1rem}
textarea{min-height:160px;resize:vertical}
.form-note{font-size:0.92rem;color:var(--muted);margin-top:6px}

/* -------------------------
   Mobile-specific improvements
   (Only applied under threshold; desktop unchanged)
   ------------------------- */
@media (max-width:900px) {
  /* prevent any horizontal scrolling on mobile */
  body { overflow-x: hidden; }

  /* Ensure container-like sections line up exactly with other sections */
  .intro-section,
  .intro-bubble,
  .testimonials,
  .features,
  .contact-teaser,
  .page-hero,
  .about-content,
  .courses-content,
  .prices-content { width: 100%; box-sizing: border-box; padding-left: 3%; padding-right: 3%; }

  /* Make images fluid and avoid overflow */
  img, .about-image, .hero-right img { max-width: 100%; height: auto; display: block; }

  /* Stack intro bubble content and balance spacing */
  .intro-bubble-inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .intro-icon { margin: 0 auto 6px auto; flex: 0 0 auto; }
  .intro-text { width: 100%; }

  /* Features / cards: single column for readability */
  .features-grid, .arches-grid, .grid-3 { grid-template-columns: 1fr !important; }
  .feature-card, .arche { padding: 16px; min-height: auto; }

  /* Increase tap targets for CTAs */
  .btn-cta, .btn-outline, .btn-submit { padding: 14px 18px; min-height: 48px; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; }

  /* Forms full width inputs */
  input[type="text"], input[type="email"], textarea, select { width: 100%; box-sizing: border-box; }

  /* Contact teaser stacking */
  .contact-teaser-inner { flex-direction: column; align-items: center; text-align: center; }

  /* Testimonials: single column */
  .testimonials .grid-3 { grid-template-columns: 1fr; gap: 12px; }

  /* Slightly increase base text size and line-height for readability */
  p { font-size: 1rem; line-height: 1.6; }

  /* Reduce oversized hero title on small screens only (desktop unchanged) */
  .hero-title, h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }

  /* Avoid heavy shadows/large min-heights on mobile for performance */
  .feature-card, .card, .contact-info, .contact-panel { box-shadow: none; }

  /* Ensure no absolute positioning creates overflow on mobile */
  [style*="position:absolute"], [style*="position: fixed"] { max-width: 100%; }
}
.contact-actions{display:flex;gap:12px;align-items:center;margin-top:8px}
.btn-submit{background:var(--cta);color:#071026;padding:12px 20px;border-radius:12px;font-weight:900;border:none;cursor:pointer;box-shadow:0 14px 36px rgba(15,79,230,0.12);transition:transform .18s ease,box-shadow .18s ease}
.btn-submit:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(15,79,230,0.16);background:var(--cta-600)}
.small-contacts{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.small-contacts .chip{background:color-mix(in oklab,var(--surface) 92%,var(--primary) 2%);padding:8px 12px;border-radius:999px;font-weight:700;color:var(--primary)}
input:focus,textarea:focus,select:focus{outline:3px solid color-mix(in oklab,var(--primary) 22%,transparent);outline-offset:2px}
.divider{height:1px;background:var(--border);margin:18px 0;border-radius:2px}

/* -------------------------
   Footer
   ------------------------- */

.site-footer{background:linear-gradient(180deg,#e8b98b,#d376b6);color:#fff;padding:36px 0 18px;margin-top:48px;border-top-left-radius:12px;border-top-right-radius:12px}
.footer-top{display:flex;gap:36px;align-items:flex-start;justify-content:space-between;padding:18px 0}

/* Align footer columns toward the bottom so labels sit at footer baseline */
.footer-top { display:flex; align-items:flex-end; gap:20px; }
.footer-top .footer-brand { margin-right: 12px; }
.footer-brand{max-width:420px}
.footer-logo .logo-mark{font-weight:900;font-size:1.15rem;color:#000000}
.join-title{color:#ff3b30;font-weight:900;margin-bottom:8px}
.socials{display:flex;gap:12px}
.social{width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,0.06);display:grid;place-items:center;color:#fff}
.social svg{display:block}
.footer-nav{display:flex;gap:36px;margin-left:auto}
.nav-column{list-style:none;padding:0;margin:0}
.nav-column li{margin:6px 0}
.nav-column a:hover { background: rgba(255,255,255,0.35); transform: translateX(4px); }
.nav-column a{color:rgba(0, 0, 0, 0.95);font-weight:700;display: block; padding: 10px 14px; background: rgba(255,255,255,0.15); border-radius: 8px; margin-bottom: 8px; color: #000; font-weight: 700; transition: 0.25s ease}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,0.06);padding:14px 0;margin-top:18px}
.footer-bottom p{margin:0;color:rgba(0, 0, 0, 0.78);font-size:0.95rem}
.credit-name{color:var(--accent);font-weight:800}
@media(max-width:900px){.footer-top{flex-direction:column}.footer-nav{margin-left:0}.footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}}

/* -------------------------
   Controls (theme + lang)
   ------------------------- */
.controls{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:12px;z-index:240}
.control-btn{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border:none;padding:12px 16px;border-radius:999px;font-weight:800;box-shadow:0 12px 30px rgba(15,23,42,0.12);cursor:pointer;transition:transform var(--transition)}
.control-btn.secondary{background:linear-gradient(135deg,color-mix(in oklab,var(--surface) 60%,var(--primary) 40%),color-mix(in oklab,var(--surface) 60%,var(--accent) 40%));color:var(--text);border:1px solid var(--border)}
.control-btn:hover{transform:translateY(-3px)}

/* -------------------------
   Fixed CTA (optional)
   ------------------------- */
.fixed-cta{position:fixed;right:18px;bottom:110px;background:var(--cta);color:#071026;padding:12px 18px;border-radius:999px;font-weight:900;box-shadow:0 18px 40px rgba(31,87,216,0.12);z-index:230}
.fixed-cta:hover{transform:translateY(-4px);background:var(--cta-600)}

/* -------------------------
   Page Hero (for inner pages)
   ------------------------- */
.page-hero{padding:48px 0;border-bottom:1px solid var(--border)}
.page-hero h1{margin:0 0 12px;color:var(--text);text-align:center}
.page-intro{color:var(--muted);font-size:1.1rem;margin:0;max-width:56ch;text-align:center}
/* Conteneur photo générique */
.photo-gallery {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.photo-gallery .photo-block {
  flex: 1 1 45%;   /* deux photos côte à côte */
  max-width: 500px;
  overflow: hidden;
  border-radius: 12px;
  height: 300px;   /* hauteur identique pour tous les blocs */
}

/* override for niveaux page to make photo a bit wider */
.levels-intro-section + .photo-gallery .photo-block {
  flex: 1 1 60%;   /* plus large que standard */
  max-width: 700px;
}

.photo-gallery .photo-block img {
  width: 100%;
  height: 100%;       /* force l'image à remplir le bloc */
  object-fit: cover;  /* recadre automatiquement */
}

/* si tu veux que la deuxième photo masque le haut */
.photo-gallery .photo-block:nth-child(2) img {
  object-position:center 40%; /* ajuste la position verticale */
}

/* Galerie des cours : grille propre sur PC */
.course-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  justify-items: center;
}

.course-gallery .photo-card {
  width: 100%;
  max-width: 350px;
  border: 2px solid var(--salmon);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(15,23,42,0.05);
}

.course-gallery .photo-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* MOBILE FIX — images grandes, propres, non déformées */
@media (max-width: 480px) {

  .course-gallery {
    grid-template-columns: 1fr !important;
    gap: 1.2rem;
  }

  .course-gallery .photo-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px;
  }

  .course-gallery .photo-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* garde les proportions naturelles */
  }
}


/* mobile */
@media (max-width: 768px) {
  .photo-gallery .photo-block {
    flex: 1 1 45%;
    max-width: 50%;
    /* allow height to follow image proportions */
    height: auto;   /* keep natural image sizing on small screens */
  }
  .photo-gallery .photo-block img {
    width: 100%;
    height: auto;
    object-fit: contain; /* preserve proportions without crop */
    display: block;
  }
}



/* -------------------------
   Courses Page
   ------------------------- */
.courses-content{padding:48px 0}
.courses-tabs{display:flex;gap:12px;margin-bottom:32px;border-bottom:1px solid var(--border);padding-bottom:16px}
.tab-btn{background:transparent;border:none;padding:12px 16px;font-weight:800;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;transition:all var(--transition);font-size:1rem}
.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab-btn:hover{color:var(--text)}

.tab-content{display:none}
.tab-content.active{display:block;animation:floatUp 0.4s ease both}
.course-section p{text-align: center;}
.course-section{margin-bottom:48px}
.course-section h2{margin-bottom:18px;color:var(--text)}
.course-section h3{color:var(--primary);margin-bottom:14px;font-size:1.3rem}

.course-details{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:24px 0}
@media(max-width:900px){.course-details{grid-template-columns:1fr}}
.course-card{background:var(--surface);border:1px solid var(--border);padding:20px;border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,0.04);transition:transform var(--transition)}
.course-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,23,42,0.08)}
.course-card h4{margin:0 0 12px;color:var(--text);font-size:1.1rem}
.course-card p{margin:0 0 8px;color:var(--muted);font-size:0.95rem;line-height:1.7}
.course-card p:last-child{margin-bottom:0}

.modalites{background:linear-gradient(180deg,color-mix(in oklab,var(--surface) 95%,var(--primary) 2%),var(--surface));border:1px solid var(--border);padding:28px;border-radius:14px}
.modalite-item{margin-bottom:20px}
.modalite-item:last-child{margin-bottom:0}
.modalite-item h4{margin:0 0 8px;color:var(--primary);font-size:1.05rem}
.modalite-item p{margin:0;color:var(--muted);line-height:1.7}

.schedule{margin-top:48px}

/* -------------------------
   Location section with Google Maps
   ------------------------- */
.location-section{padding:32px 0}
.location-section h2{margin-bottom:18px;color:var(--text);text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}
.location-icon{font-size:1.5rem;display:inline-block}
.location-content{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 30px rgba(15,23,42,0.06);padding:20px;overflow:hidden}
.location-address{text-align:center;margin-bottom:14px}
.location-address p{margin:0;color:var(--text);font-size:0.95rem;line-height:1.6}
.location-map{position:relative;width:100%;padding-bottom:45%;height:0;overflow:hidden;border-radius:12px}
.location-map iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:12px}
@media(max-width:900px){.location-section{padding:24px 0}.location-content{padding:14px}.location-address{margin-bottom:12px}.location-address p{font-size:0.9rem}.location-map{padding-bottom:55%}}

.schedule-subtitle{color:var(--muted);font-style:italic;margin-top:8px;margin-bottom:20px}
.schedule-table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(15,23,42,0.04);
  table-layout: fixed; /* force equal column widths */
}
.schedule-table thead{background:linear-gradient(90deg,var(--primary),#e05998);color:#fff}
.schedule-table th{padding:16px;text-align:center;font-weight:800;font-size:0.95rem;width:20%;box-sizing:border-box}
.schedule-table td, .schedule-table th{
  padding:12px 10px;
  vertical-align:top;
  word-break:normal;    /* avoid breaking words in the middle */
  hyphens:none;
  overflow-wrap:normal;
}

/* Make table horizontally scrollable on small screens rather than breaking words */
@media (max-width: 768px) {
  .schedule-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .schedule-table th, .schedule-table td { white-space:normal; min-width:160px; }
  /* Mobile: remove white card background and padding; center image and
     show the full photo (contain) while keeping it reasonably sized */
  .course-gallery .photo-card {
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .course-gallery .photo-card img {
    height: 140px;
    max-width: 90%; /* let image use most of the card width */
    width: auto;
    object-fit: contain; /* show entire photo */
    background: transparent;
    padding: 0;
    box-sizing: border-box;
    display: block;
  }
}

@media (max-width: 480px) {
  .course-gallery .photo-card {
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .course-gallery .photo-card img {
    height:120px;
    max-width: 90%;
    width: auto;
    object-fit: contain;
    background: transparent;
    padding: 0;
    box-sizing: border-box;
    display: block;
  }
}
.schedule-table td{padding:16px;text-align:center;border-right:1px solid var(--border);border-bottom:1px solid var(--border);font-size:0.95rem;color:var(--text);white-space:normal;word-wrap:break-word;overflow-wrap:break-word;box-sizing:border-box;font-weight:normal;min-width:100px}
.schedule-table td:last-child{border-right:none}
.schedule-table tbody tr:last-child td{border-bottom:none}

/* compact version used for the calendar tables added */
.schedule-table.compact{
  width:80%;
  max-width:80%;
  margin:20px auto 24px; /* vertical margins balanced */
}
@media(max-width:880px){
  .schedule-table.compact{width:100%;max-width:100%;}
}
@media(max-width:600px){
  .schedule-table.compact{width:100%;max-width:100%;}
}
.time-slot{font-weight:800;color:var(--primary)}
@media(max-width:880px){.schedule-table{font-size:0.85rem}.schedule-table th,.schedule-table td{padding:12px;min-width:80px}}
@media(max-width:600px){.schedule-table{font-size:0.8rem}.schedule-table th,.schedule-table td{padding:10px 6px;min-width:60px}}

/* Individual courses steps */
.individual-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:28px 0}
@media(max-width:900px){.individual-steps{grid-template-columns:1fr}}
.step-item{display:flex;gap:18px;align-items:flex-start;background:var(--surface);border:1px solid var(--salmon);border-radius:12px;padding:18px 20px}
.step-number{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.4rem;flex-shrink:0}
.step-content h4{margin:0 0 8px;color:var(--text);font-size:1.05rem}
.step-content p{margin:0;color:var(--muted);line-height:1.7;font-size:0.95rem}

/* Levels page */
.levels-content{padding:48px 0}
.levels-intro-section{background:var(--surface);border:1px solid var(--border);padding:28px;border-radius:14px;margin-bottom:48px}
.levels-intro-section h2{margin-bottom:16px;color:var(--text);font-size:1.3rem}
.levels-intro-section p{color:var(--muted);line-height:1.8;margin-bottom:14px}
.levels-intro-section p:last-child{margin-bottom:0}
.levels-intro-section a{color:var(--primary);font-weight:800;text-decoration:underline}
.levels-intro-section a:hover{color:var(--primary-600)}
.levels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    gap: 24px;
}
/* === Bloc PAIEMENT / PAGO — style cohérent avec le site === */


@media(max-width:1100px){.levels-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.levels-grid{grid-template-columns:1fr}}

.level-card{background:var(--surface);border:2px solid var(--border);border-radius:16px;padding:28px;transition:transform var(--transition),box-shadow var(--transition);position:relative}
.level-card:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(15,23,42,0.12);border-color:var(--primary)}

.level-badge{position:absolute;top:-14px;left:24px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;padding:8px 16px;border-radius:8px;font-weight:900;font-size:1.1rem;box-shadow:0 8px 20px rgba(15,79,230,0.2)}

.level-card h3{margin:16px 0 20px;color:var(--text);font-size:1.4rem}

.level-content h4{margin:0 0 14px;color:var(--primary);font-weight:800;font-size:0.95rem;text-transform:uppercase;letter-spacing:0.05em}

.profile-list{list-style:none;padding:0;margin:0}
.profile-list li{color:var(--muted);line-height:1.8;margin-bottom:12px;padding-left:24px;position:relative;font-size:0.95rem}
.profile-list li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:900;font-size:1.1rem}
.profile-list li:last-child{margin-bottom:0}

/* Pricing page */
.prices-content{padding:48px 0}
.pricing-section{margin-bottom:48px}
.pricing-section h2{margin-bottom:12px;color:var(--text)}
.section-subtitle{color:var(--muted);font-size:1.05rem;margin-bottom:24px;font-style:italic}

.pricing-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:28px}
@media(max-width:900px){.pricing-cards{grid-template-columns:1fr}}
.price-card{background:var(--surface);border:1px solid var(--border);padding:28px;border-radius:14px;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);text-align:center}
.price-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(15,23,42,0.12);border-color:var(--primary)}
.price-card.highlighted{border-color:var(--primary);background:linear-gradient(135deg,color-mix(in oklab,var(--surface) 95%,var(--primary) 3%),var(--surface))}
.price-card h3{margin:0 0 16px;color:var(--text);font-size:1.15rem}
.price-amount{font-size:2.5rem;font-weight:900;color:var(--primary);margin:16px 0;line-height:1}
.price-card p{color:var(--muted);font-size:0.95rem;margin:0 0 8px}
.price-card p:last-child{margin:0}
.savings{color:var(--accent);font-weight:800;font-size:0.95rem;margin-top:12px}

.pricing-table-wrapper{overflow-x:auto;margin:28px 0}
.pricing-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,0.04)}
.pricing-table thead{background:linear-gradient(90deg,var(--primary),#e05998);color:#fff}
.pricing-table th{padding:16px;text-align:center;font-weight:800;font-size:0.95rem}
.pricing-table td{padding:14px;text-align:center;border-right:1px solid var(--border);border-bottom:1px solid var(--border);color:var(--text);font-size:0.95rem}
.pricing-table td:last-child{border-right:none}
.pricing-table tbody tr:last-child td{border-bottom:none}
.pricing-table .price{font-weight:800;color:var(--primary);font-size:1.05rem}
@media(max-width:880px){.pricing-table{font-size:0.85rem}.pricing-table th,.pricing-table td{padding:12px 8px}}

.pricing-details{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px}
@media(max-width:900px){.pricing-details{grid-template-columns:1fr}}
.detail-item{background:var(--surface);border:1px solid var(--border);padding:20px;border-radius:12px}
.detail-item.solo-info{border-color:color-mix(in oklab,var(--border) 70%,#ff9500 30%);background:color-mix(in oklab,var(--surface) 98%,#ff9500 1%)}
.detail-item.semi-private{border-color:color-mix(in oklab,var(--border) 70%,var(--accent) 30%);background:color-mix(in oklab,var(--surface) 98%,var(--accent) 1%)}
.detail-item h4{margin:0 0 12px;color:var(--text);font-size:1rem}
.details-list{list-style:none;padding:0;margin:0}
.details-list li{color:var(--muted);line-height:1.6;margin-bottom:10px;font-size:0.95rem}
.details-list li:last-child{margin-bottom:0}

.payment-item p{color:var(--muted);line-height:1.7;margin:0;font-size:0.95rem}

.pricing-cta{text-align:center;padding:48px 28px;background:linear-gradient(135deg,color-mix(in oklab,var(--surface) 90%,var(--primary) 5%),color-mix(in oklab,var(--surface) 90%,var(--accent) 5%));border-radius:14px;border:1px solid var(--border)}
.pricing-cta h3{margin:0 0 16px;color:var(--text)}
.pricing-cta .btn-cta{display:inline-block}

/* -------------------------
   Accessibility & small tweaks
   ------------------------- */
:focus{outline:3px solid color-mix(in oklab,var(--primary) 28%,transparent);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.hidden{display:none}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang-selector {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* -------------------------
   Formulaire d'Inscription Complet
   ------------------------- */
.inscription-section {
  padding: 48px 0;
  max-width: 820px;
  margin: 0 auto;
}

.inscription-form {
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 96%, white), var(--surface));
  border: 1px solid var(--border);
  padding: 32px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.form-fieldset {
  border: none;
  padding: 0 0 28px 0;
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.form-fieldset:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.form-fieldset legend {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 18px;
  padding: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 700px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.form-group label {
  font-weight: 700;
  color: var(--text);
  font-size: 0.95rem;
}

.form-group label span {
  color: #d32f2f;
  margin-left: 3px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  padding: 8px 0;
}

.radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary);
}

.success-message {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-weight: 600;
}

.success-message p {
  margin: 0;
}

.error-message {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-weight: 600;
}

.error-message p {
  margin: 0;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.btn-reset {
  background: var(--surface);
  color: var(--text);
  padding: 12px 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-reset:hover {
  background: color-mix(in oklab, var(--surface) 85%, var(--text) 15%);
  border-color: var(--text);
}
/* === Conditions d'inscription — style personnalisé === */

.conditions-title {
  color: var(--salmon);
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  margin: 20px 0 12px;
}

/* Paragraphes centrés */
.inscription-section .form-note p {
  text-align: center !important;
  color: var(--text) !important;
  margin-bottom: 10px;
}

@media (max-width: 600px) {
  .inscription-form {
    padding: 20px;
  }

  .form-fieldset {
    padding-bottom: 20px;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions button {
    width: 100%;
  }
}

/* -------------------------
   Small animations
   ------------------------- */
@keyframes floatUp{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.fade-in{animation:floatUp .6s ease both}

/* End of file */