/*!
 * PRK Simulateur de tarifs – feuille de style (tout est scopé sous .prk-sim : aucune règle globale)
 * Les valeurs de la charte sont UNIQUEMENT dans les variables --prk-* ci-dessous.
 * Migration de thème / de builder = adapter ces variables, rien d'autre.
 */

/* Remise à zéro légère : protège le composant des styles génériques du thème (p, h3, fieldset…)
   sans écraser les règles de classe qui suivent (même spécificité, celles-ci viennent après). */
.prk-sim :where(p,h3,fieldset,legend,table,caption){margin:0;padding:0}
.prk-sim{
  --prk-primary:#64c9ba;          /* couleur principale du thème */
  --prk-on-primary:#ffffff;       /* texte sur fond principal (comme sur le site) */
  --prk-primary-tint:#eaf8f5;     /* survol des boutons */
  --prk-text:#666666;
  --prk-heading:#000000;
  --prk-border:#d2d2d2;           /* bordure des champs (proche des formulaires du site) */
  --prk-line:#e2e2e2;
  --prk-error:#b3261e;
  --prk-font-text:'Open Sans',Helvetica,Arial,Lucida,sans-serif;
  --prk-font-title:'Josefin Sans',Helvetica,Arial,Lucida,sans-serif;
  --prk-radius:3px;
  --prk-shadow:0 0 22px rgba(0,0,0,.14);
  display:block;
  container:prk-sim / inline-size; /* le composant réagit à SA largeur, pas à celle de l'écran */
  font-family:var(--prk-font-text);
  font-size:16px;
  line-height:1.6;
  color:var(--prk-text);
}
.prk-sim *,.prk-sim *::before,.prk-sim *::after{box-sizing:border-box}
.prk-sim [hidden]{display:none!important}

.prk-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Mise en page : 1 colonne, 2 colonnes dès que le composant est assez large */
.prk-layout{display:grid;gap:24px}
@container prk-sim (min-width:760px){
  .prk-layout{grid-template-columns:minmax(0,11fr) minmax(0,10fr);align-items:start}
}
.prk-panel{background:#fff;box-shadow:var(--prk-shadow);padding:24px}
@container prk-sim (max-width:480px){.prk-panel{padding:18px 16px}}
.prk-panel--form{container:prk-form / inline-size}
.prk-panel--result{border-top:4px solid var(--prk-primary)}
.prk-panel--result .prk-legend{font-size: 1.3rem;margin: 0;}

/* Groupes et intitulés (même style que les sous-titres des fiches : Josefin, capitales) */
.prk-group{margin:0 0 22px;padding:0;border:0;min-inline-size:0}
.prk-group:last-child{margin-bottom:0}
.prk-legend{display:block;width:100%;margin:0 0 10px;line-height: 1;padding:0;font-family:var(--prk-font-title);font-weight:700;font-size:16px;line-height:1.3;text-transform:uppercase;color:var(--prk-heading)}

/* Choix : boutons façon onglets (les radios natifs restent là pour le clavier et les lecteurs d'écran, mais ne se voient pas) */
.prk-choices{display:flex;gap:6px}
.prk-choice{position:relative;flex:1 1 0;min-width:0}
.prk-sim .prk-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.prk-choice label{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid var(--prk-primary);border-radius:var(--prk-radius);background:#fff;color:var(--prk-primary);font-size:15px;font-weight:600;line-height:1.25;text-align:center;cursor:pointer;transition:background .15s,color .15s}
.prk-choice label:hover{background:var(--prk-primary-tint)}
.prk-choice input:checked + label,.prk-choice input:checked + label:hover{background:var(--prk-primary);color:var(--prk-on-primary)}
.prk-choice input:focus-visible + label{outline:3px solid var(--prk-primary);outline-offset:2px}
/* Panneau étroit (mobile, colonne étroite) : les choix s'empilent, pleine largeur */
@container prk-form (max-width:440px){
  .prk-choices{flex-direction:column}
}

/* Champs */
.prk-fields{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:10px}
.prk-fields--duration{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.prk-field--full{grid-column:1/-1}
.prk-field label{display:block;margin:0 0 4px;font-size:14px;font-weight:400;color:var(--prk-text)}
.prk-sim .prk-input{display:block;width:100%;height:44px;margin:0;padding:0 12px;border:1px solid var(--prk-border);border-radius:var(--prk-radius);background:#fff;color:var(--prk-text);font:inherit;font-size:16px;line-height:normal}
.prk-sim .prk-input:focus-visible{outline:3px solid var(--prk-primary);outline-offset:2px;border-color:var(--prk-primary)}
.prk-sim .prk-input[aria-invalid="true"]{border-color:var(--prk-error);box-shadow:inset 0 0 0 1px var(--prk-error)}
.prk-error{margin:8px 0 0;display:flex;gap:8px;align-items:flex-start;font-size:14px;font-weight:600;line-height:1.4;color:var(--prk-error)}
.prk-error:empty{display:none}
.prk-error:not(:empty)::before{content:"!";flex:none;width:18px;height:18px;border-radius:50%;background:var(--prk-error);color:#fff;font-size:12px;font-weight:700;line-height:18px;text-align:center}
.prk-help{display:none;margin:10px 0 0;font-size:14px}

/* Résultat */
.prk-eyebrow{margin:0 0 16px;font-family:var(--prk-font-text);font-size:16px;color:var(--prk-primary);font-weight:600}
.prk-price{margin:0;font-family:var(--prk-font-title);font-weight:700;font-size:clamp(44px,14cqw,56px);line-height:1;color:var(--prk-heading)}
.prk-meta{margin:10px 0 0;font-size:16px;font-weight:600}
.prk-note{margin:18px 0 0;padding:2px 0 2px 12px;border-left:3px solid var(--prk-primary);font-size:14px}
.prk-legal{margin:16px 0 0;font-size:13px}
.prk-empty{margin:0;padding:8px 0}
.prk-sim .prk-btn{display:inline-block;margin-top:12px;padding:10px 16px;border:2px solid var(--prk-primary);border-radius:var(--prk-radius);background:#fff;color:var(--prk-primary);font-weight:600;text-decoration:none}
.prk-sim .prk-btn:hover{background:var(--prk-primary);color:var(--prk-on-primary)}
.prk-sim .prk-btn:focus-visible{outline:3px solid var(--prk-primary);outline-offset:2px}

/* Tableau de détail (reprend le style des tableaux de tarifs des fiches, avec le teal foncé) */
.prk-tablewrap{margin-top:18px;overflow-x:auto}
.prk-table{width:100%;border-collapse:collapse;border:0;background:none;font-size:14px}
.prk-table th,.prk-table td{padding:8px 10px;text-align:left;vertical-align:top;border:0;background:none}
.prk-table thead th{background:var(--prk-primary);color:var(--prk-on-primary);font-family:var(--prk-font-title);font-size:13px;text-transform:uppercase}
.prk-table tbody tr{border-bottom:1px solid var(--prk-line)}
.prk-table tbody th{font-weight:600;color:var(--prk-heading)}
.prk-table .prk-num{text-align:right;white-space:nowrap}
.prk-table tfoot th,.prk-table tfoot td{border-top:2px solid var(--prk-primary);font-weight:700;color:var(--prk-heading)}
.prk-tag{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--prk-primary);border-radius:var(--prk-radius);font-size:12px;font-weight:600;color:var(--prk-primary);white-space:nowrap}

.prk-sub{display:block;font-size:13px;font-weight:400;color:var(--prk-text)}
.prk-note + .prk-note{margin-top:8px}
.prk-tip{margin:18px 0 0;padding:14px 16px;border:2px dashed var(--prk-primary);border-radius:12px}
.prk-tip__title{margin:0 0 4px;font-family:var(--prk-font-title);font-weight:700;font-size:16px;text-transform:uppercase;color:var(--prk-primary)}
.prk-tip p:last-child{margin:0;font-size:15px}

@media (forced-colors:active){
  .prk-choice input:checked + label{outline:2px solid Highlight}
}