/* ContraGo - styles spécifiques à la page d'accueil. */

/* Menu mobile du header (bouton hamburger + panneau déroulant) - propre à l'accueil,
   seule page dont le header a 2 nav-link + un btn-ghost (donc sujette à déborder sous
   ~640px). Les autres pages qui partagent .site-header (kine, infirmier, a-propos,
   responsabilite, ...) gardent le repli générique de shared.css (masquage des
   nav-link secondaires en dessous de 560px) : elles n'ont pas ce bouton dans leur
   HTML, ces règles ne les concernent donc pas. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  /* 38px->44px (07/09/2026) : zone tactile mobile 44x44px minimum. */
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: #fff;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  flex-shrink: 0;
}
.nav-toggle-bar {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transition: transform .25s ease, opacity .2s ease;
}
/* Morphing 3 traits -> croix à l'ouverture. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* display:none par défaut (desktop) - sans ça .nav-backdrop, <div> normal en flux
   (display:block implicite), devenait un 3e enfant flex de #siteHeader
   (justify-content: space-between, shared.css) en plus de .logo-link et .site-nav,
   ce qui redistribuait l'espacement et décalait le menu vers la gauche au lieu de
   rester plaqué à droite (retour utilisateur du 03/09/2026). Remplacé par
   position:fixed (donc hors flux) seulement sous 640px, où il doit exister. */
.nav-backdrop {
  display: none;
}
@media (max-width: 640px) {
  .nav-toggle { display: inline-flex; }
  /* Fond assombri derrière le panneau déroulant : sans lui, la carte flottante du
     menu se posait à même le hero (titre/tagline juste en dessous du header) et le
     chevauchait à moitié sans aucune séparation visuelle - lisible mais peu
     engageant, ressemblait à un déboîtement (retour utilisateur du 03/09/2026). Un
     clic dessus referme déjà le menu via le listener document existant (home.js,
     initMobileNav) : le backdrop n'est ni dans .site-nav ni dans .nav-toggle, donc
     `!nav.contains(e.target) && !toggle.contains(e.target)` est vrai pour lui - pas
     besoin d'un handler dédié. */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 32, 0.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 90;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
  /* .site-nav devient le panneau déroulant : masqué par défaut (opacity/transform,
     pas display:none, pour garder la transition et l'accessibilité), affiché au clic
     sur .nav-toggle (home.js, initMobileNav). Sélecteur #siteHeader pour l'emporter
     sur la règle générique de shared.css qui masque .nav-link en dessous de 560px -
     ici les liens doivent au contraire rester utilisables dans le panneau ouvert. */
  #siteHeader .site-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: max-content;
    max-width: calc(100vw - 40px);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 16px 32px rgba(31, 42, 51, 0.16);
    padding: 10px;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  #siteHeader .site-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* Doit rester au-dessus du backdrop (z-index 90, plus bas) - sans z-index
       explicite ici, le panneau (position: absolute mais z-index: auto) se serait
       fait recouvrir par le backdrop malgré son z-index numérique plus élevé que 0,
       et son propre texte serait apparu assombri/délavé au lieu du backdrop. */
    z-index: 95;
  }
  #siteHeader .site-nav .nav-link:not(:only-child) {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
  }
  #siteHeader .site-nav .nav-link:not(:only-child):hover { background: rgba(55, 138, 221, 0.08); }
  #siteHeader .site-nav .btn-ghost { margin: 2px 0 0; justify-content: center; }
}

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #EEF2F5 0%, #EEF2F5 66%, #ffffff 100%);
  /* 148px de padding-top = clearance du header rectangulaire ancré fixed (~70px,
     cf. shared.css) + respiration propre au hero. Le header ne pousse plus le
     contenu dans le flux (position: fixed), donc ce padding compense entièrement
     seul, sans rien d'implicite côté header. Repassé de 132 à 148px le 02/09/2026
     (retour utilisateur "il faut que ça respire un peu plus" pendant les tests
     sur index2-5.html) en même temps que le header est devenu rectangulaire.
     Repassé à 208px (03/09/2026, validé après tests index-4/index-5/index6) :
     retour utilisateur "la promesse doit prendre plus de place, plus de vide en
     haut et en bas, mais SANS grossir le texte" - donc uniquement plus d'air
     autour du bloc h1+sous-titres+preuve, pas de changement de taille de police. */
  padding: 208px 32px 96px;
}
/* Dégradé clair fixe repris en mode sombre (31/08/2026) : jusque-là volontairement
   figé sur les mêmes teintes qu'en plein jour (cf. historique .about-diff-band un peu
   plus bas), ce qui produisait un grand rectangle clair au sommet d'une page sombre.
   Reprend --color-surface -> --color-bg du mode sombre (shared.css) pour rester un
   dégradé "panneau légèrement plus clair que le fond", cohérent avec le reste du site
   (ex. .site-header), au lieu d'un fond blanc plaqué sur du sombre. */
@media (prefers-color-scheme: dark) {
  .hero {
    background: linear-gradient(180deg, #1c2932 0%, #1c2932 66%, #16202a 100%);
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1020px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.22;
  margin-bottom: 26px;
  /* var(--color-primary) plutôt qu'une valeur fixe : .hero suit désormais le thème
     (voir le dégradé plus haut, corrigé le 31/08/2026), donc son texte suit aussi -
     #3D5A73 en clair, #7FA3C7 en sombre (shared.css), sans quoi le texte restait
     sombre sur un fond devenu sombre lui aussi. */
  color: var(--color-primary);
}
.hero h1 .hero-accent { color: var(--color-accent); }
.hero-sub {
  font-size: 1.02rem;
  /* Idem, var(--color-muted) - voir commentaire sur .hero h1. */
  color: var(--color-muted);
  margin: 0;
  max-width: 460px;
}
/* Bandeau plein (03/09/2026, validé après tests index-4/index-5/index6) :
   remplace l'ancienne ligne de texte simple - fond --color-footer-bg (le
   bleu nuit fixe du footer, cf. shared.css) en mode clair, coins presque
   droits (border-radius: 3px, pas une pilule), une seule ligne (white-space:
   nowrap) tant qu'il y a la place, retour à la ligne normal sous 480px.
   En mode sombre (retour utilisateur 03/09/2026) : fond blanc + texte bleu
   nuit (l'inverse du clair) plutôt que le bleu nuit fixe, qui se fondait trop
   dans un fond de page déjà sombre - couleurs en dur (pas de var() suivant le
   thème) pour garder ce contraste inversé volontaire dans les deux sens. */
.hero-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-style: normal;
  font-weight: 600;
  font-size: 0.88rem;
  color: #fff;
  background: var(--color-footer-bg);
  border-radius: 3px;
  padding: 9px 16px;
  margin: 20px 0 0;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  .hero-proof {
    background: #fff;
    color: var(--color-footer-bg);
  }
}
@media (max-width: 480px) {
  .hero-proof { white-space: normal; }
}
/* Simple caractère "✓" coloré, sans cercle ni fond (remplace l'ancien rond
   plein) - cohérent avec le nouveau fond sombre du bandeau. */
.hero-proof-icon {
  color: var(--color-accent);
  font-weight: 700;
}
/* Bandeau "meilleure expérience sur ordinateur", mobile uniquement (retour
   utilisateur du 03/09/2026 - 2e itération, remplace une simple mention de texte
   sous le badge du hero, jugée trop discrète et mal placée). Fixed, plein
   largeur, juste sous le header - reste visible tout du long de la page, pas
   seulement dans le hero. Fin volontairement (padding réduit, petite police) :
   une info secondaire, pas une bannière promotionnelle. display:none par défaut
   (desktop) - remplacé sous 640px, même seuil que le reste du repli mobile de
   cette page. z-index 92 : sous le header (100, shared.css) et le panneau nav
   ouvert (95, plus haut) qui doivent rester au-dessus, au-dessus du backdrop nav
   (90) et du contenu de la page. */
.mobile-hint-bar {
  display: none;
}
@media (max-width: 640px) {
  .mobile-hint-bar {
    display: block;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    z-index: 92;
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 6px 12px;
    /* Même transition que #siteHeader.is-hidden (shared.css) - synchronisé avec
       lui juste en dessous, cf. règle suivante. */
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
  }
  /* Le header se cache au scroll rapide vers le bas (site-header.js, .is-hidden) -
     sans ça le bandeau restait planté à top:70px pendant que le header glissait
     hors écran au-dessus de lui, laissant un vide blanc de 70px (retour
     utilisateur du 03/09/2026). On le fait glisser avec lui, comme un seul bloc :
     sélecteur de sibling (.mobile-hint-bar suit <header> dans le DOM, cf. index.html). */
  #siteHeader.is-hidden ~ .mobile-hint-bar {
    transform: translateY(-140%);
    opacity: 0;
  }
}
.hero-scroll-cue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 40px->44px (07/09/2026) : zone tactile mobile 44x44px minimum. */
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #378ADD;
  color: #fff;
  text-decoration: none;
  margin-top: 12px;
  box-shadow: 0 10px 24px rgba(55, 138, 221, 0.28);
}
.hero-scroll-cue:hover { background: #2a6cb0; }
.hero-scroll-cue span { display: inline-block; font-size: 1.1rem; animation: cueBounce 1.6s ease-in-out infinite; }
@keyframes cueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Pilule "1 - Choisissez votre profession", au-dessus de la flèche de scroll.
   margin-top agrandi de 28 à 128px (03/09/2026, validé après tests index-4/
   index-5/index6, retour utilisateur "augmente l'écart avec le héro") : la
   pilule + la flèche + les onglets métier (cf. .metiers-frame) descendent
   d'autant, pour laisser respirer la promesse au-dessus. */
.metiers-step {
  /* Devenue un <a href="#metiers"> le 03/09/2026 (retour utilisateur : cliquer
     dessus ne faisait rien, contrairement à la flèche juste en dessous) - reset du
     rendu <a> par défaut, .metiers-step gère déjà sa propre couleur (#fff). */
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Contraste WCAG AA (07/09/2026) : blanc sur #378ADD ne fait que 3.59:1.
     --color-accent-dark (déjà utilisé pour les états hover ailleurs) donne
     5.43:1. */
  background: var(--color-accent-dark);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  /* padding vertical 10px->14px (07/09/2026) : zone tactile mobile 44x44px
     minimum (était 36px de haut). */
  padding: 14px 20px;
  border-radius: 999px;
  margin-top: 128px;
  box-shadow: 0 10px 24px rgba(55, 138, 221, 0.28);
}
.metiers-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

/* padding-bottom réduit de 64 à 24px (03/09/2026, validé après tests index-4/
   index-5/index6, retour utilisateur "réduit l'écart" - avant le filet de
   séparation, l'espace était devenu trop grand une fois le bloc "pilule +
   onglets" descendu, cf. .metiers-step plus haut et .section-divider plus bas). */
.metiers { position: relative; z-index: 2; padding: 0 32px 24px; }
.metiers-inner { max-width: 1080px; margin: 0 auto; }

/* Anneau extérieur (effet verre dépoli) : chevauche le bas du hero, ne contient QUE
   .metier-tabs - sa taille ne doit jamais varier, contrairement à .metier-desc
   (élément séparé, en dehors de cet anneau, voir plus bas). */
.metiers-frame {
  max-width: 720px;
  margin: -64px auto 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-radius: 999px;
  padding: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(31, 42, 51, 0.04), 0 30px 60px rgba(31, 42, 51, 0.16);
}
/* Effet verre dépoli en mode sombre (31/08/2026) : l'overlay blanc translucide pensé
   pour un fond clair (dégradé ci-dessus, .hero) devenait un voile gris-clair flou sur
   fond sombre - même famille d'effet (dégradé diagonal + liseré clair) mais en overlay
   blanc à faible opacité directement sur le fond sombre, pour rester un vrai "verre sur
   sombre" plutôt qu'une vitre claire mal à sa place. */
@media (prefers-color-scheme: dark) {
  .metiers-frame {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 30px 60px rgba(0, 0, 0, 0.45);
  }
}

.metier-tabs {
  position: relative;
  display: flex;
  gap: 2px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(30, 40, 50, 0.06);
  padding: 6px;
}
/* Pilule blanche en dur (comme .metier-desc plus bas) : sur fond sombre elle formait
   un pavé blanc plaqué au milieu de la page. Repasse sur --color-surface, le même ton
   que le reste des surfaces "carte" du site en mode sombre (shared.css). */
@media (prefers-color-scheme: dark) {
  .metier-tabs {
    background: var(--color-surface);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }
}
.metier-tab {
  flex: 1;
  position: relative;
  z-index: 2;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-primary);
  background: none;
  border: none;
  padding: 11px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s ease;
}
.metier-tab.metier-active { color: #fff; font-weight: 600; }
.metier-tab:hover:not(.metier-active) { color: var(--profession-color, var(--color-accent)); }

/* Indicateur glissant : positionné/dimensionné en JS (home.js, moveIndicator) sur
   les coordonnées réelles de l'onglet actif. --profession-color est posée sur
   documentElement (home.js, selectProfession) - le fallback var(--color-accent)
   couvre le court instant avant exécution du JS et le cas JS désactivé (l'indicateur
   reste alors à opacity: 0, jamais de bleu "en dur" affiché sans sélection réelle). */
.metier-indicator {
  position: absolute;
  z-index: 1;
  top: 6px;
  bottom: 6px;
  border-radius: 999px;
  background: var(--profession-color, var(--color-accent));
  opacity: 0;
  transition: left .32s cubic-bezier(.4, 0, .2, 1), width .32s cubic-bezier(.4, 0, .2, 1),
              background .25s ease, opacity .25s ease;
}

/* Pilule de détail : élément séparé, PAS un enfant de .metiers-frame - apparaît en
   fondu au clic sans jamais faire varier la taille de l'anneau au-dessus. */
.metier-desc {
  max-width: 560px;
  margin: 14px auto 0;
  text-align: center;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: 999px;
  padding: 12px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 14px 30px rgba(31, 42, 51, 0.12);
  transition: opacity .3s ease, transform .3s ease;
}
.metier-desc.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Même correctif que .metiers-frame ci-dessus (31/08/2026) : c'était le pire cas des
   trois pilules signalées - texte var(--color-primary) (clair en mode sombre) sur une
   vitre blanche translucide posée sur fond sombre, donc un texte clair sur un fond lui
   aussi éclairci par l'overlay - quasi illisible. */
@media (prefers-color-scheme: dark) {
  .metier-desc {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.35);
  }
}

@media (max-width: 800px) {
  .hero-sub, .hero-proof { margin-left: auto; margin-right: auto; }
}

@media (max-width: 640px) {
  /* 128px de base + ~30px pour le bandeau .mobile-hint-bar (fixed, sous le header)
     qui apparaît au même seuil - sinon le haut du hero passait dessous, caché. */
  .hero { padding-top: 158px; }
  /* padding vertical 8px->12px (07/09/2026) : zone tactile mobile 44x44px
     minimum, cette surcharge mobile écrasait sinon le padding de la règle de
     base (déjà augmenté plus haut pour la même raison). */
  .metiers-step { font-size: 0.82rem; padding: 12px 16px; }
  /* L'anneau extérieur passait de 720px de large à quasi plein écran sans jamais
     changer de forme (border-radius: 999px hérité du desktop) : sur une pilule à 4
     onglets qui passe en grille 2x2 (plus haute que large), ce même rayon donnait un
     ovale allongé qui ne suivait plus du tout le contour de la grille à l'intérieur.
     border-radius réduit ici pour rester un rectangle arrondi cohérent avec son
     contenu, quelle que soit sa hauteur. */
  .metiers-frame { padding: 8px; border-radius: 28px; }
  /* L'indicateur glissant est pensé pour une rangée unique (left/width en JS) : sur 2
     colonnes x 2 lignes il ne suivrait pas la bonne ligne, donc on bascule sur un
     simple remplissage de couleur de l'onglet actif, comme au clavier/hover. */
  .metier-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    border-radius: 20px;
  }
  .metier-tab {
    text-align: center;
    padding: 12px 8px;
    font-size: 0.82rem;
  }
  .metier-indicator { display: none; }
  .metier-tab.metier-active {
    background: var(--profession-color, var(--color-accent));
    border-radius: 999px;
  }
}

/* Fermée/réduite tant qu'aucune profession n'est choisie (grid-template-rows: 0fr),
   puis dépliée en douceur au clic sur une card métier (.tools-open, voir home.js
   selectProfession). Technique grid plutôt que [hidden] ou height:auto - ce sont les
   seules qui s'animent proprement sans connaître la hauteur finale du contenu. */
.tools {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 0.4s ease, opacity 0.3s ease 0.05s;
  padding-top: 0;
  padding-bottom: 0;
}
.tools.tools-open {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: 56px 32px 64px;
}
.tools-inner { max-width: 1080px; margin: 0 auto; min-height: 0; }
.tools h2 { font-size: 1.6rem; color: var(--color-primary); text-align: center; }
.tools h2 span { color: var(--profession-color, var(--color-accent)); }
.tools-sub {
  text-align: center;
  color: var(--color-muted);
  max-width: 560px;
  margin: 10px auto 36px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tools-grid { grid-template-columns: 1fr; }
}

/* Séparateur entre les cards métiers (et le panneau .tools, invisible tant qu'aucune
   profession n'est choisie) et l'article "Pourquoi ContraGo ?" : jusqu'ici les deux
   se touchaient directement (.metiers n'a pas de padding-bottom, .about-intro
   enchaîne aussitôt avec son propre fond gris) - juste un changement de couleur à
   plat, sans respiration ni repère visuel. Reprend le même filet dégradé que sur
   /a-propos/ (cohérence de marque) plutôt qu'une simple ligne <hr>. */
/* padding réduit de 48 à 32px (03/09/2026, même retour "réduit l'écart" que
   .metiers plus haut). */
.section-divider {
  padding: 32px 32px;
  text-align: center;
}
.section-divider span {
  display: inline-block;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
}

/* ---------------------------------------------------------------------------
   Cards "tools" (03/09/2026, validées après tests index-2 à index-6) : contour
   plein --profession-color (pas dilué, pas de filet du haut) sur la card
   disponible, label/CTA en texte simple + pied de card avec CTA cliquable, et
   une pilule verte "Disponible" qui sépare le statut (toujours vert, universel)
   de la couleur métier (le bleu, qui varie déjà ailleurs sur la page - onglet
   actif, contour de card, CTA). */
.tool-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 20px 20px 18px;
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(30, 40, 50, 0.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (prefers-color-scheme: dark) {
  .tool-card { background: var(--color-surface); }
}
.tool-card h3 { font-size: 1rem; color: var(--color-primary); margin-top: 2px; }
.tool-card p { margin: 0; color: var(--color-muted); font-size: 0.87rem; }

/* Contour plein (pas dilué, pas juste un bord) : seul repère "couleur" de la
   card disponible, sur les 4 côtés à largeur inchangée (1px, comme .tool-card
   de base). */
.tool-available {
  border-color: var(--profession-color, var(--color-accent));
}
.tool-available:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(30, 40, 50, 0.10); }
.tool-available:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(30, 40, 50, 0.10), 0 0 0 1px color-mix(in srgb, var(--profession-color, var(--color-accent)) 45%, transparent); }

/* Pilule verte "Disponible" : fond pastel + texte vert foncé en clair, fond
   vert translucide + texte vert clair en sombre (même logique que les autres
   surfaces du site qui s'inversent plutôt que de garder une valeur figée -
   cf. .metier-tabs/.metier-desc dans ce fichier). Casse normale, pas de
   majuscules, pas de point - juste un badge plein sobre. */
.tool-card-eyebrow {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  color: #0f6b34;
  background: #d7f5e3;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 0 0 2px;
}
@media (prefers-color-scheme: dark) {
  .tool-card-eyebrow {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.22);
  }
}
/* Pilule grise "Bientôt" : même forme que la pilule verte, fond+bord neutres -
   repris du .badge-soon existant (shared.css) pour rester cohérent avec le
   reste du site. Le bord (var(--color-border)) suffit à distinguer la pilule
   du fond de card en mode sombre, où fond de pilule et fond de card partagent
   la même valeur --color-surface. */
.tool-card-eyebrow-soon {
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

/* Pied de card : filet horizontal clair + CTA, poussé tout en bas par le
   margin-top: auto (la card est déjà en flex column, cf. .tool-card ci-dessus).
   La version "plain" (card pointillée) n'a pas de filet - juste l'action, en
   retrait. */
.tool-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.tool-card-footer-plain { border-top: none; padding-top: 8px; }
.tool-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--profession-color, var(--color-accent));
}
.tool-card-cta-arrow { font-size: 0.9rem; transition: transform .2s ease; }
.tool-available:hover .tool-card-cta-arrow { transform: translateX(3px); }
.tool-card-cta-soon { font-size: 0.82rem; color: var(--color-muted); }
.tool-card-cta-write { font-size: 0.82rem; color: var(--color-muted); text-decoration: underline; }

.tool-card-muted { opacity: 0.7; box-shadow: none; border-style: dashed; }

/* Revenu au traitement standard le 22/08/2026 (retour utilisateur) : la card
   médecin généraliste suit exactement le même pattern --profession-color que
   kiné/infirmier/dentiste - pas de dégradé/fond coloré dédié. La distinction
   voulue entre professions passe uniquement par PROFESSION_COLORS (home.js). */

.about {
  padding-bottom: 96px;
  overflow-x: hidden;
}

.about-intro {
  background: var(--color-surface);
  padding: 88px 32px 72px;
  text-align: center;
}
.about-intro h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  color: var(--color-primary);
  margin-bottom: 16px;
}
.about-intro .about-tagline {
  font-size: 1.2rem;
  color: var(--color-accent-dark);
  max-width: 520px;
  margin: 0 auto;
}

.about-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}

.about-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  margin-top: 80px;
}
.about-marked-heading::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 999px;
  margin-bottom: 16px;
}
.about-row h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 18px;
}
.about-row p {
  color: var(--color-text);
  font-size: 1.02rem;
  max-width: 46ch;
}
.about-row-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 26px;
  display: block;
  box-shadow: 0 20px 40px rgba(30, 40, 50, 0.16);
}

/* Rangée inversée (image à gauche, texte à droite) - même technique que
   .ap-row--reverse sur /a-propos/ (a-propos.css) : on ne réordonne pas le DOM,
   juste l'affichage visuel via `order`, colonnes reproportionnées à
   l'identique (0.9fr/1.1fr) pour que le texte garde la colonne la plus large.
   Remplace l'ancien bloc "Ce que fait ContraGo" (.about-hero / .about-hero-text,
   pleine largeur empilée) - fusionné avec "Ce que ContraGo n'est pas"
   (03/09/2026). */
.about-row--reverse { grid-template-columns: 0.9fr 1.1fr; }
.about-row--reverse .about-row-text { order: 2; }
.about-row--reverse .about-row-media { order: 1; }

/* Bande dégradée : reprend volontairement le mesh gradient du hero de la
   home (mêmes couleurs #378ADD / #3D5A73 sur #EEF2F5), couleurs fixes
   pour la même raison que le hero (fond toujours clair, indépendant du
   thème sombre - voir commentaires existants sur .hero dans ce fichier).
   overflow: hidden (03/09/2026, retour de Louis) : les bulles floues
   débordaient du cadre arrondi - même traitement que .legal-diff-band
   (responsabilite/legal.css), où le flou reste contenu dans l'encart. */
.about-diff-band {
  position: relative;
  overflow: hidden;
  background: #EEF2F5;
  margin-top: 96px;
  padding: 76px 32px 100px;
  border-radius: 28px;
}
.about-diff-band::before,
.about-diff-band::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
.about-diff-band::before {
  width: clamp(220px, 26vw, 380px);
  aspect-ratio: 1;
  top: -18%;
  left: -6%;
  background: #378ADD;
  opacity: 0.28;
  filter: blur(clamp(40px, 5vw, 70px));
}
.about-diff-band::after {
  width: clamp(240px, 28vw, 400px);
  aspect-ratio: 1;
  bottom: -30%;
  right: 10%;
  background: #3D5A73;
  opacity: 0.22;
  filter: blur(clamp(44px, 5vw, 75px));
}
.about-diff-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.about-diff-inner h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: #3D5A73;
  margin-bottom: 14px;
}
.about-diff-inner p {
  margin: 0;
  color: #3D5A73;
  font-size: 1.1rem;
  line-height: 1.55;
}

.about-closing-row {
  margin-top: 100px;
}
.about-closing {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.about-closing-block { max-width: 600px; }
.about-closing-block::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 999px;
  margin-bottom: 16px;
}
.about-closing-block h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.about-closing-block p {
  margin: 0;
  color: var(--color-text);
  font-size: 1.02rem;
}
.about-contact-link {
  display: inline-block;
  margin-top: 16px;
  /* padding vertical 0->10px (07/09/2026) : zone tactile mobile 44x44px
     minimum (était 24px de haut). */
  padding: 10px 0;
  color: var(--color-accent);
  text-decoration: underline;
  font-weight: 600;
  font-size: 0.98rem;
}
.about-contact-link:hover { color: var(--color-accent-dark); }

/* Révélation au scroll des blocs de l'article "Pourquoi ContraGo ?" (voir home.js,
   initScrollReveal) - entièrement en progressive enhancement : par défaut (pas de
   classe) chaque bloc est visible, donc un navigateur sans JS ou en échec de script
   les affiche normalement. Le script ajoute .reveal-init au chargement (ce qui les
   masque), puis .is-visible quand chacun entre dans le viewport. Même mécanique que
   sur /a-propos/ (a-propos.css / .ap-reveal). */
.scroll-reveal.reveal-init {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.scroll-reveal.reveal-init.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 860px) {
  .about-row { grid-template-columns: 1fr; }
  .about-row-media { order: -1; }
  .about-row-media img { aspect-ratio: 16/9; }
  .about-diff-inner { grid-template-columns: 1fr; gap: 12px; }
}