/* ============================================================
   RUNMOBILITE VSL — Feuille de style
   Organisée dans l'ordre de la page :
   variables → base → en-tête → hero → services → pourquoi →
   contact → bandeau → pied de page → responsive
   ============================================================ */

/* ----- Polices de caractères (hébergées dans assets/polices/) -----
   Fichiers téléchargés une fois depuis Google Fonts puis servis par
   notre propre hébergement : le navigateur du visiteur ne contacte
   plus Google (ni transmission d'adresse IP, ni dépendance externe).
   Chaque police existe en deux fichiers : « latin » couvre le
   français courant, « latin-ext » les caractères plus rares (le
   navigateur ne télécharge le second que s'il en a besoin, grâce à
   unicode-range). Nunito Sans est une police « variable » : un seul
   fichier contient toutes les graisses de 400 à 700. */

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap; /* le texte s'affiche sans attendre la police */
  src: url('assets/polices/nunitosans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('assets/polices/nunitosans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/polices/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/polices/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/polices/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/polices/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/polices/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/polices/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----- Variables : la palette de couleurs de la maquette -----
   On les définit une seule fois ici, puis on écrit var(--nom)
   partout. Pour changer une couleur, on ne modifie qu'une ligne. */
:root {
  --bleu-fonce: #003567;      /* titres, boutons foncés, fonds bleus */
  --turquoise: #35a2a6;       /* couleur d'accent, pour les aplats */
  /* Le turquoise ci-dessus est trop clair pour porter du texte : blanc
     sur ce fond ne donne qu'un rapport de contraste de 3,06 pour 1,
     là où les règles d'accessibilité en demandent 4,5. Il reste donc
     réservé aux surfaces (icônes, badges, jour choisi du calendrier),
     et cette version plus sombre — 5,1 pour 1 sur blanc, 5,6 pour 1
     en blanc sur ce fond — sert partout où il y a du texte à lire. */
  --turquoise-texte: #217A7E;
  --texte: #16324F;           /* texte courant */
  --texte-doux: #46617A;      /* paragraphes secondaires */
  --texte-discret: #5B7284;   /* petites mentions (4,8 pour 1 sur blanc) */
  --texte-sur-bleu: #C9D9E5;  /* paragraphes sur fond bleu foncé */
  --bordure: #E4EDF0;         /* bordures et séparateurs */
  --bordure-champ: #C2D2D9;   /* bordures des champs du formulaire */
  --fond-clair: #F2F8F9;      /* fonds de sections claires */
  --blanc: #FFFFFF;

  /* Le site n'a qu'une apparence, claire. On le déclare pour que les
     navigateurs qui forcent un thème sombre (Chrome sur Android)
     n'inversent pas les couleurs au hasard. */
  color-scheme: light;
}

/* ----- Base ----- */
* {
  box-sizing: border-box; /* padding et bordures comptent dans la largeur */
}

html {
  scroll-behavior: smooth; /* défilement doux vers les ancres du menu */
  /* L'en-tête reste collé en haut de la page (position: sticky) et
     recouvre donc ce qui passe dessous : sans cette réserve, un clic
     du menu alignait le haut de la section sous l'en-tête, qui en
     cachait le début. 96px = la hauteur de l'en-tête (81px) plus une
     petite marge, même valeur que le scroll-margin du message du
     formulaire plus bas. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: 'Nunito Sans', sans-serif;
  color: var(--texte);
  background: var(--blanc);
}

h1, h2, h3 {
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--turquoise-texte);
  text-decoration: none;
}

a:hover {
  color: var(--bleu-fonce);
}

/* Les invites grises des champs (« Ex. : Vevey ») : ce sont souvent la
   seule indication du format attendu, elles doivent donc rester
   lisibles. L'ancien gris ne donnait qu'un contraste de 2,3 pour 1. */
input::placeholder,
textarea::placeholder {
  color: #5F7686;
  opacity: 1; /* Firefox éclaircit les invites de lui-même */
}

/* ----- Repère du clavier -----
   Qui se déplace à la touche Tabulation doit voir en permanence où il
   se trouve. Le formulaire supprimait ce repère sur ses champs
   (« outline: none ») sans rien mettre à la place. On pose ici un
   anneau net, valable pour tout le site.
   :focus-visible ne se déclenche qu'au clavier : un clic à la souris
   n'entoure pas le bouton cliqué, ce qui serait disgracieux. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bleu-fonce);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sur les fonds bleu foncé, un anneau bleu foncé serait invisible */
.pourquoi :where(a, button):focus-visible,
.bandeau :where(a, button):focus-visible {
  outline-color: var(--blanc);
}

/* ----- Mouvement réduit -----
   Certains visiteurs — vertiges, migraines, troubles vestibulaires —
   demandent à leur système d'éviter les animations. On respecte ce
   réglage : plus de défilement glissé, plus de cartes qui se soulèvent. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----- Lien d'évitement -----
   Placé tout en haut du HTML, il reste hors de l'écran jusqu'à ce que
   le clavier l'atteigne : il apparaît alors, et permet de sauter le
   menu d'un coup au lieu de le parcourir lien par lien. */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--bleu-fonce);
  color: var(--blanc);
  font-weight: 600;
  border-radius: 0 0 10px 0;
}

.lien-evitement:focus {
  left: 0;
  color: var(--blanc);
}

/* Largeur maximale commune aux sections, centrée */
.conteneur {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ----- Boutons (partagés par tout le site) ----- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px; /* forme "pilule" */
  white-space: nowrap;  /* le texte d'un bouton ne se replie jamais */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bouton-turquoise {
  background: var(--turquoise-texte);
  color: var(--blanc);
  border: none;
  cursor: pointer;
}

.bouton-turquoise:hover {
  background: var(--bleu-fonce);
  color: var(--blanc);
}

/* Pendant l'envoi du formulaire, script.js désactive le bouton. Sans
   cette règle il gardait exactement la même apparence, main du curseur
   comprise : rien n'indiquait que l'appui avait été pris en compte. */
.bouton-turquoise:disabled {
  background: var(--texte-doux);
  cursor: progress;
}

/* Retour visuel à l'appui. Au doigt, il n'existe pas de survol : sans
   ce léger enfoncement, rien ne confirme que le bouton a été touché. */
.bouton:active {
  transform: scale(0.97);
}

.bouton-fonce {
  background: var(--bleu-fonce);
  color: var(--blanc);
}

.bouton-fonce:hover {
  background: var(--turquoise-texte);
  color: var(--blanc);
}

.bouton-contour {
  background: var(--blanc);
  color: var(--bleu-fonce);
  border: 2px solid #C6DDE1;
  padding: 13px 26px; /* 2px de moins : la bordure compense */
}

.bouton-contour:hover {
  border-color: var(--turquoise-texte);
  color: var(--turquoise-texte);
}

.bouton-petit {
  gap: 8px;
  padding: 11px 20px;
  font-size: 15px;
}

/* Petits textes en majuscules au-dessus des titres de section */
.surtitre {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--turquoise-texte);
}

/* ----- En-tête collant ----- */
.entete {
  position: sticky; /* reste visible quand on fait défiler la page */
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordure);
}

.entete-contenu {
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  height: 52px;
  width: auto;
}

.menu {
  display: flex;
  align-items: center;
  gap: 28px;
  font-weight: 600;
  font-size: 16px;
}

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

.menu a:hover {
  color: var(--turquoise-texte);
}

/* Le bouton "Réserver" du menu garde son texte blanc */
.menu a.bouton-fonce,
.menu a.bouton-fonce:hover {
  color: var(--blanc);
}

/* Bouton burger : caché sur ordinateur, affiché sur téléphone
   (voir le responsive en fin de fichier) */
.bouton-burger {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--bleu-fonce);
}

/* Le groupe « Appeler + burger » de l'en-tête, sur téléphone */
.entete-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bouton d'appel de l'en-tête : caché sur ordinateur (le menu contient
   déjà « Réserver »), affiché sur téléphone où il devient le geste le
   plus direct vers le téléphone. Hauteur minimale de 44px : la taille
   sous laquelle une cible devient difficile à viser au doigt. */
.bouton-appel-mobile {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--turquoise-texte);
  color: var(--blanc);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

.bouton-appel-mobile:hover {
  background: var(--bleu-fonce);
  color: var(--blanc);
}

/* ----- Section accueil (hero) ----- */
.hero {
  background: linear-gradient(180deg, var(--fond-clair) 0%, var(--blanc) 100%);
}

.hero-contenu {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 32px 48px;
  display: grid;
  grid-template-columns: 1fr 1.55fr; /* texte à gauche, image plus large à droite */
  gap: 32px;
  align-items: center;
}

.hero-texte {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hero h1 {
  font-weight: 700;
  font-size: 46px;
  line-height: 1.15;
  white-space: nowrap; /* chaque moitié du titre reste sur sa ligne */
}

.texte-fonce {
  color: var(--bleu-fonce);
}

.texte-turquoise {
  color: var(--turquoise);
}

.hero-description {
  font-size: 18px;
  line-height: 1.65;
  color: var(--texte-doux);
  max-width: 46ch;
}

.hero-boutons {
  display: flex;
  gap: 14px; /* toujours sur une ligne (sauf téléphone, voir responsive) */
  margin-top: 6px;
}

.hero-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  color: var(--texte-doux);
  font-size: 16px;
  font-weight: 600;
}

.hero-points li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-image img {
  width: 100%;
  max-width: 866px; /* largeur native de l'image : au-delà, elle deviendrait floue */
  height: auto;     /* garde les proportions malgré l'attribut height du HTML */
  margin: 0 auto;
}

/* ----- Section services ----- */
.services {
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 32px;
  border-top: 1px solid var(--bordure);
}

.section-titre {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 52px;
  max-width: 62ch;
}

.section-titre h2 {
  font-weight: 700;
  font-size: 44px;
  line-height: 1.12;
  color: var(--bleu-fonce);
}

.section-titre p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--texte-doux);
}

.services-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.carte-service {
  background: var(--blanc);
  border: 1.5px solid var(--bordure);
  border-radius: 20px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Au survol : la carte se soulève et l'icône s'inverse.
   Enfermé dans « hover: hover » car ces cartes ne sont pas cliquables :
   sur un écran tactile, un simple appui déclenchait l'effet, qui
   restait ensuite figé et laissait croire à un élément sélectionné. */
@media (hover: hover) {
  .carte-service:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 53, 103, 0.12);
  }

  .carte-service:hover .icone-service {
    background-color: var(--turquoise);
    stroke: var(--blanc);
  }
}

.icone-service {
  padding: 13px;
  border-radius: 16px;
  box-sizing: content-box; /* le padding s'ajoute autour de l'icône 30x30 */
  align-self: flex-start;
  transition: background-color 0.28s ease, stroke 0.28s ease;
}

.carte-service h3 {
  font-weight: 600;
  font-size: 20px;
  color: var(--bleu-fonce);
}

.carte-service p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--texte-doux);
}

/* ----- Section pourquoi nous (fond bleu foncé) ----- */
.pourquoi {
  background: var(--bleu-fonce);
  padding: 76px 0;
}

.pourquoi-titre {
  gap: 12px;
  margin-bottom: 46px;
}

.pourquoi-titre h2 {
  font-size: 40px;
  line-height: 1.15;
  color: var(--blanc);
}

.pourquoi-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.carte-pourquoi {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.icone-badge {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--turquoise);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.carte-pourquoi h3 {
  font-weight: 600;
  font-size: 21px;
  color: var(--blanc);
}

.carte-pourquoi p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--texte-sur-bleu);
}

/* ----- Section contact ----- */
.contact {
  background: var(--fond-clair);
}

.contact-contenu {
  padding-top: 72px;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: 1fr 1.1fr; /* infos à gauche, formulaire à droite */
  gap: 56px;
  align-items: start;
}

.contact-infos {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-infos .surtitre {
  letter-spacing: 0.08em;
}

.contact-infos h2 {
  font-weight: 700;
  font-size: 32px;
  color: var(--bleu-fonce);
}

.contact-infos > p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--texte-doux);
  max-width: 44ch;
}

.contact-cartes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.carte-contact {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--blanc);
  border-radius: 14px;
  padding: 16px 20px;
  color: var(--bleu-fonce);
  font-weight: 700;
  font-size: 17px;
  box-shadow: 0 2px 8px rgba(20, 57, 107, 0.06);
}

a.carte-contact:hover {
  color: var(--turquoise-texte);
}

/* ----- Formulaire ----- */
.formulaire {
  background: var(--blanc);
  border-radius: 20px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 6px 24px rgba(20, 57, 107, 0.08);
}

.formulaire-ligne {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Nom et Téléphone côte à côte */
  gap: 16px;
}

/* La ligne qui contient le choix de date fait exception : une fois
   remplie, elle affiche « mercredi 29 juillet 2026, 9 h », soit bien
   plus que la moitié de largeur disponible — le texte se terminait en
   « … » et le visiteur ne pouvait pas relire l'heure qu'il venait de
   choisir. Cette ligne passe donc sur toute la largeur. */
.formulaire-ligne:has(.champ-quand) {
  grid-template-columns: 1fr;
}

.formulaire label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-weight: 700;
  font-size: 15px;
  color: var(--bleu-fonce);
}

/* min-width: 0 annule la largeur minimale que le navigateur donne
   d'office aux champs (environ 20 caractères) : sans cela, deux champs
   côte à côte refusent de rétrécir et débordent sur petit écran.
   text-overflow: ellipsis remplace la fin d'un texte trop long par
   « … » au lieu de le couper net au milieu d'un mot.
   La taille de 17px n'est pas un caprice : en dessous de 16px, Safari
   sur iPhone agrandit automatiquement la page dès qu'on entre dans un
   champ, et ne la réduit jamais ensuite — le visiteur se retrouve à
   remplir un formulaire deux fois trop grand. */
.formulaire input,
.formulaire textarea {
  border: 1.5px solid var(--bordure-champ);
  border-radius: 10px;
  padding: 13px 14px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 17px;
  color: var(--texte);
  min-width: 0;
  text-overflow: ellipsis;
}

/* Repère du champ actif. L'anneau bleu foncé de 3px posé plus haut
   pour tout le site était jugé disgracieux sur les champs — et il
   s'affichait même à la souris, car un champ de saisie déclenche
   « :focus-visible » quel que soit le geste, clic compris.
   On le retire donc ici, mais on le remplace : sans aucun repère, qui
   navigue au clavier ne sait plus dans quel champ il écrit. La bordure
   turquoise s'épaissit et reçoit un halo assorti, discret mais net. */
.formulaire input:focus,
.formulaire textarea:focus,
.formulaire input:focus-visible,
.formulaire textarea:focus-visible {
  outline: none;
  border-color: var(--turquoise-texte);
  box-shadow: 0 0 0 3px rgba(53, 162, 166, 0.22);
}

.formulaire textarea {
  resize: vertical; /* on ne peut agrandir le champ que verticalement */
}

.bouton[type="submit"] {
  justify-content: center;
}

/* Champ piège anti-spam : invisible pour les visiteurs, seuls
   les robots (qui lisent le HTML, pas le CSS) le remplissent.
   On écrit « .formulaire .champ-piege » pour être plus spécifique
   que « .formulaire label » (qui met display: flex) */
.formulaire .champ-piege {
  display: none;
}

/* Message de confirmation ou d'erreur après l'envoi du formulaire,
   rempli et coloré par script.js.
   Il n'est plus caché par l'attribut « hidden » mais simplement vidé :
   un élément caché par hidden sort de l'arbre d'accessibilité, et le
   lecteur d'écran n'annonçait alors jamais le message. La règle
   « :empty » ci-dessous le fait disparaître tant qu'il est vide.
   scroll-margin : quand script.js fait défiler jusqu'au message,
   laisser cette marge pour qu'il ne se glisse pas sous l'en-tête
   collant ni ne colle au bord de l'écran */
.formulaire-message {
  margin: 0;
  padding: 13px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  scroll-margin: 96px 0;
  animation: apparition 0.25s ease;
}

.formulaire-message:empty {
  display: none;
}

/* Une transition ne peut pas démarrer depuis « display: none » :
   c'est une animation qu'il faut, jouée à l'apparition du message */
@keyframes apparition {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.formulaire-message-ok {
  background: #E7F5EE;  /* vert doux : envoi réussi */
  color: #14663F;
}

.formulaire-message-erreur {
  background: #FDEDED;  /* rouge doux : envoi échoué */
  color: #9E2F2A;
}

/* Astérisque des champs obligatoires */
.obligatoire {
  color: var(--turquoise-texte);
}

/* Message d'erreur affiché par script.js sous un champ mal rempli */
.champ-erreur {
  color: #9E2F2A;
  font-size: 14px;
  font-weight: 600;
}

/* Le champ fautif passe en bordure rouge, même quand il a le focus —
   halo compris, sans quoi un champ en erreur s'entourait de turquoise
   dès qu'on revenait dedans pour le corriger */
.formulaire input.champ-invalide,
.formulaire input.champ-invalide:focus {
  border-color: #9E2F2A;
}

.formulaire input.champ-invalide:focus {
  box-shadow: 0 0 0 3px rgba(158, 47, 42, 0.20);
}

/* Petite note sous le formulaire : champs obligatoires et
   renvoi vers la politique de confidentialité */
.formulaire-note {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--texte-discret);
}

/* Avertissement : une demande envoyée n'est pas une course réservée.
   Encadré ambré, distinct du reste du formulaire, placé juste avant le
   bouton d'envoi — c'est là que le visiteur regarde au moment de
   s'engager. Le point d'exclamation est dessiné en CSS pour ne pas
   dépendre d'une image. */
.formulaire-avertissement {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  padding: 13px 15px;
  border-radius: 10px;
  background: #FFF6E5;
  border: 1px solid #F0DDB4;
  color: #6B4E0F;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.formulaire-avertissement svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #B07D12;
}

.formulaire-avertissement strong {
  color: #573F0B;
}

/* ----- Calendrier du champ « Date et heure souhaitées » -----
   Construit par script.js dans le conteneur .champ-quand, qui sert
   de point d'ancrage (position: relative) à la fenêtre flottante */
.champ-quand {
  position: relative;
}

/* Le champ et son icône de calendrier : l'icône se pose par-dessus le
   bord droit du champ, qui lui réserve la place avec son padding.
   pointer-events: none fait passer les clics au travers de l'icône,
   pour que cliquer dessus revienne à cliquer sur le champ. */
.champ-avec-icone {
  position: relative;
  display: block;
}

.champ-avec-icone input {
  width: 100%;
}

.champ-icone {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--turquoise-texte);
  pointer-events: none;
}

/* Quand script.js prend la main, le champ ne se tape plus : il ouvre
   le calendrier. La classe le dit à l'œil (curseur en main, place
   réservée à l'icône) et l'attribut readonly l'impose au clavier.
   On écrit « .formulaire input.champ-declencheur » pour passer devant
   la règle « .formulaire input » plus haut, qui fixe déjà le padding */
.formulaire input.champ-declencheur {
  cursor: pointer;
  padding-right: 42px;
}

/* Calendrier ouvert : le champ reste visiblement « actif », même
   pendant qu'on manipule les menus d'heure à l'intérieur */
.champ-declencheur[aria-expanded="true"] {
  border-color: var(--turquoise-texte);
}

/* La fenêtre flottante, accrochée sous le champ. Alignée à droite
   (right: 0) pour rester au-dessus du formulaire, avec une largeur
   minimale pour que les 7 colonnes de jours restent confortables */
.calendrier {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 100%;
  min-width: 290px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--blanc);
  border: 1.5px solid var(--bordure-champ);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(20, 57, 107, 0.16);
}

/* Calendrier fermé. Cette règle est indispensable : l'attribut hidden
   que pose script.js s'appuie sur un « display: none » que le
   navigateur applique de lui-même, mais le « display: flex » ci-dessus
   vient d'une feuille de style à nous, et l'emporte donc sur lui. Sans
   cette ligne, le calendrier reste affiché en permanence. */
.calendrier[hidden] {
  display: none;
}

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

.calendrier-titre {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--bleu-fonce);
}

/* Flèches de changement de mois */
.calendrier-nav {
  background: none;
  border: none;
  cursor: pointer;
  padding: 1px 11px 4px;
  border-radius: 8px;
  font-size: 21px;
  line-height: 1;
  color: var(--bleu-fonce);
}

.calendrier-nav:hover:not(:disabled) {
  background: var(--fond-clair);
  color: var(--turquoise-texte);
}

.calendrier-nav:disabled {
  color: var(--bordure-champ);
  cursor: default;
}

/* 7 colonnes : la ligne lu…di puis les jours du mois */
.calendrier-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendrier-semaine {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--texte-discret);
  padding-bottom: 4px;
}

.calendrier-jour {
  aspect-ratio: 1; /* des cases rondes, pas ovales */
  border: none;
  border-radius: 50%;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texte);
  cursor: pointer;
}

.calendrier-jour:hover:not(:disabled) {
  background: var(--fond-clair);
  color: var(--turquoise-texte);
}

.calendrier-jour:disabled {
  color: #C9D6DE; /* les jours passés, grisés */
  cursor: default;
}

.calendrier-jour.aujourdhui {
  color: var(--turquoise-texte);
}

.calendrier-jour.choisi {
  background: var(--turquoise-texte);
  color: var(--blanc);
}

/* La ligne « à [14] h [30] » */
.calendrier-heure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bleu-fonce);
}

.calendrier-heure select {
  flex: 1;
  padding: 8px 6px;
  border: 1.5px solid var(--bordure-champ);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--texte);
  background: var(--blanc);
}

/* Les boutons Effacer et Valider */
.calendrier-actions {
  display: flex;
  gap: 8px;
}

.calendrier-actions button {
  flex: 1;
  padding: 10px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}

.calendrier-effacer {
  background: var(--blanc);
  border: 1.5px solid var(--bordure-champ);
  color: var(--texte-doux);
}

.calendrier-effacer:hover {
  border-color: var(--turquoise-texte);
  color: var(--turquoise-texte);
}

.calendrier-valider {
  background: var(--turquoise-texte);
  border: none;
  color: var(--blanc);
}

.calendrier-valider:hover:not(:disabled) {
  background: var(--bleu-fonce);
}

.calendrier-valider:disabled {
  opacity: 0.45; /* tant qu'aucun jour n'est choisi */
  cursor: default;
}

/* ----- Bandeau assurance ----- */
.bandeau {
  background: var(--bleu-fonce);
}

.bandeau-contenu {
  padding-top: 44px;
  padding-bottom: 44px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.bandeau svg {
  flex-shrink: 0; /* l'icône garde sa taille même si le texte est long */
}

.bandeau p {
  flex: 1;
  min-width: 300px;
  color: #E8F1F6;
  font-size: 17px;
  line-height: 1.6;
}

.bandeau strong {
  color: var(--blanc);
  font-family: 'Poppins', sans-serif;
}

/* ----- Pied de page ----- */
.pied {
  border-top: 1px solid var(--bordure);
}

.pied-contenu {
  padding-top: 52px;
  padding-bottom: 32px;
}

/* Les 3 colonnes : à propos, navigation, contact */
.pied-colonnes {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--bordure);
}

/* Chaque colonne empile ses éléments verticalement, alignés à gauche */
.pied-colonne {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--texte-doux);
}

.pied-logo {
  height: 48px;
  width: auto;
}

.pied-apropos {
  line-height: 1.6;
  max-width: 30ch;
}

/* Titres des colonnes Navigation et Contact : grands et bleu foncé */
.pied-titre {
  font-size: 18px;
  font-weight: 700;
  color: var(--bleu-fonce);
}

/* Sous-catégories (liens et zone) : plus petites et plus claires */
.pied-colonne a,
.pied-colonne span {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--texte-discret);
}

.pied-colonne a:hover {
  color: var(--turquoise-texte);
}

/* Copyright centré sous la ligne de séparation */
.pied-copyright {
  padding-top: 24px;
  font-size: 14px;
  color: var(--texte-discret);
  text-align: center;
}

/* ----- Page « Protection des données » (confidentialite.html) ----- */

/* Lien de retour vers l'accueil, dans l'en-tête de la page */
.lien-retour {
  font-weight: 600;
  font-size: 15px;
  color: var(--texte);
}

.lien-retour:hover {
  color: var(--turquoise-texte);
}

.page-legale {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 32px 72px;
}

.page-legale h1 {
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  color: var(--bleu-fonce);
  margin-bottom: 10px;
}

.page-legale h2 {
  font-weight: 600;
  font-size: 22px;
  color: var(--bleu-fonce);
  margin-top: 40px;
  margin-bottom: 12px;
}

.page-legale p,
.page-legale li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--texte-doux);
}

.page-legale p + p {
  margin-top: 10px;
}

/* Les listes de cette page retrouvent leurs puces
   (la règle de base du site les supprime partout) */
.page-legale ul {
  list-style: disc;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Les deux boutons de la page d'erreur 404 */
.page-404-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* Date de dernière mise à jour, sous le titre */
.page-legale .maj {
  font-size: 15px;
  color: var(--texte-discret);
}

/* ============================================================
   RESPONSIVE — adaptation aux écrans plus petits
   Les règles ci-dessous remplacent celles du dessus quand
   l'écran est plus étroit que la largeur indiquée.
   ============================================================ */

/* Tablette : les grilles passent de 4/3 colonnes à 2, le hero à 1 */
@media (max-width: 900px) {
  /* Sous 900px, les deux colonnes ne tiennent plus côte à côte :
     le texte passe au-dessus, l'image en dessous */
  .hero-contenu {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 36px;
  }

  .section-titre h2 {
    font-size: 32px;
  }

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

  /* Les trois cartes « Pourquoi nous » passaient d'un coup sur une
     seule colonne dès 900px : sur une tablette, cela donnait trois
     bandes de près de 700px de large pour une seule phrase. auto-fit
     les laisse se ranger d'elles-mêmes, deux par deux puis une par
     une, selon la place réellement disponible. */
  .pourquoi-grille {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  /* minmax(0, 1fr) et non 1fr : une colonne de grille refuse par défaut
     de devenir plus étroite que son contenu le plus large, ce qui
     faisait déborder le formulaire de la page entre 600 et 900px */
  .contact-contenu {
    grid-template-columns: minmax(0, 1fr); /* formulaire sous les infos */
    gap: 40px;
  }
}

/* Téléphone : tout passe en une seule colonne */
@media (max-width: 600px) {
  /* Écran trop étroit pour les deux boutons côte à côte :
     ils s'empilent, centrés et de la même largeur */
  .hero-boutons {
    flex-direction: column;
    align-items: center;
  }

  .hero-boutons .bouton {
    width: 100%;
    max-width: 320px;
    justify-content: center; /* le texte au milieu du bouton */
  }

  /* Le burger et le bouton d'appel apparaissent à droite de l'en-tête */
  .bouton-burger {
    display: block;
  }

  .bouton-appel-mobile {
    display: inline-flex;
  }

  /* Le menu devient un panneau déroulant collé sous l'en-tête,
     caché tant que le burger n'a pas été touché. Il se positionne
     par rapport à .entete (l'ancêtre positionné le plus proche,
     grâce à son position: sticky) */
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 20px 18px;
    background: var(--blanc);
    border-bottom: 1px solid var(--bordure);
    box-shadow: 0 12px 24px rgba(20, 57, 107, 0.08);
  }

  /* script.js ajoute/retire cette classe au clic sur le burger */
  .menu.ouvert {
    display: flex;
  }

  /* Liens plus hauts : plus faciles à toucher au doigt */
  .menu a {
    padding: 13px 4px;
  }

  /* Le bouton "Réserver" prend toute la largeur du panneau */
  .menu a.bouton-fonce {
    justify-content: center;
    margin-top: 8px;
  }

  .services-grille,
  .formulaire-ligne,
  .pied-colonnes {
    grid-template-columns: 1fr; /* les 3 colonnes du footer s'empilent aussi */
  }

  .pied-colonnes {
    gap: 28px;
  }

  /* Footer : logo, liens et textes centrés une fois empilés */
  .pied-colonne {
    align-items: center;
    text-align: center;
  }

  /* Cartes "Pourquoi nous" : icône, titre et texte centrés */
  .carte-pourquoi {
    align-items: center;
    text-align: center;
  }

  .hero h1 {
    font-size: 30px; /* assez petit pour tenir sur les écrans étroits */
    /* Le titre était bloqué sur une seule ligne (« white-space:
       nowrap ») : sur un écran de 320px — un iPhone réglé en affichage
       zoomé, précisément ce qu'utilise le public visé — il dépassait
       de la page et forçait un défilement horizontal. Le <br> du HTML
       suffit à garder les deux moitiés du titre séparées. */
    white-space: normal;
  }

  /* Marges latérales réduites : sur un écran étroit, 32px de chaque
     côté sont autant de largeur perdue pour le texte */
  .conteneur,
  .hero-contenu,
  .services {
    padding-left: 20px;
    padding-right: 20px;
  }

  .formulaire {
    padding: 22px 20px;
  }

  /* Le bandeau exigeait 300px pour son paragraphe : additionnés aux
     marges, il débordait sous 340px de large */
  .bandeau p {
    min-width: 0;
  }

  /* Sur ordinateur le texte tient sur deux lignes et l'icône centrée
     verticalement paraît naturelle ; sur téléphone il en fait dix, et
     l'icône se retrouvait plantée au milieu du paragraphe. On la
     remonte à hauteur de la première ligne, en haut à gauche. */
  .bandeau-contenu {
    align-items: flex-start;
  }

  /* Les sections respiraient sur 84px en haut et en bas : sur
     téléphone, cela revient à faire défiler un écran de vide */
  .services {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .pourquoi {
    padding: 56px 0;
  }

  .contact-contenu {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  /* En-tête plus compact : à 81px de haut il mangeait un huitième de
     l'écran d'un petit téléphone, en permanence */
  .logo {
    height: 40px;
  }

  .entete-contenu {
    padding: 11px 20px;
  }

  /* La fenêtre du calendrier flottait par-dessus le formulaire avec une
     largeur minimale de 290px : dans une carte déjà étroite, elle
     sortait de l'écran par la gauche. Sur téléphone elle se pose donc
     simplement à la suite du champ, dans le flux de la page. */
  .calendrier {
    position: static;
    width: auto;
    min-width: 0;
    margin-top: 8px;
    box-shadow: none;
  }
}

/* Écrans les plus étroits (iPhone SE, affichage zoomé) : la date en
   toutes lettres — « samedi 25 juillet 2026, 9 h » — demande environ
   260px, et le champ n'en offre plus que 240 une fois retirés les
   marges et la place réservée à l'icône. Le texte se terminait donc en
   « … ». L'icône de calendrier n'étant que décorative, on la retire
   ici : le champ récupère sa largeur et la date s'affiche en entier. */
@media (max-width: 360px) {
  .champ-icone {
    display: none;
  }

  .formulaire input.champ-declencheur {
    padding-right: 14px;
  }

  /* « Un accompagnement pensé pour vous » : le mot « accompagnement »
     mesure à lui seul 309px à 32px, alors que la colonne de texte n'en
     fait plus que 280 sur un écran de 320px. Un mot ne se coupant pas,
     il dépassait et forçait un défilement horizontal de toute la page.
     Passer à 28px le ramène à 270px. On agit sur la taille plutôt que
     de couper le mot avec « overflow-wrap » : une césure au milieu
     d'« accompa-gnement » se lit mal, et le titre reste le premier
     élément que voit le visiteur. */
  .section-titre h2 {
    font-size: 28px;
  }
}

/* ============================================================
   IMPRESSION
   Un proche aidant imprime volontiers la page pour la garder près du
   téléphone. Sans ces règles, les deux sections à fond bleu sortaient
   en texte blanc sur papier blanc, donc vides, et les liens perdaient
   leur adresse — un numéro de téléphone imprimé mais illisible.
   ============================================================ */
@media print {
  /* Éléments sans objet sur papier */
  .entete,
  .bouton-burger,
  .menu,
  .hero-boutons,
  .formulaire,
  .calendrier {
    display: none;
  }

  body {
    color: #000;
  }

  /* Les fonds colorés ne s'impriment pas : on repasse le texte en noir
     pour que ces sections restent lisibles */
  .pourquoi,
  .bandeau,
  .contact {
    background: none;
  }

  .pourquoi h2,
  .pourquoi h3,
  .carte-pourquoi p,
  .bandeau p,
  .bandeau strong {
    color: #000;
  }

  .carte-pourquoi {
    border: 1px solid #999;
  }

  /* L'adresse des liens apparaît à leur suite : sur papier, un lien
     n'est plus cliquable. On l'omet pour les ancres internes (#…),
     qui ne mènent nulle part hors de l'écran. */
  a[href^="http"]::after,
  a[href^="mailto"]::after,
  a[href^="tel"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  /* Une carte ou un titre ne doit pas être coupé en deux par un saut
     de page */
  .carte-service,
  .carte-pourquoi,
  h1, h2, h3 {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Sélection de texte aux couleurs du site plutôt qu'au bleu par défaut */
::selection {
  background: var(--turquoise-texte);
  color: var(--blanc);
}