/* ==========================================================================
   Simulateur de salaire intérim — composants de page.
   Le socle charte (tokens, masthead, hero, boutons, cartes, FAQ, footer)
   vit dans charte.css ; les composants de contenu dans hub.css.
   Ce fichier ne contient que l'outil de simulation.
   Référence : design-system/randstad-design-system.md
   ========================================================================== */

/* [hidden] doit l'emporter sur les display:flex/grid des composants ci-dessous */
[hidden]{display:none !important}

/* sélecteur de fond — outil de démonstration, hors maquette */
.hero-switch{position:fixed;left:24px;bottom:24px;z-index:70;display:flex;align-items:center;
  gap:var(--sp-02);background:#fff;border:2px solid var(--gray-line);border-radius:var(--radius-02);
  padding:var(--sp-02) var(--sp-03)}
.hero-switch .lbl{font-size:var(--p-xs-size);line-height:16px;color:var(--gray-mid);
  padding-right:var(--sp-02);border-right:1px solid var(--gray-line)}
.hero-switch button{display:flex;align-items:center;gap:6px;cursor:pointer;background:none;
  border:2px solid transparent;border-radius:var(--radius-01);padding:4px 8px;
  font:400 var(--p-xs-size)/16px var(--font);color:var(--gray-mid)}
.hero-switch button:hover{color:var(--navy)}
.hero-switch button[aria-pressed="true"]{border-color:var(--blue-accessible);color:var(--navy)}
.hero-switch button:focus-visible{outline:3px solid rgba(33,117,217,.35);outline-offset:1px}
.hero-switch .sw{width:14px;height:14px;border-radius:3px;flex:none;border:1px solid rgba(15,25,65,.15)}
.hero-switch .sw-navy{background:var(--navy)}
.hero-switch .sw-blue{background:var(--blue)}
@media(max-width:940px){
  /* outil de démo : réduit aux pastilles pour ne pas masquer le formulaire.
     Le nom de chaque option reste porté par aria-label. */
  .hero-switch{left:auto;right:12px;bottom:74px;gap:4px;padding:4px}
  .hero-switch .lbl,.hero-switch .sw-txt{display:none}
  .hero-switch button{padding:6px;min-width:34px;min-height:34px;justify-content:center}
  .hero-switch .sw{width:18px;height:18px}
}
@media print{.hero-switch{display:none}}

/* ---------- coquille du simulateur ---------- */
.simu-shell{padding-top:0}
.simu-shell .wrap{position:relative}
.simu-card{margin-top:-70px;background:#fff;border:2px solid var(--gray-line);
  border-radius:var(--radius-02);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr)}

/* ---------- colonne saisie ---------- */
.simu-form{padding:var(--sp-08);border-right:2px solid var(--gray-line);min-width:0}
.stepper{font-size:var(--p-xs-size);line-height:var(--p-xs-lh);color:var(--blue-active);
  margin-bottom:var(--sp-04)}
.simu-form h2{font-size:var(--heading-md-size);line-height:var(--heading-md-lh);
  letter-spacing:var(--heading-md-ls);font-weight:400;color:var(--navy);margin-bottom:var(--sp-04)}

.seg{display:flex;flex-wrap:wrap;gap:var(--sp-02);margin-bottom:var(--sp-06);border:0;padding:0}
.seg legend{font-size:var(--p-xs-size);color:var(--gray-mid);margin-bottom:var(--sp-02);padding:0}
.seg .opt{position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg label{display:inline-block;cursor:pointer;border:2px solid var(--gray-line);
  border-radius:var(--radius-full);padding:5px 16px;font-size:var(--p-sm-size);
  line-height:var(--p-sm-lh);color:var(--gray-mid);transition:border-color .15s,color .15s,background .15s}
.seg label:hover{border-color:var(--blue-accessible);color:var(--navy)}
.seg input:checked + label{background:var(--blue);border-color:var(--blue);color:#fff}
.seg input:focus-visible + label{outline:3px solid rgba(33,117,217,.35);outline-offset:2px}

/* ---------- repli « affiner » ---------- */
.adv-toggle{margin-top:var(--sp-06);background:none;border:0;padding:0;cursor:pointer;
  font:400 var(--p-md-size)/24px var(--font);color:var(--blue);display:inline-flex;align-items:center;gap:8px}
.adv-toggle:hover{text-decoration:underline}
.adv-toggle::before{content:"+";display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--radius-full);border:2px solid var(--blue);
  font-size:14px;line-height:1;transition:transform .2s}
.adv-toggle[aria-expanded="true"]::before{transform:rotate(45deg)}
.adv{margin-top:var(--sp-06);border-top:2px solid var(--gray-line);padding-top:var(--sp-06)}
.adv[hidden]{display:none}


.actions{display:flex;flex-wrap:wrap;gap:var(--sp-03);align-items:center;margin-top:var(--sp-06)}
.actions .btn{line-height:48px;padding:0 24px;font-size:var(--p-md-size)}
.link-reset{background:none;border:0;cursor:pointer;color:var(--gray-mid);
  font:400 var(--p-sm-size)/24px var(--font);text-decoration:underline}
.link-reset:hover{color:var(--navy)}

/* ---------- colonne résultat ---------- */
.simu-out{padding:var(--sp-08);background:var(--blue-tint-7);min-width:0;
  display:flex;flex-direction:column;
  /* rayon intérieur = rayon de la carte moins l'épaisseur de sa bordure */
  border-radius:0 6px 6px 0}
.res-kicker{font-size:var(--p-xs-size);line-height:var(--p-xs-lh);color:var(--blue-active);
  margin-bottom:var(--sp-02)}
.res-amount{font-size:var(--heading-lg-size);line-height:44px;letter-spacing:var(--heading-lg-ls);
  color:var(--navy);font-weight:400;margin-bottom:var(--sp-02);word-break:break-word}
.res-note{font-size:var(--p-xs-size);line-height:16px;color:var(--gray-mid)}
.res-break{margin-top:var(--sp-06);border-top:1px solid #C6DAF5;padding-top:var(--sp-04)}
.res-break .row{display:flex;justify-content:space-between;gap:var(--sp-03);align-items:baseline;
  padding:6px 0;font-size:var(--p-sm-size);line-height:20px;color:var(--gray-mid)}
.res-break .row b{color:var(--navy);font-weight:400;white-space:nowrap}
.res-break .row.total{border-top:1px solid #C6DAF5;margin-top:var(--sp-02);padding-top:var(--sp-03)}
.res-break .row.total b{font-size:var(--p-default-size)}
.res-idle{color:var(--gray-mid);font-size:var(--p-sm-size);line-height:var(--p-sm-lh)}
.res-links{padding-top:var(--sp-06);display:flex;flex-wrap:wrap;gap:var(--sp-04)}
.res-links button{background:none;border:0;padding:0;cursor:pointer;color:var(--blue);
  font:400 var(--p-sm-size)/24px var(--font);text-decoration:underline}
.res-links button:hover{color:var(--blue-active)}
.res-warn{margin-top:var(--sp-04);background:var(--warn-bg);border-left:4px solid var(--warn);
  padding:var(--sp-03) var(--sp-04);font-size:var(--p-xs-size);line-height:16px;color:var(--navy)}

/* ---------- bandeau fraîcheur des données ---------- */
.freshness{display:flex;flex-wrap:wrap;gap:var(--sp-02) var(--sp-06);align-items:center;
  justify-content:space-between;margin-top:var(--sp-04);padding:var(--sp-03) var(--sp-04);
  background:var(--beige);border-radius:var(--radius-01);
  font-size:var(--p-xs-size);line-height:16px;color:var(--gray-mid)}
.freshness b{color:var(--navy);font-weight:400}
.freshness button{background:none;border:0;cursor:pointer;color:var(--blue);
  font:400 var(--p-xs-size)/16px var(--font);text-decoration:underline}

/* ---------- trois temporalités ---------- */
.tempo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-04);margin-top:var(--sp-06)}
.tempo .card{display:flex;flex-direction:column}
.pill{align-self:flex-start;display:inline-block;border-radius:var(--radius-full);
  padding:2px 12px;font-size:var(--p-xs-size);line-height:20px;margin-bottom:var(--sp-03)}
.pill-now{background:var(--blue-tint-7);color:var(--blue-active)}
.pill-end{background:var(--warn-bg);color:#8A6100}
.pill-all{background:var(--green-bg);color:var(--green)}
.tempo .amt{font-size:var(--heading-md-size);line-height:var(--heading-md-lh);
  letter-spacing:var(--heading-md-ls);color:var(--navy);margin-bottom:var(--sp-02)}
.tempo .amt small{display:block;font-size:var(--p-xs-size);line-height:16px;
  letter-spacing:0;color:var(--gray-mid);margin-top:4px}
.tempo p{font-size:var(--p-sm-size);line-height:var(--p-sm-lh);color:var(--gray-mid)}

/* ---------- mini-fiche de paie ---------- */
.fiche{width:100%;border-collapse:collapse;margin-top:var(--sp-06);
  background:#fff;border:2px solid var(--gray-line);border-radius:var(--radius-02)}
.fiche caption{text-align:left;font-size:var(--p-sm-size);line-height:var(--p-sm-lh);
  color:var(--gray-mid);padding-bottom:var(--sp-03)}
.fiche th,.fiche td{padding:10px var(--sp-04);text-align:left;font-size:var(--p-sm-size);
  line-height:20px;border-bottom:1px solid var(--gray-line);vertical-align:top}
.fiche thead th{font-size:var(--p-xs-size);line-height:16px;color:var(--gray-mid);
  background:var(--beige);font-weight:400}
.fiche td.n,.fiche th.n{text-align:right;white-space:nowrap;color:var(--navy)}
.fiche tr.sub td{background:#FBFBFA;color:var(--navy)}
.fiche tr.tot td{background:var(--blue-tint-7);color:var(--navy);font-size:var(--p-md-size)}
.fiche tr:last-child td{border-bottom:0}
.fiche .lbl{color:var(--gray-mid)}
.fiche .lbl b{color:var(--navy);font-weight:400;display:block}
.fiche .why{background:none;border:0;padding:0;margin-left:6px;cursor:pointer;color:var(--blue);
  font:400 var(--p-xs-size)/16px var(--font);text-decoration:underline}
.fiche .why-txt{display:block;margin-top:4px;font-size:var(--p-xs-size);line-height:16px;color:var(--gray-mid)}
.fiche .why-txt[hidden]{display:none}

/* ---------- outils secondaires (onglets) ---------- */
.tools{margin-top:var(--sp-08)}
.tool-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-02);border-bottom:2px solid var(--gray-line)}
.tool-tabs button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;
  cursor:pointer;padding:var(--sp-03) var(--sp-04);font:400 var(--p-md-size)/24px var(--font);
  color:var(--gray-mid)}
.tool-tabs button:hover{color:var(--navy)}
.tool-tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--blue)}
.tool-tabs button:focus-visible{outline:3px solid rgba(33,117,217,.35);outline-offset:-3px}
.tool-panel{padding:var(--sp-06) 0 0}
.tool-panel[hidden]{display:none}
.tool-panel > p{font-size:var(--p-md-size);line-height:var(--p-md-lh);color:var(--gray-mid);
  max-width:760px;margin-bottom:var(--sp-04)}
.tool-out{margin-top:var(--sp-04);border-radius:var(--radius-02);padding:var(--sp-04) var(--sp-06);
  font-size:var(--p-md-size);line-height:var(--p-md-lh);background:var(--blue-tint-7);color:var(--navy)}
.tool-out[hidden]{display:none}
.tool-out b{font-weight:400;display:block;font-size:var(--heading-xs-size);
  line-height:var(--heading-xs-lh);margin-bottom:4px}
.tool-out ul{margin:var(--sp-02) 0 0 18px;font-size:var(--p-sm-size);line-height:1.8;color:var(--gray-mid)}
.tool-out.ok{background:var(--green-bg)}
.tool-out.ok b{color:var(--green)}
.tool-out.warn{background:var(--warn-bg)}
.tool-out.warn b{color:#8A6100}

/* ---------- formule / méthode ---------- */
.formula{background:var(--navy);color:#fff;border-radius:var(--radius-02);
  padding:var(--sp-06);font-size:var(--p-md-size);line-height:2;margin:var(--sp-06) 0;overflow-x:auto}
.formula b{color:#85ECFF;font-weight:400}
.callout{border-left:4px solid var(--blue);background:var(--blue-tint-7);
  padding:var(--sp-04) var(--sp-06);margin:var(--sp-06) 0;max-width:860px;
  font-size:var(--p-md-size);line-height:var(--p-md-lh);color:var(--navy)}
.callout b{font-weight:400;color:var(--navy)}
.callout.warn{border-left-color:var(--warn);background:var(--warn-bg)}

/* ---------- table de paramètres ---------- */
.params[hidden]{display:none}
.params{margin-top:var(--sp-04);border:2px solid var(--gray-line);border-radius:var(--radius-02);
  background:#fff;padding:var(--sp-04) var(--sp-06)}
.params table{width:100%;border-collapse:collapse}
.params th,.params td{text-align:left;padding:8px 0;font-size:var(--p-sm-size);line-height:20px;
  border-bottom:1px solid var(--gray-line);color:var(--gray-mid);vertical-align:top}
.params td b{color:var(--navy);font-weight:400}
.params tr:last-child th,.params tr:last-child td{border-bottom:0}

/* ---------- journal analytics (démo) ---------- */
.evtlog{margin-top:var(--sp-06);border:2px dashed var(--gray-line);border-radius:var(--radius-02);
  background:#fff;padding:var(--sp-04) var(--sp-06)}
.evtlog summary{cursor:pointer;font-size:var(--p-sm-size);line-height:var(--p-sm-lh);color:var(--gray-mid)}
.evtlog summary b{color:var(--navy);font-weight:400}
.evtlog ol{margin:var(--sp-03) 0 0 20px;font-size:var(--p-xs-size);line-height:1.9;color:var(--gray-mid);
  max-height:220px;overflow:auto}
.evtlog code{color:var(--blue-active)}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .simu-card{grid-template-columns:1fr}
  .simu-form{border-right:0;border-bottom:2px solid var(--gray-line)}
  .simu-out{border-radius:0 0 6px 6px}
  .res-links{margin-top:var(--sp-06)}
}
@media(max-width:940px){
  .tempo{grid-template-columns:1fr}
}
@media(max-width:640px){
  /* mobile-first : le simulateur doit rester accessible sans long défilement */
  .simu-card{margin-top:-56px}
  .simu-form,.simu-out{padding:var(--sp-06)}
  /* hiérarchie resserrée dans la carte : 24 (panneau) > 20 (section) > 14 (intitulé) */
  .simu-form h2{font-size:var(--heading-sm-size);line-height:var(--heading-sm-lh);
    letter-spacing:var(--heading-sm-ls)}
  /* Deux colonnes plutôt qu'une : « 35 h » et « 3 mois » n'ont pas besoin
     de 275px de large. Le champ de montant, lui, reste sur toute la largeur. */
  /* le champ de montant occupe toute la largeur ; heures et durée se partagent la ligne */
  #simu-form .form-grid [data-mode-field]{grid-column:1 / -1}
  /* cibles tactiles : 44px minimum */
  .seg label{min-height:44px;display:inline-flex;align-items:center;padding:0 16px}
  .seg{gap:var(--sp-02) 6px}
  .ip input,.ip select{padding:11px 12px}
  /* durée (v1) : le champ numérique cède la place au sélecteur d'unité */
  .form-grid #duree{max-width:52px}
  .form-grid #duree-unite{font-size:var(--p-md-size)}
  .res-amount{font-size:var(--heading-md-size);line-height:var(--heading-md-lh);
    letter-spacing:var(--heading-md-ls)}
  .fiche th,.fiche td{padding:8px var(--sp-03)}
}

/* ---------- impression ---------- */
@media print{
  .mast-strip,.masthead,.stickybar,.tools,.evtlog,.adv-toggle,.actions,.res-links,footer,.faq{display:none}
  .hero{background:#fff;color:var(--navy)}
  .hero h1{color:var(--navy)}
  .simu-card{margin-top:0}
  body{padding-bottom:0}
}

/* ---------- compléments : classes injectées par le JS ---------- */
.hint{font-size:var(--p-xs-size);line-height:var(--p-xs-lh);color:var(--gray-mid)}
.why-txt-static{display:block;margin-top:2px;font-size:var(--p-xs-size);line-height:16px;color:var(--gray-mid)}
.res-warn b{display:block;font-weight:400;color:var(--navy);margin-bottom:4px}
.res-warn ul{margin:0 0 0 16px;padding:0}
.res-warn li{margin-bottom:4px}
.tool-out .res-note{margin-top:var(--sp-03);font-size:var(--p-xs-size);line-height:16px;color:var(--gray-mid)}
.tool-out ul b{color:var(--navy);font-weight:400;display:inline}
.params caption{caption-side:top;text-align:left;font-size:var(--p-sm-size);line-height:var(--p-sm-lh);
  color:var(--gray-mid);padding:var(--sp-02) 0 var(--sp-03);max-width:820px}
.tempo .amt b,.tempo .amt{font-weight:400}
.evtlog li{word-break:break-word}

/* ---------- calcul en direct ---------- */
.auto-note{margin-top:var(--sp-03);max-width:460px}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:var(--radius-full);
  background:var(--green);margin:0 6px 0 10px;vertical-align:middle}
.live-txt{color:var(--gray-mid);font-size:var(--p-xs-size)}
@media print{.auto-note,.live-dot,.live-txt{display:none}}


/* ---------- barre collante mobile : l'estimation reste sous les yeux ---------- */
.sb-live{display:flex;align-items:baseline;gap:var(--sp-02);min-width:0}
.sb-live .lbl{font-size:var(--p-xs-size);line-height:16px;color:#B9C9E8;white-space:nowrap}
.sb-live .amt{font-size:var(--heading-xs-size);line-height:24px;color:#fff;white-space:nowrap}
.stickybar .btn{white-space:nowrap}
@media(max-width:360px){.sb-live .lbl{display:none}}

/* ---------- boutons des outils secondaires ---------- */
.tool-panel .form-grid__action .btn{line-height:56px;padding:0 24px;font-size:var(--p-md-size);text-align:center}
@media(max-width:640px){.tool-panel .form-grid__action .btn{line-height:48px}}