* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: 'DM Sans', sans-serif;
  background: #F4F6F5;
  color: #1C3B3A;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

/* TOPBAR */
.topbar {
  background: #1C3B3A;
  padding: 13px 40px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-mark {
  width: 30px; height: 30px;
  background: #A8D5C2;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-name { color: #fff; font-size: 16px; font-weight: 600; }
.logo-sub  { color: rgba(168,213,194,0.72); font-size: 11px; margin-left: 4px; }

/* HERO */
.hero {
  display: grid;
  grid-template-columns: 1fr 480px;
  height: 600px;
}

/* COLONNE GAUCHE */
.left { position: relative; overflow: hidden; height: 600px; }
.left img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 40% 30%;
  filter: brightness(0.50);
}
.left-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 44px 48px 44px 40px;
}
.left-tag {
  display: inline-block;
  background: #A8D5C2; color: #0F2928;
  font-size: 11px; font-weight: 600;
  padding: 5px 12px; border-radius: 4px;
  margin-bottom: 16px; letter-spacing: 0.5px;
  width: fit-content;
}
.left-title {
  font-family: 'DM Serif Display', serif;
  font-size: 32px; color: #fff; line-height: 1.2;
  margin-bottom: 12px;
}
.left-desc {
  font-size: 13px; color: rgba(255,255,255,0.78);
  line-height: 1.65; max-width: 360px;
}
/* 25/09/2026 (v1.2) : bandeau du module de gestion des programmes et ateliers ETP.
   Classe distincte de .left-desc, qui est masquee sous 900 px de large. */
.left-module {
  display: flex; align-items: center; gap: 8px;
  width: fit-content; max-width: 100%;
  background: rgba(10, 86, 89, 0.88);
  border-left: 3px solid #A8D5C2;
  color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1.35;
  padding: 9px 15px; border-radius: 0 6px 6px 0;
  margin-bottom: 14px;
}
.left-module svg { flex-shrink: 0; color: #A8D5C2; }

/* COLONNE DROITE */
.right {
  background: #ffffff;
  height: 600px; overflow-y: auto;
  padding: 44px 40px;
  display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid #D0DFDC;
}
.form-title { font-size: 22px; font-weight: 600; color: #1C3B3A; margin-bottom: 4px; }
.form-sub   { font-size: 13px; color: #4A6260; margin-bottom: 26px; }

/* MESSAGE D'ERREUR */
.alert-error {
  background: #FDF0F0;
  border-left: 4px solid #C0392B;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 13px; color: #7B2020;
  margin-bottom: 18px;
}

/* CHAMPS */
label {
  font-size: 12px; font-weight: 600; color: #1C3B3A;
  display: block; margin-bottom: 7px;
  letter-spacing: 0.4px; text-transform: uppercase;
}
.field { position: relative; margin-bottom: 16px; }
.field input {
  width: 100%; height: 46px;
  border: 2px solid #B0CECC; border-radius: 8px;
  padding: 0 12px 0 42px;
  font-size: 14px; color: #1C3B3A;
  background: #F8FBFB;
  font-family: 'DM Sans', sans-serif;
  outline: none;
}
.field input:focus { border-color: #1C3B3A; background: #fff; }
.field-icon {
  position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* NOTICE RPPS */
.notice {
  background: #EBF5F0;
  border-left: 4px solid #3B8A6E;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 12px; color: #1C3B3A; line-height: 1.65;
  margin-bottom: 20px;
  display: flex; gap: 8px; align-items: flex-start;
}

/* BOUTON PRINCIPAL */
.btn-main {
  width: 100%; height: 48px;
  background: #1C3B3A; color: #ffffff;
  border: none; border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.15s;
}
.btn-main:hover { background: #2A5250; }

/* LIENS */
.links-row {
  display: flex; justify-content: space-between;
  margin-bottom: 16px;
}
.lnk { font-size: 13px; color: #3B8A6E; text-decoration: none; font-weight: 500; }
.lnk:hover { text-decoration: underline; }

/* SEPARATEUR */
.sep {
  display: flex; align-items: center; gap: 10px;
  color: #7A9896; font-size: 13px; margin-bottom: 16px;
}
.sep::before, .sep::after {
  content: ''; flex: 1; height: 1.5px; background: #D0DFDC;
}

/* BOUTON SECONDAIRE */
.btn-sec {
  width: 100%; height: 48px;
  background: #ffffff; color: #1C3B3A;
  border: 2px solid #1C3B3A; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.btn-sec:hover { background: #1C3B3A; color: #ffffff; }

/* PIED DE FORMULAIRE */
.secure {
  font-size: 12px; color: #5A8A86; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.tva { font-size: 11px; color: #7AADAB; text-align: center; margin-top: 5px; }

/* Point 6 : Baseline login */
.login-baseline {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    color: #0A5659;
    line-height: 1.5;
    margin-top: 16px;
    font-style: italic;
    text-align: center;
}

/* BARRE DE STATS */
.stats-bar {
  display: grid; grid-template-columns: repeat(4,1fr);
  background: #ffffff;
  border-top: 3px solid #1C3B3A;
}
.stat {
  padding: 22px 16px; text-align: center;
  border-right: 1px solid #D8E2E0;
}
.stat:last-child { border-right: none; }
.stat-val { font-size: 17px; font-weight: 600; color: #1C3B3A; margin-top: 8px; }
.stat-lbl { font-size: 11px; color: #5A8A86; margin-top: 4px; line-height: 1.45; }

/* BENEFICES */
.benefits { padding: 52px 40px; background: #F4F6F5; }
.benefits h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 26px; color: #1C3B3A; margin-bottom: 28px;
}
.cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.card {
  background: #ffffff;
  border: 1.5px solid #C0D8D4; border-radius: 12px;
  padding: 24px 18px;
}
.card-icon {
  width: 38px; height: 38px;
  background: #1C3B3A; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.card h3 { font-size: 14px; font-weight: 600; color: #1C3B3A; margin-bottom: 8px; line-height: 1.35; }
.card p  { font-size: 12px; color: #4A6260; line-height: 1.6; }

/* PARCOURS STRUCTURES : 3 etapes reliees par des fleches.
   Remplace le style inline flex-wrap:nowrap qui provoquait
   un debordement horizontal sur mobile. */
.cards-parcours {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}
.cards-parcours .card { flex: 1 1 0; min-width: 0; }
.parcours-fleche {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.parcours-fleche svg { display: block; }

/* ROI */
.roi { display: grid; grid-template-columns: 1fr 1fr; background: #1C3B3A; }
.roi-col { padding: 48px 40px; }
.roi-col:first-child { border-right: 1px solid rgba(255,255,255,0.1); }
.roi-col h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 22px; color: #A8D5C2; margin-bottom: 22px;
}
.roi-line { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.roi-num  { font-size: 38px; font-weight: 600; color: #ffffff; }
.roi-unit { font-size: 14px; color: rgba(168,213,194,0.72); }
.roi-note { font-size: 12px; color: rgba(255,255,255,0.52); line-height: 1.7; margin-top: 14px; }

/* PATIENTS */
.patients { background: #ffffff; padding: 48px 40px; }
.patients h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 24px; color: #1C3B3A; margin-bottom: 22px;
}
.patients ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.patients li {
  font-size: 13px; color: #2D4A48;
  padding-left: 22px; position: relative; line-height: 1.6;
}
.patients li::before {
  content: '';
  position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px;
  background: #A8D5C2; border-radius: 50%;
}

/* FOOTER */
footer {
  background: #1C3B3A;
  padding: 20px 40px;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-left { font-size: 12px; color: rgba(168,213,194,0.58); }
.footer-links a {
  color: rgba(168,213,194,0.58);
  text-decoration: none; font-size: 12px; margin-left: 20px;
}
.footer-links a:hover { color: #A8D5C2; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; height: auto; }
  .left { height: 240px; }
  .left-title { font-size: 26px; }
  .left-desc { display: none; }
  .left-module { font-size: 12px; padding: 7px 12px; margin-bottom: 0; }
  .right { height: auto; padding: 32px 28px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .cards-parcours { flex-direction: column; flex-wrap: wrap; align-items: stretch; }
  .parcours-fleche { padding: 2px 0; }
  .parcours-fleche svg { transform: rotate(90deg); width: 24px; height: 24px; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .roi { grid-template-columns: 1fr; }
  .roi-col:first-child { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .patients ul { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .topbar { padding: 10px 14px; }
  .logo-name { font-size: 14px; }
  .logo-sub { display: none; }
  .logo-mark { width: 26px; height: 26px; }

  .left { height: 180px; }
  .left-overlay { padding: 20px 24px; }
  .left-title { font-size: 20px; line-height: 1.15; }
  .left-tag { font-size: 10px; padding: 4px 8px; margin-bottom: 8px; }
  .left-module { font-size: 11px; padding: 6px 10px; gap: 6px; }
  .left-module svg { width: 13px; height: 13px; }

  .right { padding: 24px 16px; }
  .form-title { font-size: 18px; }
  .form-sub { font-size: 12px; margin-bottom: 18px; }

  .field input { height: 42px; font-size: 16px; padding: 0 10px 0 36px; }
  label { font-size: 11px; margin-bottom: 5px; }

  .notice { font-size: 11px; padding: 8px 10px; gap: 6px; }

  .btn-main { height: 44px; font-size: 14px; margin-bottom: 10px; }
  .btn-sec { height: 44px; font-size: 13px; margin-bottom: 14px; }

  .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stat { padding: 16px 12px; }
  .stat-val { font-size: 15px; margin-top: 6px; }
  .stat-lbl { font-size: 10px; line-height: 1.3; }

  .benefits { padding: 28px 16px; }
  .benefits h2 { font-size: 20px; margin-bottom: 20px; }
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 16px 12px; }
  .card-icon { width: 32px; height: 32px; margin-bottom: 10px; }
  .card h3 { font-size: 13px; margin-bottom: 6px; }
  .card p { font-size: 11px; }

  .roi { grid-template-columns: 1fr; }
  .roi-col { padding: 24px 16px; }
  .roi-col:first-child { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .roi-col h2 { font-size: 18px; margin-bottom: 14px; }
  .roi-num { font-size: 32px; }
  .roi-unit { font-size: 12px; }
  .roi-note { font-size: 11px; margin-top: 10px; }

  .patients { padding: 28px 16px; }
  .patients h2 { font-size: 18px; margin-bottom: 16px; }
  .patients ul { grid-template-columns: 1fr; gap: 8px; }
  .patients li { font-size: 12px; padding-left: 18px; }

  .links-row { flex-direction: column; gap: 6px; align-items: stretch; }
  .lnk { display: block; text-align: center; }

  .secure { font-size: 10px; }
  .tva { font-size: 10px; }

  footer { padding: 14px 12px; flex-direction: column; gap: 8px; }
  .footer-left { font-size: 10px; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 2px; }
  .footer-links a { margin-left: 4px; font-size: 10px; }
}

/* FAQ HUB : maillage vers les pages publiques */
.faq-hub {
  background: #f7fafa;
  border-top: 1px solid #dde9e8;
  padding: 48px 40px;
}
.faq-hub h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 24px; color: #1C3B3A; margin-bottom: 8px;
}
.faq-hub > p.faq-hub-intro {
  font-size: 13px; color: #5A8A86; margin-bottom: 26px; max-width: 620px;
}
.faq-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 34px;
  max-width: 1100px;
}
.faq-hub-item h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 600; color: #1C3B3A;
  margin-bottom: 6px; line-height: 1.4;
}
.faq-hub-item p {
  font-size: 13px; color: #2D4A48; line-height: 1.6; margin-bottom: 6px;
}
.faq-hub-item a {
  font-size: 12.5px; color: #1C3B3A; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid #A8D5C2;
}
.faq-hub-item a:hover { color: #0A5659; border-bottom-color: #0A5659; }

@media (max-width: 860px) {
  .faq-hub { padding: 36px 22px; }
  .faq-hub-grid { grid-template-columns: 1fr; gap: 20px; }
}