/* ContraGo - tokens de marque, reset, header/footer communs à toutes les pages. */

:root {
  --color-primary: #3D5A73;
  --color-primary-dark: #2c4258;
  --color-accent: #378ADD;
  --color-accent-dark: #2a6cb0;
  --color-on-primary: #ffffff;
  --color-bg: #ffffff;
  --color-surface: #f6f8fa;
  --color-border: #dfe4e8;
  --color-text: #1f2a33;
  --color-muted: #5b6b76;
  --color-warning-bg: #fff6e0;
  --color-warning-border: #e8c76b;
  --color-info-bg: #eaf2fb;
  --color-info-border: #a9c9e8;
  --color-error: #b3261e;
  /* Fond du footer : bande sombre volontaire, ne suit pas le thème clair/sombre
     de la page (cf. mockup footer-contrago-mockup.html, validé le 28/08/2026). */
  --color-footer-bg: #1e2f3e;
  --font-sans: "Public Sans", "Segoe UI", Arial, sans-serif;
  --font-heading: "DM Serif Display", Georgia, "Times New Roman", serif;
}

html {
  scroll-behavior: smooth;
  /* Compense le header fixed (~70px de haut, rectangulaire ancré depuis le
     02/09/2026 - voir .site-header plus bas) pour qu'une ancre (#metiers,
     #a-propos, ou toute ancre existante sur les autres pages du site) n'arrive jamais
     masquée derrière lui. Marge de sécurité de 80px - même valeur que la compensation
     de padding-top ajoutée sur le premier bloc de contenu de chaque page (voir
     kine.css, infirmier.css, dentiste.css, medecin-generaliste.css, a-propos.css,
     legal.css, auth.css, not-found.css). */
  scroll-padding-top: 80px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Bleu ardoise plus clair que la version jour : #3D5A73 sur #16202a ne
       ressort qu'à ~2.3:1 (illisible). #7FA3C7 conserve la même famille de
       teinte, moins saturée que --color-accent pour garder la hiérarchie
       titres (primary, sobre) / liens-CTA (accent, vif), et passe l'AA
       (≥5.4:1) aussi bien sur --color-bg que sur --color-surface. */
    --color-primary: #7FA3C7;
    --color-primary-dark: #5D84A6;
    --color-accent: #378ADD;
    --color-accent-dark: #2a6cb0;
    /* Texte utilisé sur un fond --color-primary (ex. .btn-ghost:hover) :
       blanc illisible sur le bleu clair du dark mode, on repasse sur le
       fond sombre de la page pour garder le contraste. */
    --color-on-primary: var(--color-bg);
    --color-bg: #16202a;
    --color-surface: #1c2932;
    --color-border: #2e3d47;
    --color-text: #eef2f5;
    --color-muted: #9fb0ba;
    --color-warning-bg: #3a3016;
    --color-warning-border: #7a611f;
    --color-info-bg: #1c2c3d;
    --color-info-border: #3c5a7a;
    --color-error: #ff8a80;
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

h2, h3, h4 { font-weight: 600; margin: 0; }
h1 { font-family: var(--font-heading); font-weight: 400; margin: 0; }

a { color: var(--color-accent); }

/* Header rectangulaire ancré (remplace la pilule flottante depuis le
   02/09/2026 - décision actée après tests index2-5.html sur la home).
   position: fixed - ne pousse plus le contenu qui suit dans le flux. Chaque
   page compense donc avec ~80px de clearance sur son premier bloc de contenu
   (voir kine.css, infirmier.css, dentiste.css, medecin-generaliste.css,
   a-propos.css, legal.css, auth.css, not-found.css - et .hero sur l'accueil,
   home.css) - clearance inchangée, le nouveau header (~70px) est à peine
   plus haut que l'ancienne pilule (~66px), largement absorbé par la marge
   de sécurité déjà en place. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--color-bg);
  border-radius: 0;
  box-shadow: 0 1px 0 var(--color-border);
  padding: 18px 32px;
  z-index: 100;
  transition: padding .3s ease, box-shadow .3s ease,
              transform .35s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
/* Ajoutée en JS (initFloatingHeader, site-header.js) dès que scrollY >= 10px.
   "Hauteur constante au défilement" (audit design 02/09/2026) : contrairement
   à l'ancienne pilule, on ne change plus le padding ni la position au scroll -
   seule l'ombre s'accentue, comme repère "j'ai scrollé". */
.site-header.is-compact {
  box-shadow: 0 1px 0 var(--color-border), 0 6px 16px rgba(31, 42, 51, 0.08);
}
@media (prefers-color-scheme: dark) {
  .site-header.is-compact { box-shadow: 0 1px 0 var(--color-border), 0 6px 16px rgba(0, 0, 0, 0.3); }
}
/* Ajoutée en JS pendant un scroll rapide vers le bas ; retirée dès qu'on remonte.
   Plus de translateX(-50%) : le header n'est plus centré par transform (déjà
   en width:100%/left:0), seul le glissement vertical reste utile. */
.site-header.is-hidden { transform: translateY(-140%); opacity: 0; }

/* var(--color-bg) suit déjà le thème clair/sombre tout seul (shared.css,
   :root) - contrairement à l'ancien fond rgba() en dur, plus besoin d'une
   règle @media dédiée juste pour ça (l'ombre .is-compact ci-dessus garde la
   sienne, teinte différente en sombre). */

/* Modificateur pour les pages de génération de contrat (kiné, infirmier,
   dentiste, médecin généraliste) : leur header ne contient qu'un logo et un
   libellé (pas de liens de nav ni de CTA comme sur la home). Neutralisé
   depuis le passage en header rectangulaire ancré : celui-ci est déjà plein
   écran par défaut, plus besoin d'un modificateur "wide" ni de l'animation
   d'ouverture pensée pour une pilule qui s'élargissait. */
.site-header.site-header--wide {
  width: 100%;
  animation: none;
}

.site-header .logo-link { display: flex; align-items: center; }
.site-header .logo-link img { height: 34px; display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav .nav-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 7px 12px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.site-nav .nav-link:hover { background: rgba(55, 138, 221, 0.10); color: var(--color-accent); }

/* Rayons de bordure réduits dans le header (0 à 8px plutôt que des pilules à
   rayon complet) + CTA "Se connecter" en bleu plein plutôt qu'en contour -
   scopé à .site-header uniquement : .btn-ghost est réutilisé ailleurs sur le
   site (boutons "Précédent", "Copier le message"... dans les générateurs de
   contrat) et ne doit pas hériter de ce traitement. */
.site-header .nav-link,
.site-header .nav-dropdown-trigger { border-radius: 6px; }
.site-header .btn-ghost {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  border-radius: 6px;
}
.site-header .btn-ghost:hover { background: var(--color-accent-dark); color: #fff; }
/* [aria-disabled="true"] (ci-dessous) applique déjà opacity:.6 + cursor:not-allowed
   par-dessus cette couleur - "Se connecter" reste visuellement désactivé tant
   que la connexion n'existe pas. */

@media (max-width: 720px) {
  .site-header { padding: 16px 20px; }
  .site-nav { gap: 0; }
  .site-nav .nav-link { padding: 6px 9px; font-size: 0.8rem; }
  .nav-dropdown-trigger { padding: 6px 9px; font-size: 0.8rem; }
}
/* En dessous de ~560px, logo + 2 nav-link + btn-ghost ne tiennent plus dans la
   pilule (testé : débordement dès 480px) - on masque les nav-link secondaires,
   toujours accessibles depuis le footer de chaque page, et on ne garde que le CTA
   "Se connecter". :not(:only-child) épargne les pages où le nav-link est seul
   (connexion/ - "Retour à l'accueil", cgu/ - "Connexion / Inscription") : le masquer
   y viderait complètement le header. Le menu "Nos contrats" (.nav-dropdown) suit
   la même logique - toujours accompagné de "Se connecter", jamais seul. */
@media (max-width: 560px) {
  .site-nav .nav-link:not(:only-child) { display: none; }
  .site-nav .nav-dropdown { display: none; }
  .btn-ghost { margin-left: 0; }
}

.nav-dropdown { position: relative; }
/* Style aligné sur .nav-link (même pilule, même hover) - branché le
   29/08/2026 sur "Nos contrats" (mentions légales, responsabilité, à propos,
   politique de confidentialité), pour s'intégrer au header flottant plutôt
   que trancher visuellement avec "Se connecter" à côté. */
.nav-dropdown-trigger {
  background: none;
  border: none;
  font: inherit;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.nav-dropdown-trigger:hover { background: rgba(55, 138, 221, 0.10); color: var(--color-accent); }
.nav-dropdown-trigger .chevron { transition: transform 0.15s ease; font-size: 0.7em; }
.nav-dropdown.open .nav-dropdown-trigger .chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(30, 40, 50, 0.14);
  min-width: 240px;
  padding: 8px;
  display: none;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }

.nav-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.92rem;
}
.nav-dropdown-item:hover { background: var(--color-surface); }
.nav-dropdown-item.disabled {
  color: var(--color-muted);
  cursor: default;
  pointer-events: none;
}

.badge-soon {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: 8px;
  padding: 7px 16px;
  font-weight: 600;
  font-size: 0.86rem;
  background: transparent;
  cursor: pointer;
  margin-left: 8px;
}
.btn-ghost:hover { background: var(--color-primary); color: var(--color-on-primary); }
.btn-ghost[aria-disabled="true"] { opacity: .6; cursor: not-allowed; pointer-events: none; }
/* Badge "Bientôt" accolé au lien "Se connecter" - cf. index.html. Optionnel : les
   pages qui gardent juste le texte "Se connecter" sans ce span (a-propos,
   responsabilité, cgu, 404) restent inchangées, ce span n'est pas requis. */
.btn-ghost .soon-tag {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 7px;
  /* Micro-ajustement optique (07/09/2026, retour utilisateur) : la pastille est
     géométriquement centrée par le flex du bouton parent, mais une forme ronde
     à côté d'un texte "lit" rarement comme parfaitement alignée à l'œil -
     remontée d'1px pour resserrer l'alignement perçu. */
  position: relative;
  top: -1px;
}

.btn-primary {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  /* Contraste WCAG AA (07/09/2026) : blanc sur --color-accent ne fait que
     3.59:1 (fond trop clair pour du texte). --color-accent-dark (déjà la
     couleur au hover, donc déjà dans la palette) donne 5.43:1. */
  background: var(--color-accent-dark);
  border: none;
  border-radius: 8px;
  /* padding vertical 10px->11px (07/09/2026) : zone tactile mobile 44x44px
     minimum (était 43px de haut) - +2px au total, sans effet visuel notable. */
  padding: 11px 20px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn-primary:hover { background: var(--color-accent); }

.site-footer {
  background: var(--color-footer-bg);
  padding: 40px 32px 24px;
  margin-top: 48px;
}
.site-footer .footer-inner {
  max-width: 1080px;
  margin: 0 auto;
}

/* Ligne du haut : logo + tagline à gauche, CTA contact à droite */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-logo { height: 36px; width: auto; display: block; }
/* Zone tactile mobile 44x44px minimum (07/09/2026) : le lien n'avait pas de
   padding propre, sa hauteur (36px) suivait celle du logo. +4px haut/bas =
   44px de haut, sans changer la taille visible du logo. */
.footer-logo-link { display: inline-flex; align-items: center; padding: 4px 0; }

/* Mention centrée */
.footer-mention {
  text-align: center;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-mention p {
  margin: 0 auto;
  max-width: 620px;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

/* "Nos contrats" + 4 liens métiers */
.footer-contracts { text-align: center; padding-top: 24px; }
.footer-links-label {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Contraste WCAG AA (07/09/2026) : 0.45 ne faisait que 4.04:1 sur le fond du
     footer. 0.55 (déjà la valeur de .footer-links-secondary a ci-dessous, donc
     cohérent avec l'échelle de gris déjà en place) donne 5.26:1. */
  color: rgba(255, 255, 255, 0.55);
}
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-links a {
  /* padding vertical 0->13px (07/09/2026) : zone tactile mobile 44x44px
     minimum (était ~20px de haut) - le footer respire un peu plus, effet
     visuel mineur assumé. */
  padding: 13px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.85rem;
}
.footer-links a:last-child { border-right: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

/* "Aide" - rubrique ajoutée le 30/08/2026 pour /signer-sans-imprimer/, même
   structure (label + .footer-links) que .footer-contracts juste au-dessus. */
.footer-help { text-align: center; padding-top: 20px; }

/* Liens secondaires, plus discrets */
.footer-links-secondary {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 14px 0 20px;
}
.footer-links-secondary a {
  /* padding vertical 0->13px (07/09/2026) : zone tactile mobile 44x44px
     minimum (était ~19px de haut), même raison que .footer-links a. */
  padding: 13px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 0.78rem;
}
.footer-links-secondary a:last-child { border-right: none; }
.footer-links-secondary a:hover { color: #fff; }

.footer-bottom {
  margin: 0;
  padding-top: 12px;
  text-align: center;
  font-size: 0.75rem;
  /* Contraste WCAG AA (07/09/2026) : 0.4 ne faisait que 3.51:1. 0.55 (même
     valeur que .footer-links-secondary a ci-dessus) donne 5.26:1. */
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 640px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* Bloc "Et maintenant ?" - affiché sous le bouton "Télécharger le PDF" dans les
   4 générateurs (kiné, infirmier, dentiste, médecin généraliste) une fois le
   contrat généré, juste en dessous de #post-generation-banners. Le HTML de ce
   bloc est dupliqué à l'identique dans les 4 pages (même convention que le
   header/footer, voir CLAUDE.md) ; son comportement (message copié, retour
   visuel, repli presse-papier) est mutualisé dans next-steps.js. Décision
   actée avec l'utilisateur le 30/08/2026.
   3e itération (30/08/2026) : ni carte à part (v1, trop de place, fond qui se
   fond dans le panneau) ni bandeau notice-compact sur une ligne (v2, Louis ne
   l'aimait pas, et sans marge en dessous il touchait l'aperçu du contrat).
   Version retenue : 2 étapes numérotées comme la v1 (le retour visuel que
   Louis préférait), mais sans carte/fond/bordure et condensées sur une seule
   ligne chacune - juste le titre + 2 lignes + le bouton copier. */
.next-steps-block { margin: 14px 0 20px; }
.next-steps-title {
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-primary);
}
.next-steps-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--color-text);
}
.next-steps-item + .next-steps-item { margin-top: 8px; }
.next-steps-number {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
}
.next-steps-link {
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}
.next-steps-link:hover { text-decoration: underline; }
.next-steps-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  padding: 6px 12px;
  margin: 8px 0 0 30px;
}
.next-steps-copy-check { display: none; width: 13px; height: 13px; flex-shrink: 0; }
.next-steps-copy-btn.is-copied { color: var(--color-accent); border-color: var(--color-accent); }
.next-steps-copy-btn.is-copied .next-steps-copy-check { display: inline-block; }
.next-steps-fallback {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  resize: vertical;
  min-height: 72px;
}

/* Bandeau de consentement cookies (mesure d'audience GA4 uniquement).
   Injecté dynamiquement par cookie-consent.js sur toutes les pages - voir ce
   fichier pour la logique (Consent Mode v2, stockage du choix, réouverture
   via le lien "Gérer les cookies" du footer).
   Chrome de marque volontairement figé en apparence claire, indépendant du
   thème clair/sombre de la page - même logique que .site-footer et
   .legal-diff-band (fond blanc + ardoise bleu/bleu digital fixes, pour rester
   lisible et cohérent quel que soit le mode actif). */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 150;
  width: min(680px, calc(100% - 32px));
  background: #ffffff;
  border: 1px solid #dfe4e8;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(20, 30, 40, 0.18);
  padding: 20px 24px;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1 1 320px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: #1f2a33;
}
.cookie-banner-text a { color: #378ADD; text-decoration: underline; }
.cookie-banner-actions {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}
.cookie-banner-actions button {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 20px;
  line-height: 1;
  cursor: pointer;
}
.btn-cookie-refuse {
  background: #ffffff;
  color: #3D5A73;
  border: 1.5px solid #3D5A73;
}
.btn-cookie-refuse:hover { background: #eef2f5; }
.btn-cookie-accept {
  background: var(--color-accent);
  color: #ffffff;
  border: none;
}
.btn-cookie-accept:hover { background: var(--color-accent-dark); }

@media (max-width: 560px) {
  .cookie-banner { bottom: 12px; padding: 18px; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  /* Bug corrigé le 07/09/2026 : .cookie-banner-text hérite de "flex: 1 1 320px"
     (pensé pour la largeur en layout desktop, cf. règle plus haut) - une fois
     flex-direction passé en column ci-dessus, ce même flex-basis s'applique à
     l'axe principal devenu vertical et force une hauteur de 320px, créant un
     immense espace vide avant les boutons. On neutralise ici le flex-grow/basis
     hérité pour que la hauteur redevienne pilotée par le contenu réel. */
  .cookie-banner-text { flex: 0 1 auto; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions button { flex: 1; }
}