/* ==========================================================================
   Piloup — feuille de style de la refonte du site vitrine (piloup.fr)
   Système visuel : voir handoff/HANDOFF.md §3.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Polices auto-hébergées — pas de Google Fonts (RGPD, décision déjà prise).
   -------------------------------------------------------------------------- */

/* Les deux familles sont des polices variables : un seul fichier couvre toute
   la plage de graisses. Deux requêtes au lieu de six, 72 Ko en tout.
   Sous-ensemble latin uniquement — le site est en français.
   Fichiers récupérés le 14/08/2026 depuis fonts.gstatic.com (Baloo 2 v23,
   Nunito v32), puis servis par nginx : aucun appel au CDN à l'exécution. */

@font-face {
  font-family: "Baloo 2";
  src: url("/assets/fonts/baloo2-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Variables — valeurs exactes du HANDOFF §3, ne pas modifier sans revalider.
   -------------------------------------------------------------------------- */

:root {
  /* Couleurs */
  --color-fond: #F7FAFD;
  --color-texte: #22375A;
  --color-texte-secondaire: #4C6480;
  --color-texte-tertiaire: #5E7590;
  --color-action: #2E6BB0;
  --color-action-survol: #1F4E85;
  --color-blanc: #FFFFFF;
  --color-lavande: #E6D8F0;
  --color-lavande-texte: #6B4C86;
  --color-vert: #D8E8CF;
  --color-vert-texte: #3F5C39;
  --color-creme: #FBE9C8;
  --color-creme-texte: #6E5320;
  --color-ciel: #C9DCF0;
  --color-surlignage: #F6D98A;

  /* Formes */
  --rayon-carte: 22px;
  --rayon-carte-grande: 30px; /* cartes étapes/applications/réassurance, cf. maquette */
  --rayon-pastille: 999px;
  --rayon-telephone: 42px;
  --ombre-repos: 0 6px 18px rgba(34, 55, 90, .05);
  --ombre-survol: 0 12px 26px rgba(34, 55, 90, .1);

  /* Typographie */
  --police-titres: "Baloo 2", Helvetica, sans-serif;
  --police-texte: "Nunito", Helvetica, sans-serif;
}

/* --------------------------------------------------------------------------
   Base — recopiée à l'identique depuis la maquette (lignes 13-30).
   -------------------------------------------------------------------------- */

body { margin: 0; background: #F7FAFD; color: #22375A; font-family: Nunito, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
* { box-sizing: border-box; }
a { color: #2E6BB0; text-decoration: none; }
a:hover { color: #1F4E85; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@keyframes bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes bobSoft { 0%,100% { transform: translateY(0) rotate(2.5deg); } 50% { transform: translateY(-7px) rotate(2.5deg); } }
@keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14px,-18px) scale(1.04); } }
@keyframes twinkle { 0%,100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes hTap { 0%,4% { opacity: 0; transform: scale(.35); } 8% { opacity: 1; transform: scale(.9); } 15%,100% { opacity: 0; transform: scale(1.8); } }
@keyframes hPlusOut { 0%,8% { opacity: 1; } 13%,88% { opacity: 0; } 96%,100% { opacity: 1; } }
@keyframes hSentIn { 0%,10% { opacity: 0; transform: scale(.7); } 17%,88% { opacity: 1; transform: scale(1); } 96%,100% { opacity: 0; transform: scale(.7); } }
@keyframes hChipIn { 0%,12% { opacity: 0; transform: translateY(7px); } 19%,88% { opacity: 1; transform: translateY(0); } 96%,100% { opacity: 0; transform: translateY(7px); } }
@keyframes hNotifIn { 0%,25% { opacity: 0; transform: translateY(22px); } 34%,88% { opacity: 1; transform: translateY(0); } 96%,100% { opacity: 0; transform: translateY(22px); } }
@keyframes hSiegeIn { 0%,47% { opacity: 0; transform: translateY(16px); } 56%,88% { opacity: 1; transform: translateY(0); } 96%,100% { opacity: 0; transform: translateY(16px); } }
@keyframes hStep { 0%,4% { background: #EEF4FB; color: #4C6480; } 10%,26% { background: #2E6BB0; color: #FFFFFF; } 33%,100% { background: #EEF4FB; color: #4C6480; } }

/* --------------------------------------------------------------------------
   Typographie générale
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--police-titres);
  font-weight: 700;
  color: var(--color-texte);
  margin: 0;
  line-height: 1.1;
}
h1 { font-size: 58px; font-weight: 800; line-height: 1.08; }
h2 { font-size: 38px; line-height: 1.1; }
h3 { font-size: 19px; line-height: 1.12; }

p {
  font-family: var(--police-texte);
  color: var(--color-texte-secondaire);
  line-height: 1.58;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Squelette de mise en page — le détail par section arrive au lot 2.
   -------------------------------------------------------------------------- */

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px; /* 32px, valeur de la maquette — mesurée, ne pas arrondir */
}

.section {
  padding: 72px 0;
}

.site-header,
.site-footer {
  background: var(--color-blanc);
  /* Les blobs decoratifs de .haut-de-page sont en position: absolute et
     seraient sinon peints au-dessus de l'en-tete dans l'ordre naturel du
     DOM : ils recouvraient visuellement la nav et interceptaient ses clics
     (elementFromPoint renvoyait .blob-1 au lieu du lien FAQ). */
  position: relative;
  z-index: 1;
}

/* Pas de fond sur .hero : le surlignage jaune du h1 est en z-index -1 et
   passerait DERRIERE un fond de section opaque — il devient invisible sans
   qu'aucun test ne s'en apercoive. Le fond de page est porte par body. */
.hero {
  background: transparent;
}

/* --------------------------------------------------------------------------
   4.1 En-tête + blobs de fond
   -------------------------------------------------------------------------- */

.haut-de-page {
  position: relative;
  overflow: hidden;
}

.blob {
  position: absolute;
  opacity: .5;
  /* Purement decoratif (deja aria-hidden) : ne doit jamais intercepter un
     clic, quel que soit l'element qu'il survole. Correction de fond, pas
     seulement le z-index de l'en-tete ci-dessus. */
  pointer-events: none;
}
.blob-1 {
  top: -140px; right: -120px; width: 520px; height: 460px;
  background: var(--color-lavande);
  border-radius: 62% 38% 54% 46% / 48% 58% 42% 52%;
  opacity: .55;
  animation: drift 18s ease-in-out infinite;
}
.blob-2 {
  top: 520px; left: -180px; width: 400px; height: 380px;
  background: var(--color-vert);
  border-radius: 46% 54% 38% 62% / 56% 44% 60% 40%;
  opacity: .5;
  animation: drift 24s ease-in-out infinite;
}
.blob-3 {
  top: 1560px; right: -150px; width: 440px; height: 400px;
  background: var(--color-creme);
  border-radius: 58% 42% 46% 54% / 44% 56% 44% 56%;
  opacity: .55;
  animation: drift 21s ease-in-out infinite;
}

/* Grille a trois colonnes plutot que space-between : avec un flex, la nav se
   retrouve "centree entre deux blocs de largeurs differentes" et derive vers
   la droite des que le logo et le bloc d'actions ne font pas la meme largeur.
   1fr auto 1fr centre la nav dans la BARRE, pas entre ses voisins. */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  /* padding-block seulement : le raccourci `padding` ecraserait les 32px
     horizontaux de .container et collerait le contenu au bord.
     Symetrique : un padding 26px/8px decentrait le contenu de 9px vers le bas. */
  padding-block: 17px;
}

/* .header-logo est le lien qui enveloppe le logo (retour a l'accueil, demande
   du fondateur) ET la premiere cellule de la grille : la regle lui sert a ne
   pas s'etirer sur toute la colonne, sinon la zone cliquable deborde tres au
   dela du logo. */
.header-logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}

.header-logo-img {
  height: 46px;
  width: auto;
  display: block;
}

/* Pas de pastille blanche ici : sur un en-tete deja blanc elle etait invisible
   (seule son ombre la trahissait) alors qu'elle se voyait sur /demo au fond
   bleute — le meme composant avait deux apparences selon la page. */
.header-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link {
  font-size: 14px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: var(--rayon-pastille);
  color: var(--color-texte);
  transition: background 160ms ease;
}
.nav-link:hover {
  background: #EEF4FB;
  color: var(--color-action);
}

/* « Connexion » : lien texte discret, il ne doit pas concurrencer le CTA. */
.nav-connexion {
  color: var(--color-texte-secondaire);
}

.nav-cta {
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--rayon-pastille);
  background: var(--color-action);
  color: var(--color-blanc);
  transition: transform 160ms ease;
}
.nav-cta:hover {
  transform: translateY(-2px);
  color: var(--color-blanc);
}

/* En dessous de 640px, les 3 liens d'ancre + « Connexion » + la pastille CTA
   dépassent largement la largeur de l'écran (bord droit de .header-nav à 602px
   pour un viewport à 360px). On masque tous les .nav-link — « Connexion »
   compris, l'app a son propre écran de connexion — et on ne garde que le logo
   + la pastille CTA : pas de menu hamburger, pas de JS, cf. brief. */
@media (max-width: 640px) {
  .nav-link {
    display: none;
  }
  /* La colonne centrale est vide une fois les ancres masquées : on la retire
     et on repasse en deux colonnes, sinon les 24px de gap creusent un trou. */
  .header-nav {
    display: none;
  }
  .header-inner {
    grid-template-columns: auto 1fr;
  }
}

/* --------------------------------------------------------------------------
   4.2 Hero — colonne gauche
   -------------------------------------------------------------------------- */

.hero-inner {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 40px;
  align-items: center;
  /* padding-block seulement, meme raison que .header-inner */
  padding-block: 46px 70px;
  position: relative;
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 10px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  background: var(--color-blanc);
  border-radius: var(--rayon-pastille);
  padding: 8px 16px 8px 12px;
  box-shadow: 0 4px 14px rgba(34, 55, 90, .07);
  transform: rotate(-1.5deg);
}

.hero-badge-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-lavande);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--color-lavande-texte);
}

.hero-badge-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-texte);
}

.hero-title {
  font-family: var(--police-titres);
  font-size: 58px;
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: 560px;
  margin: 0;
}

@media (max-width: 600px) {
  .hero-title {
    font-size: 40px;
  }
}

.hero-highlight-wrap {
  position: relative;
  display: inline-block;
}

.hero-highlight {
  position: absolute;
  left: -4px; right: -4px; bottom: 6px;
  height: 14px;
  background: var(--color-surlignage);
  border-radius: 8px;
  z-index: -1;
}

.hero-text {
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-texte-secondaire);
  max-width: 470px;
  margin: 0;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 4px;
}

.btn {
  display: inline-block;
  font-weight: 700;
  /* Les deux boutons vidéo sont de vrais <button> (accessibilité) : on leur
     retire la chrome par défaut du navigateur sans toucher .btn-primary et
     .btn-secondary, qui restaient jusqu'ici des <a>. */
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
}

.btn-primary {
  background: var(--color-action);
  color: var(--color-blanc);
  padding: 16px 28px;
  border-radius: var(--rayon-pastille);
  font-size: 16px;
  box-shadow: var(--ombre-repos);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-survol);
  color: var(--color-blanc);
}

.btn-secondary {
  background: var(--color-blanc);
  color: var(--color-texte);
  padding: 16px 26px;
  border-radius: var(--rayon-pastille);
  font-size: 16px;
  box-shadow: 0 6px 18px rgba(34, 55, 90, .08);
  transition: transform 180ms ease;
}
.btn-secondary:hover {
  transform: translateY(-3px);
  color: var(--color-texte);
}

/* --------------------------------------------------------------------------
   Lecteur vidéo en fenêtre modale centrée (hero + CTA final) — décision du
   fondateur du 14/08/2026, remplace le dépliage dans le flux : la vidéo est
   en 1920x1080, le panneau du hero ne faisait que ~380px de large. Un seul
   <dialog> pour les deux boutons ; landing/video.js y insère <video> au
   premier clic, jamais avant.

   Dimensionnement : jamais plus de 90vw de large ni 85vh de haut, ratio
   16/9 toujours préservé. width:90vw borné par max-width en fonction de la
   hauteur disponible donne min(90vw, 85vh * 16/9) ; comme le cadre garde
   aspect-ratio 16/9, sa hauteur ne peut alors jamais dépasser 85vh non
   plus, quelle que soit la forme de la fenêtre.
   -------------------------------------------------------------------------- */

.video-dialog {
  padding: 0;
  border: 0;
  max-width: none;
  max-height: none;
  background: transparent;
  overflow: visible;
}

.video-dialog::backdrop {
  background: rgba(20, 15, 30, 0.7);
}

.video-dialog-cadre {
  position: relative;
  width: 90vw;
  max-width: calc(85vh * 16 / 9);
  aspect-ratio: 16 / 9;
  border-radius: var(--rayon-carte-grande);
  background: #000;
  box-shadow: var(--ombre-repos);
  overflow: hidden;
}

.video-dialog-fermer {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--color-blanc);
  cursor: pointer;
}

.video-dialog-corps {
  width: 100%;
  height: 100%;
}

.video-lecteur {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Pendant que la modale est ouverte, le contenu de la page ne défile plus
   derrière elle — showModal() ne le garantit pas de façon fiable sur tous
   les navigateurs. */
.video-dialog-ouverte {
  overflow: hidden;
}

.hero-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.hero-pill {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--rayon-pastille);
}
.hero-pill-creme {
  background: var(--color-creme);
  color: var(--color-creme-texte);
  transform: rotate(-1deg);
}
.hero-pill-vert {
  background: var(--color-vert);
  color: var(--color-vert-texte);
  transform: rotate(.8deg);
}
.hero-pill-lavande {
  background: var(--color-lavande);
  color: var(--color-lavande-texte);
  transform: rotate(-.6deg);
}

/* --------------------------------------------------------------------------
   4.2 Hero — colonne droite : mockup téléphone + boucle animée
   -------------------------------------------------------------------------- */

.hero-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  min-height: 700px;
  padding-top: 6px;
  /* .hero-right-blob (380px) est centré en absolute dans une colonne qui
     ne mesure que ~296px à 360px de viewport (296 = 360 - 64px de padding
     .container). Sans borne, il déborde de ~42px de chaque côté et gonfle
     la largeur de contenu réelle de .hero-right au-delà de sa largeur
     déclarée — c'est ce débordement, pas .phone-mockup lui-même, qui donne
     une mesure de 316px. overflow: hidden est sûr ici : pas de fond opaque,
     .hero-right est déjà en position: relative (même principe que
     .haut-de-page qui contient déjà .blob-1/2/3 de la même façon). */
  overflow: hidden;
}

.hero-right-blob {
  position: absolute;
  top: 60px;
  width: 380px; height: 380px;
  background: var(--color-ciel);
  border-radius: 54% 46% 60% 40% / 42% 58% 42% 58%;
  opacity: .75;
}

.hero-sparkle {
  border-radius: 50%;
  position: absolute;
}
.hero-sparkle-1 {
  top: 40px; left: 8px; width: 12px; height: 12px;
  background: var(--color-surlignage);
  animation: twinkle 4s ease-in-out infinite;
}
.hero-sparkle-2 {
  bottom: 130px; left: 34px; width: 8px; height: 8px;
  background: #B9D4B0;
  animation: twinkle 5.5s ease-in-out infinite;
}
.hero-sparkle-3 {
  top: 120px; right: 16px; width: 10px; height: 10px;
  background: var(--color-lavande);
  animation: twinkle 6.5s ease-in-out infinite;
}

.phone-mockup {
  position: relative;
  width: 292px;
  border-radius: var(--rayon-telephone);
  background: var(--color-blanc);
  padding: 9px;
  box-shadow: 0 26px 54px rgba(34, 55, 90, .16);
  animation: bob 9s ease-in-out infinite;
}

@media (max-width: 480px) {
  .phone-mockup {
    width: min(292px, 100%);
  }
}

.phone-screen {
  border-radius: 34px;
  overflow: hidden;
  background: #FCFDFF;
  border: 1px solid #ECF2F9;
}

.phone-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 18px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-texte-tertiaire);
}

.phone-statusbar-icon {
  width: 17px; height: 9px;
  border: 1.5px solid #C9D6E4;
  border-radius: 3px;
}

.phone-content {
  padding: 4px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.phone-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.phone-app-title {
  font-family: var(--police-titres);
  font-size: 21px;
  font-weight: 700;
}

.phone-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-creme);
  font-size: 11px; font-weight: 700;
  color: var(--color-creme-texte);
  display: flex; align-items: center; justify-content: center;
}

.phone-tabs {
  display: flex;
  gap: 6px;
}

.phone-tab {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--rayon-pastille);
  background: #EEF4FB;
  color: var(--color-texte-secondaire);
}
.phone-tab-active {
  background: var(--color-action);
  color: var(--color-blanc);
}

.phone-cards {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.phone-card {
  border-radius: var(--rayon-carte);
  background: var(--color-blanc);
  border: 1px solid #E9F0F8;
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.phone-card-elevee {
  box-shadow: 0 4px 12px rgba(34, 55, 90, .05);
}

.phone-card-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.phone-card-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
}
.phone-card-avatar-lavande { background: var(--color-lavande); }
.phone-card-avatar-vert { background: var(--color-vert); }

.phone-card-name-block {
  display: flex;
  flex-direction: column;
}
.phone-card-name-block-flex {
  flex: 1;
  min-width: 0;
}

.phone-card-name {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.phone-card-sub {
  font-size: 11px;
  color: var(--color-texte-tertiaire);
}

.phone-card-anim-sub {
  position: relative;
  display: block;
  height: 15px;
}

.phone-sub-before {
  position: absolute;
  left: 0; top: 0;
  font-size: 11px;
  color: var(--color-texte-tertiaire);
  white-space: nowrap;
}

.phone-sub-after {
  position: absolute;
  left: 0; top: 0;
  font-size: 11px;
  color: var(--color-vert-texte);
  white-space: nowrap;
}

.phone-card-badge-sent {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--rayon-pastille);
  background: var(--color-vert);
  color: var(--color-vert-texte);
}
.phone-badge-marge {
  margin-left: auto;
}
.phone-badge-abs {
  position: absolute;
  right: 0;
}

.phone-card-action {
  margin-left: auto;
  flex: none;
  position: relative;
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.phone-plus-btn {
  position: absolute;
  right: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-action);
  color: var(--color-blanc);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-tap-ring {
  position: absolute;
  right: -3px;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid var(--color-action);
  pointer-events: none;
}

.phone-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.phone-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--rayon-pastille);
  white-space: nowrap;
}
.phone-chip-creme {
  background: var(--color-creme);
  color: var(--color-creme-texte);
}
.phone-chip-bleu {
  background: #E9F0F8;
  color: var(--color-action);
}

.phone-encadrement {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 15px;
  border-radius: 18px;
  background: #F1F7EE;
  border: 1px solid #DCE9D5;
}

.phone-encadrement-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-vert-texte);
  white-space: nowrap;
}

.phone-encadrement-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-vert-texte);
  white-space: nowrap;
}

.hero-destination-cards {
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: center;
  align-items: stretch;
}

.hero-dest-card {
  flex: 1;
  max-width: 192px;
  background: var(--color-blanc);
  border-radius: var(--rayon-carte);
  padding: 14px 15px;
  box-shadow: 0 18px 38px rgba(34, 55, 90, .14);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hero-dest-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-dest-icon {
  width: 22px; height: 22px;
  border-radius: 8px;
}
.hero-dest-icon-famille { background: var(--color-lavande); }
.hero-dest-icon-siege { background: var(--color-ciel); }

.hero-dest-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-texte-tertiaire);
}

.hero-dest-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.hero-dest-sub {
  font-size: 11px;
  color: var(--color-texte-tertiaire);
}

.hero-steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 2px;
}

.hero-step {
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--rayon-pastille);
  background: #EEF4FB;
  color: var(--color-texte-secondaire);
}

/* Classes d'animation — référencent les @keyframes existants, ne pas en ajouter. */
.hero-anim-tap { animation: hTap 12s linear infinite; }
.hero-anim-plusout { animation: hPlusOut 12s linear infinite; }
.hero-anim-sentin, .hero-anim-sentin-text { animation: hSentIn 12s linear infinite; }
.hero-anim-chipin { animation: hChipIn 12s linear infinite; }
.hero-anim-notifin { animation: hNotifIn 12s linear infinite; }
.hero-anim-siegein { animation: hSiegeIn 12s linear infinite; }
.hero-anim-step { animation: hStep 12s linear infinite; }

/* --------------------------------------------------------------------------
   En-tête de section réutilisable (titre + accroche, alignés en bord opposé).
   Motif recopié des sections 4.4/4.6/4.7 de la maquette.
   -------------------------------------------------------------------------- */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.section-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-texte-secondaire);
  max-width: 330px;
}

/* --------------------------------------------------------------------------
   4.4 Trois applications, la même information
   -------------------------------------------------------------------------- */

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

.app-card {
  border-radius: var(--rayon-carte-grande);
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: var(--tilt);
  transition: transform 220ms ease;
}

/* La maquette redresse la carte au survol (rotate(0deg)) : ici on part de
   la variable --tilt plutôt que d'un transform inline, donc rotate(0deg)
   explicite compose correctement avec translateY sans effacer le tilt
   de repos porté par --tilt (même défaut que .step-card, corrigé pareil). */
.app-card:hover {
  transform: translateY(-6px) rotate(0deg);
}

.app-kicker {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--color-blanc);
  padding: 7px 13px;
  border-radius: var(--rayon-pastille);
}

.app-title {
  margin: 0;
  font-family: var(--police-titres);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.app-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #3E566F;
}

.app-rows {
  background: var(--color-blanc);
  border-radius: var(--rayon-carte);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 10px 24px rgba(34, 55, 90, .08);
}

.app-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-row-puce {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  flex: none;
}

.app-row-texte {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.app-row-label {
  font-size: 13px;
  font-weight: 700;
}

.app-row-sub {
  font-size: 11px;
  color: var(--color-texte-tertiaire);
}

.app-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-texte);
}

@media (max-width: 900px) {
  .apps-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   4.6 Ce qu'un logiciel de crèche doit couvrir
   -------------------------------------------------------------------------- */

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 12px;
}

.feature-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
  background: var(--color-blanc);
  border-radius: 20px;
  padding: 15px 18px;
  color: var(--color-texte);
  box-shadow: var(--ombre-repos);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-survol);
  color: var(--color-texte);
}

.feature-dot {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

.feature-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.feature-titre {
  font-family: var(--police-titres);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
}

.feature-corps {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-texte-secondaire);
}

.feature-lien {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-action);
  line-height: 1.4;
  padding-top: 3px;
}

/* --------------------------------------------------------------------------
   4.7 Les questions qu'on nous pose en rendez-vous
   -------------------------------------------------------------------------- */

.trust-head-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
  margin-bottom: 40px;
}

.trust-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-action);
}

.trust-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.trust-card {
  border-radius: var(--rayon-carte-grande);
  padding: 28px 30px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1 1 auto; /* flex-basis posé en inline par carte, cf. build.js */
  min-height: 250px;
  transform: var(--tilt);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* Même motif que .step-card/.app-card : le survol compose avec --tilt
   plutôt que de le remplacer, sinon la carte se redresse d'un coup. */
.trust-card:hover {
  transform: var(--tilt) translateY(-6px);
  box-shadow: var(--ombre-survol);
}

.trust-texte {
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
  min-width: 0;
}

.trust-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trust-num {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 13px;
  background: var(--color-blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--police-titres);
  font-size: 18px;
  font-weight: 700;
}

.trust-titre {
  font-family: var(--police-titres);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.trust-corps {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #3E566F;
}

.trust-hibou {
  flex: none;
  display: block;
  transform: scaleX(-1);
}

@media (max-width: 700px) {
  .trust-card {
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   4.8 Tarif
   -------------------------------------------------------------------------- */

.price-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: center;
}

.price-argumentaire {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.price-argumentaire h2 {
  margin: 0;
  max-width: 420px;
}

.price-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-texte-secondaire);
  max-width: 430px;
}

.price-detail-link {
  font-size: 15px;
  font-weight: 700;
}

.price-citation {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-blanc);
  border-radius: var(--rayon-carte);
  padding: 18px 20px;
  box-shadow: var(--ombre-repos);
  max-width: 430px;
  transform: rotate(-1deg);
}

.price-citation-photo {
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: #F6EEE4;
  display: block;
}

.price-citation-texte {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #3E566F;
  font-style: italic;
}

.price-citation-auteur {
  font-style: normal;
  font-weight: 700;
  color: var(--color-texte);
}

.price-carte {
  position: relative;
  background: var(--color-blanc);
  border-radius: 32px;
  padding: 32px 32px 34px;
  box-shadow: 0 20px 44px rgba(34, 55, 90, .1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.price-badge {
  position: absolute;
  top: -16px;
  left: 28px;
  font-size: 12px;
  font-weight: 700;
  background: var(--color-surlignage);
  color: #6E5320;
  padding: 8px 16px;
  border-radius: var(--rayon-pastille);
  transform: rotate(-3deg);
}

.price-montant {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 8px;
}

.price-chiffre {
  font-family: var(--police-titres);
  font-size: 58px;
  font-weight: 800;
  line-height: 1;
}

.price-unite {
  font-size: 15px;
  color: var(--color-texte-secondaire);
}

.price-lignes {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.price-ligne {
  display: flex;
  gap: 11px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.5;
}

.price-puce {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-vert);
  flex: none;
  transform: translateY(-2px);
}

.price-cta {
  margin-top: 6px;
  text-align: center;
  background: var(--color-action);
  color: var(--color-blanc);
  padding: 16px;
  border-radius: var(--rayon-pastille);
  font-size: 16px;
  font-weight: 700;
  box-shadow: var(--ombre-repos);
  transition: transform 180ms ease;
}

.price-cta:hover {
  transform: translateY(-3px);
  color: var(--color-blanc);
}

.price-mention {
  font-size: 12px;
  text-align: center;
  color: var(--color-texte-tertiaire);
}

@media (max-width: 900px) {
  .price-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   4.9 FAQ
   -------------------------------------------------------------------------- */

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 28px;
}

.faq-card {
  background: var(--color-blanc);
  border-radius: var(--rayon-carte);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--ombre-repos);
}

.faq-question {
  margin: 0;
  font-family: var(--police-titres);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.faq-reponse {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-texte-secondaire);
}

@media (max-width: 700px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   4.10 CTA final
   -------------------------------------------------------------------------- */

.cta-final {
  position: relative;
  width: calc(100% - 112px);
  max-width: 940px;
  margin: 0 auto 84px;
  background: var(--color-action);
  padding-block: 58px 62px;
  padding-inline: 48px;
  border-radius: 34px;
  overflow: hidden;
}

.cta-final-blob {
  position: absolute;
  width: 260px;
  height: 240px;
  background: #5C93CE;
  border-radius: 58% 42% 46% 54% / 44% 56% 44% 56%;
  opacity: .6;
}

.cta-final-blob-1 {
  top: -60px;
  left: -40px;
}

.cta-final-blob-2 {
  bottom: -80px;
  right: -30px;
  width: 300px;
  height: 260px;
  border-radius: 46% 54% 60% 40% / 56% 44% 56% 44%;
  opacity: .55;
}

.cta-final-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.cta-final-inner h2 {
  margin: 0;
  color: var(--color-blanc);
}

.cta-final-hibou {
  width: 168px;
  height: auto;
  display: block;
}

.cta-final-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #E4F0FA;
  max-width: 470px;
}

.cta-final-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 4px;
}

.cta-final-btn-secondaire {
  /* Fond transparent explicite : sans cette ligne, un <button> reprend le
     gris par defaut du navigateur (rgb(240,240,240)) au lieu de laisser
     voir la bande bleue du CTA final — texte blanc illisible dessus. */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .6);
  color: var(--color-blanc);
  padding: 16px 28px;
  border-radius: var(--rayon-pastille);
  font-size: 16px;
  font-weight: 700;
  transition: background 180ms ease;
}

.cta-final-btn-secondaire:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--color-blanc);
}

.cta-final-btn-primaire {
  /* Bug corrige : .btn-primary a background: var(--color-action) (#2E6BB0),
     exactement la couleur de fond de .cta-final. Ratio de contraste ~1.0,
     bouton totalement invisible sur cette bande. On ne peut pas reutiliser
     .btn-primary telle quelle : elle sert aussi dans le hero, sur fond
     clair, ou le bleu est correct. Ici le bouton principal passe en blanc
     (fond clair sur fond bleu, comme le prevoit la maquette handoff), sans
     le box-shadow bleu de .btn-primary qui n'aurait plus de sens sur un
     bouton blanc. */
  background: var(--color-blanc);
  color: var(--color-texte);
  padding: 16px 28px;
  border-radius: var(--rayon-pastille);
  font-size: 16px;
  transition: transform 180ms ease;
}

.cta-final-btn-primaire:hover {
  transform: translateY(-3px);
  color: var(--color-texte);
}

/* --------------------------------------------------------------------------
   4.11 Pied de page
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: 56px 34px;
  padding-inline: 32px;
}

.footer-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  /* Nombre de pistes derive du nombre d'enfants reels (auto-fit), plus de
     compte en dur. Un compte fixe (ex. 4 pistes pour 5 enfants) a deja
     recasse une fois quand une colonne a ete ajoutee ou retiree de
     FOOTER_COLS : le dernier bloc tombait seul sur une ligne. Avec
     auto-fit/minmax, la grille s'adapte d'elle-meme a 3, 4 ou 5 colonnes
     (logo + entrees de FOOTER_COLS) sans qu'on ait a revenir ici a chaque
     changement de contenu. A 1140px de conteneur et 34px de gap, 5 colonnes
     de 150px minimum tiennent sur une seule ligne (1140 - 4*34 = 1004,
     /5 ~= 200px chacune, largement au-dessus du minimum). */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 34px;
}

.footer-col-logo {
  /* La colonne du logo ne s'etire pas au-dela de la taille du visuel
     (120px de large, voir .footer-logo) : sans borne, le PNG suit la
     largeur de sa piste. Marge de quelques px au-dessus de la largeur
     reelle pour ne pas rogner au pixel pres. */
  max-width: 130px;
  /* Alignement optique avec les intitules des colonnes voisines : ces
     intitules sont en petites capitales ~12px avec une hauteur de ligne
     qui laisse un espace au-dessus du texte lui-meme. Un padding-top de
     8px rapproche le haut visuel du logo (le PNG a un fond transparent
     avec un peu d'air au-dessus du dessin) du haut du texte des intitules,
     sans calcul plus fin necessaire pour un ecart de cet ordre. */
  padding-top: 8px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Item de grille : sans ça, sa largeur minimale intrinsèque (min-width
     auto) empêche .footer-link de rétrécir sous son contenu, ce qui pousse
     .footer-grid au-delà du conteneur d'1px à 360px (2 colonnes, gap 34px,
     ~131px utiles par colonne). min-width: 0 autorise la colonne à se
     comprimer et le texte à se répartir normalement dans l'espace donné. */
  min-width: 0;
}

.footer-logo {
  border-radius: 18px;
  display: block;
  /* Largeur exacte derivee du ratio reel du fichier (710 x 744 px,
     ratio largeur/hauteur = 710/744 = 0.95430...) pour une hauteur choisie
     de 126px : 126 x 0.95430... = 120.24, arrondi a 120px. Un ratio
     approximatif decalerait la mise en page au chargement (l'attribut
     width/height reserve l'espace avant que l'image soit telechargee).
     Fixe (pas width:100%) : cette regle a ete fusionnee avec un doublon qui
     etirait le logo a 100% de sa colonne (jusqu'a 130px avec height:auto),
     annulant silencieusement la taille voulue. */
  width: 120px;
  height: 126px;
}

.footer-col-titre {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-texte-tertiaire);
}

.footer-link {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: var(--color-texte);
}

.footer-bas {
  max-width: 1140px;
  margin: 34px auto 0;
  padding-top: 22px;
  border-top: 1px solid #E3EBF5;
  text-align: center;
  font-size: 14px;
  color: var(--color-texte-tertiaire);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Pages intérieures — lot 5a
   Réutilise les variables/rayons/ombres existants, aucune couleur ni police
   nouvelle. Pas de fond opaque sur .page-hero (même précaution que .hero).
   ========================================================================== */

.page-hero {
  padding-block: 56px 20px;
}

.page-hero-simple {
  padding-block: 56px 8px;
}

.page-hero-kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-action);
  margin-bottom: 12px;
}

.page-hero-titre {
  font-size: 44px;
  line-height: 1.12;
  font-weight: 800;
  max-width: 640px;
}

@media (max-width: 600px) {
  .page-hero-titre {
    font-size: 32px;
  }
}

.page-hero-intro {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-texte-secondaire);
  max-width: 560px;
}

/* Corps de texte long : mentions légales, blocs FAQ, paragraphes de fond.
   .page-texte porte AUSSI .container (centré à 1140px, padding 32px) : elle
   ne doit donc plus toucher max-width/margin du bloc — ça annulerait le
   centrage hérité et collerait tout à gauche de la fenêtre, pas de la
   colonne (régression du 12/08). La largeur de lecture de 720px se limite
   ici à l'intérieur, sur les enfants directs, calée à gauche. */
.page-texte > * {
  max-width: 720px;
}

.page-texte h2 {
  margin-top: 48px;
  margin-bottom: 14px;
  font-size: 26px;
}
.page-texte h2:first-child {
  margin-top: 0;
}

.page-texte h3 {
  margin-top: 0;
  margin-bottom: 8px;
}

.page-texte p {
  margin-bottom: 16px;
  font-size: 16px;
}
.page-texte p:last-child {
  margin-bottom: 0;
}

.page-texte ul {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--color-texte-secondaire);
  font-size: 16px;
  line-height: 1.6;
}
.page-texte li {
  margin-bottom: 6px;
}

.page-texte > a {
  font-weight: 700;
}

/* FAQ en <details>/<summary>, sobre, cohérente avec .faq-card. */
.faq-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.faq-item {
  background: var(--color-blanc);
  border-radius: var(--rayon-carte);
  padding: 18px 22px;
  box-shadow: var(--ombre-repos);
}

.faq-item summary {
  cursor: pointer;
  font-family: var(--police-titres);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-texte);
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::before {
  content: "+";
  display: inline-block;
  width: 18px;
  color: var(--color-action);
  font-weight: 800;
}
.faq-item[open] summary::before {
  content: "−";
}

.faq-item p {
  margin: 12px 0 0 18px;
  font-size: 14.5px;
}

/* Carte de prix réutilisée hors de la grille hero de la home. */
.price-carte-page {
  max-width: 420px;
  margin: 0 auto;
}

.price-carte-sub {
  margin: 0;
  font-size: 13px;
  color: var(--color-texte-tertiaire);
}

/* Mini-cartes "paliers" — même langage visuel que .app-card/.trust-card. */
.paliers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}

.palier-card {
  background: var(--color-blanc);
  border-radius: var(--rayon-carte);
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--ombre-repos);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.palier-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-survol);
}

.palier-card-marque {
  border: 2px solid var(--color-action);
}

.palier-card h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.palier-montant {
  margin: 0;
  font-family: var(--police-titres);
  font-size: 26px;
  font-weight: 800;
  color: var(--color-texte);
}
.palier-montant span {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-texte-tertiaire);
}

@media (max-width: 700px) {
  .paliers-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Grille de critères (/comparatif-logiciel-creche)
   -------------------------------------------------------------------------- */

.critere-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.critere-card {
  background: var(--color-blanc);
  border-radius: var(--rayon-carte);
  padding: 22px;
  box-shadow: var(--ombre-repos);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.critere-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-survol);
}

.critere-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.critere-question {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-texte-secondaire);
}

.critere-limite {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-texte-tertiaire);
}

@media (max-width: 700px) {
  .critere-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Formulaire de démo
   Six classes utilisées dans contenuDemo() (data/pages.js) mais jamais
   stylées jusqu'ici — conséquence grave pour .demo-form__honeypot, qui
   s'affichait en clair (masquage manquant du champ anti-spam). Réutilise
   uniquement les variables déclarées dans :root, aucune couleur nouvelle.
   -------------------------------------------------------------------------- */

.demo-form {
  max-width: 720px; /* cohérent avec .page-texte */
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* `hidden` seul ne suffit pas : la règle display ci-dessus écrase le
   display:none que le navigateur applique à [hidden]. Sans ceci, le
   formulaire reste affiché après un envoi réussi (constaté en production
   le 14/08/2026) et le visiteur peut renvoyer sa demande en croyant que
   le premier envoi a échoué. */
.demo-form[hidden] {
  display: none;
}

.demo-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

@media (max-width: 700px) {
  /* même seuil que .paliers-grid/.faq-grid pour ce gabarit de page. */
  .demo-form__row {
    grid-template-columns: 1fr;
  }
}

.demo-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.demo-form__field label {
  font-family: var(--police-texte);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-texte);
}

.demo-form__field input,
.demo-form__field select,
.demo-form__field textarea {
  font-family: var(--police-texte);
  font-size: 15px;
  color: var(--color-texte);
  background: var(--color-blanc);
  border: 1px solid #C9D2DE; /* dérivé neutre, cohérent avec .phone-statusbar-icon */
  border-radius: 11px; /* moitié de --rayon-carte */
  padding: 12px 14px;
}

.demo-form__field input:focus-visible,
.demo-form__field select:focus-visible,
.demo-form__field textarea:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 1px;
}

.demo-form__field textarea {
  resize: vertical;
}

/* Honeypot anti-spam : masqué visuellement et pour la souris/le tactile,
   mais jamais retiré du DOM ni de la soumission — display:none/visibility:
   hidden sont ici volontairement évités (comportement moins uniforme selon
   lecteurs d'écran/navigateurs) au profit d'un positionnement hors écran
   à dimensions nulles, la pratique standard pour ce type de champ. */
.demo-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.demo-form__error {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-texte); /* 11.92:1 sur blanc, cf. script de contraste */
  background: var(--color-blanc);
  border: 1px solid var(--color-texte-tertiaire);
  border-radius: var(--rayon-carte);
  padding: 14px 18px;
}

.demo-form__success {
  max-width: 720px;
  margin: 0;
  background: var(--color-vert);
  border-radius: var(--rayon-carte);
  padding: 26px 28px;
}

.demo-form__success h2 {
  color: var(--color-vert-texte); /* 5.84:1 sur --color-vert */
  margin-bottom: 8px;
}

.demo-form__success p {
  margin: 0;
  color: var(--color-vert-texte);
}

/* --------------------------------------------------------------------------
   /demo refondue — deux colonnes : le formulaire posé sur une carte blanche,
   une colonne de réassurance à droite. Maquette validée par le fondateur.
   Aucune couleur nouvelle hors du filet #E4EBF3 ; ombres neutres seulement
   (les halos bleus ont été retirés, ne pas les réintroduire ici).
   -------------------------------------------------------------------------- */

.demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

@media (max-width: 940px) {
  .demo-layout {
    grid-template-columns: 1fr;
  }
}

.demo-carte {
  background: var(--color-blanc);
  border-radius: var(--rayon-carte-grande);
  box-shadow: var(--ombre-repos);
  padding: 34px 34px 30px;
}

@media (max-width: 600px) {
  .demo-carte {
    padding: 24px 20px;
  }
}

/* Dans la carte, le formulaire prend toute la largeur disponible : la borne
   de 720px de .demo-form vaut pour un formulaire posé à même la page. */
.demo-carte .demo-form {
  max-width: none;
  gap: 18px;
}

/* Groupe facultatif : mêmes champs, poids visuel réduit. */
.demo-form__optionnel {
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid #E4EBF3;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.demo-form__optionnel-titre {
  font-family: var(--police-texte);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-texte-tertiaire);
  margin: 0;
}

.demo-form__pied {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.demo-form__pied .btn-primary {
  padding-inline: 34px;
}

.demo-form__mention {
  margin: 0;
  font-size: 14px;
  color: var(--color-texte-secondaire);
}

/* Colonne de réassurance */
.demo-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.demo-etapes {
  background: var(--color-ciel);
  border-radius: var(--rayon-carte-grande);
  padding: 26px 26px 24px;
}

.demo-etapes h2 {
  font-family: var(--police-titres);
  font-size: 20px;
  margin: 0 0 16px;
  color: var(--color-texte);
}

.demo-etapes ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: e;
}

/* Chaque <li> est une grille pastille + bloc de texte : le <div> interne du
   markup porte le <strong> et le <span>, sinon ils occupent deux cellules
   distinctes et la numérotation se désaligne. */
.demo-etapes li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-texte);
  counter-increment: e;
}

.demo-etapes li::before {
  content: counter(e);
  width: 30px;
  height: 30px;
  border-radius: var(--rayon-pastille);
  background: var(--color-action);
  color: var(--color-blanc);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-etapes strong {
  display: block;
  font-weight: 800;
}

.demo-etapes span {
  color: var(--color-texte-secondaire);
}

.demo-argument {
  background: var(--color-vert);
  border-radius: var(--rayon-carte-grande);
  padding: 22px 24px;
  color: var(--color-vert-texte);
}

.demo-argument h2 {
  font-family: var(--police-titres);
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--color-vert-texte);
}

.demo-argument p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
}

.demo-contact {
  background: var(--color-blanc);
  border-radius: var(--rayon-carte-grande);
  box-shadow: var(--ombre-repos);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  align-items: center;
}

.demo-contact img {
  width: 62px;
  height: auto;
}

.demo-contact p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-texte-secondaire);
}

.demo-contact a {
  font-weight: 700;
}