/* ============================================================
   Suivi Permis — habillage des PAGES PUBLIQUES uniquement
   (accueil, inscription en ligne, confirmation).
   Charte officielle Fondation Djaponon Diaspora Afrik :
   ROUGE / NOIR / BLANC + liseré wax multicolore discret,
   photos des grandes infrastructures d'Abidjan.
   Esprit macOS : clair, aéré, verre dépoli, ombres douces.
   MOBILE D'ABORD : tout est conçu pour 320px et plus, avec
   des replis propres pour les navigateurs modestes.
   L'interface de gestion garde assets/style.css : ne pas mélanger.
   ============================================================ */

:root {
  --rouge: #C1272D;
  --rouge-vif: #DA3A40;
  --rouge-sombre: #96181E;
  --rouge-brume: #FBEEEC;
  --noir: #17181C;
  --encre: #1E1F24;
  --gris: #6A6E76;
  --gris-doux: #9A9EA6;
  --ambre: #E8A33D;
  --vert: #1E8A4C;
  --ombre-douce: 0 10px 34px rgba(23, 24, 28, .09), 0 2px 8px rgba(193, 39, 45, .05);
  --ombre-legere: 0 4px 16px rgba(23, 24, 28, .06);
  --rayon: 20px;
  --rayon-petit: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.pub {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--encre);
  font-size: 16px;
  line-height: 1.55;
  background: #F8F5F2;
  min-height: 100vh;
  overflow-x: hidden;              /* aucun défilement latéral, jamais */
  -webkit-font-smoothing: antialiased;
}
/* Fond doux : halos très discrets (rouge, ambre, vert wax) */
body.pub::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 420px at 6% -6%, rgba(193, 39, 45, .09), transparent 65%),
    radial-gradient(520px 400px at 100% 10%, rgba(232, 163, 61, .11), transparent 65%),
    radial-gradient(700px 520px at 50% 112%, rgba(30, 138, 76, .07), transparent 70%),
    linear-gradient(180deg, #FAF7F4 0%, #F5F1EC 100%);
}
/* Liseré wax signature, fin, fixé en haut de page */
body.pub::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 40;
  background: repeating-linear-gradient(90deg,
    var(--rouge) 0 26px,  var(--noir) 26px 32px,
    var(--ambre) 32px 58px, var(--noir) 58px 64px,
    #2E8B57 64px 90px,    var(--noir) 90px 96px);
}

.pub a { color: var(--rouge); }
/* les liens-boutons gardent leur propre couleur */
.pub a.btn-cta { color: #fff; }
.pub a.btn-douce { color: var(--rouge-sombre); }
.pub a.tel-lien { color: var(--encre); }
.pub .p-gestion a { color: var(--gris-doux); }
.pub img, .pub svg { max-width: 100%; }
/* L'attribut [hidden] doit TOUJOURS cacher, même si une classe impose display:flex */
body.pub [hidden] { display: none !important; }

/* ---- Apparition douce des sections (repli : rien, contenu visible) ---- */
@keyframes pub-lever {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.apparait { animation: pub-lever .55s cubic-bezier(.22,.8,.36,1) both; }
.apparait.t1 { animation-delay: .05s; }
.apparait.t2 { animation-delay: .12s; }
.apparait.t3 { animation-delay: .19s; }
.apparait.t4 { animation-delay: .26s; }
@media (prefers-reduced-motion: reduce) {
  .apparait { animation: none; }
  * { transition: none !important; animation-duration: .01s !important; }
}

/* ---- Conteneur (respecte les encoches iPhone) ---- */
.pub-page {
  max-width: 620px; margin: 0 auto;
  padding: 6px 16px 44px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* ---- Carte « verre dépoli » (repli : blanc quasi opaque) ---- */
.verre {
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
  padding: 22px 18px;
  margin-top: 18px;
}
@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .verre {
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
  }
}

/* ============================================================
   HÉROS : photo du pont de Cocody, voile sombre, texte blanc.
   Le dégradé de secours s'affiche instantanément pendant que
   la photo charge (connexions lentes).
   ============================================================ */
.hero-photo {
  position: relative;
  background:
    linear-gradient(168deg, rgba(20, 20, 25, .82) 0%, rgba(46, 18, 20, .68) 55%, rgba(20, 20, 25, .84) 100%),
    linear-gradient(160deg, #23242B 0%, #4A1B1E 60%, #17181C 100%);
  background-size: cover; background-position: center 30%;
  border-radius: 0 0 26px 26px;
  overflow: hidden;
  color: #fff;
}
.hero-photo.chargee {
  background:
    linear-gradient(168deg, rgba(20, 20, 25, .72) 0%, rgba(46, 18, 20, .48) 55%, rgba(20, 20, 25, .78) 100%),
    url("pont-cocody.jpg"),
    linear-gradient(160deg, #23242B 0%, #4A1B1E 60%, #17181C 100%);
  background-size: cover, cover, cover;
  background-position: center 30%, center 30%, center;
}
.hero-in {
  max-width: 960px; margin: 0 auto; text-align: center;
  padding: 44px 20px 34px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.badge-fondation {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.6);
  color: var(--noir); font-weight: 650; font-size: .78rem;
  letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 14px 5px 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  text-align: left; line-height: 1.25;
}
.badge-fondation .logo-d { display: flex; flex: 0 0 auto; }
.hero-in h1 {
  font-size: clamp(1.75rem, 7.2vw, 2.75rem);
  line-height: 1.1; letter-spacing: -.02em;
  margin: 18px 0 6px; font-weight: 800;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.tampon {
  display: inline-block; transform: rotate(-2.5deg);
  background: linear-gradient(180deg, #DA3A40, #B7222A);
  color: #fff; padding: 2px 14px 4px; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(193,39,45,.45);
  letter-spacing: .04em;
}
.hero-in .sous {
  color: rgba(255,255,255,.92); font-size: 1.02rem;
  margin: 10px auto 0; max-width: 460px;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.hero-in .sous strong { color: #fff; }
.hero-photo .credit-photo {
  position: absolute; right: 10px; bottom: 4px; margin: 0;
  font-size: .62rem; color: rgba(255,255,255,.55);
}

/* ---- Boutons (cibles tactiles >= 52px de haut) ---- */
.btn-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; text-decoration: none; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #D93A40 0%, #B7222A 100%);
  color: #fff; font-size: 1.13rem; font-weight: 700; letter-spacing: .01em;
  font-family: inherit;
  border-radius: 16px; padding: 16px 22px; margin: 22px 0 8px;
  box-shadow: 0 8px 22px rgba(150, 24, 30, .38), inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-cta:active { transform: translateY(1px); filter: brightness(.95); }
.btn-cta svg { flex: 0 0 auto; }
.hero-in .btn-cta { max-width: 420px; margin-left: auto; margin-right: auto; }
.btn-douce {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 50px; text-decoration: none;
  background: rgba(255,255,255,.92); color: var(--rouge-sombre);
  border: 1px solid rgba(193,39,45,.28); border-radius: 16px;
  padding: 13px 20px; font-size: 1rem; font-weight: 650; margin-top: 10px;
  box-shadow: var(--ombre-legere);
  transition: transform .16s ease, box-shadow .16s ease, background .16s;
}
/* ---- Bouton « Ajouter l'application » (sous le CTA du héros) ---- */
.btn-installer {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; max-width: 420px; margin: 10px auto 0; min-height: 52px; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1.5px solid rgba(255,255,255,.55); border-radius: 16px;
  padding: 13px 20px; font-size: 1rem; font-weight: 650; font-family: inherit;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .16s ease, background .16s ease;
}
.btn-installer:active { transform: translateY(1px); }
@media (hover: hover) { .btn-installer:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); } }
/* Confirmation « ✓ Application installée » (après installation native) */
.install-ok {
  display: block; width: 100%; max-width: 420px; margin: 10px auto 0; text-align: center;
  background: rgba(255,255,255,.16); color: #fff; font-weight: 650; font-size: 1rem;
  border: 1.5px solid rgba(255,255,255,.55); border-radius: 16px; padding: 13px 20px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.install-ok[hidden] { display: none !important; }

/* ---- Voile d'aide à l'installation (iOS / repli) ---- */
.voile-install {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(20,10,10,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.voile-install[hidden] { display: none !important; }
.carte-install {
  position: relative; background: #fff; border-radius: 20px; padding: 26px 22px 22px;
  max-width: 420px; width: 100%; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.carte-install .ci-ic { font-size: 2.4rem; }
.carte-install h3 { margin: 6px 0 12px; font-size: 1.25rem; color: var(--noir); font-weight: 750; }
.carte-install p { color: var(--noir); font-size: .98rem; margin: 8px 0; }
.carte-install .ci-etapes { text-align: left; margin: 10px 0 4px; padding-left: 22px; color: var(--noir); }
.carte-install .ci-etapes li { margin: 8px 0; font-size: 1rem; line-height: 1.4; }
.carte-install .ci-partage { display: inline-block; }
.carte-install .ci-fermer {
  position: absolute; top: 10px; right: 12px; border: 0; background: none; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: var(--gris); font-family: inherit;
}
.carte-install .btn-douce { margin-top: 16px; color: var(--rouge-sombre); }

.sous-bouton { text-align: center; color: rgba(255,255,255,.85); font-size: .88rem; margin: 6px 0 0; }
.pub-page .sous-bouton { color: var(--gris); }
@media (hover: hover) {
  .btn-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(150,24,30,.45), inset 0 1px 0 rgba(255,255,255,.24); filter: brightness(1.04); }
  .btn-douce:hover { transform: translateY(-1px); background: #fff; box-shadow: var(--ombre-douce); }
}

/* ---- Bandeau de réassurance ---- */
.rassure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.rassure .r-item {
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--rayon-petit); padding: 12px 6px; text-align: center;
  box-shadow: var(--ombre-legere);
}
.rassure .r-ic { color: var(--rouge); display: flex; justify-content: center; margin-bottom: 5px; }
.rassure .r-txt { font-size: .74rem; color: var(--encre); font-weight: 600; line-height: 1.3; }

/* ---- Titres de section avec panneau routier ---- */
.sec-titre { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.sec-titre .panneau { flex: 0 0 auto; width: 42px; height: 42px; filter: drop-shadow(0 2px 5px rgba(23,24,28,.18)); }
.sec-titre .panneau svg { width: 100%; height: 100%; display: block; }
.sec-titre h2 { margin: 0; font-size: 1.13rem; letter-spacing: -.01em; color: var(--noir); font-weight: 750; }
.sec-titre .sec-note { margin: 1px 0 0; font-size: .84rem; color: var(--gris); }

/* ---- Carte mission : illustration + citation du fondateur ---- */
.mission-illu { margin: 4px auto 10px; max-width: 380px; }
.mission-illu svg { width: 100%; height: auto; display: block; }
.mission-texte { font-size: .96rem; color: var(--encre); margin: 0; text-align: center; }
.mission-texte strong { color: var(--rouge-sombre); }
.citation {
  margin: 16px auto 0; max-width: 400px; text-align: center;
  padding-top: 14px; border-top: 1px dashed rgba(23,24,28,.15);
}
.citation .ci-texte {
  font-family: "Snell Roundhand", "Savoye LET", "Apple Chancery", "Segoe Script", "Brush Script MT", cursive;
  font-size: 1.3rem; line-height: 1.35; color: var(--noir); margin: 0;
}
.citation .ci-sign { font-size: .8rem; color: var(--gris); margin: 8px 0 0; font-weight: 600; }
.citation .ci-sign strong { color: var(--rouge-sombre); }

/* ---- Bloc « formation gratuite » / frais ---- */
.gratuit-bloc {
  text-align: center;
  background: linear-gradient(150deg, var(--rouge-brume), #FDF8F3 60%);
  border: 1px solid rgba(193,39,45,.14);
  border-radius: var(--rayon-petit); padding: 16px 14px;
}
.gratuit-bloc .g-titre { font-size: 1.14rem; font-weight: 800; color: var(--rouge-sombre); letter-spacing: -.01em; }
.gratuit-bloc .g-sous { font-size: .86rem; color: var(--gris); margin-top: 3px; }
.frais-lignes { margin-top: 8px; }
.frais-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 4px; border-bottom: 1px solid rgba(23,24,28,.08); }
.frais-ligne:last-child { border-bottom: 0; }
.frais-ligne .f-lib { display: flex; align-items: center; gap: 9px; font-size: .93rem; font-weight: 600; color: var(--encre); text-align: left; }
.frais-ligne .f-lib .ic { color: var(--rouge); display: flex; flex: 0 0 auto; }
.frais-ligne .f-val { font-weight: 750; color: var(--noir); white-space: nowrap; font-size: .95rem; }
.frais-ligne .f-val small { display: block; font-weight: 500; color: var(--gris); font-size: .74rem; text-align: right; white-space: normal; }
.docs-options { margin: 10px 0 0; padding: 0; list-style: none; }
.docs-options li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px; font-size: .93rem; color: var(--encre);
  border-top: 1px solid rgba(23,24,28,.07);
}
.docs-options .ic { flex: 0 0 auto; color: var(--ambre); display: flex; }
.docs-options .doc-prix { margin-left: auto; font-weight: 700; color: var(--rouge-sombre); white-space: nowrap; }

/* ---- Auto-écoles partenaires (pastilles wax) ---- */
.chips-ecoles { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-ecole {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.9); border: 1px solid rgba(23,24,28,.1);
  border-radius: 999px; padding: 9px 15px; font-size: .9rem; font-weight: 650;
  color: var(--encre); box-shadow: var(--ombre-legere);
}
.chip-ecole .pastille { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.p1 { background: var(--rouge); } .p2 { background: var(--ambre); }
.p3 { background: #2E8B57; }     .p4 { background: var(--noir); }
.p5 { background: #D97B29; }     .p6 { background: #7A4A9E; }

/* ---- Types de permis en cartes ---- */
.grille-permis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.carte-permis {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(23,24,28,.09);
  border-radius: var(--rayon-petit);
  padding: 14px 10px; text-align: center;
  box-shadow: var(--ombre-legere);
  transition: transform .16s ease, box-shadow .16s ease;
}
@media (hover: hover) {
  .carte-permis:hover { transform: translateY(-2px); box-shadow: var(--ombre-douce); }
}
.carte-permis .cp-ic {
  width: 46px; height: 46px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;
  background: var(--rouge-brume); color: var(--rouge); border-radius: 13px;
}
.carte-permis .cp-nom { font-weight: 700; font-size: .93rem; color: var(--noir); line-height: 1.3; }
.carte-permis .cp-note { font-size: .77rem; color: var(--gris); margin-top: 2px; }

/* ---- Frise des étapes ---- */
.frise { list-style: none; margin: 0; padding: 0; position: relative; }
.frise li { display: flex; gap: 14px; padding: 0 0 20px; position: relative; }
.frise li:last-child { padding-bottom: 2px; }
.frise li::before {
  content: ""; position: absolute; left: 20px; top: 44px; bottom: 2px; width: 2px;
  background: linear-gradient(180deg, rgba(193,39,45,.32), rgba(193,39,45,.06));
  border-radius: 2px;
}
.frise li:last-child::before { display: none; }
.frise .f-num {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #FBEEEC, #F7E0DD);
  color: var(--rouge-sombre); border: 1px solid rgba(193,39,45,.16);
  box-shadow: inset 0 1px 0 #fff;
}
.frise .f-txt { padding-top: 3px; min-width: 0; }
.frise .f-titre { font-weight: 700; color: var(--noir); font-size: .98rem; }
.frise .f-det { color: var(--gris); font-size: .88rem; margin-top: 1px; }

/* ============================================================
   SECTION « EN CHIFFRES » : fond noir façon affiche officielle,
   photo du Plateau en grand écran seulement (rien à télécharger
   sur mobile), gros chiffres blanc/ambre.
   ============================================================ */
.chiffres {
  background: #121216;
  color: #fff; text-align: center;
  margin-top: 26px; padding: 30px 18px 32px;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-image: repeating-linear-gradient(90deg,
    var(--rouge) 0 22px, #121216 22px 27px,
    var(--ambre) 27px 49px, #121216 49px 54px,
    #2E8B57 54px 76px, #121216 76px 81px) 4;
}
.chiffres .ch-in { max-width: 960px; margin: 0 auto; }
.chiffres .ch-titre { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.chiffres .ch-titre .accent { color: #F6B24A; }
.chiffres .ch-sous { color: rgba(255,255,255,.66); font-size: .86rem; margin: 4px 0 0; }
.chiffres .ch-grille { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
.chiffres .ch-item { padding: 4px; }
.chiffres .ch-val { font-size: clamp(1.6rem, 6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; color: #F6B24A; line-height: 1.15; }
.chiffres .ch-lib { font-size: .84rem; color: rgba(255,255,255,.8); margin-top: 3px; }

/* ---- Mosaïque des infrastructures (images en chargement paresseux) ---- */
.mosaique { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mosaique figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--ombre-legere); }
.mosaique img { display: block; width: 100%; height: 108px; object-fit: cover; }
.mosaique figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 8px 5px; font-size: .62rem; color: rgba(255,255,255,.92); font-weight: 600;
  background: linear-gradient(180deg, transparent, rgba(15,15,18,.78));
}

/* ---- Contact WhatsApp ---- */
.liste-tels { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tel-lien {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: rgba(255,255,255,.92); border: 1px solid rgba(30,138,76,.3);
  color: var(--encre); font-weight: 700; font-size: .92rem;
  border-radius: 999px; padding: 11px 16px; min-height: 44px;
  box-shadow: var(--ombre-legere);
  font-variant-numeric: tabular-nums;
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
@media (hover: hover) {
  .tel-lien:hover { transform: translateY(-1px); background: #fff; box-shadow: var(--ombre-douce); }
}
.tel-lien .ic { color: var(--vert); display: flex; }

/* ---- Pied de page public ---- */
.pied-public {
  text-align: center; margin-top: 30px; padding-top: 20px;
  border-top: 1px solid rgba(23,24,28,.1);
  color: var(--gris); font-size: .85rem;
}
.pied-public .p-logo { display: flex; justify-content: center; margin-bottom: 8px; }
.pied-public .p-nom { font-weight: 750; color: var(--noir); font-size: .95rem; letter-spacing: .02em; }
.pied-public .p-site { margin: 4px 0 0; }
.pied-public .p-site a { font-weight: 650; text-decoration: none; }
.pied-public .p-site a:active { text-decoration: underline; }
.pied-public .p-credits { font-size: .68rem; color: var(--gris-doux); max-width: 440px; margin: 12px auto 0; line-height: 1.5; }
.pied-public .p-gestion { font-size: .8rem; margin-top: 10px; }
.pied-public .p-gestion a { color: var(--gris-doux); text-decoration: none; padding: 8px; display: inline-block; }

/* ============================================================
   FORMULAIRE D'INSCRIPTION
   ============================================================ */
.form-entete { display: flex; align-items: center; gap: 12px; padding: 22px 2px 0; }
.form-entete .retour {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px; text-decoration: none;
  background: rgba(255,255,255,.92); color: var(--rouge-sombre);
  border: 1px solid rgba(23,24,28,.12); box-shadow: var(--ombre-legere);
}
.form-entete .fe-titres { min-width: 0; }
.form-entete .fe-titres h1 { margin: 0; font-size: 1.2rem; letter-spacing: -.01em; color: var(--noir); font-weight: 800; }
.form-entete .fe-titres p { margin: 1px 0 0; font-size: .84rem; color: var(--gris); }
.bandeau-gratuit {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(160deg, #1D1E24, #3C1417);
  color: #fff; border-radius: var(--rayon-petit);
  padding: 12px 15px; margin-top: 16px;
  box-shadow: var(--ombre-legere);
}
.bandeau-gratuit .ic { color: #F6B24A; display: flex; flex: 0 0 auto; }
.bandeau-gratuit p { margin: 0; font-size: .9rem; line-height: 1.4; }
.bandeau-gratuit strong { color: #F6B24A; }

.form-pub { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }

/* ---- Barre de progression de l'assistant multi-étapes ---- */
.progression { margin-top: 14px; }
.progression .pg-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.progression .pg-etape { font-size: .92rem; font-weight: 700; color: var(--noir); }
.progression .pg-pct { font-size: 1.05rem; font-weight: 800; color: var(--rouge); }
.progression .pg-piste {
  height: 12px; border-radius: 99px; background: rgba(23,24,28,.10);
  overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.10);
}
.progression .pg-barre {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #D93A40, #A81F26);
  box-shadow: 0 1px 4px rgba(193,39,45,.45);
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}

/* ---- Navigation entre étapes ---- */
.form-nav { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.form-nav .btn-prec { margin-top: 0; flex: 0 0 42%; }
.form-nav .btn-suiv { margin: 0; flex: 1; }

/* ---- Récapitulatif de la dernière étape ---- */
.recap {
  margin-top: 16px; padding: 14px 16px; border-radius: 14px;
  background: rgba(193,39,45,.06); border: 1px solid rgba(193,39,45,.18);
}
.recap .recap-titre { font-weight: 750; color: var(--noir); margin-bottom: 8px; font-size: .96rem; }
.recap .recap-liste { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.recap .recap-liste dt { color: var(--gris); font-size: .86rem; }
.recap .recap-liste dd { margin: 0; color: var(--noir); font-weight: 650; font-size: .9rem; text-align: right; }

/* ---- Date de naissance : 3 listes déroulantes côte à côte ---- */
.date-listes { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 8px; }
.date-listes select {
  width: 100%; min-height: 52px;
  background: rgba(255,255,255,.95);
  border: 1.5px solid rgba(23,24,28,.15);
  border-radius: 12px; padding: 0 30px 0 12px;
  font-size: 16px; font-family: inherit; color: var(--noir);
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
.date-listes select:focus { outline: none; border-color: var(--rouge); box-shadow: 0 0 0 3px rgba(193,39,45,.14); }

.bloc-etape { padding: 20px 16px; }
.bloc-etape .be-tete { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.bloc-etape .be-num {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #D93A40, #A81F26); color: #fff;
  font-weight: 800; font-size: .92rem;
  box-shadow: 0 3px 8px rgba(193,39,45,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.bloc-etape .be-tete h2 { margin: 0; font-size: 1.04rem; color: var(--noir); font-weight: 750; letter-spacing: -.01em; }
.bloc-etape .be-tete .be-note { font-size: .8rem; color: var(--gris); margin: 1px 0 0; }

.champs { display: flex; flex-direction: column; gap: 13px; }
.champ label, .champ > .lib { display: block; font-size: .84rem; font-weight: 650; color: var(--noir); margin-bottom: 5px; }
.champ .facultatif { color: var(--gris-doux); font-weight: 500; font-size: .78rem; }
.champ-int { position: relative; }
.champ-int > .ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--gris-doux); pointer-events: none; display: flex;
  transition: color .15s;
}
.champ-int:focus-within > .ic { color: var(--rouge); }
/* font-size >= 16px : pas de zoom automatique sur iPhone */
.champ input[type=text], .champ input[type=tel], .champ input[type=date], .champ select {
  width: 100%; min-height: 52px;
  background: rgba(255,255,255,.95);
  border: 1.5px solid rgba(23,24,28,.15);
  border-radius: 13px; padding: 13px 13px 13px 42px;
  font-size: 1.02rem; color: var(--encre); font-family: inherit;
  box-shadow: inset 0 1px 2px rgba(23,24,28,.04);
  transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none; appearance: none;
}
.champ select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236A6E76' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 38px;
}
.champ input:focus, .champ select:focus {
  outline: none; border-color: var(--rouge); background: #fff;
  box-shadow: 0 0 0 4px rgba(193, 39, 45, .14);
}

/* Cases à cocher documents (toute la ligne est cliquable) */
.doc-choix {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: rgba(255,255,255,.9); border: 1.5px solid rgba(23,24,28,.12);
  border-radius: 13px; padding: 13px 14px; margin-bottom: 9px; min-height: 50px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.doc-choix:last-child { margin-bottom: 0; }
.doc-choix input {
  flex: 0 0 auto; width: 22px; height: 22px; margin: 0;
  accent-color: var(--rouge); cursor: pointer;
}
.doc-choix .dc-nom { font-size: .94rem; font-weight: 600; color: var(--encre); }
.doc-choix .dc-prix { margin-left: auto; font-weight: 750; color: var(--rouge-sombre); font-size: .93rem; white-space: nowrap; }
/* :has() : simple bonus visuel, ignoré par les vieux navigateurs */
.doc-choix:has(input:checked) {
  border-color: var(--rouge); background: var(--rouge-brume);
  box-shadow: 0 0 0 3px rgba(193,39,45,.1);
}

/* Montant */
.total-bloc {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(150deg, var(--rouge-brume), #FDF8F3 60%);
  border: 1px solid rgba(193,39,45,.15);
  border-radius: var(--rayon-petit); padding: 14px 16px;
}
.total-bloc .t-lib { font-size: .86rem; font-weight: 650; color: var(--gris); }
.total-bloc .t-val { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--rouge-sombre); white-space: nowrap; }

/* Repli « j'ai déjà payé » */
.repli {
  margin-top: 12px; border: 1.5px dashed rgba(193,39,45,.3);
  border-radius: var(--rayon-petit); background: rgba(255,255,255,.6);
  transition: background .2s, border-color .2s;
}
.repli[open] { background: rgba(255,255,255,.92); border-style: solid; border-color: rgba(23,24,28,.14); }
.repli > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 14px 15px; min-height: 48px; font-weight: 650; font-size: .93rem; color: var(--rouge-sombre);
  border-radius: var(--rayon-petit);
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary .ic { display: flex; color: var(--ambre); flex: 0 0 auto; }
.repli > summary .chevron { margin-left: auto; display: flex; color: var(--gris-doux); transition: transform .2s ease; }
.repli[open] > summary .chevron { transform: rotate(180deg); }
.repli .repli-corps { padding: 2px 15px 15px; }
.repli .paiement-zone { text-align: center; }
.repli .paiement-zone img {
  max-width: 220px; width: 100%; border-radius: 12px;
  border: 1px solid rgba(23,24,28,.12); box-shadow: var(--ombre-legere);
}
.champ-fichier input[type=file] {
  width: 100%; background: rgba(255,255,255,.9); color: var(--gris);
  border: 1.5px dashed rgba(23,24,28,.25); border-radius: 13px;
  padding: 12px; font-size: .9rem; font-family: inherit;
}
.champ-fichier input[type=file]::file-selector-button {
  background: var(--rouge-brume); color: var(--rouge-sombre); border: 0;
  border-radius: 9px; padding: 10px 13px; font-weight: 650; font-size: .86rem;
  margin-right: 10px; cursor: pointer; font-family: inherit;
}

/* Message d'erreur doux */
.alerte-douce {
  display: flex; gap: 10px; align-items: flex-start;
  background: #FDF1F0; border: 1px solid #EDC9C6; color: #A03530;
  border-radius: var(--rayon-petit); padding: 13px 15px;
  font-size: .93rem; line-height: 1.45; margin: 14px 0 0;
}
.alerte-douce .ic { flex: 0 0 auto; margin-top: 1px; display: flex; }

/* Note discrète */
.note-douce { color: var(--gris); font-size: .87rem; margin: 8px 0 0; }
.note-douce.centre { text-align: center; }

/* Champ invisible anti-robots : NE PAS TOUCHER (doit rester hors écran) */
.champ-cache { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

/* ============================================================
   CONFIRMATION
   ============================================================ */
.merci { text-align: center; padding: 10px 4px 6px; }
.coche-cercle { width: 104px; height: 104px; margin: 6px auto 14px; }
.coche-cercle .rond-svg {
  stroke: var(--vert); stroke-width: 3; fill: rgba(30,138,76,.07);
  stroke-dasharray: 302; stroke-dashoffset: 302;
  animation: coche-rond .7s cubic-bezier(.55,0,.35,1) .15s forwards;
}
.coche-cercle .trait-svg {
  stroke: var(--vert); stroke-width: 6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: coche-trait .45s cubic-bezier(.55,0,.35,1) .75s forwards;
}
@keyframes coche-rond { to { stroke-dashoffset: 0; } }
@keyframes coche-trait { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .coche-cercle .rond-svg, .coche-cercle .trait-svg { animation: none; stroke-dashoffset: 0; }
}
.merci h1 { font-size: 1.42rem; letter-spacing: -.015em; color: var(--noir); margin: 0 0 10px; font-weight: 800; }
.merci .m-texte { color: var(--gris); font-size: .96rem; max-width: 430px; margin: 0 auto; }
.ticket-ref {
  margin: 18px auto 6px; max-width: 360px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--rouge-brume), #FDF8F3 65%);
  border: 1.5px dashed rgba(193,39,45,.35);
  border-radius: var(--rayon-petit); padding: 17px 16px 14px;
}
.ticket-ref::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(90deg,
    var(--rouge) 0 18px, var(--noir) 18px 22px,
    var(--ambre) 22px 40px, var(--noir) 40px 44px,
    #2E8B57 44px 62px,   var(--noir) 62px 66px);
}
.ticket-ref .tr-lib { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); font-weight: 650; }
.ticket-ref .tr-val { font-size: 1.65rem; font-weight: 800; letter-spacing: .04em; color: var(--rouge-sombre); font-variant-numeric: tabular-nums; }
.suite-frise { text-align: left; max-width: 430px; margin: 20px auto 0; }

/* ============================================================
   GRANDS ÉCRANS (tablette >= 760px, ordinateur)
   ============================================================ */
@media (min-width: 760px) {
  .pub-page { max-width: 960px; }
  .pub-page.etroit { max-width: 640px; }
  .hero-in { padding-top: 64px; padding-bottom: 54px; }
  .hero-in .sous { font-size: 1.1rem; max-width: 520px; }
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
  .grille-permis { grid-template-columns: repeat(4, 1fr); }
  .duo .grille-permis { grid-template-columns: 1fr 1fr; }
  .rassure { gap: 12px; margin-top: 22px; }
  .rassure .r-item { padding: 16px 10px; }
  .rassure .r-txt { font-size: .86rem; }
  .verre { padding: 26px 26px; }
  .chiffres { padding: 40px 22px 42px; }
  .chiffres .ch-grille { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  /* photo du Plateau uniquement en grand écran (rien à charger sur mobile) */
  .chiffres.avec-photo {
    background-image:
      linear-gradient(180deg, rgba(14,14,17,.88), rgba(14,14,17,.93)),
      url("abidjan-plateau.jpg");
    background-size: cover; background-position: center;
  }
  .mosaique { gap: 12px; }
  .mosaique img { height: 190px; }
  .mosaique figcaption { font-size: .72rem; padding: 18px 12px 8px; }
}

/* ============================================================
   ASSISTANT VIRTUEL PERMIS — widget de chat (charte Fondation)
   ============================================================ */
.chat-permis{position:fixed;right:max(16px,env(safe-area-inset-right));left:auto;bottom:max(16px,env(safe-area-inset-bottom));z-index:2147483000}
.chat-bulle{
  display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:6px 20px 6px 6px;
  background:linear-gradient(135deg,var(--rouge-vif),var(--rouge-sombre));color:#fff;border:0;border-radius:999px;
  box-shadow:0 12px 30px rgba(150,24,30,.38);cursor:pointer;font-weight:800;font-size:14px;
  transition:transform .18s,box-shadow .18s;position:relative;font-family:inherit;
}
.chat-bulle:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(150,24,30,.48)}
.chat-permis.ouvert .chat-bulle{display:none}
.chat-ava{width:48px;height:48px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  background:#FBEEEC;display:block;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9)}
.chat-ava img,.chat-ava svg{width:100%;height:100%;display:block;object-fit:cover}
.chat-bulle-txt{max-width:172px;line-height:1.16;text-align:left}
.chat-dot{position:absolute;top:7px;right:9px;width:11px;height:11px;border-radius:50%;
  background:#57C486;border:2px solid #fff}

.chat-panneau{
  position:absolute;right:0;left:auto;bottom:0;width:min(360px,calc(100vw - 32px));
  max-height:min(560px,calc(100vh - 90px));display:flex;flex-direction:column;
  background:#fff;border:1px solid #EADFDC;border-radius:20px;overflow:hidden;
  box-shadow:0 26px 60px rgba(40,10,12,.32);animation:chatIn .22s ease;
}
.chat-panneau[hidden]{display:none} /* prioritaire sur display:flex : la croix ferme bien */
@keyframes chatIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.chat-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(135deg,var(--rouge),var(--rouge-sombre));color:#fff;padding:14px 16px}
.chat-titre{font-weight:800;font-size:15.5px;display:inline-flex;align-items:center}
.chat-tete-ava{width:30px;height:30px;border-radius:50%;overflow:hidden;background:#FBEEEC;
  display:inline-flex;flex:0 0 auto;vertical-align:middle;margin-right:8px}
.chat-tete-ava img,.chat-tete-ava svg{width:100%;height:100%;object-fit:cover;display:block}
.chat-x{width:34px;height:34px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);border:0;border-radius:10px;color:#fff;cursor:pointer}
.chat-fil{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#FBF6F4}
.chat-msg{max-width:86%;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.5}
.chat-msg.bot{background:#fff;border:1px solid #EADFDC;color:var(--encre);border-bottom-left-radius:5px;align-self:flex-start}
.chat-msg.user{background:linear-gradient(135deg,var(--rouge-vif),var(--rouge-sombre));color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.chat-msg strong{color:inherit}
.chat-quick{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-top:1px solid #EEE3E0;background:#fff}
.chat-qbtn{display:inline-flex;align-items:center;gap:6px;background:var(--rouge-brume);color:var(--rouge-sombre);
  border:1px solid #F0D3CF;border-radius:999px;padding:9px 13px;font-size:13.5px;font-weight:700;
  cursor:pointer;text-align:left;transition:.15s;font-family:inherit;text-decoration:none}
.chat-qbtn:hover{background:#fff;border-color:var(--rouge)}
.chat-qbtn.fort{background:linear-gradient(135deg,var(--rouge-vif),var(--rouge-sombre));color:#fff;border-color:transparent}
.chat-saisie{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #EEE3E0;background:#fff}
.chat-saisie input{flex:1;min-height:44px;padding:0 14px;border:1.5px solid #EAD8D4;border-radius:999px;
  font-size:15px;font-family:inherit;background:#FBF6F4;color:var(--encre)}
.chat-saisie input:focus{outline:none;border-color:var(--rouge);background:#fff}
.chat-saisie button{width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:var(--rouge);color:#fff;border:0;border-radius:50%;cursor:pointer}
.chat-typing{display:inline-flex;gap:4px;align-items:center}
.chat-typing i{width:7px;height:7px;border-radius:50%;background:#D6A9A5;display:inline-block;
  animation:chatBlink 1s infinite ease-in-out}
.chat-typing i:nth-child(2){animation-delay:.16s}
.chat-typing i:nth-child(3){animation-delay:.32s}
@keyframes chatBlink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}

@media(max-width:480px){
  .chat-permis{left:auto;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
  .chat-panneau{position:fixed;width:auto;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));max-height:min(72vh,540px)}
  .chat-bulle-txt{display:none}
  .chat-bulle{padding:5px;width:62px;height:62px;justify-content:center}
  .chat-ava{width:52px;height:52px}
}
@media (prefers-reduced-motion: reduce){
  .chat-panneau{animation:none}
  .chat-typing i{animation:none}
}

/* ---------- Couche VOIX de l'assistant (TTS + STT) ---------- */
/* Interrupteur « lecture auto » dans l'en-tête */
.chat-autolire{width:34px;height:34px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);border:0;border-radius:10px;color:#fff;cursor:pointer;font-size:16px;line-height:1;margin-right:6px}
.chat-autolire:hover{background:rgba(255,255,255,.3)}
.chat-autolire.on{background:#fff;color:var(--rouge-sombre)}
.chat-autolire:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Bouton « Écouter » sous une réponse */
.chat-ecouter{display:inline-flex;align-items:center;gap:5px;margin-top:8px;
  background:var(--rouge-brume);color:var(--rouge-sombre);border:1px solid #F0D3CF;border-radius:999px;
  padding:5px 11px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;line-height:1.2}
.chat-ecouter:hover{background:#fff;border-color:var(--rouge)}
.chat-ecouter.parle{background:var(--rouge);color:#fff;border-color:transparent}
.chat-ecouter:focus-visible{outline:2px solid var(--rouge);outline-offset:2px}
/* Bouton micro (dictée) — cible ≥44px */
.chat-mic{width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:#FBF6F4;color:var(--rouge-sombre);border:1.5px solid #EAD8D4;border-radius:50%;cursor:pointer}
.chat-mic:hover{border-color:var(--rouge);color:var(--rouge)}
.chat-mic:focus-visible{outline:2px solid var(--rouge);outline-offset:2px}
.chat-mic.actif{background:var(--rouge);color:#fff;border-color:transparent;animation:micPulse 1.1s infinite}
@keyframes micPulse{0%{box-shadow:0 0 0 0 rgba(193,39,45,.45)}70%{box-shadow:0 0 0 8px rgba(193,39,45,0)}100%{box-shadow:0 0 0 0 rgba(193,39,45,0)}}
/* Bandeau « à l'écoute… » */
.chat-ecoute{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13px;font-weight:700;
  color:var(--rouge-sombre);background:var(--rouge-brume);border-top:1px solid #F0D3CF}
.chat-ecoute-pt{width:9px;height:9px;border-radius:50%;background:var(--rouge);display:inline-block;animation:micPulse 1.1s infinite}
/* Note douce (info confidentialité / erreur micro) : un peu plus discrète */
.chat-note-voix{font-size:13px;color:var(--gris);background:#FBF6F4!important;border-style:dashed!important}
@media (prefers-reduced-motion: reduce){
  .chat-mic.actif,.chat-ecoute-pt{animation:none}
}

/* ============================================================
   AVATAR ANIMÉ « conseiller permis » (design Alexis) — scène + rond
   ============================================================ */
/* Conteneur logique ; ses enfants se positionnent en fixed bas-droite. */
.assistant-root{position:static}

/* Visibilité selon l'état (data-mode) */
.assistant-root[data-mode="active"] .chat-panneau,
.assistant-root[data-mode="closed"] .chat-panneau{display:none}
.assistant-root[data-mode="chat"]   .chat-panneau{display:flex}
.assistant-root[data-mode="closed"] .pf-stage,
.assistant-root[data-mode="chat"]   .pf-stage{display:none}
.assistant-root[data-mode="active"] .pf-dot,
.assistant-root[data-mode="chat"]   .pf-dot{display:none}
.assistant-root[data-mode="closed"] .pf-dot{display:grid}

/* Le panneau de chat (existant) prend une position fixe dans ce contexte */
.assistant-root .chat-panneau{position:fixed;right:16px;left:auto;bottom:16px;z-index:81}
@media(min-width:560px){.assistant-root .chat-panneau{right:26px;bottom:22px}}

/* ---- SCÈNE (état actif) ---- */
.pf-stage{position:fixed;right:16px;bottom:16px;z-index:80;width:252px;height:220px;overflow:visible}
@media(min-width:560px){.pf-stage{right:26px;bottom:22px}}
.pf-ground{position:absolute;left:8px;right:8px;bottom:14px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(23,24,28,.10),transparent)}
.pf-tag{position:absolute;top:-2px;left:50%;transform:translateX(-50%);background:#fff;border:1px solid #EEE7E0;
  border-radius:13px;padding:6px 12px;box-shadow:var(--ombre-douce);display:flex;align-items:center;gap:8px;
  white-space:nowrap;font-size:12.5px;color:var(--encre)}
.pf-tag b{font-weight:700}
.pf-tag .pt{width:9px;height:9px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 3px rgba(30,138,76,.22);animation:pf-enligne 2s ease-in-out infinite}
@keyframes pf-enligne{0%,100%{opacity:1}50%{opacity:.5}}
.pf-close{position:absolute;top:-6px;right:-2px;z-index:6;width:26px;height:26px;border-radius:50%;
  border:1px solid #E7DED6;background:#fff;color:var(--gris);font-size:16px;line-height:1;cursor:pointer;
  box-shadow:var(--ombre-legere);display:grid;place-items:center}
.pf-close:hover{background:var(--rouge-brume);color:var(--rouge-sombre)}
.pf-close:focus-visible{outline:2px solid var(--rouge);outline-offset:2px}
.pf-hit{position:absolute;left:0;right:0;bottom:0;top:24px;border:none;background:transparent;padding:0;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:center}
.pf-hit:focus-visible{outline:3px solid var(--rouge);outline-offset:3px;border-radius:18px}
.pf-acteur{width:126px;filter:drop-shadow(0 10px 16px rgba(23,24,28,.18))}
.pf-acteur svg{width:100%;height:auto;display:block}
@media(max-width:560px){.pf-acteur{width:100px}.pf-stage{width:210px;height:190px}}
/* Véhicules */
.pf-veh{position:absolute;bottom:2px;left:50%;width:150px;margin-left:-75px;z-index:4}
.pf-veh svg{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(23,24,28,.2))}
.car-door{transform-box:view-box;transform-origin:60px 42px;transition:transform .5s ease}
.pf-car.open .car-door{transform:rotate(-36deg)}

/* ---- PETIT ROND (état fermé) ---- */
.pf-dot{position:fixed;right:18px;bottom:18px;z-index:80;width:58px;height:58px;border:none;padding:0;border-radius:50%;
  cursor:pointer;background:#fff;box-shadow:var(--ombre-douce);display:none;place-items:center;overflow:visible}
@media(min-width:560px){.pf-dot{right:26px;bottom:24px}}
.pf-dot img{width:100%;height:100%;border-radius:50%;display:block}
.pf-dot::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(193,39,45,.35);animation:pf-pulse 2.6s ease-out infinite}
@keyframes pf-pulse{0%{transform:scale(.96);opacity:.7}70%{transform:scale(1.16);opacity:0}100%{opacity:0}}
.pf-dot .pt{position:absolute;right:1px;bottom:1px;width:15px;height:15px;border-radius:50%;background:var(--vert);border:2.5px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.pf-dot:hover{transform:translateY(-2px)}
.pf-dot:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}

/* ---- Calques animés du personnage (pivots en unités du viewBox) ---- */
.pf-balance,.pf-inner,.pf-tete,.pf-lid-g,.pf-lid-d,.pf-arm-l,.pf-arm-r,.pf-leg-l,.pf-leg-r,.pf-wheel{transform-box:view-box}
.pf-balance{transform-origin:80px 236px}.pf-inner{transform-origin:80px 160px}
.pf-tete{transform-origin:80px 86px}
.pf-arm-l{transform-origin:57px 103px}.pf-arm-r{transform-origin:105px 103px}
.pf-leg-l{transform-origin:72px 151px}.pf-leg-r{transform-origin:88px 151px}
.pf-lid-g{transform-origin:71px 46px}.pf-lid-d{transform-origin:89px 46px}
.pf-wheel{transform-origin:80px 120px;opacity:0;transition:opacity .3s}
.pf-sign{opacity:0;transition:opacity .3s}
.pf-sign .sg{opacity:0;transition:opacity .3s}
.pf-sign .sg.show{opacity:1}
.pf-lid-g,.pf-lid-d{animation:pf-cligne 5.4s ease-in-out infinite}
/* IDLE */
[data-state="idle"] .pf-balance{animation:pf-balance 5.6s ease-in-out infinite}
[data-state="idle"] .pf-inner{animation:pf-respire 4.2s ease-in-out infinite}
[data-state="idle"] .pf-tete{animation:pf-tete 9s ease-in-out infinite}
[data-state="idle"] .pf-arm-l{animation:pf-salut 8.5s ease-in-out infinite}
[data-state="idle"] .pf-arm-r{animation:pf-swing 4.6s ease-in-out infinite}
/* MARCHE */
[data-state="walk"] .pf-inner{animation:pf-bob .62s ease-in-out infinite}
[data-state="walk"] .pf-leg-l{animation:pf-legA .62s ease-in-out infinite}
[data-state="walk"] .pf-leg-r{animation:pf-legB .62s ease-in-out infinite}
[data-state="walk"] .pf-arm-l{animation:pf-armWB .62s ease-in-out infinite}
[data-state="walk"] .pf-arm-r{animation:pf-armWA .62s ease-in-out infinite}
/* VOLANT */
[data-state="drive"] .pf-arm-l{transform:rotate(-46deg)}
[data-state="drive"] .pf-arm-r{transform:rotate(48deg)}
[data-state="drive"] .pf-wheel{opacity:1;animation:pf-wheelturn 2.4s ease-in-out infinite}
[data-state="drive"] .pf-inner{animation:pf-respire 3.2s ease-in-out infinite}
[data-state="drive"] .pf-tete{animation:pf-focus 2.4s ease-in-out infinite}
/* PANNEAUX */
[data-state="sign"] .pf-arm-r{transform:rotate(-135deg)}
[data-state="sign"] .pf-sign{opacity:1}
[data-state="sign"] .pf-arm-l{animation:pf-swing 4s ease-in-out infinite}
[data-state="sign"] .pf-inner{animation:pf-respire 4s ease-in-out infinite}
[data-state="sign"] .pf-tete{animation:pf-nod 2.6s ease-in-out infinite}

@keyframes pf-respire{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pf-balance{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.7deg)}}
@keyframes pf-tete{0%,100%{transform:rotate(0) translateX(0)}20%{transform:rotate(2deg) translateX(1px)}42%{transform:rotate(2deg) translateX(1px)}64%{transform:rotate(-2deg) translateX(-2px)}82%{transform:rotate(-1deg)}}
@keyframes pf-swing{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-3deg)}}
@keyframes pf-cligne{0%,92%,100%{transform:scaleY(0)}95%,97%{transform:scaleY(1)}}
@keyframes pf-salut{0%,64%,100%{transform:rotate(-4deg)}69%{transform:rotate(128deg)}73%{transform:rotate(141deg)}77%{transform:rotate(128deg)}81%{transform:rotate(141deg)}85%{transform:rotate(131deg)}90%{transform:rotate(-4deg)}}
@keyframes pf-legA{0%{transform:rotate(20deg)}50%{transform:rotate(-20deg)}100%{transform:rotate(20deg)}}
@keyframes pf-legB{0%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}100%{transform:rotate(-20deg)}}
@keyframes pf-armWA{0%{transform:rotate(-22deg)}50%{transform:rotate(22deg)}100%{transform:rotate(-22deg)}}
@keyframes pf-armWB{0%{transform:rotate(22deg)}50%{transform:rotate(-22deg)}100%{transform:rotate(22deg)}}
@keyframes pf-bob{0%,100%{transform:translateY(0)}25%{transform:translateY(-3px)}50%{transform:translateY(0)}75%{transform:translateY(-3px)}}
@keyframes pf-wheelturn{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes pf-focus{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes pf-nod{0%,100%{transform:rotate(0)}50%{transform:rotate(2deg)}}

/* ---- Mouvement réduit : personnage calme, aucune voiture ---- */
@media (prefers-reduced-motion: reduce){
  [data-state] .pf-balance,[data-state] .pf-tete,[data-state] .pf-arm-l,[data-state] .pf-arm-r,
  [data-state] .pf-leg-l,[data-state] .pf-leg-r{animation:none!important;transform:none!important}
  [data-state] .pf-inner{animation:pf-respire 6s ease-in-out infinite}
  .pf-lid-g,.pf-lid-d{animation:pf-cligne 7s ease-in-out infinite}
  .pf-dot::before,.pf-tag .pt{animation:none}
}

/* ============================================================
   MOBILE (≤480px) : l'assistant reste ancré EN BAS À DROITE,
   compact, et ne déborde JAMAIS du viewport (étiquette + croix
   entièrement visibles/cliquables sur 320–375px).
   ============================================================ */
@media (max-width:480px){
  /* Scène : ancrée bas-droite avec marges de sécurité (safe-area iPhone) */
  .pf-stage{
    right:max(8px,env(safe-area-inset-right));
    bottom:max(10px,env(safe-area-inset-bottom));
    left:auto;
    width:150px;height:172px;
  }
  .pf-acteur{width:88px}
  /* Étiquette : ancrée à DROITE (place réservée à la croix), texte raccourci,
     largeur bornée au viewport -> ne sort plus de l'écran. */
  .pf-tag{
    left:auto;right:34px;transform:none;top:0;
    max-width:calc(100vw - 46px);
    font-size:11px;padding:4px 9px;gap:6px;
    overflow:hidden;text-overflow:ellipsis;
  }
  .pf-tag-suite{display:none}          /* « · En ligne » masqué : gain de place */
  /* Croix : entièrement dans l'écran, cible tactile confortable */
  .pf-close{top:-4px;right:0;width:28px;height:28px;font-size:17px}
  /* Petit rond (état fermé) : marges de sécurité */
  .pf-dot{
    right:max(12px,env(safe-area-inset-right));
    bottom:max(12px,env(safe-area-inset-bottom));
  }
  /* Chat ouvert : pleine largeur utile, ancré en bas, jamais hors écran */
  .assistant-root .chat-panneau{
    right:max(10px,env(safe-area-inset-right));
    left:max(10px,env(safe-area-inset-left));
    bottom:max(10px,env(safe-area-inset-bottom));
    width:auto;max-height:min(78vh,560px);
  }
}