/* Simulateur du congé maternité des soignantes libérales (page /simulateur-conge-maternite) */
/* Simulateur du congé maternité : morceaux communs, dans le style du site */


/* Couleurs des périodes */
.fr-patho{background:var(--orange-300)}
.fr-avant{background:var(--rose-500)}
.fr-apres{background:var(--canard-700)}
.fr-csn{background:var(--citron-500)}
.fr-bebe-pt{background:var(--orange-500)}
.fr-reprise{background:var(--paper-400)}

/* Frise */
.frise{margin:8px 0 0}
.fr-piste{position:relative; height:46px; margin:44px 0 0; border-radius:10px; background:repeating-linear-gradient(90deg, var(--paper-200) 0 2px, transparent 2px 100%), var(--paper-000);
  border:1.5px solid var(--paper-300)}
.frise--grande .fr-piste{height:64px}
.fr-bande{position:absolute; top:6px; bottom:6px; border-radius:6px}
.fr-bebe{position:absolute; bottom:calc(100% + 6px); transform:translateX(-50%); white-space:nowrap; font-size:12.5px; color:var(--ink-500); text-align:center; line-height:1.15}
.fr-bebe b{display:block; font-family:var(--font-display); font-weight:400; font-size:19px; color:var(--orange-600)}
.fr-bebe::after{content:""; position:absolute; left:50%; top:100%; width:2px; height:58px; margin-left:-1px; background:var(--orange-500)}
.frise--grande .fr-bebe::after{height:76px}
.fr-rep{position:absolute; top:calc(100% + 4px); transform:translateX(-50%); font-size:12px; color:var(--canard-800); font-weight:700; white-space:nowrap}
.fr-axe{position:relative; height:34px; margin-top:20px; border-top:1px dashed var(--paper-400)}
.fr-mois{position:absolute; top:6px; font-size:12px; color:var(--ink-500); text-transform:lowercase; padding-left:4px; border-left:1px solid var(--paper-400); line-height:1}
.fr-legende{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:6px; font-size:14px; color:var(--canard-700)}
.fr-legende span{display:inline-flex; align-items:center; gap:7px}
.fr-legende i{width:14px; height:14px; border-radius:4px; display:inline-block}
@media (max-width:640px){ .fr-mois:nth-child(even){display:none} .fr-rep{display:none} }

/* Listes calmes : une ligne, un petit point, la valeur à droite */
.lignes{list-style:none; margin:0; padding:0}
.lignes li{display:flex; align-items:baseline; gap:12px; padding:11px 0; border-bottom:1px solid var(--paper-300); font-size:16px; color:var(--canard-700)}
.lignes li:last-child{border-bottom:0}
.lignes .pt{flex:0 0 auto; width:9px; height:9px; border-radius:999px; transform:translateY(-1px)}
.lignes .lg-t{flex:1; min-width:0}
.lignes .lg-t small{display:block; font-size:13.5px; color:var(--ink-500); margin-top:2px}
.lignes .lg-v{font-weight:700; color:var(--canard-800); text-align:right; white-space:nowrap}
.lignes--argent .lg-v{font-family:var(--font-display); font-weight:400; font-size:24px}
.lignes .lg-total{border-top:2px solid var(--canard-800); border-bottom:0; margin-top:4px}
.lignes .lg-total .lg-v{font-size:30px; color:var(--canard-900)}
.lignes .lg-total .lg-t{font-weight:700; color:var(--canard-800)}
sup a.src{font-family:var(--font-text); font-size:11px; font-weight:700; text-decoration:none; color:var(--orange-600); margin-left:2px}

/* Tuiles de chiffres */
.tuiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px}
.tuile{padding:18px 18px 16px; border-radius:14px; background:var(--paper-000); border:1.5px solid var(--paper-300)}
.tuile__lab{margin:0 0 6px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--canard-700)}
.tuile__val{margin:0; font-family:var(--font-display); font-size:38px; line-height:1; color:var(--canard-800)}
.tuile__sous{margin:8px 0 0; font-size:14px; line-height:1.4; color:var(--ink-500)}
.tuile--fonce{background:var(--canard-800); border-color:var(--canard-800)}
.tuile--fonce .tuile__lab{color:var(--citron-500)} .tuile--fonce .tuile__val{color:var(--paper-100)} .tuile--fonce .tuile__sous{color:var(--canard-200)}

/* Démarches dans l'ordre */
.etapes{list-style:none; margin:0; padding:0; counter-reset:et}
.etapes li{counter-increment:et; display:grid; grid-template-columns:34px 92px 1fr; gap:4px 12px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--paper-300)}
.etapes li::before{content:counter(et); display:grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--canard-050); color:var(--canard-800); font-weight:700; font-size:14px}
.etapes .et-date{font-weight:700; color:var(--orange-600); font-size:14.5px}
.etapes .et-t{font-size:15.5px; color:var(--canard-700); line-height:1.45}
.etapes .et-t b{display:block; color:var(--canard-800)}
@media (max-width:560px){ .etapes li{grid-template-columns:34px 1fr} .etapes .et-date{grid-column:2} .etapes .et-t{grid-column:2} }

.rt-caisse{margin:0 0 6px; font-size:16px}

.sources{margin:0; padding-left:20px; font-size:13.5px; line-height:1.55; color:var(--ink-500)}
.sources li{margin-bottom:6px}

/* Champs */
.champ{display:flex; flex-direction:column; gap:7px; margin:0 0 18px}
.champ > label, .champ > .champ__lab{font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--canard-800)}
.champ input, .champ select{width:100%; font-family:var(--font-text); font-size:16px; padding:10px 13px; border:1.5px solid var(--paper-300); border-radius:10px; background:var(--paper-000); color:var(--canard-800)}
.champ input:focus, .champ select:focus{outline:none; border-color:var(--canard-800); box-shadow:0 0 0 3px var(--citron-100)}
.champ small{font-size:13.5px; color:var(--ink-500); line-height:1.4}
.pilules{display:flex; flex-wrap:wrap; gap:8px}
.pilules button{font-family:var(--font-text); font-size:15px; padding:8px 15px; border-radius:999px; border:1.5px solid var(--paper-300); background:var(--paper-000); color:var(--canard-800); cursor:pointer}
.pilules button:hover{border-color:var(--canard-800)}
.pilules button.on{background:var(--canard-800); border-color:var(--canard-800); color:#fff}
.euro{position:relative} .euro input{padding-right:32px} .euro::after{content:"€"; position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--ink-500)}

.note-droit{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; background:var(--citron-050); border:1.5px solid var(--citron-100); font-size:15px; line-height:1.5; color:var(--canard-800)}
.note-droit .pt{flex:0 0 auto; width:9px; height:9px; margin-top:7px; border-radius:999px; background:var(--citron-600)}
.note-droit.non{background:var(--orange-050); border-color:var(--orange-100)} .note-droit.non .pt{background:var(--orange-500)}
.rien-envoye{display:flex; gap:8px; align-items:center; font-size:14px; color:var(--ink-500)}
.rien-envoye svg{flex:0 0 auto}

[hidden]{display:none!important}
main .c-phrase, main .b-phrase, main .lignes *, main .etapes *, main .tuile *, main .note-droit *, main .champ *{text-align:left; hyphens:manual}
main .tuile__val, main .lg-v{text-align:right}
main .tuile .tuile__val{text-align:left}
.fr-libre{background:repeating-linear-gradient(135deg, var(--paper-400) 0 5px, var(--paper-200) 5px 10px)}
main .savoir li, main .compte *, main .periode, main .fil-dem *, main .droit *, main .petit-txt{text-align:left; hyphens:manual}
main .compte .v, main .fil-dem .q{text-align:right}
@media (max-width:560px){ main .fil-dem .q{text-align:left} }

/* Page */
    .b-grille{display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:var(--bloc); align-items:start}
    @media (max-width:900px){ .b-grille{grid-template-columns:1fr} }
    .b-form{position:sticky; top:20px; background:var(--paper-000); border:1.5px solid var(--paper-300); border-radius:16px; padding:22px 22px 6px; max-height:calc(100vh - 40px); overflow:auto}
    @media (max-width:900px){ .b-form{position:static; max-height:none} }
    .b-form h2{font-size:26px; margin:0 0 14px}
    .b-form h2:not(:first-child){margin-top:10px; padding-top:18px; border-top:1px solid var(--paper-300)}
    .b-res{display:flex; flex-direction:column; gap:18px; min-width:0}
    .b-carte{background:var(--paper-000); border:1.5px solid var(--paper-300); border-radius:16px; padding:22px 24px}
    .b-carte h3{font-size:24px; margin:0 0 12px}
    .b-phrase{font-family:var(--font-display); font-size:clamp(24px,2.4vw,32px); line-height:1.1; color:var(--canard-800); margin:0; text-transform:lowercase}
    .b-phrase .surligne{font-weight:400}
    .b-deux{display:grid; grid-template-columns:1fr 1fr; gap:18px}
    @media (max-width:1100px){ .b-deux{grid-template-columns:1fr} }
    .curseur{width:100%; accent-color:var(--canard-800)}
    .duree-val{margin:0; font-family:var(--font-display); font-size:26px; line-height:1; color:var(--canard-800); text-transform:lowercase}

    /* Les périodes, qui servent aussi de légende à la frise */
    .periodes{display:flex; flex-wrap:wrap; gap:14px 18px; margin-top:14px}
    .periode{flex:1 1 130px; min-width:0; padding-top:8px; border-top:4px solid; font-size:14px; line-height:1.35; color:var(--canard-700)}
    .periode b{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--canard-800)}
    .periode.fr-patho{border-color:var(--orange-300)} .periode.fr-avant{border-color:var(--rose-500)} .periode.fr-apres{border-color:var(--canard-700)}
    .periode.fr-csn{border-color:var(--citron-500)} .periode.fr-libre{border-image:repeating-linear-gradient(135deg, var(--paper-400) 0 5px, var(--paper-200) 5px 10px) 4}
    .periode{background:none!important}

    /* Comptes, en petit */
    .compte{list-style:none; margin:0; padding:0}
    .compte li{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px solid var(--paper-200); font-size:15px; color:var(--canard-700)}
    .compte li span:first-child{min-width:0}
    .compte small{display:block; font-size:13px; color:var(--ink-500); margin-top:1px}
    .compte .v{font-weight:700; color:var(--canard-800); white-space:nowrap; font-variant-numeric:tabular-nums}
    .compte .moins .v{color:var(--ink-500); font-weight:600}
    .compte .tot{border-bottom:0; border-top:1.5px solid var(--canard-800); margin-top:2px; padding-top:10px; font-size:16.5px}
    .compte .tot span:first-child{font-weight:700; color:var(--canard-800)}
    .compte .tot .v{color:var(--canard-900)}
    .compte sup a{font-size:10.5px; font-weight:700; text-decoration:none; color:var(--orange-600); margin-left:2px}
    .droit{display:flex; gap:9px; align-items:baseline; margin:0 0 10px; font-size:14px; line-height:1.45; color:var(--canard-700)}
    .droit .pt{flex:0 0 auto; width:8px; height:8px; border-radius:999px; background:var(--citron-600); transform:translateY(-1px)}
    .droit.non .pt{background:var(--orange-500)}

    /* Démarches : un fil vertical */
    .fil-dem{list-style:none; margin:4px 0 0; padding:0}
    .fil-dem li{position:relative; display:grid; grid-template-columns:118px 14px 1fr; gap:0 14px; padding:0 0 16px}
    .fil-dem li:last-child{padding-bottom:0}
    .fil-dem li::before{content:""; position:absolute; left:calc(118px + 14px + 6px); top:16px; bottom:-2px; width:2px; background:var(--paper-300)}
    .fil-dem li:last-child::before{display:none}
    .fil-dem .q{font-size:13px; font-weight:700; color:var(--canard-700); text-align:right; padding-top:1px; line-height:1.3}
    .fil-dem .pt{width:14px; height:14px; margin-top:3px; border-radius:999px; border:2px solid var(--canard-700); background:var(--paper-000); position:relative; z-index:1}
    .fil-dem li.pendant .pt{background:var(--canard-700)}
    .fil-dem li.naissance .pt{border-color:var(--orange-500); background:var(--orange-500)}
    .fil-dem .t{font-size:15px; line-height:1.4; color:var(--ink-500)}
    .fil-dem .t b{display:block; font-size:15.5px; color:var(--canard-800)}
    @media (max-width:560px){
      .fil-dem li{grid-template-columns:14px 1fr} .fil-dem li::before{left:6px}
      .fil-dem .q{grid-column:2; text-align:left; order:2} .fil-dem .pt{grid-row:1 / span 2} .fil-dem .t{grid-column:2; order:3}
    }
    .petit-txt{font-size:13.5px; line-height:1.55; color:var(--ink-500); margin:0}
    .savoir{list-style:none; margin:0; padding:0}
    .savoir li{display:flex; gap:9px; align-items:baseline; padding:6px 0; font-size:15px; line-height:1.45; color:var(--canard-700)}
    .savoir li::before{content:""; flex:0 0 auto; width:7px; height:7px; border-radius:999px; background:var(--canard-300); transform:translateY(-2px)}
    .sources{font-size:13px}
    /* Téléphone : la somme à mettre de côté reste visible en bas, et mène aux résultats */
    .barre-bas{display:none}
    @media (max-width:900px){
      .barre-bas{position:fixed; left:12px; right:12px; bottom:12px; z-index:90; display:flex; align-items:center; justify-content:space-between; gap:12px;
        padding:12px 16px; border-radius:14px; background:var(--canard-800); color:#fff; text-decoration:none; box-shadow:0 8px 24px rgba(7,54,65,.25); transition:opacity .2s}
      .barre-bas span{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--citron-500)}
      .barre-bas b{font-family:var(--font-display); font-weight:400; font-size:24px; color:#fff}
      .barre-bas.cachee{opacity:0; pointer-events:none}
      .b-grille{padding-bottom:70px}
    }