@charset "utf-8";
/* Pages intérieures de Vallis Aurea Training — ce qui est commun à toutes les pages.
   Repris de l'accueil validé (maquette Claude Design « Plein Jour », retouchée par
   photos/integre-maquette.py) : mêmes couleurs, mêmes polices, même en-tête, même pied,
   même éclat lilas derrière les titres de section. Fiche : ../REFERENCE-PAGES-INTERIEURES.md */

:root {
  --creme: #F5F4F1;
  --blanc: #FFFFFF;
  --encre: #0D0D10;
  --violet: #5A3DF5;
  --violet-fonce: #2A1A8C;
  --lilas: #DCD6FF;
  --sable: #E3DCCF;
  --sable-fonce: #D6CDBC;
  --nuit: #1A1A1F;
  --gris-texte: #4A4A55;
  --colonne: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: 'Barlow', sans-serif;
  font-size: 17.5px;
  line-height: 1.6;
}
img { max-width: 100%; }
a { color: var(--violet-fonce); }
a:hover { color: var(--violet); }
p { margin: 0; }
strong { font-weight: 700; }
.sans-coupure { white-space: nowrap; }

.page { overflow: clip; container-type: inline-size; }
.colonne { max-width: var(--colonne); margin: 0 auto; padding: 0 20px; }
.section { position: relative; padding: clamp(64px, 7cqw, 110px) 0; }
.fond-blanc { background: var(--blanc); }
.fond-creme { background: var(--creme); }
.fond-nuit { background: var(--nuit); color: #F5F4F1; }
.fond-sable { background: var(--sable); }

/* ---- En-tête : le même que l'accueil, barre pleine largeur, s'efface en descendant ---- */
.entete { position: sticky; top: 0; z-index: 50; background: var(--creme); transition: transform .28s cubic-bezier(.4,0,.2,1); }
.entete[data-cachee] { transform: translateY(-101%); }
.entete-barre { margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
@media (min-width: 900px) { .entete-barre { padding: 12px 56px; } }
.entete-logo img { height: 54px; width: auto; display: block; }
.entete-nav { display: flex; align-items: center; gap: 30px; font-weight: 600; font-size: 16px; }
.entete-nav a:not(.bouton) { color: var(--encre); text-decoration: none; }
.entete-nav a:not(.bouton):hover { color: var(--violet); }
.entete-nav a[aria-current="page"]:not(.bouton), .menu-tel a[aria-current="page"] { color: var(--violet); }  /* la page en cours (27/10) */
.entete-nav .bouton { min-height: 46px; padding: 0 24px; font-size: 17px; margin-left: 8px; }
.entete-cta .court { display: none; }
.burger, .menu-tel { display: none; }
/* Téléphone, tablette et petits écrans (moins de 1 200 px depuis le 06/11, 820 avant) : le menu passe derrière le bouton à trois traits ; sous
   500 px, le bouton dit « Séance d'essai » (comme l'accueil et le premier site TDB). */
@media (max-width: 1199.98px) {
  .entete-nav a:not(.bouton) { display: none; }
  .entete-nav { gap: 10px; }
  .entete-logo img { height: 48px; }
  .entete-nav .entete-cta { min-height: 44px; padding: 0 18px; font-size: 16.5px; margin-left: 0; white-space: nowrap; }
  .burger {
    display: inline-flex; flex: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: var(--sable); cursor: pointer;
  }
  .burger i { display: block; width: 20px; height: 2px; background: var(--encre); transition: transform .2s; }
  .burger[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .burger[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .burger:focus-visible, .menu-tel a:focus-visible, .entete-cta:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
  .menu-tel:not([hidden]) {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; padding: 4px 20px 24px;
    background: var(--creme); box-shadow: 0 22px 30px rgba(13,13,16,.12);
    box-sizing: border-box; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
  }
  .menu-tel a {
    display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--sable); color: var(--encre); text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: .02em; text-transform: uppercase;
  }
  .menu-tel .menu-tel-cta {
    justify-content: center; margin-top: 20px; min-height: 58px; border: 0; border-radius: 999px; background: var(--violet);
    color: #FFFFFF; font-size: 21px; letter-spacing: .04em;
  }
}
@media (max-width: 499.98px) {
  .entete-cta .long { display: none; }
  .entete-cta .court { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .entete { transition: none; } }

/* ---- Bouton de réservation : le même partout ---- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 58px; padding: 0 32px; border-radius: 999px;
  background: var(--violet); color: #FFFFFF; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 21px;
  letter-spacing: .04em; text-transform: uppercase;
  transition: background .2s;
}
.bouton:hover { background: var(--violet-fonce); color: #FFFFFF; }
.bouton:focus-visible { outline: 3px solid var(--violet-fonce); outline-offset: 3px; }  /* lilas : 1,02 à 1,39:1 sur fond clair (Codex, 27/10) */
.fond-nuit .bouton:focus-visible { outline-color: #FFFFFF; }
.cta { display: flex; justify-content: center; margin-top: 48px; }
.cta-gauche { justify-content: flex-start; }
/* Boutons réservés au téléphone : là où une section devient très longue sur un écran étroit
   (règle du 05/10 : jamais plus de trois écrans sans bouton, sans couper un ensemble) */
.cta-tel { display: none; }
@media (max-width: 599.98px) { .cta.cta-tel { display: flex; } }  /* téléphone seulement : sur tablette, ils tombaient à moins d’un écran des autres */

/* ---- Titres de section : Barlow Condensed 800 capitales, 40 px, éclat lilas derrière ---- */
.titre-section {
  position: relative; isolation: isolate;
  margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(30px, 2.8cqw, 40px); line-height: 1.05; text-transform: uppercase;
  text-wrap: balance;
}
/* --eclat-x : début de la première ligne, posé par commun.js (un titre centré sur deux lignes
   occupe toute la largeur : sans lui, l'éclat flotterait loin du premier mot). */
.titre-section::before {
  content: ""; position: absolute; left: calc(var(--eclat-x, 0px) - .45em); top: -.35em; width: 2.3em; height: 1.7em; z-index: -1;
  background: var(--lilas); clip-path: polygon(18% 0, 100% 30%, 72% 100%, 0 64%); pointer-events: none;
}
.fond-creme .titre-section::before { background: rgba(220, 214, 255, .75); }
.fond-sable .titre-section::before { background: var(--sable-fonce); }
.fond-nuit .titre-section::before { content: none; }
/* Titre centré : sans équilibrage des lignes, la première ligne est la plus longue et l'éclat
   reste accroché au premier mot (avec l'équilibrage, il flottait à gauche du texte). */
.titre-centre { width: fit-content; margin-left: auto; margin-right: auto; text-align: center; text-wrap: wrap; }
.chapo { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: 19px; }
.titre-h3 {
  margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 26px; line-height: 1.1; text-transform: uppercase;
}
.texte > p + p { margin-top: 14px; }

/* Loup des titres d'activité (même pictogramme que l'accueil) */
.picto-loup { display: inline-block; width: 26px; height: auto; vertical-align: -3px; margin-right: 10px; }
/* Titre précédé du loup (comme les titres d'activité de l'accueil et de Functional Fitness) : le loup en
   marge, le texte reste un bloc (le script du téléphone doit pouvoir y coller les mots courts) */
.titre-loup { position: relative; padding-left: 36px; }
.titre-loup .picto-loup { position: absolute; left: 0; top: 1px; margin: 0; }

/* ---- Haut de page des pages intérieures ---- */
.haut { position: relative; padding: clamp(16px, 3cqw, 56px) 0 clamp(56px, 7cqw, 100px); }
.haut-grille { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(32px, 4cqw, 64px); align-items: center; }
/* min-width 0 : un groupe insécable trop large ne doit pas élargir la colonne, c’est le titre qui se réduit */
.haut-grille > * { min-width: 0; }
.haut-titre {
  margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(38px, 4.2cqw, 60px); line-height: 1.02; text-transform: uppercase;
}
.haut-titre .groupe { position: relative; isolation: isolate; white-space: nowrap; }
.haut-titre .groupe::before {
  content: ""; position: absolute; left: -.18em; right: -.12em; top: .12em; bottom: -.02em; z-index: -1;
  background: var(--lilas); clip-path: polygon(2% 12%, 100% 0, 97% 92%, 0 100%);
}
.haut .bouton { margin-top: 34px; }
.haut-photo { position: relative; padding: clamp(40px, 4cqw, 56px) 0 0 clamp(40px, 4cqw, 56px); }
.haut-photo-fond {
  position: absolute; right: -12%; bottom: -18%; width: 70%; aspect-ratio: 1; background: var(--sable);
  clip-path: polygon(20% 0, 100% 30%, 70% 100%, 0 70%);
}
.haut-photo-cadre {
  position: relative; aspect-ratio: 4 / 5; max-height: 560px; margin-left: auto; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%, 0 84%);
}
.haut-photo-cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05) contrast(1.03); }
/* Seconde photo, inclinée, sur le coin bas gauche de la première (choisie par Virginie le 26/10) */
.haut-photo-2 {
  position: absolute; left: -9%; bottom: -46px; width: 46%; aspect-ratio: 1; z-index: 2;
  border: 8px solid #FFFFFF; border-radius: 20px; overflow: hidden; transform: rotate(-5deg);
  box-shadow: 0 22px 44px rgba(13,13,16,.22);
}
.haut-photo-2 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.haut-rond {
  position: absolute; left: 0; top: 0; width: 100px; aspect-ratio: 1; border-radius: 50%;
  background: var(--violet); display: flex; align-items: center; justify-content: center;
}
.haut-rond img { width: 55%; height: auto; display: block; }

/* ---- Fin de page : déclinaison de « Découvrez votre future salle » de l'accueil ---- */
.fin { position: relative; background: var(--sable); overflow: clip; }
.fin-pan {
  position: absolute; right: 0; top: 0; bottom: 0; width: 40%; background: var(--sable-fonce);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 70%); opacity: .9;
}
.fin-grille { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.fin-texte > p { margin-top: 18px; max-width: 560px; }
.fin-texte .bouton { margin-top: 30px; }
.fin-loups { display: flex; justify-content: center; }
.fin-loups img { width: min(100%, 300px); height: auto; display: block; }

/* ---- Pied de page : le même que l'accueil ---- */
/* Texte du pied en #E8E4FF (contraste 4,96:1 sur le violet) : le lilas de l'accueil n'atteint que 4,42:1 (Codex, 26/10). */
.pied { background: var(--violet); color: #E8E4FF; padding: 76px 56px 40px; }
/* Cinq colonnes depuis le 06/11 (Objectifs, comme le menu) : une colonne de liens n'est jamais plus étroite que son plus long lien */
.pied-grille { display: grid; gap: 34px; max-width: var(--colonne); margin: 0 auto; grid-template-columns: 1.5fr repeat(4, minmax(max-content, 1fr)); }
.pied-titre { margin: 0 0 14px; color: #F5F4F1; font-family: 'Barlow', sans-serif; font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; }
.pied a { color: #E8E4FF; text-decoration: none; font-size: 16px; line-height: 2; }
.pied a:hover { color: #F5F4F1; }
.pied-avenir { display: inline-block; font-size: 16px; line-height: 2; cursor: default; }
.pied-logo { display: block; height: 64px; width: auto; margin-bottom: 18px; }
.pied-bas { max-width: var(--colonne); margin: 38px auto 0; padding-top: 22px; border-top: 1px solid rgba(245,244,241,.14); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }
.pied-bas .pied-avenir { font-size: 13.5px; line-height: 1.4; }
.pied-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.pied .lien-tdb { color: inherit; font-size: inherit; line-height: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }

/* ---- Apparition au défilement (désactivée si l'utilisateur réduit les animations) ---- */
/* Une animation et non une transition (29/10) : la transition propre à un bloc (cartes de Tarifs, étapes, lignes…)
   écrasait celle de l'apparition, et ces blocs surgissaient d'un coup. « translate » et non « transform », pour ne
   pas toucher aux effets de survol ni aux inclinaisons. */
.apparait { opacity: 0; }
.apparait.visible { opacity: 1; animation: apparait .6s ease backwards; }
@keyframes apparait { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: reduce) {
  .apparait, .apparait.visible { opacity: 1; animation: none; }
  .bouton { transition: none; }
}

/* ---- Entrée du haut de page au chargement : celle de l'accueil (variante C, Virginie, 29/10) ---- */
/* Le texte arrive de la gauche ligne après ligne, la grande photo apparaît en reculant doucement, le rond au loup
   tourne en toupie avec elle, puis la petite photo monte. « translate », « scale », « rotate » et non « transform » :
   l'inclinaison de la petite photo et le décalage du téléphone restent intacts. */
@keyframes va-gauche { from { opacity: 0; translate: -44px 0; } to { opacity: 1; translate: none; } }
@keyframes va-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes va-zoom { from { scale: 1.14; } to { scale: 1; } }
@keyframes va-monte { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: none; } }
@keyframes va-toupie { from { opacity: 0; rotate: -140deg; scale: .4; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes loups-montent { from { opacity: 0; translate: 0 90px; } to { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: no-preference) {
  .haut-grille > div:first-child > *, .haut > .colonne > .haut-titre { animation: va-gauche .8s cubic-bezier(.2,.7,.2,1) both; }
  .haut-grille > div:first-child > :nth-child(2) { animation-delay: .1s; }
  .haut-grille > div:first-child > :nth-child(3) { animation-delay: .2s; }
  .haut-grille > div:first-child > :nth-child(4) { animation-delay: .3s; }
  .haut-photo-fond, .haut-photo-cadre { animation: va-fondu .9s both; }
  .haut-photo-cadre img { animation: va-zoom 2.2s cubic-bezier(.2,.6,.2,1) both; }
  .haut-photo-2 { animation: va-monte .8s cubic-bezier(.2,.7,.2,1) .6s both; }
  .haut-rond { animation: va-toupie .9s cubic-bezier(.3,1.3,.5,1) both; }
  /* Fin de page : les loups montent du bas quand la section arrive à l'écran (planche
     _design-preview/animations-loups-fin/, choisie par Virginie le 29/10) */
  .fin-loups img { opacity: 0; }
  .fin-loups.visible img { opacity: 1; animation: loups-montent 1.1s cubic-bezier(.2,.8,.25,1.08) .15s backwards; }
}

/* ---- Téléphone et tablette (1 023 px et moins) : règles téléphone des sites TDB du 22/10 ---- */
@media (max-width: 1023.98px) {
  /* Haut de page centré (règle 1), titre à 40 px (règle 2), réduit par commun.js si un groupe ne tient pas */
  .haut { padding: 28px 0 72px; }
  .haut-grille { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .haut-titre { font-size: 40px; line-height: 1.08; }
  .haut .bouton { margin-top: 36px; }  /* 34 px mesurés depuis la dernière ligne du titre (règle 13) */
  /* Le visuel garde la composition de l'ordinateur, en plus petit (règle 3) ; commun.js le place à marges
     égales, mesurées depuis ce qui dépasse le plus */
  .haut-photo { width: min(78%, 440px); margin: 0 auto; transform: translateX(var(--haut-decalage, 0px)); }
  .haut-rond { width: 76px; }
  .haut-photo-2 { border-width: 6px; bottom: -34px; }
  /* Titres de section centrés partout, avec leur introduction (règle 6) ; longs paragraphes à gauche */
  .titre-section { width: fit-content; margin-left: auto; margin-right: auto; text-align: center; text-wrap: wrap; }
  .chapo { text-align: center; }
  /* Boutons centrés, à 34 px du bloc qu'ils concluent (règles 12 et 13) */
  .cta, .cta-gauche { justify-content: center; margin-top: 34px; }
  /* Fin de page : centrée comme la fin de l'accueil sur téléphone, loups sous le texte */
  .fin-grille { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .fin-texte > p { margin-left: auto; margin-right: auto; }
  .fin-texte .bouton { margin-top: 34px; }
  .fin-pan { width: 70%; top: auto; height: 45%; clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); }
  .fin-loups img { width: 210px; }
  /* Pied centré (règle 20) */
  .pied { padding: 56px 20px 34px; text-align: center; }
  .pied-grille { grid-template-columns: 1fr; gap: 28px; }
  .pied-logo { margin-left: auto; margin-right: auto; }
  .pied-grille p { margin-left: auto; margin-right: auto; }
  .pied-bas, .pied-legal { justify-content: center; }
  /* Chaque ligne du bas centrée, l'une sous l'autre (règle 20, mesure du 04/11 : deux blocs côte à côte restaient décalés) */
  .pied-bas { flex-direction: column; align-items: center; gap: 10px; }
}
/* Tablette (700 à 1 023 px) : le haut de page sur deux colonnes, comme à l'ordinateur — texte à gauche, photos
   à droite (essayé sur Perte de poids puis étendu à toutes les pages par Virginie, 27/10) */
@media (min-width: 700px) and (max-width: 1023.98px) {
  .haut { padding: 28px 0 80px; }
  .haut-grille { grid-template-columns: 1.15fr 1fr; gap: 28px; text-align: left; }
  .haut .bouton { margin-top: 36px; }  /* 34 px sous la dernière ligne du titre */
  .haut-photo { width: auto; margin: 0; padding: 34px 0 0 34px; transform: none; }
}
/* Petit téléphone : le bouton de réservation reste sur une ligne (il passait sur deux à 320 px) */
@media (max-width: 359.98px) {
  .bouton:not(.entete-cta) { padding: 0 18px; font-size: 18px; white-space: nowrap; }
}
@media (max-width: 599.98px) {
  .haut-titre { font-size: 40px; }
  .titre-section { font-size: 30px; }
  .titre-h3 { font-size: 22px; }
}

/* Lien d'évitement (accessibilité : premier Tab = aller au contenu, audit 04/11) */
.evitement{position:absolute;left:-9999px;top:16px;z-index:1000;background:#0D0D10;color:#fff;padding:8px 14px;border-radius:8px;font-weight:700;text-decoration:none}.evitement:focus{left:16px}

/* >>> menu-activites (fabriqué par menu_activites.py) */
/* Menu Activites, menu E choisi par Virginie le 27/10 (planche _design-preview/menu-propositions/).
   Meme code sur l'accueil et les pages, fabrique par _design-preview/pages/menu_activites.py */
.ma{position:relative;display:inline-flex;align-items:center}
.ma-bouton{display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:none;font:inherit;color:#0D0D10;cursor:pointer}
.ma-bouton i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.ma-bouton:hover,.ma[data-ouvert] .ma-bouton{color:#5A3DF5}
.ma[data-ouvert] .ma-bouton i{transform:translateY(2px) rotate(-135deg)}
.ma-bouton:focus-visible,.ma-panneau a:focus-visible{outline:3px solid #5A3DF5;outline-offset:3px;border-radius:8px}
.ma-panneau{position:absolute;z-index:60;top:calc(100% + 24px);left:-26px;display:grid;grid-template-columns:max-content 262px;column-gap:24px;padding:20px;
  background:#FFFFFF;border-radius:16px;box-shadow:0 18px 44px rgba(13,13,16,.12),0 0 0 1px rgba(13,13,16,.04);text-align:left;
  font-family:'Barlow',sans-serif;font-weight:600;font-size:16.5px;line-height:1.3;letter-spacing:0;text-transform:none;
  visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s .18s}
.ma[data-ouvert] .ma-panneau{visibility:visible;opacity:1;transform:none;transition:opacity .18s,transform .18s}
.ma-panneau::before{content:"";position:absolute;top:-6px;left:var(--ma-pointe,38px);width:12px;height:12px;background:#FFFFFF;transform:rotate(45deg);border-radius:2px}
.ma-panneau::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--ma-pont,16px)}
.ma-col{display:flex;flex-direction:column;gap:2px}
.ma-titre{padding:4px 10px 8px;font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#4A4A55}
.ma-panneau a.ma-lien{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;white-space:nowrap;color:#0D0D10;text-decoration:none;transition:background .15s,color .15s}
.ma-panneau a.ma-lien:hover,.ma-panneau a.ma-lien[aria-current]{background:#F5F4F1;color:#5A3DF5}
.ma-lien img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;display:block}
.ma-fl{position:relative;width:14px;height:2px;margin-left:auto;background:#5A3DF5;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.ma-fl::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:2px solid #5A3DF5;border-right:2px solid #5A3DF5;transform:rotate(45deg)}
.ma-lien:hover .ma-fl{opacity:1;transform:none}
.ma-essai{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:12px;background:#F5F4F1}
.ma-essai b{font-weight:700;font-size:17px;color:#0D0D10;white-space:nowrap}
.ma-essai span{font-weight:400;font-size:14.5px;line-height:1.5;color:#4A4A55}
.ma-panneau .ma-essai a.ma-essai-bouton{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;
  background:#5A3DF5;color:#FFFFFF;font-weight:700;font-size:14.5px;text-decoration:none;white-space:nowrap}
.ma-panneau .ma-essai a.ma-essai-bouton:hover{background:#2A1A8C;color:#FFFFFF}
/* Un panneau par entree (Activites, Objectifs, 06/11) : deux colonnes.
   Avec Objectifs et Contact, le menu complet ne tient sur une ligne qu'a partir de 1200 px (mesure du 06/11) :
   en dessous, le menu a trois traits, comme au telephone */
@media (max-width:1199.98px){.ma{display:none}}
/* De 1200 a 1280 px, liens plus serres, jamais coupes */
@media (min-width:1200px) and (max-width:1279.98px){
  .entete-nav,header[data-entete] nav{gap:20px!important}
  .entete-nav>a,header[data-entete] nav>a,.ma-bouton{white-space:nowrap}
  .entete-nav .entete-cta{padding:0 18px;margin-left:0}
}
@media (prefers-reduced-motion:reduce){.ma-panneau,.ma-bouton i,.ma-fl{transition:none}}
/* Telephone, dans le menu a trois traits */
.ma-tel{display:flex;flex-direction:column}
.ma-tel-titre{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0;border:0;border-bottom:1px solid #E3DCCF;background:none;color:#0D0D10;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:24px;letter-spacing:.02em;text-transform:uppercase;text-align:left}
.ma-tel-titre:focus-visible{outline:3px solid #5A3DF5;outline-offset:2px}
.ma-plus{position:relative;width:30px;height:30px;border-radius:50%;background:#5A3DF5;flex:none}
.ma-plus::before,.ma-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:#FFFFFF;transition:transform .2s}
.ma-plus::after{transform:rotate(90deg)}
.ma-tel-titre[aria-expanded="true"] .ma-plus::after{transform:rotate(0deg)}
.ma-tel-liste{display:flex;flex-direction:column;padding:6px 0 12px 4px;border-bottom:1px solid #E3DCCF}
.ma-tel-liste[hidden]{display:none}
.ma-tel .ma-tel-liste a.ma-tel-lien{display:flex;align-items:center;gap:12px;min-height:0;padding:7px 0;border:0;border-radius:0;background:none;color:#0D0D10;text-decoration:none;
  font-family:'Barlow',sans-serif;font-weight:600;font-size:17px;letter-spacing:0;text-transform:none}
.ma-tel-lien img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;display:block}
.ma-tel .ma-tel-liste a.ma-tel-lien[aria-current]{color:#5A3DF5}
/* <<< menu-activites */