/* Atoumo — tunnel obsèques. Tokens repris de la charte du site. */
.ato{--rose:#C90055;--jaune:#FFC400;--encre:#171016;--sec:#665D64;--filets:#EADFE5;--doux:#FFF1F6;--neutre:#FAF8F9;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--encre);background:#fff;
  border-radius:24px;padding:30px;box-shadow:0 12px 40px rgba(121,18,50,.06)}
.ato *{box-sizing:border-box}

.ato-tete{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;font-weight:700;color:var(--sec);margin-bottom:10px}
.ato-pct{color:var(--rose)}
.ato-barre{height:6px;border-radius:999px;background:var(--doux);overflow:hidden;margin-bottom:16px}
.ato-barre span{display:block;height:100%;background:var(--rose);border-radius:999px;transition:width .25s ease}
.ato-recap{font-size:.82rem;line-height:1.5;color:var(--sec);background:var(--neutre);border:1px solid var(--filets);border-radius:12px;padding:9px 13px;margin:0 0 18px}
.ato-recap[hidden]{display:none}

.ato-step{display:none}
.ato-step.est-actif{display:block}
.ato-question{font-family:'Inter Tight',Inter,sans-serif;font-size:1.28rem;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.ato-aide{font-size:.85rem;color:var(--sec);margin:0 0 14px}

.ato-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:18px}
.ato-grille-1{grid-template-columns:minmax(0,1fr)}
.ato-choix{display:flex;align-items:center;gap:12px;min-width:0;padding:16px;border:1.5px solid var(--filets);border-radius:14px;background:#fff;font:inherit;color:var(--encre);text-align:left;cursor:pointer;transition:border-color .16s,background-color .16s,transform .16s}
.ato-choix:hover{border-color:var(--rose);transform:translateY(-2px)}
.ato-choix:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.ato-choix.est-actif{border-color:var(--rose);background:var(--doux)}
.ato-ico{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--doux);font-size:1.15rem}
.ato-txt{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.ato-lbl{font-weight:800;font-size:.98rem;line-height:1.25}
.ato-sous{font-size:.84rem;color:var(--sec);line-height:1.35}
.ato-radio{flex:0 0 auto;margin-left:auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--filets)}
.ato-choix.est-actif .ato-radio{border-color:var(--rose);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 10px var(--rose)}

/* ---------- Capital ---------- */
.ato-capital{border-top:1px solid var(--filets);padding-top:20px;margin-bottom:18px}
.ato-capital[hidden]{display:none}
.ato-montant{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ato-montant strong{font-family:'Inter Tight',Inter,sans-serif;font-size:2rem;font-weight:900;letter-spacing:-.03em;color:var(--rose)}
.ato-qualite{font-size:.88rem;font-weight:600;color:var(--sec)}
.ato-range{--ato-pct:0%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--rose) 0,var(--rose) var(--ato-pct),var(--doux) var(--ato-pct),var(--doux) 100%);outline:none}
.ato-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--rose);box-shadow:0 3px 10px rgba(201,0,85,.28);cursor:pointer}
.ato-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--rose);cursor:pointer}
.ato-range:focus-visible{outline:3px solid var(--jaune);outline-offset:4px}
.ato-bornes{display:flex;justify-content:space-between;font-size:.76rem;color:var(--sec);margin:8px 2px 14px}
/* Sortie discrete : un lien texte, pas une carte, pour ne pas concurrencer le curseur. */
.ato-discret{display:inline-block;font:inherit;font-size:.84rem;font-weight:600;color:var(--sec);background:none;border:0;padding:4px 0;margin-bottom:16px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ato-discret:hover{color:var(--rose)}
.ato-discret:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:4px}

/* ---------- Formulaire ---------- */
.ato-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px;margin-bottom:16px}
.ato-large{grid-column:1/-1}
.ato-form label{display:flex;flex-direction:column;gap:6px;font-size:.76rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--sec)}
.ato-form input{font:inherit;font-size:.98rem;font-weight:500;text-transform:none;letter-spacing:0;color:var(--encre);background:var(--neutre);border:1px solid var(--filets);border-radius:12px;padding:12px 14px}
.ato-form input:focus{outline:0;border-color:var(--rose);background:#fff}
.ato-rgpd{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;line-height:1.5;color:var(--sec);margin-bottom:14px}
.ato-rgpd input{margin-top:3px;width:17px;height:17px;accent-color:var(--rose);flex:0 0 auto}
.ato-rgpd a{color:var(--rose)}
.ato-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ato-err{font-size:.86rem;font-weight:600;color:var(--rose);background:var(--doux);border-radius:10px;padding:10px 13px;margin:0 0 14px}
.ato-err[hidden]{display:none}

/* ---------- Actions ---------- */
.ato-actions{display:flex;align-items:center;gap:16px}
.ato-retour{flex:0 0 auto;font:inherit;font-size:.9rem;font-weight:600;color:var(--sec);background:none;border:0;cursor:pointer;padding:6px 0}
.ato-retour:hover{color:var(--rose)}
.ato-suivant{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:15px;font-weight:800;color:#090909;background:var(--jaune);border:0;border-radius:999px;padding:15px 26px;cursor:pointer;transition:.15s}
.ato-suivant:hover:not(:disabled){background:#FFD44D}
.ato-suivant:disabled{background:var(--doux);color:#B8A6AE;cursor:default}
.ato-suivant:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
.ato-reass{font-size:.78rem;color:var(--sec);text-align:center;margin:14px 0 0}

/* ---------- Fin ---------- */
.ato-fin{text-align:center;padding:20px 0}
.ato-ok{font-size:2.6rem;margin-bottom:8px}
.ato-fin h3{font-family:'Inter Tight',Inter,sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.ato-fin p{font-size:.95rem;line-height:1.55;color:var(--sec);margin:0}

/* ---------- Priorite sur les regles boutons du kit Elementor ----------
   Le kit force display/flex-direction/text-align sur les <button> : sans ces
   surcharges le contenu s'empile en colonne et la puce de selection est
   comprimee en trait vertical. */
.ato button.ato-suivant{background-color:#FFC400!important;background-image:none!important;color:#090909!important;border:0!important;border-radius:999px!important}
.ato button.ato-suivant:disabled{background-color:#FFF1F6!important;color:#B8A6AE!important}
.ato button.ato-choix{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;gap:12px!important;background-color:#fff!important;background-image:none!important;border:1.5px solid #EADFE5!important;border-radius:14px!important;color:#171016!important}
.ato button.ato-choix.est-actif{background-color:#FFF1F6!important;border-color:#C90055!important}
.ato button.ato-retour{background:none!important;border:0!important;color:#665D64!important}

/* La puce : un vrai rond, dimensions verrouillees pour qu'elle ne s'ecrase pas. */
.ato .ato-ico{flex:0 0 44px!important;width:44px!important;height:44px!important}
.ato .ato-txt{flex:1 1 auto!important;min-width:0!important;align-items:flex-start!important;text-align:left!important;white-space:normal!important}
.ato .ato-lbl,.ato .ato-sous{text-align:left!important;white-space:normal!important;overflow-wrap:anywhere;hyphens:auto;width:100%}
.ato .ato-radio{flex:0 0 20px!important;width:20px!important;height:20px!important;min-width:20px;min-height:20px;
  border-radius:50%!important;border:2px solid #EADFE5!important;background:#fff!important;margin-left:auto!important;box-shadow:none!important}
.ato .ato-choix.est-actif .ato-radio{border-color:#C90055!important;
  background:radial-gradient(circle at 50% 50%, #C90055 0 5px, #fff 5px)!important}

@media(max-width:640px){
  .ato{padding:24px 18px;border-radius:20px}
  .ato-grille,.ato-form{grid-template-columns:minmax(0,1fr)}
  .ato-montant strong{font-size:1.7rem}
}

/* Compteur de sélection (étape des priorités). */
.ato-compteur{display:inline-block;font-size:.8rem;font-weight:700;color:var(--rose);background:var(--doux);border-radius:999px;padding:4px 12px;margin-bottom:14px}
.ato-choix[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.ato-choix[aria-disabled="true"]:hover{transform:none;border-color:#EADFE5!important}

.ato-couvre{font-size:.95rem;font-weight:600;color:var(--encre);margin:0 0 10px}

/* ==========================================================================
   Étape 2 du tunnel SANTÉ — habillage seulement (v2).
   Portée limitée à .ato[data-ato-sante] : le tunnel obsèques partage ce
   fichier et ne doit pas bouger. Aucun libellé ni champ n'est modifié.

   Trois partis pris :
   · deux couleurs, deux rôles — le ROSE dit l'avancement dans le tunnel,
     le SARCELLE dit l'estimation (curseur, repères, prix) ;
   · les trois zones d'explication (récapitulatif, niveau, couverture)
     partagent désormais la même famille graphique ;
   · typographies allégées : moins de gras, plus d'air, plus de lisibilité.
   ========================================================================== */

.ato[data-ato-sante]{
  --estim:#075F68;          /* sarcelle de la charte (sections Lina & Mo) */
  --estim-clair:#E7F1F2;
  --carte:#FBFAFB;
}

/* ---- En-tête : l'avancement reste rose, mais plus discret ---- */
.ato[data-ato-sante] .ato-tete{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.01em;
}
.ato[data-ato-sante] .ato-barre{
  height:4px;
  background:#F3EAEE;
}

/* ---- Récapitulatif : même famille que la carte d'estimation ---- */
.ato[data-ato-sante] .ato-recap{
  font-size:.82rem;
  font-weight:400;
  line-height:1.55;
  color:var(--sec);
  background:var(--carte);
  border:1px solid var(--filets);
  border-radius:14px;
  padding:11px 16px;
  margin:0 0 22px;
  text-align:center;
}

/* ---- La question : plus fine, plus aérée ---- */
/* .est-actif est indispensable : sans lui cette regle bat le display:none
   de .ato-step et l'etape 2 reste affichee sous l'etape 1. */
.ato[data-ato-sante] [data-ato-step="2"].est-actif{
  display:flex;
  flex-direction:column;
}
.ato[data-ato-sante] [data-ato-step="2"] .ato-question{
  order:1;
  text-align:center;
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.25;
  margin:0 0 22px;
}

/* ---- Le curseur : sarcelle, pour ne plus se confondre avec l'avancement ---- */
.ato[data-ato-sante] [data-ato-step="2"] .ato-range{
  order:2;
  height:10px;
  border-radius:999px;
  margin:0 4px;
  width:calc(100% - 8px);
  box-shadow:inset 0 1px 3px rgba(7,95,104,.12);
  /* !important : le kit Elementor remet le fond des <input> à plat. */
  background:linear-gradient(90deg,
    var(--estim) 0, var(--estim) var(--ato-pct),
    var(--estim-clair) var(--ato-pct), var(--estim-clair) 100%)!important;
}
.ato[data-ato-sante] [data-ato-step="2"] .ato-range::-webkit-slider-thumb{
  width:30px;height:30px;border:4px solid var(--estim);
  box-shadow:0 4px 14px rgba(7,95,104,.26), 0 0 0 6px rgba(7,95,104,.07);
  transition:transform .14s ease, box-shadow .14s ease;
}
.ato[data-ato-sante] [data-ato-step="2"] .ato-range::-moz-range-thumb{
  width:30px;height:30px;border:4px solid var(--estim);
  box-shadow:0 4px 14px rgba(7,95,104,.26), 0 0 0 6px rgba(7,95,104,.07);
}
.ato[data-ato-sante] [data-ato-step="2"] .ato-range:active::-webkit-slider-thumb{
  transform:scale(1.08);
  box-shadow:0 6px 18px rgba(7,95,104,.32), 0 0 0 9px rgba(7,95,104,.10);
}
.ato[data-ato-sante] [data-ato-step="2"] .ato-range:focus-visible{
  outline:3px solid var(--estim);outline-offset:4px;
}

/* ---- Les quatre repères, alignés sous les positions du curseur ---- */
.ato[data-ato-sante] [data-ato-step="2"] .ato-graduations{
  order:3;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:16px 0 0;
  padding:0 15px;   /* demi-poignée : les repères tombent sous les crans */
}
.ato[data-ato-sante] [data-ato-step="2"] .ato-graduations span{
  width:6px;height:6px;border-radius:50%;
  background:#D9E5E6;
}

/* ---- Carte d'estimation : niveau, prix et couverture d'un seul tenant ----
   Trois frères dans le HTML, habillés d'un fond commun et d'arrondis
   complémentaires : ils se lisent comme une seule carte, sans toucher au
   balisage.                                                               */
.ato[data-ato-sante] [data-ato-step="2"] .ato-cran{
  order:4;
  margin:24px 0 0;
  padding:22px 24px 0;
  background:var(--carte);
  border:1px solid var(--filets);
  border-bottom:0;
  border-radius:20px 20px 0 0;
  text-align:center;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sec);
}
.ato[data-ato-sante] [data-ato-step="2"] .ato-montant{
  order:5;
  margin:0;
  padding:10px 24px 0;
  background:var(--carte);
  border-left:1px solid var(--filets);
  border-right:1px solid var(--filets);
  justify-content:center;
}
.ato[data-ato-sante] [data-ato-step="2"] .ato-montant strong{
  font-size:2.7rem;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.045em;
  color:var(--estim);
}
.ato[data-ato-sante] [data-ato-step="2"] .ato-couvre{
  order:6;
  margin:0 0 22px;
  padding:8px 26px 22px;
  background:var(--carte);
  border:1px solid var(--filets);
  border-top:0;
  border-radius:0 0 20px 20px;
  text-align:center;
  font-size:.9rem;
  font-weight:400;
  line-height:1.5;
  color:var(--sec);
}

/* ---- Sortie de secours : pastille sobre, volontairement secondaire ---- */
.ato[data-ato-sante] [data-ato-step="2"] .ato-discret{
  order:7;
  display:block;
  width:fit-content;
  margin:0 auto 22px;
  padding:11px 20px;
  border:1px solid var(--filets);
  border-radius:999px;
  background:#fff;
  text-decoration:none;
  font-size:.86rem;
  font-weight:500;
  color:var(--sec);
  transition:border-color .16s, background-color .16s, color .16s;
}
.ato[data-ato-sante] [data-ato-step="2"] .ato-discret:hover{
  border-color:var(--estim);
  background:var(--estim-clair);
  color:var(--estim);
}

/* ---- Boutons, puis la mention légale en dessous ---- */
.ato[data-ato-sante] [data-ato-step="2"] .ato-actions{ order:8; }
.ato[data-ato-sante] [data-ato-step="2"] .ato-retour{ font-weight:500; }
.ato[data-ato-sante] [data-ato-step="2"] .ato-suivant{ font-weight:700; letter-spacing:-.01em; }

.ato[data-ato-sante] [data-ato-step="2"] .ato-aide{
  order:9;                      /* passe sous « Retour » et « Continuer » */
  text-align:center;
  font-size:.76rem;
  font-weight:400;
  line-height:1.55;
  max-width:48ch;
  margin:16px auto 0;
  color:#8A7F86;
}

@media(max-width:640px){
  .ato[data-ato-sante] [data-ato-step="2"] .ato-question{font-size:1.2rem}
  .ato[data-ato-sante] [data-ato-step="2"] .ato-montant strong{font-size:2.1rem}
  .ato[data-ato-sante] [data-ato-step="2"] .ato-discret{width:100%;text-align:center}
}
