/* Feuille de style commune au site (hors journal, qui a la sienne).
   Extraite du bloc <style> d'index.html pour être partagée par les pages
   autonomes : /services/, /etude-de-cas/, /a-propos/. */
body { margin: 0; background: #F7F5F0; color: #16211C; font-family: "Instrument Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  /* Filet de sécurité : rien ne peut créer de défilement horizontal.
     « clip » plutôt que « hidden » pour ne pas casser l'en-tête collant. */
  html, body { max-width: 100%; overflow-x: clip; }
  * { box-sizing: border-box; }
  img, svg, video { max-width: 100%; }
  a { color: #0B3A2E; text-decoration: none; }
  a:hover { color: #14584A; }
  p { text-wrap: pretty; }
  @keyframes namua-feed { 0% { left: 0%; opacity: 0; } 6% { opacity: 1; } 22% { left: 96%; opacity: 1; } 26% { left: 96%; opacity: 0; } 100% { left: 96%; opacity: 0; } }
  @keyframes namua-compute { 0%, 22% { transform: scaleY(0.18); opacity: 0.35; } 30% { transform: scaleY(1); opacity: 1; } 40% { transform: scaleY(0.35); opacity: 0.8; } 50% { transform: scaleY(0.95); opacity: 1; } 60% { transform: scaleY(0.3); opacity: 0.7; } 70%, 100% { transform: scaleY(0.18); opacity: 0.35; } }
  @keyframes namua-stage-a { 0%, 20% { opacity: 0; } 26%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
  @keyframes namua-stage-b { 0%, 44% { opacity: 0; } 50%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
  @keyframes namua-stage-c { 0%, 64% { opacity: 0; } 70%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
  @keyframes namua-field { 0%, 46% { opacity: 0.18; transform: translateY(4px); } 56%, 92% { opacity: 1; transform: translateY(0); } 98%, 100% { opacity: 0.18; transform: translateY(0); } }
  @keyframes namua-blocked { 0% { transform: translateX(0); opacity: 0; } 30% { opacity: 0; } 38% { opacity: 0.85; } 72% { transform: translateX(52px); opacity: 0.85; } 82%, 100% { transform: translateX(52px); opacity: 0; } }
  @keyframes namua-tick { 0%, 45% { opacity: 0.25; } 55%, 100% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* --- Effets de survol / focus repris du prototype --- */
.hv1:hover { color: #E9C46A; }
.hv2:hover { background: #E9C46A; color: #0B3A2E; }
.hv3:hover { background: #F2D68C; color: #0B3A2E; }
.hv4:hover { color: #F2D68C; }
.hv5:hover { background: #16211C; color: #F7F5F0; }
.fc6:focus { border-color: #0B3A2E; }
.hv7:hover { background: #16211C; }

/* --- Routage entre les pages --- */
.page { display: none; }
.page.is-active { display: block; }
[data-nav].is-current { --nav: #E9C46A; }

.todo { background: #FBEFD0; border-bottom: 1px dashed #C9A227; color: #6B5410; padding: 0 3px; }
.todo-dark { color: #E9C46A; border-bottom: 1px dashed rgba(233,196,106,0.6); }

/* --- Module de prise de rendez-vous --- */
.bk { padding: 22px 26px 26px; }
.bk-hint { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A8578; margin: 0 0 14px; }
.bk-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid #EFEBE2; scrollbar-width: thin; }
.bk-day { flex: 0 0 auto; min-width: 78px; border: 1px solid #E4E0D6; background: #FAF8F4; border-radius: 8px; padding: 12px 10px; cursor: pointer; font-family: inherit; text-align: center; line-height: 1.35; color: #16211C; transition: border-color .12s, background .12s; }
.bk-day:hover { border-color: #0B3A2E; }
.bk-day.is-on { background: #0B3A2E; border-color: #0B3A2E; color: #F7F5F0; }
.bk-day .dow { display: block; font-size: 12.5px; color: #8A8578; text-transform: uppercase; letter-spacing: 0.06em; }
.bk-day.is-on .dow { color: rgba(247,245,240,0.7); }
.bk-day .dnum { display: block; font-size: 21px; font-weight: 500; }
.bk-day .dmon { display: block; font-size: 11.5px; color: #8A8578; }
.bk-day.is-on .dmon { color: rgba(247,245,240,0.7); }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.bk-slot { border: 1px solid #D9D4C7; background: #FFFFFF; color: #0B3A2E; border-radius: 999px; padding: 13px 10px; font-family: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.bk-slot:hover { background: #0B3A2E; border-color: #0B3A2E; color: #F7F5F0; }
.bk-slot.is-on { background: #E9C46A; border-color: #E9C46A; color: #16211C; }
.bk-form { margin-top: 22px; border-top: 1px solid #EFEBE2; padding-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.bk-form[hidden] { display: none; }
.bk-recap { font-size: 16.5px; color: #0B3A2E; margin: 0; border-left: 2px solid #E9C46A; padding-left: 16px; }
.bk-field { font-family: 'Instrument Sans', sans-serif; font-size: 16.5px; padding: 14px 16px; border: 1px solid #DDD8CC; border-radius: 6px; background: #FAF8F4; color: #16211C; outline: none; width: 100%; }
.bk-field:focus { border-color: #0B3A2E; }
.bk-go { font-family: inherit; background: #0B3A2E; color: #F7F5F0; font-size: 16.5px; font-weight: 500; padding: 15px 28px; border: none; border-radius: 999px; cursor: pointer; align-self: flex-start; }
.bk-go:hover { background: #16211C; }
.bk-erreur { font-size: 16px; color: #8A2B18; margin: 0; border-left: 2px solid #8A2B18; padding-left: 14px; }
.bk-erreur[hidden] { display: none; }
.bk-legal { font-size: 13.5px; color: #8A8578; margin: 0; }
.bk-done { padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bk-done[hidden] { display: none; }
.bk-tz { font-size: 13.5px; color: #8A8578; margin: 14px 0 0; }

/* --- Adaptation tablette / mobile --- */
@media (max-width: 980px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="padding: 92px 52px"], [style*="padding: 88px 52px"], [style*="padding: 96px 52px"],
  [style*="padding: 80px 52px"], [style*="padding: 72px 52px"], [style*="padding: 60px 52px"] { padding-left: 24px !important; padding-right: 24px !important; }
  [style*="gap: 72px"], [style*="gap: 64px"], [style*="gap: 56px"] { gap: 40px !important; }
  h1 { font-size: 40px !important; }
  h2 { font-size: 29px !important; }
}
@media (max-width: 760px) {
  /* Sur téléphone, le menu passe à la ligne : collant, il mangerait le tiers
     de l'écran. Il défile donc avec la page, et reste compact. */
  header { position: static !important; }
  header [style*="height: 82px"] { height: auto !important; padding: 13px 20px !important; flex-wrap: wrap !important; gap: 10px !important; line-height: 1.25 !important; }
  header nav { gap: 9px 16px !important; flex-wrap: wrap; line-height: 1.25 !important; }
  header nav a { font-size: 14px !important; }
  /* Le bouton de rendez-vous quitte le menu sur téléphone : il faisait passer
     la navigation sur trois lignes. L'appel à l'action reste présent dans la
     bannière d'accueil, en fin de chaque page et dans le pied. */
  /* $= et non = : les pages autonomes écrivent « /#/contact », l'accueil « #/contact ». */
  header nav a[href$="#/contact"] { display: none !important; }
  /* Les gros boutons d'appel tiennent sur une ligne */
  [style*="padding: 16px 30px"] { padding: 14px 22px !important; font-size: 15.5px !important; }
  footer [style*="padding: 22px 52px 44px"] { padding-left: 24px !important; padding-right: 24px !important; }
  section [style*="padding: 44px 46px"] { padding: 28px 24px !important; }
  section [style*="padding: 34px 36px"], section [style*="padding: 32px 34px"] { padding: 26px 24px !important; }
  h1 { font-size: 33px !important; }
  /* Les grands chiffres de l'étude de cas, à l'échelle du téléphone */
  [style*="font-size: 84px"] { font-size: 46px !important; }
  [style*="font-size: 72px"] { font-size: 54px !important; }
  /* Chiffre + explication : l'un sous l'autre, et la colonne du chiffre
     cesse d'imposer sa largeur (c'est elle qui débordait de l'écran). */
  [style*="min-width: 260px"] { min-width: 0 !important; }
  [style*="align-items: baseline"] { flex-direction: column !important; align-items: stretch !important; gap: 4px !important; }
  /* Titre à gauche / texte à droite : l'un sous l'autre sur téléphone. */
  [style*="align-items: end; justify-content: space-between"] { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
}