/* Parcours Clair : une carte unique, centrée, pensée pour le téléphone.
   Police système uniquement, aucune requête externe, transitions de 250 ms. */
:root{
 --j-bg:#f3f8f1;--j-card:#fff;--j-ink:#17251f;--j-muted:#55665d;--j-soft-muted:#66776d;
 --j-green:#174b3c;--j-green-hover:#133f32;--j-line:#dde7d7;--j-soft:#edf4e8;--j-red:#b3261e;
}
html{background:#f7faf3}
body.journey-page{
 margin:0;color:var(--j-ink);
 background:linear-gradient(180deg,#fdfefb 0%,#f6faf1 38%,#ecf3e6 72%,#e3ecdd 100%);
 background-attachment:fixed;min-height:100vh;
 font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-size-adjust:100%;
}
.j-skip{position:absolute;left:-9999px}
.j-skip:focus{left:12px;top:12px;z-index:10;background:#fff;padding:10px 14px;border-radius:8px}
.j-main{min-height:100vh;min-height:100dvh;display:flex;justify-content:center;padding:14px 14px 24px;box-sizing:border-box}
.j-shell{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:12px}
.j-layout{display:flex;flex-direction:column;gap:12px;width:100%}
/* Colonne du renard : compacte au-dessus de la carte sur téléphone. */
.j-guide{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:start;gap:10px;width:100%}
.j-guide-id{min-width:0}
.j-guide-fox{width:88px;height:auto;display:block;object-fit:contain}
.j-guide-name{margin:4px 0 0;font-size:16px;font-weight:650;color:var(--j-green);line-height:1.2;white-space:nowrap}
.j-guide-role{margin:1px 0 0;font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--j-muted);font-weight:650;white-space:nowrap}
.j-bubble{
 position:relative;margin:2px 0 0;background:#fff;border:1px solid #e6eee1;border-radius:16px;
 padding:10px 12px;font-size:13.5px;line-height:1.45;color:#33463c;
 box-shadow:0 6px 16px rgba(23,75,60,.05);
}
.j-bubble:before{
 content:'';position:absolute;left:-5px;top:15px;width:9px;height:9px;background:#fff;
 border-left:1px solid #e6eee1;border-bottom:1px solid #e6eee1;transform:rotate(45deg);
}
.j-brand{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;text-decoration:none;padding:0 2px}
.j-fox{width:34px;height:34px;object-fit:contain;object-position:center bottom;flex:none}
.j-word{font:600 20px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:-.6px;color:var(--j-green)}
.j-dot{color:#4d8f68}
.j-card{
 width:100%;background:var(--j-card);border:1px solid #e8efe3;border-radius:22px;
 padding:18px 16px 16px;box-sizing:border-box;box-shadow:0 14px 34px rgba(23,75,60,.06);
}
.j-hook{margin:0 0 10px;font-style:italic;font-size:14px;line-height:1.45;color:var(--j-muted)}
.j-meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px;color:var(--j-muted);letter-spacing:.1px}
#progress-percent{font-variant-numeric:tabular-nums;color:var(--j-soft-muted)}
.j-progress{height:4px;margin:7px 0 16px;border-radius:4px;background:#e9f0e3;overflow:hidden}
#progress-fill{height:100%;width:10%;border-radius:4px;background:var(--j-green);transition:width 250ms ease}
.j-question{
 margin:0 0 8px;font-size:21px;line-height:1.28;font-weight:650;letter-spacing:-.4px;color:#14231c;
 font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;outline:none;
}
.j-sub{margin:0 0 8px;font-size:15px;line-height:1.5;color:var(--j-muted)}
.j-req{margin:0 0 14px;font-size:13px;color:var(--j-muted)}
.j-req span[aria-hidden]{color:var(--j-red);font-weight:700}
.j-req.is-optional span[aria-hidden]{display:none}
.j-icon{width:20px;height:20px;flex:none}

/* Réponses : boutons tactiles pleine largeur, 52 px de haut minimum. */
.j-choices{display:grid;gap:9px;margin:0 0 4px}
.j-choice{
 display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 16px;
 border:1px solid var(--j-line);border-radius:999px;background:#fff;color:var(--j-ink);
 font:inherit;font-size:15px;line-height:1.35;text-align:left;cursor:pointer;
 transition:background 120ms ease,border-color 120ms ease,box-shadow 120ms ease;
}
.j-choice:hover{background:#f8fbf5}
.j-choice[aria-checked="true"]{border-color:var(--j-green);background:var(--j-soft);box-shadow:inset 0 0 0 1px var(--j-green)}
.j-choice .j-icon{color:var(--j-green)}
.j-choice--tile{border-radius:14px;align-items:center;padding:14px 15px;min-height:60px;font-weight:550}
.j-choice-label{min-width:0}

/* Caisse : grille de tuiles à logos, deux par ligne sur téléphone, quatre sur tablette. */
.j-caisse{display:flex;flex-direction:column;gap:10px;margin:0 0 6px}
.j-caisse-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.j-choice--caisse{
 min-height:76px;border-radius:18px;justify-content:center;text-align:center;
 padding:10px 8px;font-size:14px;font-weight:600;line-height:1.15;letter-spacing:-.1px;
 background:#fff;
}
.j-choice--caisse[aria-checked="true"]{border-color:var(--j-green);background:#f1f8ec;box-shadow:inset 0 0 0 2px var(--j-green)}
.j-logo{max-height:26px;max-width:78%;width:auto;height:auto;object-fit:contain;display:block}
.j-logo-text{display:block;font-size:13px;font-weight:650;color:var(--j-ink);line-height:1.2;max-width:100%;overflow-wrap:anywhere}
.j-logo-text[hidden]{display:none}
.j-choice--caisse-alt{border-style:dashed;font-weight:550;color:var(--j-muted)}
.j-choice--caisse-alt .j-logo-text{color:var(--j-muted)}
.j-choice[hidden]{display:none}
.j-caisse-sep{grid-column:1/-1;height:0;border-top:1px dashed #c9d7c2;margin:6px 0}

/* Champs larges (recherche, noms, courriel, moment du rappel). */
.j-field{display:flex;flex-direction:column;gap:7px;margin:0 0 14px;min-width:0}
.j-label{font-size:14px;font-weight:600;color:var(--j-muted)}
.j-input{
 width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--j-line);border-radius:12px;
 background:#fff;color:var(--j-ink);font:inherit;font-size:16px;box-sizing:border-box;
}
.j-input:focus-visible{outline:2px solid var(--j-green);outline-offset:2px}
.j-help{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--j-muted)}
.j-help a{color:var(--j-green);text-decoration:underline;text-underline-offset:2px}
.j-row{display:grid;grid-template-columns:1fr;gap:0}
.j-phone{display:grid;grid-template-columns:118px 1fr;gap:8px}
/* Pastille d'indicatif : drapeau local, code seul, liste native ouverte au toucher. */
.j-dial{
 position:relative;display:inline-flex;align-items:center;gap:6px;min-height:52px;padding:0 10px;
 border:1px solid var(--j-line);border-radius:12px;background:#fff;cursor:pointer;box-sizing:border-box;
}
.j-dial:focus-within{outline:2px solid var(--j-green);outline-offset:2px}
.j-dial-native{
 position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;
 -webkit-appearance:none;appearance:none;font-size:16px;cursor:pointer;
}
.j-flag{width:20px;height:14px;border-radius:2px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(20,40,30,.12)}
.j-dial-code{font-size:15px;font-weight:600;color:var(--j-ink);font-variant-numeric:tabular-nums}
.j-dial .j-icon,.j-dial .j-chevron{width:13px;height:13px;color:var(--j-muted);margin-left:1px}

/* Franchise : valeur en grand au-dessus, curseur large, six positions. */
.j-franchise{display:flex;flex-direction:column;align-items:center;gap:4px;margin:2px 0 6px}
.j-franchise-value{
 margin:0;font-size:34px;line-height:1.1;font-weight:700;letter-spacing:-1.2px;color:var(--j-green);
 font-variant-numeric:tabular-nums;
}
.j-slider{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:6px 0 0;background:transparent;cursor:pointer}
.j-slider::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:#e3ecdc}
.j-slider::-webkit-slider-thumb{
 -webkit-appearance:none;width:30px;height:30px;margin-top:-12px;border-radius:50%;
 background:var(--j-green);border:4px solid #fff;box-shadow:0 2px 6px rgba(23,75,60,.28);
}
.j-slider::-moz-range-track{height:6px;border-radius:6px;background:#e3ecdc}
.j-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--j-green);border:4px solid #fff;box-shadow:0 2px 6px rgba(23,75,60,.28)}
.j-slider:focus-visible{outline:2px solid var(--j-green);outline-offset:4px;border-radius:8px}
.j-scale{display:flex;justify-content:space-between;width:100%;font-size:12.5px;color:var(--j-muted);font-variant-numeric:tabular-nums}
.j-ghost{
 margin:12px auto 0;min-height:48px;padding:8px 16px;border:1px solid var(--j-line);border-radius:999px;
 background:#fff;color:var(--j-green);font:inherit;font-size:14.5px;cursor:pointer;
}
.j-ghost[aria-pressed="true"]{border-color:var(--j-green);background:var(--j-soft)}

/* Assurance accident : Oui et Non cote a cote, « Je ne sais pas » en pleine largeur dessous,
   au format des reponses de canton (52 px, rayon 999px, 15 px). */
.j-choices--pair{grid-template-columns:1fr 1fr;gap:10px;margin:0}
.j-choice--pair{justify-content:center;text-align:center;padding:12px 10px}
.j-choice--wide{grid-column:1/-1}
.j-choice--pair[aria-checked="true"]{border-color:var(--j-green);background:#f1f8ec;box-shadow:inset 0 0 0 2px var(--j-green)}

/* Consentement : texte validé inchangé, case distincte de l'assurance accident. */
.j-consent{display:flex;gap:12px;align-items:flex-start;margin:18px 0 10px;min-height:44px;font-size:14px;line-height:1.5;cursor:pointer}
.j-consent input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--j-green)}
.j-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Récapitulatif et actions. */
.j-summary{margin:0 0 18px;padding:14px;background:var(--j-soft);border-radius:12px;min-width:0;overflow-wrap:anywhere}
.j-summary-title{margin:0 0 10px;font-size:13px;font-weight:650;color:var(--j-green);letter-spacing:.4px;text-transform:uppercase}
.j-summary-list{display:grid;grid-template-columns:minmax(0,45%) minmax(0,55%);gap:7px 10px;margin:0;font-size:14px;line-height:1.45}
.j-summary-list dt{color:var(--j-muted)}
.j-summary-list dd{margin:0;color:var(--j-ink);font-weight:600;min-width:0;overflow-wrap:anywhere}
.j-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}
.j-back{
 min-height:48px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
 border:1px solid var(--j-line);border-radius:999px;background:#fff;color:var(--j-muted);
 font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
}
.j-back .j-icon{width:17px;height:17px}
.j-back:hover{color:var(--j-green);border-color:#c9d9c2}
.j-back[hidden]{display:none}
.j-next{
 min-height:52px;max-width:calc(100% - 132px);padding:0 20px;border:0;border-radius:999px;background:var(--j-green);color:#fff;
 font:inherit;font-size:14.5px;font-weight:650;letter-spacing:-.2px;white-space:nowrap;cursor:pointer;
 display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-left:auto;
 transition:background 120ms ease;
}
.j-next .j-icon{width:18px;height:18px}
.j-next:hover{background:var(--j-green-hover)}
.j-next:disabled{opacity:.6;cursor:default}
.j-back:focus-visible,.j-next:focus-visible,.j-choice:focus-visible,.j-ghost:focus-visible{outline:2px solid var(--j-green);outline-offset:3px}

.j-error{margin:12px 0 0;padding:11px 13px;border-radius:10px;background:#fff1ee;color:#7d2d1d;font-size:14.5px;line-height:1.45}
.j-result-title{margin:0 0 10px;font-size:21px;line-height:1.3;font-weight:650;outline:none}
.j-result-text{margin:0 0 8px;font-size:15.5px;line-height:1.55;color:var(--j-muted)}
.j-legal{margin:18px 0 0;padding-top:14px;border-top:1px solid #eef3ea;font-size:12.5px;line-height:1.6;color:var(--j-muted)}
.j-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;padding:0 4px}
.j-links a,.j-links span{font-size:13.5px;color:var(--j-muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.j-links a:hover{color:var(--j-green);text-decoration:underline}

/* Glissement de la carte à chaque réponse : 250 ms, sans effet sur la saisie. */
#question-area.is-entering{animation:j-in 250ms ease-out both}
@keyframes j-in{from{opacity:.35;transform:translateX(10px)}to{opacity:1;transform:none}}

@media(min-width:560px){
 .j-card{padding:24px 26px 20px}
 .j-question{font-size:22px}
 .j-row{grid-template-columns:1fr 1fr;gap:10px}
 .j-caisse-grid{grid-template-columns:repeat(4,1fr)}
 .j-choice--caisse{min-height:84px}
 .j-logo{max-height:28px}
}
@media(min-width:768px){
 /* Un cran plus grand sur tablette et ordinateur : telephone inchange. */
 .j-main{padding:24px 18px 32px}
 .j-shell{max-width:900px}
 .j-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:22px;justify-content:center;align-items:start}
 .j-guide{display:block;padding-top:4px}
 .j-guide-fox{width:140px;height:auto;display:block;margin-bottom:10px}
 .j-guide-name{font-size:19px;margin-top:8px}
 .j-guide-role{font-size:12px;letter-spacing:1.5px}
 .j-bubble{margin-top:12px;font-size:14px;padding:12px 14px;max-width:240px}
 .j-bubble:before{left:22px;top:-5px;border-left:1px solid #e6eee1;border-bottom:0;border-top:1px solid #e6eee1}
 .j-card{max-width:660px;padding:28px 30px 24px;border-radius:24px}
 .j-hook{font-size:14.5px}
 .j-meta{font-size:14px}
 .j-question{font-size:24px;line-height:1.25;margin-bottom:10px}
 .j-sub{font-size:14.5px}
 .j-req{font-size:13.5px;margin-bottom:18px}
 .j-choices{gap:12px}
 .j-choice{font-size:16.5px;min-height:58px;padding:14px 20px}
 .j-choice--tile{min-height:66px;padding:16px 18px}
 .j-caisse-grid{grid-template-columns:repeat(4,1fr);gap:10px}
 .j-choice--caisse{min-height:92px;border-radius:20px}
 .j-logo{max-height:30px}
 .j-field{gap:9px;margin-bottom:18px}
 .j-input{min-height:56px;font-size:17px;padding:14px 16px}
 .j-phone{grid-template-columns:132px 1fr;gap:10px}
 .j-dial{min-height:56px}
 .j-franchise-value{font-size:40px}
 .j-scale{font-size:11.5px}
 .j-ghost{font-size:14.5px;min-height:48px}
 .j-back,.j-next{min-height:56px;font-size:15.5px;padding:0 24px}
 .j-back{font-size:15px;padding:0 20px}
 .j-actions{margin-top:22px}
 .j-toggle{font-size:15px;padding:16px}
 .j-consent{font-size:13.5px}
 .j-summary-list{font-size:13.5px}
 .j-legal{font-size:13px}
}
@media(min-width:1024px){
 .j-main{padding:32px 24px 40px}
 .j-shell{max-width:960px}
 .j-layout{grid-template-columns:260px minmax(0,660px);gap:36px}
 .j-card{padding:30px 32px 26px}
 .j-guide-fox{width:170px}
 .j-bubble{font-size:14.5px;padding:12px 15px;max-width:250px}
}
@media(max-width:400px){
 .j-card{padding:16px 14px 14px}
 .j-next{font-size:13.5px;padding:0 14px;max-width:calc(100% - 128px)}
 .j-back{font-size:12.5px;padding:0 12px}
}
@media(prefers-reduced-motion:reduce){
 #question-area.is-entering{animation:none}
 #progress-fill{transition:none}
 .j-choice,.j-next{transition:none}
}

/* Situation familiale : quatre tuiles a pictogramme, deux par ligne sur toutes les largeurs.
   Les selecteurs portent deux classes pour ne pas etre ecrases par les regles de .j-choice--tile
   definies plus bas (tablette et ordinateur). */
.j-choices.j-choices--family{grid-template-columns:1fr 1fr;gap:9px;margin:0 0 4px}
.j-choice.j-choice--family{
 flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;
 min-height:98px;border-radius:16px;padding:13px 14px;font-weight:600;
}
.j-choice.j-choice--family .j-family-icon{width:29px;height:29px;color:var(--j-green);stroke-width:1.5}
.j-choice.j-choice--family .j-choice-label{font-size:13.5px;line-height:1.25;letter-spacing:-.1px}

/* Code postal : champ court, puis liste de localites qui s'affine a la frappe. */
.j-postal-input{
 max-width:170px;text-align:center;letter-spacing:.16em;font-weight:600;
 font-variant-numeric:tabular-nums;padding-left:6px;padding-right:6px;
}
.j-suggest{
 display:flex;flex-direction:column;margin:9px 0 0;border:1px solid var(--j-line);
 border-radius:12px;background:#fff;overflow:hidden;max-height:296px;overflow-y:auto;
 -webkit-overflow-scrolling:touch;
}
.j-suggest[hidden]{display:none}
.j-suggest-item{
 display:flex;align-items:baseline;gap:12px;width:100%;min-height:48px;padding:11px 14px;
 border:0;border-top:1px solid #eef3ea;background:#fff;color:var(--j-ink);
 font:inherit;font-size:15px;line-height:1.3;text-align:left;cursor:pointer;
}
.j-suggest-item:first-child{border-top:0}
.j-suggest-item:hover{background:#f6faf2}
.j-suggest-item:focus-visible{outline:2px solid var(--j-green);outline-offset:-2px}
.j-suggest-item[aria-selected="true"]{background:#f1f8ec}
.j-suggest-item .j-cp{
 font-variant-numeric:tabular-nums;font-weight:650;color:var(--j-green);
 letter-spacing:.04em;min-width:3.1em;flex:none;
}
.j-suggest-item .j-loc{min-width:0;overflow-wrap:anywhere}

/* Promesse des deux minutes : posee juste sous la barre de progression, lisible sur telephone
   sans crier. C'est la premiere chose que la personne lit apres la position dans le parcours. */
.j-minutes{
 margin:0 0 12px;font-size:20px;line-height:1.22;font-weight:700;
 letter-spacing:-.35px;color:var(--j-green);
}
@media(min-width:768px){.j-minutes{font-size:24px;margin-bottom:14px}}
@media(max-width:400px){.j-minutes{font-size:18.5px}}

/* Age et canton sur un seul ecran : deux menus empiles, ecart net entre les deux. */
.j-pair{display:grid;gap:14px;margin:0 0 4px}
.j-pair .j-field{margin:0}