@font-face {
  font-family: "Sen";
  src: url("assets/Sen-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --moveo-sage: #afc2a0;
  --moveo-sage-pale: #edf2e9;
  /* Teinte de fond de la page, a la place du creme : meme role de neutre, du
     cote vert de la charte plutot que du cote chaud. */
  --moveo-mist: #f4f7f1;
  /* Sauge assombri, reservee au texte : le #afc2a0 officiel plafonne a 1,7:1
     sur la brume et ne peut porter aucun mot. */
  --moveo-sage-deep: #66805c;
  --moveo-terra: #ce7b5b;
  /* Terracotta pastel retravaille : l'ancien #f4e2da tirait sur le rose.
     La teinte descend de 20 degres vers l'orange brule et perd du bleu, ce
     qui la rapproche du terracotta plein sans l'assombrir. */
  --moveo-terra-pale: #f3e0cd;
  --moveo-forest: #2f4a3b;
  --moveo-ink: #0e1512;
  /* Creme officiel de la charte. Il ne porte plus aucune surface depuis que
     le fond de page est passe a la brume sauge, mais il reste de la palette
     et sert de reference si une surface chaude redevient necessaire. */
  --moveo-cream: #f7f4ee;
  --moveo-white: #fff;
  --moveo-muted: #5d6b63;
  --moveo-header-h: 92px;
  --moveo-terra-text: #a85035;
  /* Fond de page. Neutre froid par defaut ; la page osteopathie le remplace
     par un neutre chaud de meme clarte, pour tenir toute la page dans la
     tonalite terracotta sans rien assombrir. */
  --moveo-page: var(--moveo-mist);
  --discipline-accent: var(--moveo-sage);
  /* Deux teintes par discipline, et non une seule.
     `tint` habille les grandes surfaces : sections, grande forme du haut de
     page. `pale` habille les petits blocs d'identite — carte des reperes,
     cadre du portrait — et se tient un cran au-dessous, sans quoi la carte des
     reperes disparaissait dans la forme qui la porte, teinte pour teinte.
     Les deux echelles sont calees l'une sur l'autre en clarte : tint a 0,87
     des deux cotes, pale a 0,83 en sauge et 0,81 en terracotta. Les deux pages
     ont donc le meme poids visuel, chacune dans sa couleur. */
  --discipline-pale: #e6eee0;
  --discipline-tint: var(--moveo-sage-pale);
  /* La grande forme organique du haut de page a sa propre teinte : elle est
     decorative et peut rester plus soutenue que les sections, qui portent du
     texte sur toute leur hauteur. */
  --discipline-forme: var(--moveo-sage-pale);
  /* Pictogrammes du menu compact, traces en SVG et appliques en masque plutot
     qu'ecrits avec les caracteres ☰ (U+2630) et ✕ (U+2715). Ces deux glyphes
     n'ont ni le meme chasse ni les memes approches d'une police a l'autre : ils
     ne tombaient jamais au centre de la pastille, et le passage de l'un a
     l'autre decalait l'icone. Un trace symetrique dans un viewBox carre est
     centre par construction, sur toutes les plateformes.
     Comme la fleche des liens, le masque prend la couleur du texte, donc le
     blanc quand l'en-tete bascule en vert foret. */
  --moveo-menu-barres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M3 18h18'/%3E%3C/svg%3E");
  --moveo-menu-croix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5 19 19'/%3E%3Cpath d='M19 5 5 19'/%3E%3C/svg%3E");
}

/* overflow-x sur html et non sur body. Place sur body, il en fait un conteneur
   de defilement distinct de la fenetre, et le navigateur ne descend plus
   jusqu'a l'ancre lors de l'ouverture d'une URL avec # — cas des liens
   « parcours complet » depuis l'accueil. Sur html, la valeur se propage a la
   fenetre et le comportement reste normal. */
html { overflow-x: hidden; scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--moveo-page);
  color: var(--moveo-ink);
  font-family: "Sen", "Avenir Next", Avenir, "Nunito Sans", sans-serif;
  line-height: 1.65;
}
/* Page osteopathie : toute la page est tenue dans la tonalite creme-terracotta,
   qui est ce qui identifie visuellement la discipline, mais l'echelle entiere
   est adoucie d'un cran. Les fonds precedents, tires du terracotta pale
   #f3e0cd, etaient justes en teinte et trop appuyes en intensite : ils
   ecrasaient tout ce qui se posait dessus.

   Trois niveaux, du plus clair au plus soutenu, tous a clarte elevee :
     page  #fbf6f0  neutre chaud, meme clarte que la brume froide (0,927)
     tint  #faf0e4  grandes sections
     pale  #f5e6d5  blocs d'identite : carte des reperes, cadre du portrait
   Le terracotta plein reste sur les boutons, les prix et les puces. */
body.moveo-discipline--osteo {
  --moveo-page: #fbf6f0;
  --discipline-accent: var(--moveo-terra);
  --discipline-pale: #f5e6d5;
  /* Les sections teintees se calent presque sur le fond de page, au lieu de
     poser une bande nettement plus soutenue. A clarte egale, un aplat chaud
     pese plus lourd a l'oeil qu'un aplat froid : le #faf0e4 precedent avait la
     meme clarte que le sauge pale du cote physiotherapie, et paraissait
     pourtant bien plus present. Il n'y a donc pas de raison de garder les deux
     pages sur la meme valeur — chacune se cale sur ce que sa couleur permet. */
  --discipline-tint: #fbf5ee;
  --discipline-forme: #faf0e4;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
/* Un numero de telephone et une adresse e-mail se lisent d'un bloc. Coupes par
   un retour a la ligne — « (+41 (0)77 » sur une ligne, « 502 78 81) » sur la
   suivante — ils deviennent penibles a lire et a recopier, et le lien perd sa
   forme reconnaissable. Ils passent donc entiers a la ligne suivante.
   Le selecteur porte sur le protocole du lien et non sur une classe : tout
   nouveau tel: ou mailto: du site est couvert sans reglage. Les pastilles sont
   exclues, leur libelle etant un intitule — « Ecrire un e-mail » — et non
   l'adresse elle-meme. */
a[href^="tel:"]:not(.moveo-pill),
a[href^="mailto:"]:not(.moveo-pill) { white-space: nowrap; }
[id] { scroll-margin-top: calc(var(--moveo-header-h) + 16px); }
:focus-visible { outline: 3px solid var(--moveo-terra); outline-offset: 4px; }

/* Meme largeur maximale que l'accueil. A 1320 px, les pages disciplines
   etaient plus etroites de 34 px a 1440 px de large, et de 200 px sur un
   grand ecran : en passant de l'accueil a une discipline, le contenu se
   resserrait visiblement. */
.moveo-shell { width: min(1520px, calc(100% - clamp(48px, 6vw, 120px))); margin-inline: auto; }
.moveo-header {
  position: sticky;
  z-index: 50;
  top: 0;
  /* Fond opaque. En translucide, l'en-tete prenait la couleur de ce qui
     passait dessous — la grande forme terracotta du haut de page, notamment —
     et se detachait du reste comme un bandeau d'une autre teinte. */
  background: var(--moveo-page);
  transition: background-color .3s ease, color .3s ease;
}
/* En butee de page, l'en-tete n'a aucun fond : rien ne coupe le haut de la
   page en deux, et le logo, affiche en grand, descend de quelques pixels pour
   se poser dans le vide au-dessus du titre. Des qu'on defile, le fond
   apparait, le logo reprend sa taille et sa place : a ce moment-la du contenu
   passe sous la barre et doit etre masque, ce qu'un fond transparent ne fait
   pas.
   Le decalage passe par `transform` et non par une marge : la hauteur de la
   barre ne bouge pas, donc ni la mise en page ni `--moveo-header-h`, dont
   depend le calage des ancres.
   Cette regle est placee avant `--dark` a dessein : en bas de page, les deux
   classes pourraient coexister sur une page courte, et c'est le vert foret qui
   doit alors gagner. */
.moveo-header--haut { background: transparent; }
.moveo-header--haut .moveo-logo { transform: translateY(14px); }

.moveo-header__inner {
  display: flex;
  min-height: var(--moveo-header-h);
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.moveo-logo { position: relative; flex: 0 0 auto; padding: 12px 8px; transition: transform .28s ease; }
/* Deux tailles de logo. En butee de page il s'affiche en grand ; des qu'on
   defile, il revient a 218 px pour laisser la place a la navigation. Le ratio
   du fichier est 397 × 73 : a 290 px de large il fait 53 px de haut et tient
   dans les 92 px de la barre, marges comprises. La classe est posee par
   assets/site.js ; sans le script, le logo reste a sa taille compacte. */
.moveo-logo img { width: 218px; height: auto; transition: width .28s ease, opacity .3s ease; }
.moveo-header--haut .moveo-logo img { width: 290px; }
/* Les deux versions du logo sont superposees et on croise leur opacite. La
   blanche est decorative : le texte alternatif est porte par la couleur. */
.moveo-logo__blanc { position: absolute; top: 12px; left: 8px; opacity: 0; }

/* Bas de page en vert foret : l'en-tete bascule pour rester lisible. La classe
   est posee par assets/site.js. Sans le script, l'en-tete reste creme.

   Fond opaque, contrairement a l'etat creme qui est translucide : les angles
   arrondis de la section verte laissent voir le creme de la page derriere eux,
   et une barre semi-transparente le revelerait. */
.moveo-header--dark { background: var(--moveo-forest); color: var(--moveo-white); }
.moveo-header--dark .moveo-logo__couleur { opacity: 0; }
.moveo-header--dark .moveo-logo__blanc { opacity: 1; }
.moveo-header--dark .moveo-mobile summary { border-color: rgba(255, 255, 255, .38); color: var(--moveo-white); }
.moveo-nav { display: flex; align-items: center; gap: clamp(17px, 2vw, 30px); font-size: .91rem; }
.moveo-nav a { text-decoration: none; }
.moveo-nav a:not(.moveo-pill) { position: relative; padding-block: 8px; }
.moveo-nav a:not(.moveo-pill)::after {
  position: absolute;
  right: auto;
  bottom: 2px;
  left: calc(50% - 22px);
  width: 44px;
  height: 2px;
  border-radius: 99px;
  background: var(--moveo-terra);
  content: "";
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.moveo-nav a:hover::after,
.moveo-nav a:focus-visible::after,
.moveo-nav a[aria-current="page"]::after { transform: scaleX(1); }
.moveo-pill {
  display: inline-flex;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  padding: 12px 23px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--moveo-terra);
  color: var(--moveo-white);
  font-weight: 650;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease;
}
.moveo-pill:hover,
.moveo-pill:focus-visible { background: #b9684a; transform: translateY(-2px); }
.moveo-pill--ghost { border-color: rgba(47, 74, 59, .3); background: transparent; color: var(--moveo-forest); }
.moveo-pill--ghost:hover,
.moveo-pill--ghost:focus-visible { background: var(--moveo-forest); color: white; }
.moveo-mobile { display: none; }
.moveo-mobile summary {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(47, 74, 59, .28);
  border-radius: 50%;
  color: var(--moveo-forest);
  cursor: pointer;
  display: grid;
  font-size: 0;
  list-style: none;
  place-items: center;
}
.moveo-mobile summary::before {
  /* Positionne en absolu, et non centre par la grille. Le <summary> contient
     aussi son libelle en texte : dans un conteneur grille, ce texte forme un
     second element, place sur une deuxieme rangee. Les deux rangees se
     partageaient la hauteur et le pictogramme se retrouvait centre dans la
     rangee du haut, donc trop haut dans la pastille. Sa taille de police est a
     zero, le decalage passait donc inapercu a la mesure mais se voyait a
     l'oeil. Hors flux, le pictogramme ne depend plus que de la pastille. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 21px;
  height: 21px;
  background-color: currentColor;
  content: "";
  transform: translate(-50%, -50%);
  -webkit-mask: var(--moveo-menu-barres) center / contain no-repeat;
  mask: var(--moveo-menu-barres) center / contain no-repeat;
}
/* Le pictogramme suit l'etat : trois barres pour ouvrir, une croix pour
   fermer. Seule l'image du masque change, la boite ne bouge pas. */
.moveo-mobile[open] summary::before {
  -webkit-mask-image: var(--moveo-menu-croix);
  mask-image: var(--moveo-menu-croix);
}
.moveo-mobile summary::-webkit-details-marker { display: none; }
.moveo-mobile__panel {
  position: absolute;
  top: 82px;
  right: 18px;
  display: grid;
  min-width: 250px;
  gap: 13px;
  padding: 24px;
  border-radius: 28px 8px 28px 28px;
  background: var(--moveo-white);
  box-shadow: 0 22px 60px rgba(14, 21, 18, .13);
}
/* Couleur de texte fixee et non heritee. Le panneau est clair mais vit dans
   l'en-tete : quand celui-ci bascule en vert foret en bas de page, son blanc
   descendait jusqu'ici et les liens devenaient blancs sur blanc. */
.moveo-mobile__panel { color: var(--moveo-ink); }
.moveo-mobile__panel a { text-decoration: none; }

.moveo-page h1,
.moveo-page h2,
.moveo-page h3,
.moveo-page p { margin-top: 0; }
.moveo-page h1,
.moveo-page h2,
.moveo-page h3 {
  font-weight: 520;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.moveo-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--moveo-forest);
  font-family: "Sen", "Avenir Next", Avenir, "Nunito Sans", sans-serif;
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.moveo-kicker::before {
  width: 28px;
  height: 2px;
  /* flex: 0 0 28px obligatoire. Le surtitre est un inline-flex : sans
     cette declaration, le filet est un element flexible comme un autre et
     se fait comprimer des que le libelle est long. Il mesurait 17 px sous
     « Deux regards complementaires », 10 px sur les pages disciplines et
     28 px partout ailleurs, d'ou des filets de longueurs differentes d'une
     section a l'autre. */
  flex: 0 0 28px;
  border-radius: 99px;
  /* Sauge et non terracotta. Ce filet revient a chaque section : en orange, il
     faisait a lui seul une bonne part de la couleur percue sur la page, pour un
     element purement decoratif. Le terracotta reste sur ce qui appelle une
     action ou porte un prix. */
  background: var(--moveo-sage);
  content: "";
}
.moveo-eyebrow { margin-bottom: 15px; color: var(--moveo-forest); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.moveo-muted { color: var(--moveo-muted); }

.moveo-discipline-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 126px) 0 clamp(82px, 10vw, 142px);
}
.moveo-discipline-hero::before {
  position: absolute;
  top: -28%;
  right: -10%;
  width: min(58vw, 780px);
  aspect-ratio: 1;
  border-radius: 43% 57% 61% 39% / 46% 39% 61% 54%;
  background: var(--discipline-forme);
  content: "";
  transform: rotate(11deg);
}
.moveo-discipline-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .72fr);
  align-items: center;
  gap: clamp(42px, 8vw, 118px);
}
.moveo-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; color: var(--moveo-muted); font-size: .88rem; }
.moveo-breadcrumb a { text-underline-offset: 4px; }
/* « Physiothérapie » ne doit jamais être coupé en deux : le trait d'union
   conditionnel qui le scindait en « Physio- / thérapie » a été retiré du
   balisage, et le titre passe en `nowrap`. La taille se calcule alors sur la
   largeur de sa colonne (bloc @supports en fin de feuille) pour qu'il tienne
   sur une ligne jusqu'au plus petit écran. Le clamp() en vw ci-dessous est le
   repli pour les navigateurs sans unités de conteneur : il est volontairement
   prudent, puisque lui ne peut pas mesurer la colonne. */
.moveo-discipline-hero__title { container-type: inline-size; }
.moveo-discipline-hero h1 { max-width: 820px; margin-bottom: 26px; font-size: clamp(2.6rem, 6vw, 7rem); white-space: nowrap; }
.moveo-discipline-hero h1 em { color: var(--moveo-terra-text); font-style: normal; }
.moveo-discipline-hero__lead { max-width: 720px; margin-bottom: 36px; color: var(--moveo-muted); font-size: clamp(1.12rem, 1.7vw, 1.34rem); }
.moveo-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.moveo-quick-card {
  position: relative;
  padding: clamp(34px, 5vw, 58px);
  overflow: hidden;
  border-radius: 54px 142px 54px 118px;
  background: var(--discipline-pale);
  box-shadow: 0 24px 60px rgba(47, 74, 59, .09);
}
/* La carte des reperes garde la meme forme sur les deux pages. L'arrondi en
   miroir de la page osteopathie posait le grand rayon de 142 px en haut a
   gauche, la ou commence le titre : a hauteur de la premiere ligne, le bord de
   la carte passait a 55 px du bord alors que le texte demarre a 24 px, et le
   « Q » de « Quelques reperes » etait mange. Le miroir reste sur le cadre du
   portrait, qui ne contient pas de texte. */
.moveo-quick-card h2 { position: relative; margin-bottom: 30px; color: var(--moveo-forest); font-size: 1.8rem; }
.moveo-facts { position: relative; margin: 0; }
.moveo-facts div { display: grid; grid-template-columns: 1fr 1.45fr; gap: 18px; padding: 17px 0; border-top: 1px solid rgba(47, 74, 59, .17); }
.moveo-facts dt { color: var(--moveo-muted); font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.moveo-facts dd { margin: 0; font-weight: 600; }

.moveo-section { padding: clamp(82px, 10vw, 144px) 0; }
.moveo-section--white { background: var(--moveo-white); }
.moveo-section--tint { background: var(--discipline-tint); }
.moveo-section__heading { display: grid; grid-template-columns: .64fr 1.36fr; gap: clamp(38px, 7vw, 96px); align-items: start; margin-bottom: clamp(52px, 7vw, 92px); }
.moveo-section__heading h2 { max-width: 820px; margin-bottom: 20px; font-size: clamp(2.7rem, 5vw, 5rem); }
.moveo-section__heading p { max-width: 690px; margin-bottom: 0; color: var(--moveo-muted); font-size: 1.08rem; }
.moveo-intro-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.moveo-intro-copy { max-width: 720px; }
.moveo-intro-copy p { color: var(--moveo-muted); font-size: 1.08rem; }
.moveo-intro-copy p:first-child { color: var(--moveo-ink); font-size: clamp(1.35rem, 2vw, 1.72rem); line-height: 1.45; }
.moveo-principles { display: grid; gap: 18px; }
.moveo-principle { padding: 26px 28px; border: 1px solid rgba(47, 74, 59, .14); border-radius: 28px 28px 28px 8px; background: var(--moveo-page); }
.moveo-principle strong { display: block; margin-bottom: 7px; color: var(--moveo-forest); font-size: 1.08rem; }
.moveo-principle p { margin-bottom: 0; color: var(--moveo-muted); font-size: .96rem; }

.moveo-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* Huit motifs sur la page physiotherapie : quatre cartes par rangee sur grand
   ecran donnent deux lignes completes. Le gap grandit legerement avec la
   largeur disponible pour garder un vrai espace entre les blocs. */
.moveo-discipline--physio .moveo-reasons {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 1.8vw, 30px);
}
.moveo-reason {
  min-height: 250px;
  padding: 32px;
  border: 1px solid rgba(47, 74, 59, .12);
  border-radius: 38px 38px 38px 10px;
  background: var(--moveo-white);
}
.moveo-reason:nth-child(even) { border-radius: 38px 10px 38px 38px; }
.moveo-reason__index { display: block; margin-bottom: 46px; color: var(--moveo-terra-text); font-size: .78rem; font-weight: 800; letter-spacing: .1em; }
.moveo-reason h3 { margin-bottom: 12px; font-size: 1.42rem; }
.moveo-reason p { margin-bottom: 0; color: var(--moveo-muted); font-size: .96rem; }
.moveo-reason__examples { color: var(--moveo-terra-text); font-weight: 700; }
/* Filet vertical en sauge de hauteur fixe : la note physio et la note osteo
   gardent ainsi le meme repere visuel, quel que soit leur nombre de lignes. */
.moveo-note { position: relative; margin: clamp(38px, 4vw, 54px) 0 0; padding-left: 22px; color: var(--moveo-muted); }
.moveo-note::before { position: absolute; top: .15em; left: 0; width: 3px; height: 44px; border-radius: 99px; background: var(--moveo-sage); content: ""; }
.moveo-note p { margin: 0 0 12px; }
.moveo-note p:last-child { margin-bottom: 0; }

.moveo-journey { counter-reset: journey; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.moveo-step { position: relative; padding: 40px clamp(26px, 4vw, 52px) 40px 0; border-top: 1px solid rgba(47, 74, 59, .22); }
.moveo-step + .moveo-step { padding-left: clamp(26px, 4vw, 52px); border-left: 1px solid rgba(47, 74, 59, .16); }
.moveo-step::before {
  counter-increment: journey;
  display: grid;
  width: 43px;
  height: 43px;
  margin-bottom: 42px;
  border-radius: 50%;
  background: var(--moveo-forest);
  color: white;
  content: counter(journey, decimal-leading-zero);
  font-size: .76rem;
  font-weight: 800;
  place-items: center;
}
.moveo-step h3 { margin-bottom: 14px; font-size: 1.5rem; }
.moveo-step p { margin-bottom: 0; color: var(--moveo-muted); }

/* `stretch` et non `start` : les deux cartes d'une meme rangee se terminent
   a la meme hauteur, quel que soit le volume de texte de chacune. */
.moveo-practical-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(34px, 6vw, 82px); align-items: stretch; }
/* Un seul dessin d'angles pour toutes les cartes, y compris la sombre :
   l'arrondi en miroir de la variante accent cassait la rangee en deux. */
.moveo-practical-card { padding: clamp(34px, 5vw, 56px); border-radius: 42px 42px 42px 12px; background: var(--moveo-white); }
.moveo-practical-card--accent { background: var(--moveo-forest); color: white; }
/* Carte seule sur sa rangee, en pleine largeur. */
.moveo-practical-card--wide { margin-top: 22px; }
.moveo-practical-card h3 { margin-bottom: 26px; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.moveo-practical-card p { color: var(--moveo-muted); }
.moveo-practical-card--accent p { color: rgba(255, 255, 255, .72); }
.moveo-practical-card--accent strong { color: var(--moveo-white); font-weight: 750; }
.moveo-price-list { margin: 32px 0 0; }
.moveo-price-list div { display: grid; grid-template-columns: 1fr auto; gap: 22px; padding: 18px 0; border-top: 1px solid rgba(47, 74, 59, .16); }
.moveo-price-list dt { font-weight: 650; }
.moveo-price-list dd { margin: 0; color: var(--moveo-terra-text); font-weight: 800; text-align: right; }
.moveo-practical-card--accent .moveo-price-list div { border-top-color: rgba(255, 255, 255, .2); }
.moveo-practical-card--accent .moveo-price-list dd { color: white; }
.moveo-checklist { display: grid; gap: 15px; margin: 28px 0 0; padding: 0; list-style: none; }
.moveo-checklist li { position: relative; padding-left: 28px; color: inherit; }
.moveo-checklist li::before { position: absolute; top: .62em; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--discipline-accent); content: ""; }

.moveo-profile {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  column-gap: clamp(42px, 8vw, 120px);
  row-gap: clamp(28px, 3vw, 42px);
  align-items: center;
}
.moveo-profile__kicker { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; }
.moveo-profile__copy { grid-column: 2; grid-row: 2; }
.moveo-profile__visual {
  position: relative;
  display: grid;
  grid-column: 1;
  grid-row: 2;
  min-height: 560px;
  overflow: hidden;
  border-radius: 44px 160px 44px 130px;
  background: var(--discipline-pale);
  place-items: center;
}
.moveo-discipline--osteo .moveo-profile__visual { border-radius: 160px 44px 130px 44px; }
/* Ces portraits sont propres aux pages de discipline. Les photos en pied de
   l'accueil restent des fichiers et des cadrages independants. */
.moveo-profile__visual .moveo-profile__portrait { position: absolute; display: block; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: 1; }
/* Sur desktop, le texte rend la deuxieme ligne de la grille beaucoup plus
   haute que le portrait. Le cadre reste donc accroche en haut de cette ligne,
   exactement au niveau du prenom, plutot que d'etre centre verticalement. */
@media (min-width: 901px) {
  .moveo-profile__visual { align-self: start; }
}
.moveo-profile__copy h2 { margin-bottom: 8px; font-size: clamp(2.8rem, 5vw, 5.2rem); }
.moveo-profile__role { margin-bottom: 28px; color: var(--moveo-terra-text); font-weight: 700; }
.moveo-profile__lead { max-width: 690px; color: var(--moveo-muted); font-size: 1.08rem; }
/* Mot personnel du therapeute, ecrit a la premiere personne. Il remplace la
   presentation redigee a la troisieme personne qui occupait cette place.
   Plusieurs paragraphes, donc un espacement propre entre eux. */
.moveo-profile__perso p { max-width: 690px; margin-bottom: 16px; color: var(--moveo-muted); font-size: 1.08rem; }
.moveo-profile__perso p:last-child { margin-bottom: 0; }
.moveo-credentials { display: grid; gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; }
.moveo-credentials li { padding: 15px 0 15px 26px; border-top: 1px solid rgba(47, 74, 59, .14); }
 /* Pastille ronde plutot que la fleche « vers l'exterieur » utilisee avant :
    cette fleche annonce un depart vers une autre page, or ces lignes ne sont
    pas des liens — elles enumerent un parcours. Elle a donc ete remplacee par
    une puce neutre, en sauge sur les deux pages pour qu'elles se ressemblent. */
.moveo-credentials li::before {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: -26px;
  margin-right: 17px;
  border-radius: 50%;
  background-color: var(--moveo-sage);
  content: "";
  vertical-align: .12em;
}
/* Second niveau du parcours : distinctions et affiliations rattachees a un
   diplome. Elles ne figurent que sur cette page ; l'accueil ne montre que les
   entrees de premier niveau. Puce plus petite, pas de filet — la hierarchie se
   lit a l'indentation et au retrait du trait. */
.moveo-credentials ul { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }
.moveo-credentials ul li { padding: 0 0 0 22px; border-top: 0; color: var(--moveo-muted); font-size: .95rem; }
.moveo-credentials ul li::before {
  width: 6px;
  height: 6px;
  margin-left: -22px;
  margin-right: 16px;
  background-color: rgba(47, 74, 59, .34);
}

/* ---------------------------------------------------------------------------
   Encart d'annulation

   Meme composant que sur la page d'accueil, a dessein : c'est la meme
   information, le visiteur doit la reconnaitre d'une page a l'autre. Il ferme
   la section « En pratique » des deux disciplines.

   Bandeau pleine largeur : une condition qui engage financierement le patient
   ne doit pas se lire comme une carte d'information parmi d'autres. Le titre
   tient la colonne de gauche, le detail la droite. Terracotta pale plutot que
   rouge : la charte n'a pas de couleur d'alerte.
--------------------------------------------------------------------------- */
.moveo-alert {
  display: grid;
  align-items: center;
  margin-top: clamp(38px, 5vw, 62px);
  padding: clamp(34px, 4vw, 54px) clamp(28px, 4vw, 64px);
  border: 1px solid rgba(168, 80, 53, .28);
  border-radius: 34px 110px 34px 110px;
  background: var(--moveo-terra-pale);
  gap: clamp(26px, 5vw, 78px);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}
.moveo-alert__head { display: flex; align-items: center; gap: clamp(16px, 2vw, 24px); }
.moveo-alert__badge {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: var(--moveo-terra-text);
  color: var(--moveo-white);
  font-size: 1.45rem;
  font-weight: 700;
  place-items: center;
}
/* « rendez-vous » se coupait au trait d'union : le groupe insecable force la
   coupure au mot precedent. */
.moveo-alert h3 { margin: 0; color: var(--moveo-forest); font-size: clamp(1.45rem, 2.4vw, 2.15rem); }
.moveo-alert h3 span { white-space: nowrap; }
.moveo-alert p { max-width: 620px; margin: 0; color: var(--moveo-forest); font-size: 1.08rem; }
.moveo-alert p + p { margin-top: 14px; }
.moveo-alert p strong { color: var(--moveo-terra-text); }

@media (max-width: 900px) {
  .moveo-alert { border-radius: 28px 70px 28px 70px; gap: 22px; grid-template-columns: 1fr; }
}

/* Bouton de reservation dedie au therapeute de la page, avec son lien direct.
   Les autres boutons « Prendre rendez-vous » du site pointent sur le lien de
   reservation general. */
.moveo-profile__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: clamp(26px, 3vw, 36px); }

.moveo-next {
  position: relative;
  overflow: hidden;
  padding: clamp(88px, 11vw, 150px) 0;
  /* Rayon reduit de moitie : au-dela, la courbe depasse sous l.en-tete une fois
     en butee de page et laisse voir un croissant creme dans l.angle. */
  border-radius: clamp(40px, 4.5vw, 60px) clamp(40px, 4.5vw, 60px) 0 0;
  background: var(--moveo-forest);
  color: white;
}
.moveo-next > img {
  position: absolute;
  right: clamp(20px, 4vw, 70px);
  bottom: clamp(24px, 5vw, 70px);
  width: min(42vw, 620px);
  opacity: .08;
  transform: rotate(-10deg);
}
.moveo-next__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; gap: 60px; align-items: end; }
.moveo-next h2 { max-width: 790px; margin-bottom: 22px; font-size: clamp(3rem, 5.8vw, 5.8rem); }
.moveo-next p { max-width: 660px; margin-bottom: 0; color: rgba(255, 255, 255, .72); font-size: 1.08rem; }
.moveo-next .moveo-pill { justify-self: start; background: white; color: var(--moveo-forest); }
.moveo-next .moveo-pill:hover { background: var(--moveo-terra-pale); }


/* ---------------------------------------------------------------------------
   Panneau de contact

   La colonne de droite ne portait qu'un bouton flottant : beaucoup de vide, et
   les canaux secondaires y passaient inapercus. Elle devient un panneau clair
   pose sur le vert foret. Le fond blanc et les filets entre les rangees lui
   donnent la lecture d'un bloc de contact groupe, ce que deux liens isoles
   n'obtenaient pas.

   L'ordre interne tient la priorite du parcours : reservation en premier, en
   bouton plein terracotta et pleine largeur, puis l'e-mail, puis le telephone.
   Sur telephone la grille se replie en une colonne et cet ordre est conserve.

   L'adresse est ecrite en clair au-dessus du bouton, et pas seulement derriere
   le mailto : sur ordinateur, qui n'utilise qu'un webmail clique le lien sans
   qu'il se passe quoi que ce soit. L'adresse visible et le bouton copier sont
   le repli de ce cas.

   Le panneau etant clair, il retablit les couleurs de bouton d'origine : le
   terracotta pour la reservation et la variante contour pour l'e-mail. La
   section, elle, force du blanc sur toutes ses pastilles.
--------------------------------------------------------------------------- */
.moveo-cta-panel {
  display: grid;
  gap: 20px;
  padding: clamp(26px, 3vw, 38px);
  border-radius: 30px 90px 30px 90px;
  background: white;
  color: var(--moveo-forest);
  box-shadow: 0 24px 60px rgba(14, 21, 18, .16);
}
.moveo-cta-panel__kicker { color: var(--moveo-muted); font-size: .73rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
/* Filet entre les rangees : c'est lui qui donne au panneau sa lecture de bloc
   structure plutot que de liste de liens. */
.moveo-cta-panel__row { display: grid; gap: 7px; padding-top: 17px; border-top: 1px solid rgba(47, 74, 59, .18); }
.moveo-cta-panel__label { color: var(--moveo-muted); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.moveo-cta-panel__value { color: var(--moveo-forest); font-weight: 650; overflow-wrap: anywhere; }
/* Rangee avec pictogramme : le glyphe suit la couleur du texte et n'est pas
   une image, donc rien a charger et rien a recolorer si la palette bouge. */
.moveo-cta-panel__value--icone { display: inline-flex; align-items: center; gap: 10px; }
.moveo-cta-panel__value--icone svg { width: 21px; height: 21px; flex: 0 0 21px; }
.moveo-cta-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 5px; }
/* Retablissement des couleurs d'origine des pastilles, que la section sombre
   force en blanc. Meme specificite qu'elle, mais plus loin dans le fichier. */
.moveo-next .moveo-cta-panel .moveo-pill { justify-self: stretch; background: var(--moveo-terra); color: white; }
.moveo-next .moveo-cta-panel .moveo-pill:hover, .moveo-next .moveo-cta-panel .moveo-pill:focus-visible { background: #b9684a; }
.moveo-next .moveo-cta-panel .moveo-pill--ghost { justify-self: start; border-color: rgba(47, 74, 59, .3); background: transparent; color: var(--moveo-forest); }
.moveo-next .moveo-cta-panel .moveo-pill--ghost:hover, .moveo-next .moveo-cta-panel .moveo-pill--ghost:focus-visible { background: var(--moveo-forest); color: white; }
.moveo-cta-panel a:not(.moveo-pill) { color: var(--moveo-forest); }
.moveo-copy {
  min-height: 38px;
  padding: 7px 16px;
  /* .3 d'opacite donne 3,1:1 sur blanc, au-dessus du seuil de 3:1 exige pour
     la limite d'un composant, et s'aligne sur la pastille contour a cote. */
  border: 1px solid rgba(47, 74, 59, .3);
  border-radius: 999px;
  background: transparent;
  color: var(--moveo-forest);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.moveo-copy[hidden] { display: none; }
.moveo-copy:hover, .moveo-copy:focus-visible { background: var(--moveo-forest); color: white; }
/* Zone d'annonce du resultat de la copie. Vide, elle est retiree du flux : un
   element flex vide consommerait quand meme l'ecart du conteneur. */
.moveo-copy__annonce { color: var(--moveo-muted); font-size: .82rem; }
.moveo-copy__annonce:empty { display: none; }

.moveo-footer { padding: 42px 0; background: var(--moveo-forest); color: rgba(255, 255, 255, .62); }
/* Le logo a ete retire : il reprenait a l'identique celui de l'en-tete, et sa
   colonne poussait les trois blocs utiles vers la droite. Ceux-ci occupent
   maintenant toute la largeur, a parts egales et centres, et forment une
   rangee posee juste au-dessus de la ligne des mentions — le pied de page se
   lit comme un seul groupe tasse en bas plutot que comme deux etages. */
.moveo-footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, .18); text-align: center; }
.moveo-footer h2 { margin: 0 0 10px; color: white; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.moveo-footer p { margin: 0 0 5px; font-size: .9rem; }
.moveo-footer a { color: white; overflow-wrap: anywhere; }
.moveo-footer__bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 30px; font-size: .8rem; }

/* Toutes les pages reprennent exactement la rangee de bas de l'accueil. Le
   motif appartient au bloc de contact juste au-dessus : ne pas en ajouter un
   second dans le footer evite les logos coupes et les superpositions. */
.moveo-footer--accueil { padding: 0 0 54px; line-height: 1.6; }
.moveo-footer--accueil .moveo-footer__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  padding-top: 36px;
  border-top-color: rgba(255, 255, 255, .2);
}
.moveo-footer--accueil h2 { margin: 0 0 12px; font-size: .73rem; font-weight: 700; letter-spacing: .13em; line-height: 1.08; }
.moveo-footer--accueil p { margin: 0 0 5px; color: rgba(255, 255, 255, .7); font-size: .92rem; }
.moveo-footer--accueil a { overflow-wrap: normal; }
.moveo-footer__copyright,
.moveo-footer__legal {
  align-self: end;
  color: rgba(255, 255, 255, .52);
  font-size: .8rem;
}
.moveo-footer__legal a { color: inherit; }

/* La navigation des pages disciplines compte 7 entrees — « Accueil » et
   « Therapeutes » s'ajoutent — plus le bouton de rendez-vous, et le logo a
   grandi de 190 a 218 px. Le seuil de bascule vers le menu compact suit :
   1100 px ne suffisait plus, il passe a 1300 px. L'accueil, qui n'a pas
   l'entree « Accueil », bascule un peu plus tot, a 1240 px. */
.moveo-nav a { white-space: nowrap; }
@media (max-width: 1300px) {
  .moveo-nav { display: none; }
  .moveo-mobile { display: block; }
}
@media (max-width: 1240px) {
  .moveo-discipline--physio .moveo-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .moveo-discipline-hero__grid,
  .moveo-intro-grid,
  .moveo-practical-grid,
  .moveo-profile { grid-template-columns: 1fr; }
  .moveo-profile__copy,
  .moveo-profile__visual { grid-column: auto; grid-row: auto; }
  .moveo-quick-card { max-width: 650px; }
  .moveo-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moveo-profile__visual { min-height: 520px; }
  .moveo-next__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .moveo-footer--accueil .moveo-shell { width: min(100% - 32px, 620px); }
  .moveo-footer--accueil .moveo-footer__grid { grid-template-columns: 1fr; gap: 26px; }
  .moveo-footer--accueil .moveo-footer__copyright { order: 2; }
  .moveo-footer--accueil .moveo-footer__legal { order: 3; }
}
@media (max-width: 720px) {
  :root { --moveo-header-h: 78px; }
  .moveo-shell { width: min(100% - 32px, 620px); }
  .moveo-header__inner { min-height: var(--moveo-header-h); }
  .moveo-logo img { width: 172px; }
  .moveo-header--haut .moveo-logo img { width: 210px; }
  .moveo-mobile__panel { top: 72px; }
  .moveo-discipline-hero { padding-top: 50px; }
  .moveo-discipline-hero::before { top: 35%; right: -55%; width: 125vw; }
  .moveo-discipline-hero h1 { font-size: clamp(3rem, 15vw, 4.8rem); }
  .moveo-section__heading { grid-template-columns: 1fr; gap: 20px; }
  .moveo-section__heading h2 { font-size: clamp(2.2rem, 11vw, 2.7rem); }
  .moveo-reasons { grid-template-columns: 1fr; }
  .moveo-discipline--physio .moveo-reasons { grid-template-columns: 1fr; }
  .moveo-reason { min-height: auto; }
  .moveo-reason__index { margin-bottom: 30px; }
  .moveo-journey { grid-template-columns: 1fr; }
  .moveo-step { padding: 32px 0; }
  .moveo-step + .moveo-step { padding-left: 0; border-left: 0; }
  .moveo-step::before { margin-bottom: 24px; }
  .moveo-profile__visual { min-height: 460px; }
  .moveo-next { border-radius: 44px 44px 0 0; }
  .moveo-cta-panel { border-radius: 26px 70px 26px 70px; }
  .moveo-footer__grid { grid-template-columns: 1fr; gap: 26px; }
  .moveo-footer__bottom { flex-direction: column; align-items: center; }
}
@media (max-width: 430px) {
  .moveo-actions { align-items: stretch; flex-direction: column; }
  .moveo-actions .moveo-pill { width: 100%; }
  .moveo-facts div,
  .moveo-price-list div { grid-template-columns: 1fr; gap: 5px; }
  .moveo-price-list dd { text-align: left; }
  .moveo-quick-card,
  .moveo-practical-card { padding: 30px 24px; }
}

/* Le titre de discipline se dimensionne sur la largeur de sa colonne, jamais
   sur celle de l'ecran : il tient sur une ligne a toutes les tailles.
   Le facteur est cale sur « Physiothérapie », le plus long des deux. */
@supports (font-size: 1cqi) {
  .moveo-discipline-hero h1 { font-size: min(7rem, 12.4cqi); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Pages légales — mentions légales et confidentialité.

   Colonne de lecture étroite : ce sont des textes qu'on parcourt pour trouver
   une information précise, pas des pages de présentation. Les blocs marqués
   « à confirmer » sont volontairement visibles afin que chaque decision soit
   expliquee et puisse etre tranchee pendant la relecture.
--------------------------------------------------------------------------- */
.moveo-legal-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(32px, 4vw, 52px); background: var(--moveo-page); }
.moveo-legal-hero h1 { max-width: 900px; margin: 0 0 18px; font-size: clamp(2.4rem, 5vw, 4rem); }
.moveo-legal-hero p { max-width: 640px; margin: 0; color: var(--moveo-muted); font-size: 1.06rem; }
.moveo-legal-hero time { display: block; margin-top: 22px; color: var(--moveo-muted); font-size: .88rem; }

.moveo-legal { padding: clamp(48px, 6vw, 82px) 0 clamp(72px, 9vw, 120px); background: var(--moveo-white); }
.moveo-legal__body { max-width: 760px; }
.moveo-legal__body h2 {
  margin: clamp(44px, 5vw, 66px) 0 16px;
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(47, 74, 59, .16);
  color: var(--moveo-forest);
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
}
.moveo-legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.moveo-legal__body h3 { margin: 30px 0 10px; color: var(--moveo-forest); font-size: 1.12rem; }
.moveo-legal__body p { margin: 0 0 16px; color: var(--moveo-muted); }
.moveo-legal__body ul { margin: 0 0 18px; padding-left: 22px; color: var(--moveo-muted); }
.moveo-legal__body li { margin-bottom: 9px; }
.moveo-legal__body a { color: var(--moveo-terra-text); font-weight: 650; }
.moveo-legal__body dl { margin: 0 0 18px; }
.moveo-legal__body dt { margin-top: 12px; color: var(--moveo-forest); font-weight: 700; }
.moveo-legal__body dd { margin: 3px 0 0; color: var(--moveo-muted); }

/* Marqueur de validation : chaque bloc nomme la decision encore ouverte et
   explique pourquoi elle compte avant le retrait des encadres. */
.moveo-todo {
  display: block;
  margin: 4px 0 18px;
  padding: 15px 20px;
  border-left: 3px solid var(--moveo-terra-text);
  border-radius: 0 14px 14px 0;
  background: var(--moveo-terra-pale);
  color: var(--moveo-forest);
  font-size: .95rem;
}
.moveo-todo::before { content: "À confirmer · "; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.moveo-todo > span { display: block; margin-top: 8px; color: var(--moveo-muted); }

.moveo-legal__callout {
  margin: 34px 0;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 26px 60px 26px 60px;
  background: var(--moveo-sage-pale);
}
.moveo-legal__callout p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Page introuvable — 404.html

   Elle reprend telle quelle la composition du haut des pages disciplines :
   une colonne de texte, une carte a angles organiques a droite, et la grande
   forme sauge en fond. Rien de nouveau n'est invente ici, pour que la page
   d'erreur ne donne jamais l'impression d'appartenir a un autre site — c'est
   precisement la crainte du visiteur qui tombe dessus.

   Elle occupe la hauteur de la fenetre moins l'en-tete : sur une page aussi
   courte, sans cette hauteur minimale, le pied de page vert remontait jusque
   sous le titre.
--------------------------------------------------------------------------- */
.moveo-404 {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--moveo-header-h));
  overflow: hidden;
  padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 9vw, 120px);
}
/* Meme forme organique que le haut des pages disciplines, retournee vers la
   gauche : la colonne de texte est ici plus courte, et la tache posee a droite
   laissait le titre sur un fond nu. */
.moveo-404::before {
  position: absolute;
  top: -22%;
  right: -14%;
  width: min(62vw, 820px);
  aspect-ratio: 1;
  border-radius: 57% 43% 39% 61% / 39% 46% 54% 61%;
  background: var(--moveo-sage-pale);
  content: "";
  transform: rotate(-8deg);
}
.moveo-404__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .7fr);
  align-items: center;
  gap: clamp(42px, 8vw, 110px);
}

/* Le titre dit « Erreur 404 » d'un seul tenant pour un lecteur d'ecran, mais
   se lit en deux etages a l'oeil : le mot en petites capitales au-dessus, le
   nombre en tres grand dessous. C'est le nombre que le visiteur reconnait, et
   c'est lui qui doit porter la page. */
.moveo-404__titre { margin-bottom: clamp(26px, 3vw, 38px); }
.moveo-404__mot {
  display: block;
  margin-bottom: 6px;
  color: var(--moveo-forest);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -.02em;
}
.moveo-404__nombre {
  display: block;
  color: var(--moveo-forest);
  font-size: clamp(6rem, 21vw, 15rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .82;
}
.moveo-404__lead {
  max-width: 640px;
  margin-bottom: 14px;
  color: var(--moveo-ink);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.35;
}
.moveo-404__texte { max-width: 620px; margin-bottom: 32px; color: var(--moveo-muted); font-size: 1.08rem; }

/* La carte reprend le dessin de la carte des reperes des pages disciplines,
   avec la meme reserve : le grand rayon reste en haut a droite, loin du titre,
   pour ne pas manger sa premiere lettre. */
.moveo-404__carte h2 { font-size: 1.55rem; }
.moveo-404__liens { margin: 0; padding: 0; list-style: none; }
.moveo-404__liens li { border-top: 1px solid rgba(47, 74, 59, .17); }
.moveo-404__liens a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  color: var(--moveo-forest);
  font-weight: 650;
  text-decoration: none;
}
/* Chevron trace en deux traits plutot qu'ecrit avec un caractere : meme
   raisonnement que pour les pictogrammes du menu, un glyphe fleche n'a ni le
   meme dessin ni le meme alignement d'une police a l'autre. Il glisse vers la
   droite au survol, ce qui suffit a signaler qu'on part ailleurs. */
.moveo-404__liens a::after {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-top: 2px solid var(--moveo-terra-text);
  border-right: 2px solid var(--moveo-terra-text);
  content: "";
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.moveo-404__liens a:hover::after,
.moveo-404__liens a:focus-visible::after { transform: rotate(45deg) translate(3px, -3px); }
.moveo-404__liens a:hover,
.moveo-404__liens a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.moveo-404__carte-pill { display: inline-flex; margin-top: 26px; }

@media (max-width: 900px) {
  .moveo-404__grid { grid-template-columns: 1fr; }
  .moveo-404 { min-height: 0; align-items: start; }
  .moveo-404__carte { max-width: 650px; }
}
@media (max-width: 720px) {
  .moveo-404::before { top: 42%; right: -50%; width: 125vw; }
}
@media (max-width: 430px) {
  .moveo-404__carte { padding: 30px 24px; }
  .moveo-404__carte-pill { display: flex; justify-content: center; width: 100%; }
}

/* ---------------------------------------------------------------------------
   Annonce d'ouverture — bandeau seul

   Sur l'accueil, l'annonce prend la place de l'illustration du hero et se
   resserre en bandeau au defilement. Ces pages n'ont pas de hero : il n'y a
   donc rien a deformer, et l'annonce y est directement l'etat replie, ancre
   en bas. Meme vert #2f4a3b que la section contact, meme asymetrie d'angles
   que .moveo-alert, meme libelle de bouton : le visiteur qui arrive ici
   depuis l'accueil retrouve exactement l'objet qu'il y a laisse.

   Un filet clair plutot qu'une ombre appuyee : le bandeau est du meme vert
   que la section contact et se pose sur elle en bas de page. Une ombre large
   y creusait un halo qui le faisait paraitre plus clair qu'elle.

   Pas de bouton de fermeture, a la demande de l'equipe : l'annonce doit
   rester lue jusqu'a l'ouverture.

   `data-annonce-fin` est le premier jour ou elle n'a plus lieu d'etre : passe
   cette date, assets/site.js la retire de lui-meme. C'est aussi cette date qui
   donne le decompte.

   z-index 40, sous l'en-tete a 50 : le panneau du menu compact doit passer
   devant le bandeau, pas dessous.
--------------------------------------------------------------------------- */
.moveo-annonce--bandeau {
  position: fixed;
  z-index: 40;
  right: clamp(14px, 3vw, 34px);
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px 34px 16px 34px;
  background: var(--moveo-forest);
  box-shadow: 0 16px 40px rgba(19, 34, 26, .17);
  color: var(--moveo-white);
}
/* 10 px et non 12 : le bandeau fait alors exactement les 64 px de l'etat
   replie de l'accueil, et l'objet ne change pas de taille en changeant de
   page. */
.moveo-annonce__barre { padding: 10px 16px 10px 22px; }
.moveo-annonce__barre-ligne {
  display: flex;
  align-items: center;
  gap: 15px;
  white-space: nowrap;
}
.moveo-annonce__pastille {
  margin: 0;
  padding: 5px 12px 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .13);
  color: var(--moveo-white);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.moveo-annonce__pastille span { font-size: 1.18rem; }
.moveo-annonce__bref {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Le bouton du site tel quel : meme terracotta et meme libelle que
   .moveo-pill. Le blanc y tient a 3,18:1, sous le seuil AA de 4,5 — c'est le
   contraste de tous les boutons du site, a corriger partout ou nulle part.
   --moveo-terra-text (#a85035) le porterait a 5,1:1. */
.moveo-annonce__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 9px 18px;
  border-radius: 99px;
  background: var(--moveo-terra);
  color: var(--moveo-white);
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.moveo-annonce__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(120, 52, 30, .42); }
.moveo-annonce__cta:focus-visible { outline: 2px solid var(--moveo-white); outline-offset: 3px; }

/* Reserve de place en bas de page : le bandeau flotte au-dessus du pied de
   page, et ses derniers liens ne doivent pas se retrouver dessous. La reserve
   disparait avec l'annonce, le 5 octobre. */
body:has(.moveo-annonce) .moveo-footer__grid,
body:has(.moveo-annonce) .moveo-contact__base { padding-bottom: clamp(96px, 12vw, 118px); }

/* Sous 900 px, le bandeau s'ancre au bord bas et prend toute la largeur.
   Pose a quelques pixels du bord, son ombre se faisait couper net, et aucun
   ecart n'y met a l'abri : la barre d'adresse des navigateurs mobiles mord sur
   la fenetre de mise en page et sa hauteur change d'un telephone a l'autre.
   Ancre, il n'y a plus rien a couper sous lui. */
@media (max-width: 899px) {
  .moveo-annonce--bandeau {
    right: 0;
    bottom: 0;
    left: 0;
    border-width: 1px 0 0;
    border-radius: 18px 36px 0 0;
    box-shadow: 0 -6px 20px rgba(19, 34, 26, .14);
  }
  .moveo-annonce__barre { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .moveo-annonce__barre-ligne { gap: 11px; }
  .moveo-annonce__bref { flex: 1 1 auto; font-size: .7rem; letter-spacing: .04em; }
  .moveo-annonce__cta { flex: 0 0 auto; padding: 9px 15px; font-size: .8rem; }
  body:has(.moveo-annonce) .moveo-footer__grid,
  body:has(.moveo-annonce) .moveo-contact__base { padding-bottom: 122px; }
}
/* Sous 430 px le bandeau tient sur deux lignes et non trois : le decompte et
   la date se partagent la premiere, le bouton prend la seconde. En
   `flex-basis: 100%`, la date passait seule sur une ligne et le bandeau
   montait a 145 px au lieu de 65. */
@media (max-width: 430px) {
  .moveo-annonce__barre-ligne { flex-wrap: wrap; gap: 10px 12px; }
  .moveo-annonce__bref { flex: 1 1 auto; }
  .moveo-annonce__cta { flex: 1 1 100%; }
}
}

/* Logos de marque : Bootstrap Icons 1.13.1 (licence dans assets/). */
.moveo-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.moveo-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
}
.moveo-socials a:hover { background: rgba(175, 194, 160, .18); }
.moveo-socials a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.moveo-socials svg { display: block; width: 22px; height: 22px; flex-shrink: 0; }

.moveo-footer .moveo-socials a { color: #fff; }