/* Ciya danse orientale, version 2026
   Lumineuse et aérée : fond lavande, cartes blanches arrondies, prune pour la sobriété,
   un rose corail pour les boutons d'action et une pointe d'or en rappel de l'Égypte.
   L'arche orientale de l'ancien site revient dans le portrait de l'accueil. */

@font-face { font-family: "Marcellus"; src: url("/fonts/marcellus-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Italiana"; src: url("/fonts/italiana-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("/fonts/josefin-sans-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("/fonts/josefin-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("/fonts/josefin-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --prune: #3b1747;        /* titres, pied de page */
  --prune-doux: #5e2f6b;
  --lavande: #f7f2fa;      /* fond de page */
  --lilas: #ece2f3;        /* surfaces douces */
  --lilas-moyen: #cdb8df;  /* filets, icones */
  --encre: #2b1b33;        /* texte */
  --gris: #6f6278;         /* texte secondaire */
  --accent: #d6547a;       /* boutons d'action */
  --accent-fonce: #b93d62;
  --or: #c4a062;           /* rappel or */
  --blanc: #fff;
  --rayon: 20px;
  --ombre: 0 1px 2px rgba(59, 23, 71, .05), 0 14px 36px rgba(59, 23, 71, .08);
  --largeur: 1160px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --titre: "Marcellus", "Trajan Pro", "Optima", serif;
  --logo: "Italiana", "Didot", "Bodoni 72", serif;
  --texte: "Josefin Sans", "Futura", "Century Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--lavande); color: var(--encre); font: 400 17.5px/1.7 var(--texte); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--prune-doux); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-fonce); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; color: var(--prune); line-height: 1.15; letter-spacing: 0; }
strong { font-weight: 600; }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 8px 14px; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  padding: 12px 26px 10px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font: 600 14px/1 var(--texte); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 8px 20px rgba(214, 84, 122, .28); transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.bouton:hover { background: var(--accent-fonce); color: #fff; transform: translateY(-1px); }
.bouton-clair { background: #fff; color: var(--prune); box-shadow: inset 0 0 0 1.5px var(--lilas-moyen); }
.bouton-clair:hover { background: var(--lilas); color: var(--prune); }
.bouton-contour { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.bouton-contour:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.boutons, .boutons-centre { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 1.6em 0 0; }
.gauche .bloc .boutons, .avec-photo .boutons { justify-content: flex-start; }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.lien-fleche svg { width: 18px; height: 18px; }

/* ---------- En-tete ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--lilas); }
.entete-int { max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 12px var(--gouttiere); display: flex; align-items: center; gap: 18px; }
.marque { display: inline-flex; flex-direction: column; color: var(--prune); text-decoration: none; font: 400 34px/0.9 var(--logo); margin: 0; }
.marque span { font: 600 9.5px/1 var(--texte); letter-spacing: .32em; text-transform: uppercase; color: var(--or); margin-top: 6px; }
.menu { margin-left: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu > ul { display: flex; align-items: center; gap: 2px; }
.menu > ul > li { position: relative; }
.menu > ul > li > a, .menu > ul > li > span { display: block; padding: 10px 13px; border-radius: 999px; color: var(--encre); text-decoration: none; font-size: 15.5px; cursor: pointer; white-space: nowrap; }
.menu > ul > li > a:hover, .menu > ul > li > span:hover, .menu > ul > li:focus-within > span { background: var(--lilas); color: var(--prune); }
.menu a[aria-current="page"] { color: var(--accent-fonce); }
.menu .a-sous-menu > span::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.menu li ul {
  position: absolute; z-index: 60; left: -8px; top: calc(100% + 10px); min-width: 270px; padding: 10px;
  background: #fff; border: 1px solid var(--lilas); border-radius: 18px; box-shadow: 0 22px 48px rgba(59, 23, 71, .16);
  visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.menu li ul::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.menu li:hover > ul, .menu li:focus-within > ul { visibility: visible; opacity: 1; transform: none; }
.menu li li a { display: block; padding: 10px 14px; border-radius: 12px; color: var(--encre); text-decoration: none; font-size: 15.5px; }
.menu li li a:hover, .menu li li a[aria-current="page"] { background: var(--lavande); color: var(--prune); }
.menu-case, .menu-bouton, .menu-cta-mobile { display: none; }
.reseaux { display: flex; gap: 2px; margin: 0; }
.reseaux a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--prune-doux); }
.reseaux a:hover { background: var(--lilas); color: var(--prune); }
.reseaux svg { width: 17px; height: 17px; fill: currentColor; }
.entete-cta { min-height: 42px; padding: 11px 20px 9px; font-size: 13px; }

/* ---------- Bandeau des pages : photo pleine largeur ---------- */
.page-tete {
  position: relative; color: #fff;
  background: linear-gradient(100deg, rgba(43, 14, 54, .9) 0%, rgba(59, 23, 71, .72) 45%, rgba(59, 23, 71, .25) 100%), var(--image) center 40% / cover no-repeat;
}
.page-tete-int { max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--gouttiere) clamp(64px, 9vw, 120px); }
.page-tete h1 { color: #fff; margin: 0; font-size: clamp(42px, 6vw, 72px); max-width: 14em; }
.chapeau { max-width: 620px; margin: 18px 0 0; font-size: clamp(17px, 1.6vw, 19.5px); font-weight: 300; color: #f2e7f7; }
.surtitre { margin: 0 0 12px; font: 600 12.5px/1.3 var(--texte); letter-spacing: .24em; text-transform: uppercase; color: var(--or); }

/* ---------- Accueil ---------- */
.hero { color: #fff; background: linear-gradient(100deg, rgba(43, 14, 54, .94) 0%, rgba(59, 23, 71, .82) 50%, rgba(94, 47, 107, .55) 100%), var(--image) center / cover no-repeat; }
.hero-int { max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gouttiere) 150px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero h1 { color: #fff; margin: 0; font-size: clamp(44px, 6.2vw, 80px); line-height: 1.02; }
.hero-chapeau { margin: 22px 0 0; max-width: 540px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 300; color: #f2e7f7; }
.hero-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.hero-portrait { margin: 0; justify-self: center; width: min(100%, 420px); padding: 10px; border-radius: 999px 999px 28px 28px; border: 1px solid rgba(196, 160, 98, .65); }
.hero-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 999px 999px 20px 20px; }

.acces { position: relative; z-index: 2; margin: -100px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.acces-carte { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--rayon); overflow: hidden; text-decoration: none; color: var(--encre); box-shadow: var(--ombre); transition: transform .2s ease, box-shadow .2s ease; }
.acces-carte:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(59, 23, 71, .16); color: var(--encre); }
.acces-carte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.acces-texte { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 46px; font-size: 15px; line-height: 1.45; color: var(--gris); }
.acces-texte strong { font: 400 23px/1.1 var(--titre); color: var(--prune); }
.acces-fleche { position: absolute; left: 18px; bottom: 14px; color: var(--accent); }
.acces-fleche svg { width: 22px; height: 22px; transition: transform .2s ease; }
.acces-carte:hover .acces-fleche svg { transform: translateX(4px); }

.bandeau-sejour { margin: 48px 0 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(20px, 3vw, 32px); border-radius: var(--rayon); background: var(--prune); color: #f2e7f7; box-shadow: var(--ombre); }
.bandeau-sejour img { border-radius: 14px; }
.bandeau-sejour h2 { color: #fff; margin: 0; font-size: clamp(30px, 3.4vw, 42px); }
.bandeau-sejour p { margin: 10px 0 0; }
.sejour-dates { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--or); }
.sejour-dates svg { width: 20px; height: 20px; }

/* ---------- Contenu ---------- */
.contenu { width: min(var(--largeur), calc(100% - 2 * var(--gouttiere))); margin: 0 auto; padding: 48px 0 0; overflow-wrap: break-word; }
.accueil .contenu { padding-top: 0; }
.page-tete + .contenu { margin-top: -56px; padding-top: 0; position: relative; }
.corps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.contenu > .corps:first-child { margin-top: 0; }
.bloc { grid-column: 1 / -1; background: #fff; border-radius: var(--rayon); padding: clamp(24px, 4vw, 52px); box-shadow: var(--ombre); }
.bloc.demi { grid-column: auto; }
.bloc > :last-child, .bloc-texte > :last-child { margin-bottom: 0; }
.bloc h2, .titre-section { margin: 0 0 .7em; font-size: clamp(30px, 3.4vw, 42px); }
.bloc h2::after, .titre-section::after { content: ""; display: block; width: 46px; height: 2px; margin-top: 14px; background: var(--or); }
.centre .bloc:not(.avec-photo) { text-align: center; }
.centre .bloc:not(.avec-photo) h2::after { margin-left: auto; margin-right: auto; }
.centre .bloc:not(.avec-photo) > p, .centre .bloc:not(.avec-photo) > ul { max-width: 68ch; margin-left: auto; margin-right: auto; }
.gauche .bloc > p, .gauche .bloc-texte > p { max-width: 72ch; }
.contenu p { margin: 0 0 1em; }
.contenu ul { margin: 0 0 1em; padding-left: 1.1em; text-align: left; }
.centre .bloc:not(.avec-photo) > ul { display: table; }
.contenu li { margin: .3em 0; }
.contenu li::marker { color: var(--accent); }
.contenu blockquote { margin: 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--or); font: 400 clamp(22px, 2.4vw, 28px)/1.4 var(--titre); color: var(--prune); }
.contenu blockquote p { margin: 0; }
.bloc img { border-radius: 14px; margin: 0 auto 1em; }

/* Carte texte + photo, en alternance */
.bloc.avec-photo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(16px, 2vw, 22px); }
.bloc.avec-photo .photo { margin: 0; height: 100%; }
.bloc.avec-photo .photo img { width: 100%; height: 100%; min-height: 320px; max-height: 560px; object-fit: cover; margin: 0; border-radius: 14px; }
.bloc.avec-photo .bloc-texte { padding: clamp(8px, 2vw, 28px) clamp(4px, 2vw, 28px) clamp(8px, 2vw, 28px) 0; }
.bloc.avec-photo.inverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.bloc.avec-photo.inverse .photo { order: 2; }
.bloc.avec-photo.inverse .bloc-texte { padding: clamp(8px, 2vw, 28px) 0 clamp(8px, 2vw, 28px) clamp(4px, 2vw, 28px); }

.video { position: relative; width: 100%; max-width: 820px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--prune); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.titre-section { text-align: center; }
.titre-section::after { margin-left: auto; margin-right: auto; }
.note { text-align: center; color: var(--gris); font-size: 15.5px; }

/* ---------- Cartes de cours ---------- */
.groupe-cours { margin: 0 0 44px; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.carte-cours { display: flex; flex-direction: column; background: #fff; border-radius: var(--rayon); padding: 26px 24px 24px; box-shadow: var(--ombre); border-top: 3px solid var(--lilas-moyen); }
.carte-public { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 6px 12px 4px; border-radius: 999px; background: var(--lilas); color: var(--prune-doux); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.carte-public svg { width: 15px; height: 15px; margin-top: -2px; }
.carte-cours h3, .carte-stage h3 { margin: 0; font-size: 30px; }
.carte-niveau { margin: 6px 0 0; color: var(--gris); font-size: 15.5px; }
.carte-infos { list-style: none; padding: 0 !important; margin: 18px 0 20px !important; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.4; }
.carte-infos li { display: flex; gap: 10px; align-items: flex-start; margin: 0 !important; }
.carte-infos svg { flex: none; width: 19px; height: 19px; color: var(--accent); margin-top: -1px; }
.carte-infos small { color: var(--gris); font-size: 14px; }
.carte-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.carte-actions .bouton { flex: 1 1 auto; padding-left: 16px; padding-right: 16px; }
.pastille-complet { display: inline-block; padding: 7px 14px 5px; border-radius: 999px; background: var(--prune); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.pastille-complet.grande { background: var(--accent); font-size: 14px; padding: 9px 18px 7px; }
.est-complet { opacity: .92; }

.encart { background: var(--lilas); border-radius: var(--rayon); padding: clamp(22px, 3vw, 34px); }
.encart-attente { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 22px; }
.encart-attente p { margin: 0; max-width: 60ch; }

/* Tableau comparatif des formules */
.formules { margin: 52px 0 0; }
.tableau-defilant { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.formules table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.formules thead th { background: var(--prune); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-align: left; padding: 16px 22px 14px; }
.formules tbody th { text-align: left; font: 400 22px/1.2 var(--titre); color: var(--prune); padding: 16px 22px; }
.formules td { padding: 16px 22px; vertical-align: top; }
.formules tbody tr:nth-child(even) { background: var(--lavande); }
.formules td small { color: var(--gris); font-size: 14px; }
.formules .note { margin-top: 16px; }

/* Cours particuliers */
.tarifs-particuliers { margin: 0 0 22px; background: #fff; border-radius: var(--rayon); padding: clamp(24px, 4vw, 48px); box-shadow: var(--ombre); }
.tarifs-particuliers .note { margin: -8px 0 22px; }
.grille-prix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.prix { text-align: center; background: var(--lavande); border-radius: 16px; padding: 22px 12px; }
.prix:first-child { background: var(--prune); color: #fff; }
.prix:first-child .prix-montant, .prix:first-child .prix-titre { color: #fff; }
.prix:first-child .prix-detail { color: #e3d2ec; }
.prix p { margin: 0; }
.prix-titre { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--prune-doux); }
.prix-montant { font: 400 50px/1.1 var(--titre); color: var(--prune); margin: 6px 0 2px !important; }
.prix-detail { font-size: 14.5px; color: var(--gris); line-height: 1.4; }

/* Cours en ligne */
.duo-en-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; margin: 0 0 22px; }
.duo-en-ligne .duo-visuel { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rayon); box-shadow: var(--ombre); }

/* Stages */
.liste-stages { margin: 0 0 22px; }
.carte-stage { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; background: #fff; border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre); margin: 0 0 18px; }
.carte-stage img { border-radius: 14px; width: 100%; }
.carte-stage-texte { padding: 8px 18px 8px 0; }
.carte-stage .carte-actions .bouton { flex: 0 0 auto; }

/* Sejours */
.sejour { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; background: #fff; border-radius: var(--rayon); padding: clamp(16px, 2vw, 22px); box-shadow: var(--ombre); margin: 0 0 22px; }
.sejour-visuel { position: relative; margin: 0; overflow: hidden; border-radius: 14px; }
.sejour-visuel img { width: 100%; }
.ruban { position: absolute; top: 34px; right: -58px; width: 260px; transform: rotate(45deg); padding: 10px 0 8px; text-align: center; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.sejour-texte { padding: clamp(8px, 2vw, 28px) clamp(4px, 2vw, 28px) clamp(8px, 2vw, 28px) 0; }
.sejour-texte h2 { margin: 0 0 12px; font-size: clamp(34px, 4vw, 50px); }
.puces { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px !important; }
.puces li { margin: 0 !important; padding: 7px 14px 5px; border-radius: 999px; background: var(--lilas); color: var(--prune); font-weight: 600; font-size: 14.5px; }
.sejour-complet { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px; border-radius: 16px; background: #fdf0f4; color: var(--encre); }
.sejour-complet .pastille-complet { flex: none; }
.encart-attente-sejours { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: center; background: var(--prune); color: #eadcf1; margin: 0 0 22px; }
.encart-attente-sejours h2 { color: #fff; margin: 0 0 10px; font-size: clamp(28px, 3vw, 36px); }
.encart-attente-sejours p { margin: 0 0 10px; }
.destinations { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14.5px; color: #cdb8df; }
.destinations span { padding: 4px 11px 2px; border: 1px solid rgba(196, 160, 98, .6); border-radius: 999px; color: #f2e7f7; }

/* Formulaires */
.formulaire { display: grid; gap: 14px; text-align: left; }
.formulaire label { display: grid; gap: 6px; }
.formulaire label > span { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.formulaire input, .formulaire select, .formulaire textarea { width: 100%; font: 400 16.5px/1.4 var(--texte); color: var(--encre); padding: 13px 15px 11px; border: 1.5px solid var(--lilas-moyen); border-radius: 12px; background: #fff; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(214, 84, 122, .18); }
.formulaire .bouton { justify-self: start; }
.champs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulaire-ligne { grid-template-columns: 1fr 1.3fr auto; align-items: end; }
.encart-attente-sejours .formulaire label > span { color: #cdb8df; }
.encart-attente-sejours .formulaire input { border-color: transparent; }

/* A propos : chiffres cles */
.chiffres { list-style: none; padding: 0 !important; margin: 0 0 22px !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.chiffres li { margin: 0 !important; background: #fff; border-radius: var(--rayon); padding: 22px 20px; box-shadow: var(--ombre); text-align: center; }
.chiffres strong { display: block; font: 400 40px/1.1 var(--titre); color: var(--prune); }
.chiffres span { font-size: 15px; color: var(--gris); }

/* Contact */
.contact-grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 22px; margin: 0 0 22px; }
.contact-grille .encart { box-shadow: var(--ombre); }
.contact-direct h2, .contact-formulaire h2 { margin: 0 0 16px; font-size: 34px; }
.contact-direct .acces-titre { margin-top: 30px; }
.contact-ligne { margin: 0 0 6px !important; font: 400 26px/1.3 var(--titre); }
.contact-ligne a { color: var(--prune); text-decoration: none; }
.contact-ligne a:hover { color: var(--accent-fonce); }
.contact-direct .reseaux { margin: 14px 0 0; }
.contact-direct .reseaux a { background: #fff; }
.contact-formulaire { background: #fff; }
.faq { margin: 30px 0 0; max-width: 860px; margin-left: auto; margin-right: auto; }
.faq details { background: #fff; border-radius: 16px; box-shadow: var(--ombre); margin: 0 0 10px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 56px 16px 22px; position: relative; font-weight: 600; color: var(--prune); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 400 28px/1 var(--titre); color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--gris); }

/* Reseaux sociaux */
.liens-reseaux { list-style: none; padding: 0 !important; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 1em auto 0 !important; }
.liens-reseaux li { margin: 0 !important; }
.reseau-carte { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 10px 14px; border-radius: 999px; background: var(--lavande); color: var(--prune); text-decoration: none; font-weight: 600; }
.reseau-carte svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--prune); fill: #fff; margin-top: -2px; }
.reseau-carte:hover { background: var(--lilas); color: var(--prune); }
.reseau-carte.instagram svg { background: linear-gradient(135deg, #f9a03f, #e1306c 50%, #833ab4); }
.reseau-carte.facebook svg { background: #1877f2; }
.reseau-carte.tiktok svg { background: #111; }
.reseau-carte.youtube svg { background: #e62117; }

/* ---------- Pied de page ---------- */
.pied { margin-top: 90px; background: var(--prune); color: #d9c8e4; font-size: 15.5px; }
.pied-int { max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto; padding: 56px var(--gouttiere) 30px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.pied p { margin: 0 0 12px; }
.pied .marque { color: #fff; margin-bottom: 16px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin: 0 0 8px; }
.pied a { color: #f2e7f7; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-titre { font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--or); }
.pied .reseaux a { color: #f2e7f7; }
.pied .reseaux a:hover { background: rgba(255, 255, 255, .1); }
.liens-pied { max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin: 0 auto !important; padding: 18px var(--gouttiere) 28px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }

/* ---------- Tablette ---------- */
@media (max-width: 1180px) {
  .entete-int { flex-wrap: wrap; }
  .entete .reseaux { display: none; }
  .menu { order: 3; width: 100%; margin: 0; }
  .menu-bouton { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 6px 14px; border-radius: 999px; background: var(--lilas); color: var(--prune); font-weight: 600; font-size: 15px; cursor: pointer; }
  .menu-bouton span, .menu-bouton span::before, .menu-bouton span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--prune); position: relative; transition: transform .2s ease; }
  .menu-bouton span { margin-top: -2px; }
  .menu-bouton span::before, .menu-bouton span::after { content: ""; position: absolute; left: 0; }
  .menu-bouton span::before { top: -6px; } .menu-bouton span::after { top: 6px; }
  .menu-case:checked ~ .menu-bouton { background: var(--prune); color: #fff; }
  .menu-case:checked ~ .menu-bouton span { background: transparent; }
  .menu-case:checked ~ .menu-bouton span::before { top: 0; transform: rotate(45deg); background: #fff; }
  .menu-case:checked ~ .menu-bouton span::after { top: 0; transform: rotate(-45deg); background: #fff; }
  .entete-int { position: relative; }
  .menu-bouton { position: absolute; right: var(--gouttiere); top: 18px; }
  .entete-cta { margin-left: auto; margin-right: 112px; }
  .menu > ul { display: none; flex-direction: column; align-items: stretch; margin: 12px 0 4px; padding: 12px 16px 16px; border-radius: 20px; background: radial-gradient(circle at 100% 0, rgba(214, 84, 122, .3), transparent 50%), var(--prune); box-shadow: 0 18px 40px rgba(59, 23, 71, .3); }
  .menu-case:checked ~ ul { display: flex; }
  .menu > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .menu > ul > li:last-child { border-bottom: 0; }
  .menu > ul > li > a, .menu > ul > li > span { color: #fff; font-size: 17px; padding: 13px 4px 11px; border-radius: 0; }
  .menu > ul > li > span { color: var(--or); font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; padding-bottom: 8px; }
  .menu > ul > li > a:hover, .menu > ul > li > span:hover, .menu > ul > li:focus-within > span { background: none; color: #fff; }
  .menu a[aria-current="page"] { color: #ffb9cc !important; }
  .menu .a-sous-menu > span::after { display: none; }
  .menu li ul { position: static; visibility: visible; opacity: 1; transform: none; min-width: 0; padding: 0 0 12px; background: none; border: 0; box-shadow: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .menu li ul::before { display: none; }
  .menu li li a { color: #fff; background: rgba(255, 255, 255, .08); font-size: 15px; padding: 10px 12px 8px; }
  .menu li li a:hover, .menu li li a[aria-current="page"] { background: rgba(255, 255, 255, .16); color: #fff; }
  .menu .menu-cta-mobile { display: block; border: 0; padding-top: 6px; }
  .menu .menu-cta-mobile a { display: block; text-align: center; background: var(--accent); border-radius: 999px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 14px; padding: 14px; }
  .entete { position: relative; }
  .acces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero-int { grid-template-columns: 1fr; padding-bottom: 130px; }
  .hero-portrait { width: min(70%, 320px); order: -1; }
  .hero-texte { text-align: center; }
  .hero-boutons { justify-content: center; }
  .hero-chapeau { margin-left: auto; margin-right: auto; }
  .bloc.avec-photo, .bloc.avec-photo.inverse, .sejour { grid-template-columns: 1fr; }
  .bloc.avec-photo.inverse .photo { order: 0; }
  .bloc.avec-photo .photo img { min-height: 0; max-height: 380px; }
  .bloc.avec-photo .bloc-texte, .bloc.avec-photo.inverse .bloc-texte, .sejour-texte { padding: 4px 12px 14px; }
  .bloc.demi { grid-column: 1 / -1; }
  .duo-en-ligne, .contact-grille, .encart-attente-sejours { grid-template-columns: 1fr; }
  .duo-en-ligne .duo-visuel { max-width: 420px; margin: 0 auto; }
  .grille-prix, .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte-stage { grid-template-columns: 1fr; }
  .carte-stage img { max-width: 360px; margin: 0 auto; }
  .carte-stage-texte { padding: 0 8px 8px; }
  .bandeau-sejour { grid-template-columns: 120px minmax(0, 1fr); }
  .pied-int { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
}

/* ---------- Mobile ---------- */
@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .marque { font-size: 30px; }
  .entete-cta { display: none; }
  .menu-bouton { top: 16px; }
  .page-tete-int { padding-top: 44px; padding-bottom: 84px; }
  .acces { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -90px; }
  .acces-carte:last-child { grid-column: 1 / -1; }
  .acces-carte:last-child img { aspect-ratio: 16 / 7; }
  .acces-texte { padding: 12px 12px 38px; font-size: 13.5px; }
  .acces-texte strong { font-size: 20px; }
  .acces-fleche { left: 12px; bottom: 10px; }
  .corps { gap: 14px; }
  .bloc { border-radius: 18px; padding: 24px 18px; }
  .bloc.avec-photo { padding: 10px; }
  .centre .bloc:not(.avec-photo) > ul { display: block; }
  .encart-attente { flex-direction: column; align-items: flex-start; }
  .carte-cours { padding: 22px 18px 18px; }
  .grille-cartes { grid-template-columns: 1fr; gap: 12px; }
  /* le tableau des formules devient une pile de fiches */
  .tableau-defilant { background: none; box-shadow: none; }
  .formules table, .formules tbody, .formules tr, .formules th, .formules td { display: block; }
  .formules thead { display: none; }
  .formules tbody tr { background: #fff !important; border-radius: 16px; box-shadow: var(--ombre); margin: 0 0 10px; padding: 16px 18px; }
  .formules tbody th, .formules td { padding: 2px 0; }
  .formules tbody th { font-size: 24px; margin-bottom: 4px; }
  .formules td:nth-of-type(1) { color: var(--gris); font-size: 15px; }
  .formules td:nth-of-type(2) { margin-top: 6px; }
  .formules td:nth-of-type(3)::before { content: "Cours d'essai : "; color: var(--gris); }
  .grille-prix { gap: 10px; }
  .prix-montant { font-size: 40px; }
  .champs-duo, .formulaire-ligne { grid-template-columns: 1fr; }
  .bandeau-sejour { grid-template-columns: 1fr; text-align: center; }
  .bandeau-sejour img { max-width: 220px; margin: 0 auto; }
  .bandeau-sejour .sejour-dates { justify-content: center; }
  .ruban { top: 26px; right: -66px; font-size: 12px; }
  .pied-int { grid-template-columns: 1fr; gap: 24px; }
  .contact-ligne { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton, .acces-carte, .acces-fleche svg, .menu li ul { transition: none; }
}

/* Ajustements */
.page-tete + .contenu:has(> .groupe-cours:first-child), .page-tete + .contenu:has(> .liste-stages:first-child) { margin-top: 0; padding-top: 52px; }
.grille-cartes { grid-template-columns: repeat(auto-fit, minmax(250px, 280px)); justify-content: center; }
.faq summary::after { font-family: var(--texte); font-weight: 300; font-size: 30px; }
.ruban { top: 44px; right: -78px; width: 320px; }
.contenu blockquote { font-size: clamp(20px, 2vw, 23px); line-height: 1.5; }
@media (max-width: 680px) {
  .grille-cartes { grid-template-columns: 1fr; }
  .ruban { top: 32px; right: -84px; width: 300px; }
  .hero-portrait { width: min(62%, 260px); }
}

/* ---------- Contact : coordonnees lisibles, sans formulaire ---------- */
.contact-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-direct h2, .contact-acces h2 { margin: 0 0 18px; font-size: 34px; }
.contact-ligne { margin: 0 0 12px !important; font: 600 20px/1.3 var(--texte); letter-spacing: .01em; }
.contact-ligne a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border-radius: 999px; background: #fff; color: var(--prune); text-decoration: none; box-shadow: 0 1px 2px rgba(59, 23, 71, .06); overflow-wrap: anywhere; }
.contact-ligne a:hover { color: var(--accent-fonce); }
.contact-ligne svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--accent); color: #fff; }
.contact-ligne span { padding-top: 3px; }
.contact-acces { box-shadow: var(--ombre); }
.contact-acces p:last-child { margin-bottom: 0; }
@media (max-width: 520px) { .contact-ligne { font-size: 17px; } }
@media (max-width: 760px) { .contact-grille { grid-template-columns: 1fr; } .contact-ligne a { white-space: nowrap; } }

/* ---------- Galerie photos ---------- */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 1.4em 0 0; }
.galerie img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin: 0; border-radius: 14px; }
@media (max-width: 640px) { .galerie { grid-template-columns: 1fr 1fr; gap: 10px; } .galerie img:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; } }
.galerie-duo { grid-template-columns: 1fr 1fr; max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .galerie-duo img:last-child { grid-column: auto; aspect-ratio: 4 / 5; } }

/* =========================================================
   Equilibre violet (octobre 2026) : plus de prune et de lilas
   ========================================================= */
:root { --lavande: #ece0f4; --lilas: #e0cdec; --lilas-moyen: #bfa2d6; }
body { background: linear-gradient(180deg, #e6d6f1 0%, #efe4f6 40%, #e6d6f1 100%); }

/* En-tete prune */
.entete { background: rgba(52, 19, 63, .97); border-bottom: 1px solid rgba(196, 160, 98, .35); }
.marque { color: #fff; }
.menu > ul > li > a, .menu > ul > li > span { color: #f2e7f7; }
.menu > ul > li > a:hover, .menu > ul > li > span:hover, .menu > ul > li:focus-within > span { background: rgba(255, 255, 255, .1); color: #fff; }
.menu a[aria-current="page"] { color: #ffb9cc; }
.entete .reseaux a { color: #e3cfee; }
.entete .reseaux a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.menu-bouton { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
.menu-bouton span, .menu-bouton span::before, .menu-bouton span::after { background: #fff; }
.menu-case:checked ~ .menu-bouton span { background: transparent; }

/* Blocs : filet violet ; blocs sans photo en prune, un bloc photo sur deux en lilas */
.bloc, .carte-cours, .carte-stage, .sejour, .tarifs-particuliers, .acces-carte { box-shadow: 0 1px 2px rgba(59, 23, 71, .08), 0 16px 38px rgba(59, 23, 71, .14); }
.bloc { border-top: 4px solid var(--prune-doux); }
.bloc.avec-photo.inverse { background: #f6eefa; }
:is(.bloc.demi.fonce, .bloc:not(.avec-photo):not(.demi)) { background: linear-gradient(160deg, #4a1d59 0%, var(--prune) 100%); color: #eadcf1; border-top-color: var(--or); }
:is(.bloc.demi.fonce, .bloc:not(.avec-photo):not(.demi)) h2, :is(.bloc.demi.fonce, .bloc:not(.avec-photo):not(.demi)) h3, :is(.bloc.demi.fonce, .bloc:not(.avec-photo):not(.demi)) strong, :is(.bloc.demi.fonce, .bloc:not(.avec-photo):not(.demi)) blockquote { color: #fff; }
:is(.bloc.demi.fonce, .bloc:not(.avec-photo):not(.demi)) a:not(.bouton):not(.reseau-carte) { color: #ffcadb; }
:is(.bloc.demi.fonce, .bloc:not(.avec-photo):not(.demi)) .bouton-clair { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
:is(.bloc.demi.fonce, .bloc:not(.avec-photo):not(.demi)) .bouton-clair:hover { background: rgba(255, 255, 255, .12); color: #fff; }
:is(.bloc.demi.fonce, .bloc:not(.avec-photo):not(.demi)) li::marker { color: var(--or); }
:is(.bloc.demi.fonce, .bloc:not(.avec-photo):not(.demi)) .reseau-carte { background: rgba(255, 255, 255, .1); color: #fff; }
:is(.bloc.demi.fonce, .bloc:not(.avec-photo):not(.demi)) table th, :is(.bloc.demi.fonce, .bloc:not(.avec-photo):not(.demi)) table td { border-color: rgba(255, 255, 255, .15); }

/* Chiffres cles et encarts en prune */
.chiffres li { background: var(--prune); color: #e3cfee; }
.chiffres li strong { color: #fff; }
.chiffres li span { color: #d9c3e6; }
.encart { background: #d9c3e8; }

/* Titres de section sur le fond */
.titre-section { color: var(--prune); }

/* Galeries en format paysage */
.galerie-paysage { grid-template-columns: 1fr; }
.galerie-paysage img { aspect-ratio: 16 / 9; }
.galerie-duo-large { grid-template-columns: 1fr 1fr; }
.galerie-duo-large img { aspect-ratio: 16 / 10; }
@media (max-width: 640px) { .galerie-duo-large { grid-template-columns: 1fr; } .galerie-paysage img, .galerie-duo-large img:last-child { aspect-ratio: 16 / 10; grid-column: auto; } }

/* Accueil : 6 cartes d'acces (3 x 2) */
.acces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.acces-carte img { aspect-ratio: 16 / 10; }
@media (max-width: 760px) { .acces { grid-template-columns: 1fr 1fr; } .acces-carte:last-child { grid-column: auto; } .acces-carte:last-child img { aspect-ratio: 16 / 10; } }
/* Affiches d'evenement : toujours entieres */
.bloc.avec-photo .photo img[src*="/rendez-vous-"], .bloc.avec-photo .photo img[src*="/affiche-"] { object-fit: contain; height: auto; min-height: 0; max-height: none; }

/* Logo de la compagnie (Ballet Egypt'Ciya) */
.logo-compagnie { display: table; margin: 0 auto 1.4em !important; padding: 16px 26px; border-radius: 22px; background: #fbf7fd; box-shadow: 0 10px 26px rgba(20, 4, 28, .25); }
.logo-compagnie img { display: block; width: min(68vw, 340px); height: auto; margin: 0; border-radius: 0; }

/* Cours en ligne : affiche verticale a cote de la fiche */
.duo-en-ligne:has(.affiche) { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; }
.duo-en-ligne .duo-visuel.affiche { height: auto; object-fit: contain; }
@media (max-width: 900px) { .duo-en-ligne:has(.affiche) { grid-template-columns: 1fr; } .duo-en-ligne .duo-visuel.affiche { max-width: 380px; } }

/* Cours en ligne : Ciya et l'ecran Zoom sont a droite du bandeau */
.page-cours-en-ligne .page-tete { background-position: center, 85% 30%; }

/* Cours en ligne : la fiche seule, sur toute la largeur */
.duo-en-ligne:not(:has(img)) { grid-template-columns: 1fr; }
.duo-en-ligne:not(:has(img)) .carte-cours { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: center; }
.duo-en-ligne:not(:has(img)) .carte-cours > :not(.carte-infos):not(.carte-actions) { grid-column: 1; }
.duo-en-ligne:not(:has(img)) .carte-infos { grid-column: 2; grid-row: 1 / span 3; margin: 0 !important; }
.duo-en-ligne:not(:has(img)) .carte-actions { grid-column: 1 / -1; margin-top: 18px; justify-content: flex-start; }
.duo-en-ligne:not(:has(img)) .carte-actions .bouton { flex: 0 0 auto; min-width: 200px; }
@media (max-width: 760px) {
  .duo-en-ligne:not(:has(img)) .carte-cours { display: flex; }
  .duo-en-ligne:not(:has(img)) .carte-infos { margin: 18px 0 20px !important; }
  .duo-en-ligne:not(:has(img)) .carte-actions .bouton { flex: 1 1 auto; min-width: 0; }
}
.duo-en-ligne:not(:has(img)) .carte-public { justify-self: start; }
.page-evenements-spectacles .page-tete { background-position: center, 100% 35%; }
@media (max-width: 680px) { .page-evenements-spectacles .page-tete { background-position: center, 82% 35%; } }

/* Menu plus long (« La compagnie de Ciya ») : le logo ne se replie pas */
.entete .marque { flex: none; }
.marque span { white-space: nowrap; }
@media (max-width: 1320px) and (min-width: 1181px) { .menu > ul > li > a, .menu > ul > li > span { padding-left: 10px; padding-right: 10px; font-size: 15px; } .entete-int { gap: 12px; } }

/* Compagnie : photos de scene en format panoramique */
.galerie-scene img { aspect-ratio: 2.2 / 1 !important; }
@media (max-width: 640px) { .galerie-scene img { aspect-ratio: 2 / 1 !important; } }

/* Logo Ciya Danse dans le pied de page */
.pied-logo { display: inline-block; margin: 0 0 18px !important; padding: 14px 20px; border-radius: 18px; background: #fdfbfa; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }
.pied-logo img { display: block; width: 230px; height: auto; }

/* En-tete : l'entree « Reseaux sociaux » remplace les icones (elles restent dans le pied de page) */
.entete .reseaux { display: none; }
@media (max-width: 1320px) and (min-width: 1181px) { .menu > ul > li > a, .menu > ul > li > span { padding-left: 9px; padding-right: 9px; } }

/* Ciya sur scene : trois portraits verticaux, visages en haut du cadre */
.galerie-trio img { aspect-ratio: 3 / 4; object-position: 50% 20%; }
@media (max-width: 640px) { .galerie-trio { grid-template-columns: 1fr; } .galerie-trio img:last-child { grid-column: auto; aspect-ratio: 3 / 4; } }
.galerie-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .galerie-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .galerie-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .galerie-quatre img:last-child { grid-column: auto; } }