/* quentin-basse.fr, feuille de style unique.
   Ecrite a la main plutot que compilee depuis Tailwind : le brief interdit
   degrades, ombres portees, lueurs et animations decoratives, or ce sont
   exactement les utilitaires qu'un framework rend faciles a poser sans y
   penser. Ici, il n'y a pas d'ombre disponible. Cela supprime aussi l'etape
   npm du deploiement et laisse la page sous 15 Ko de CSS. */

:root {
  --bleu-nuit: #16233b;
  --bleu-nuit-clair: #223353;
  --jaune: #f2c230;
  --bois: #c8a063;
  --creme: #f7f4ed;
  --ardoise: #5a6473;
  --blanc: #ffffff;
  --trait: #ded8cc;
  --trait-sombre: #35435f;

  --largeur: 1120px;
  --largeur-etroite: 720px;
  --gouttiere: 1.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--bleu-nuit);
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
}

h1,
h2,
h3,
.marque-nom,
.tarif-prix,
.grille-ligne-titre {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: none;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2rem, 5.5vw, 3.4rem);
}

h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  margin-top: 0;
}

h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1.1em;
}

a {
  color: inherit;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Accessibilite */

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--jaune);
  color: var(--bleu-nuit);
  padding: 0.7rem 1rem;
  z-index: 50;
}

.saut-contenu:focus {
  left: 0;
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 2px;
}

/* Mise en page */

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.conteneur-etroit {
  max-width: var(--largeur-etroite);
}

.section {
  padding: 4.5rem 0;
}

.section-creme {
  background: var(--creme);
}

.section-sombre {
  background: var(--bleu-nuit);
  color: var(--creme);
}

.section-sombre a {
  color: var(--jaune);
}

.chapeau {
  max-width: 46ch;
  color: var(--ardoise);
}

.section-sombre .chapeau {
  color: #b9c2d1;
}

.note {
  font-size: 0.94rem;
  color: var(--ardoise);
}

/* En-tete */

.entete {
  background: var(--bleu-nuit);
  color: var(--creme);
  border-bottom: 1px solid var(--trait-sombre);
}

.entete-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

.marque {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.marque-nom {
  font-size: 1.2rem;
  color: var(--jaune);
}

.marque-suite {
  font-size: 0.9rem;
  color: #b9c2d1;
}

.bouton-menu {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px solid var(--trait-sombre);
  color: var(--creme);
  padding: 0.45rem;
  cursor: pointer;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.menu a {
  text-decoration: none;
  font-size: 0.96rem;
  color: var(--creme);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.menu a:hover,
.menu a[aria-current='page'] {
  border-bottom-color: var(--jaune);
}

.menu-appel a {
  color: var(--jaune);
}

/* Boutons */

.bouton {
  display: inline-block;
  background: var(--jaune);
  color: var(--bleu-nuit);
  text-decoration: none;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--jaune);
}

.bouton:hover {
  background: var(--bois);
  border-color: var(--bois);
}

.section-sombre .bouton,
.entete .bouton {
  color: var(--bleu-nuit);
}

.bouton-petit {
  padding: 0.5rem 0.95rem;
  font-size: 0.94rem;
}

.bouton-secondaire {
  background: none;
  color: inherit;
  border: 1px solid currentColor;
}

.bouton-secondaire:hover {
  background: none;
  border-color: var(--bois);
  color: var(--bois);
}

.lien-souligne {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--jaune);
}

.lien-appel {
  text-decoration: none;
  border-bottom: 2px solid var(--jaune);
}

/* Fil d'Ariane */

.fil-ariane {
  font-size: 0.86rem;
  color: var(--ardoise);
  padding: 1rem 0 0;
}

.fil-ariane a {
  text-decoration: none;
  border-bottom: 1px solid var(--trait);
}

/* Photos.
   Aucun arrondi, aucune ombre : les photos sont posees a plat, cadrees, et rien
   n'est ajoute autour. L'aplat d'attente occupe exactement la place de la photo
   a venir, ce qui garde le CLS a zero. */

.photo {
  width: 100%;
  object-fit: cover;
}

.photo-cadre {
  border: 1px solid var(--trait);
}

.photo-attente {
  background: var(--bleu-nuit-clair);
  color: #9fb0cc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  font-size: 0.85rem;
  border: 1px solid var(--trait-sombre);
}

.photo-attente span {
  max-width: 28ch;
}

/* Sur fond bleu nuit, l'emplacement doit rester lisible comme une reserve. */
.section-sombre .photo-attente,
.hero .photo-attente {
  border-color: var(--ardoise);
}

/* Hero */

/* Le filet du bas separe le hero de la section sombre qui le suit : sans lui,
   les deux aplats bleu nuit se confondent et le hero n'a plus de bord. */
.hero {
  position: relative;
  background: var(--bleu-nuit);
  color: var(--creme);
  border-bottom: 1px solid var(--trait-sombre);
}

/* Le hero tient en deux colonnes : le texte, puis la photo prise depuis la
   place du bassiste. Elle est verticale et le reste, parce que c'est ainsi
   qu'elle se lit. Sur petit ecran, la photo passe au-dessus du texte : elle
   doit rester la premiere chose vue. */
.hero-grille {
  display: grid;
  gap: 2rem;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.hero-image {
  order: -1;
}

.hero-texte {
  padding-top: 0;
  padding-bottom: 0;
}

.hero h1 {
  max-width: 18ch;
}

.hero-sous-titre {
  max-width: 52ch;
  font-size: 1.1rem;
  color: #cdd5e1;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 1.8rem;
}

/* Deux colonnes, asymetriques sur grand ecran */

.deux-colonnes {
  display: grid;
  gap: 2.5rem;
}

/* Le filet separe les deux colonnes. Une fois empilees sur petit ecran, un
   filet a gauche indenterait la seconde sans rien separer : il passe au-dessus. */
.colonne-non {
  border-top: 1px solid var(--trait);
  padding-top: 2rem;
}

@media (min-width: 900px) {
  .colonne-non {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--trait);
    padding-left: 2rem;
  }
}

.liste-nue {
  list-style: none;
  margin: 0 0 1.2em;
  padding: 0;
}

.liste-nue li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--trait);
}

.section-sombre .liste-nue li {
  border-bottom-color: var(--trait-sombre);
}

.colonne-non .liste-nue li {
  color: var(--ardoise);
}

.phrase-forte {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.3;
  max-width: 34ch;
  margin: 0 0 1rem;
}

.phrase-perimetre {
  margin-top: 3rem;
  border-top: 3px solid var(--jaune);
  padding-top: 1.5rem;
  max-width: 44ch;
}

/* Texte et photo cote a cote */

.texte-photo {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.texte-photo-texte p {
  max-width: 54ch;
}

/* Une fois empile sur petit ecran, le texte passe avant l'image. Sur le bloc
   conviction de l'accueil, c'est l'inverse qu'il faut : la photo doit rester la
   premiere chose vue sous le bandeau. */
.texte-photo-image-dabord .texte-photo-image {
  order: -1;
}

@media (min-width: 900px) {
  .texte-photo-image-dabord .texte-photo-image {
    order: 0;
  }
}

/* Grille d'accords : l'element signature.
   Cases carrees, filets fins, une etape par case, quatre par ligne comme sur
   une vraie grille de repetition.
   La grille est volontairement etroite : etalee sur les 1120 px du conteneur,
   une case carree fait 270 px de cote et n'est plus qu'un carre vide. A 720 px
   elle retombe sur la taille d'une vraie mesure. Le bloc est cale a gauche, ce
   qui laisse du blanc a droite au lieu de le centrer mollement. */

.grille-accords {
  margin-top: 2.5rem;
  max-width: 720px;
}

.grille-ligne-titre {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.9rem;
  color: var(--ardoise);
  margin: 2rem 0 0.6rem;
}

/* Le filet qui prolonge le libelle joue le role d'un repere de repetition. */
.grille-ligne-titre::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--trait);
}

.grille-ligne {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--bleu-nuit);
}

.grille-case {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 0.9rem 1rem;
  border-right: 1px solid var(--bleu-nuit);
  border-bottom: 1px solid var(--bleu-nuit);
}

.grille-case:nth-child(2n) {
  border-right: 0;
}

.grille-case:nth-last-child(-n + 2) {
  border-bottom: 0;
}

/* Numero de mesure, comme au-dessus d'une portee : present, jamais bruyant. */
.grille-mesure {
  position: absolute;
  top: 0.55rem;
  left: 0.7rem;
  font-size: 0.72rem;
  color: var(--bois);
  line-height: 1;
}

/* L'etape occupe la place de l'accord, au centre de la mesure. */
.grille-etape {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 15ch;
}

/* Tarifs en version courte, sur l'accueil.
   Deux encarts cote a cote, puis la seance decouverte sur toute leur largeur.
   Des filets, pas des cartes : aucune ombre, aucun arrondi, aucun degrade. */

.tarifs-simple {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--trait-sombre);
  border: 1px solid var(--trait-sombre);
  margin: 2rem 0 1.5rem;
  max-width: 30rem;
}

.encart {
  background: var(--bleu-nuit);
  padding: 1.1rem 1.1rem 1.3rem;
}

.encart-large {
  grid-column: 1 / -1;
  border-top: 3px solid var(--jaune);
}

.encart-nom {
  margin: 0;
  font-size: 0.88rem;
  color: #b9c2d1;
  line-height: 1.35;
}

.encart-prix {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.1;
  margin: 0.35rem 0 0;
  color: var(--jaune);
}

.encart-unite {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #b9c2d1;
}

/* La note complete n'a pas sa place dans un encart de rappel : elle vit sur la
   page tarifs. Seule la premiere phrase est gardee, et seulement au-dela du
   pliage mobile ou la place existe. */
.encart-note {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #96a2b6;
  display: none;
}

@media (min-width: 560px) {
  .encart-note {
    display: block;
  }
}

/* Sur fond clair, si la version courte servait ailleurs qu'en section sombre. */
.section:not(.section-sombre) .tarifs-simple {
  background: var(--trait);
  border-color: var(--trait);
}

.section:not(.section-sombre) .encart {
  background: var(--blanc);
}

.section:not(.section-sombre) .encart-nom {
  color: var(--ardoise);
}

.section:not(.section-sombre) .encart-prix {
  color: var(--bleu-nuit);
}

.section:not(.section-sombre) .encart-note,
.section:not(.section-sombre) .encart-unite {
  color: var(--ardoise);
}

/* Tarifs */

.grille-tarifs {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: 1px solid var(--trait);
}

.tarif {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--trait);
}

.tarif-avant {
  border-left: 4px solid var(--jaune);
  padding-left: 1.2rem;
}

.tarif-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
}

.tarif-nom {
  margin: 0;
  font-size: 1.1rem;
}

.tarif-prix {
  margin: 0;
  font-size: 1.35rem;
  white-space: nowrap;
}

.tarif-note {
  margin: 0.4rem 0 0;
  color: var(--ardoise);
  max-width: 62ch;
}

/* FAQ */

.faq {
  margin-top: 2rem;
  border-top: 1px solid var(--trait);
  max-width: 68ch;
}

.faq-item {
  border-bottom: 1px solid var(--trait);
}

.faq-item summary {
  cursor: pointer;
  padding: 1rem 0;
  font-weight: 600;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::before {
  content: '+';
  display: inline-block;
  width: 1.4rem;
  color: var(--bois);
}

.faq-item[open] summary::before {
  content: '\2013';
}

.faq-reponse {
  padding: 0 0 1rem 1.4rem;
  color: var(--ardoise);
}

/* Maillage des pages locales : une liste, pas une rangee de cartes. */

.liste-reseau {
  margin-top: 1.5rem;
  columns: 2;
  column-gap: 3rem;
  max-width: 720px;
}

.liste-reseau li {
  break-inside: avoid;
}

@media (max-width: 599px) {
  .liste-reseau {
    columns: 1;
  }
}

/* Bande de vignettes */

.vignettes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Espace eleve.
   Meme vocabulaire graphique que le site public : des filets, aucun ombrage,
   aucune carte flottante. La distinction se fait par le contenu, pas par une
   interface differente. */

.page-espace .pied {
  padding: 2rem 0 1.5rem;
}

.menu-espace ul {
  gap: 1.2rem;
}

.bloc-note,
.seance-resume {
  border-left: 3px solid var(--jaune);
  padding-left: 1rem;
  margin: 0.5rem 0 1rem;
}

.liste-seances {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--trait);
  max-width: 68ch;
}

.seance {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--trait);
}

.seance-date {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

.seance-titre {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 1rem 0 0;
  color: var(--ardoise);
}

/* Discussion : la provenance se lit au decalage et au filet, pas a la couleur
   seule, qui ne dit rien a qui ne la distingue pas. */
.discussion {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.bulle {
  border: 1px solid var(--trait);
  border-left-width: 3px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  max-width: 46ch;
}

.bulle-eleve {
  border-left-color: var(--bois);
}

.bulle-prof {
  border-left-color: var(--jaune);
  background: var(--creme);
  margin-left: auto;
}

.bulle-tete {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  color: var(--ardoise);
}

.bulle div {
  font-size: 0.96rem;
}

/* Demandes recues, dans le back office. Une liste avec un filet, pas des
   cartes flottantes : meme vocabulaire que le reste du site. */

.liste-demandes {
  list-style: none;
  margin: 1rem 0 2rem;
  padding: 0;
  border-top: 1px solid var(--trait);
  max-width: 68ch;
}

.demande {
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--trait);
}

.demande-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin: 0;
}

.demande-coordonnees {
  margin: 0.2rem 0 0.7rem;
  font-size: 0.92rem;
}

.demande-message {
  border-left: 3px solid var(--bois);
  padding-left: 1rem;
  margin-bottom: 0.9rem;
}

.demande-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.demande-actions input[type='text'] {
  flex: 1 1 16rem;
  font: inherit;
  color: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--ardoise);
  background: var(--blanc);
  border-radius: 0;
}

/* Le mot de passe temporaire doit se lire sans ambiguite, d'ou la chasse fixe. */
.mdp-temporaire {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  margin: 0.6rem 0 0;
}

.formulaire-ligne {
  display: inline-block;
  margin: 0 0.5rem 0.6rem 0;
}

/* Formulaire */

.formulaire {
  max-width: var(--largeur-etroite);
  margin-top: 2rem;
}

.champ {
  margin-bottom: 1.3rem;
}

.champ label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--ardoise);
  background: var(--blanc);
  border-radius: 0;
}

.champ textarea {
  min-height: 9rem;
  resize: vertical;
}

.champ-cache {
  position: absolute;
  left: -9999px;
}

.message {
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--jaune);
  background: var(--creme);
  margin-bottom: 2rem;
}

.message-erreur {
  border-left-color: #a4342b;
}

.message ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

/* Appel final */

.appel-final {
  padding: 3.5rem 0;
}

.appel-boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 0;
}

/* Pied de page */

.pied {
  background: var(--bleu-nuit);
  color: #cdd5e1;
  padding: 3.5rem 0 1.5rem;
  font-size: 0.95rem;
}

.pied a {
  color: #cdd5e1;
  text-decoration: none;
  border-bottom: 1px solid var(--trait-sombre);
}

.pied a:hover {
  border-bottom-color: var(--jaune);
}

.pied-grille {
  display: grid;
  gap: 2.2rem;
}

.pied-titre {
  font-weight: 600;
  color: var(--jaune);
  margin-bottom: 0.6rem;
}

.pied-liens {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pied-liens li {
  padding: 0.25rem 0;
}

.pied-bas {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--trait-sombre);
  font-size: 0.85rem;
}

.pied-bas p {
  margin: 0;
}

/* Appel a l'action flottant du mobile.
   Il menait au telephone ; il mene au formulaire, qui est le chemin de
   conversion du site. Le numero reste accessible dans l'en-tete et au pied. */

.cta-flottant {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  text-align: center;
  background: var(--jaune);
  color: var(--bleu-nuit);
  font-weight: 600;
  text-decoration: none;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
}

/* Sur la page de reservation, le bouton pointerait sur elle-meme. */
.page-contact .cta-flottant {
  display: none;
}

.page-contact {
  padding-bottom: 0;
}

/* Petit ecran : le menu se replie derriere le bouton */

@media (max-width: 899px) {
  .menu {
    display: none;
    width: 100%;
    padding-bottom: 1rem;
  }

  .menu.menu-ouvert {
    display: block;
  }

  .entete-barre {
    flex-wrap: wrap;
  }

  .menu ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  body {
    padding-bottom: 4.5rem;
  }
}

@media (min-width: 900px) {
  .bouton-menu {
    display: none;
  }

  .cta-flottant {
    display: none;
  }

  .section {
    padding: 6rem 0;
  }

  .deux-colonnes {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .texte-photo {
    grid-template-columns: 1.15fr 1fr;
    gap: 4rem;
  }

  .texte-photo-inverse .texte-photo-texte {
    order: 2;
  }

  .grille-ligne {
    grid-template-columns: repeat(4, 1fr);
  }

  .grille-case:nth-child(2n) {
    border-right: 1px solid var(--bleu-nuit);
  }

  .grille-case:nth-child(4n) {
    border-right: 0;
  }

  .grille-case:nth-last-child(-n + 4) {
    border-bottom: 0;
  }

  .pied-grille {
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 3rem;
  }

  .hero-grille {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    align-items: center;
    padding-top: 4rem;
    padding-bottom: 4.5rem;
  }

  /* Sur grand ecran la photo reprend sa place a droite. */
  .hero-image {
    order: 0;
  }
}

/* La grille d'accords passe en fond bleu nuit dans une section sombre */

.section-sombre .grille-ligne,
.section-sombre .grille-case {
  border-color: var(--trait-sombre);
}