/* Formulaire de réservation EG Ramonage.
 * Tout est préfixé .egram et limité à la racine .egram du formulaire,
 * pour ne jamais toucher au reste du site (thème, blocs Elementor…).
 * La couleur principale est la variable --egram-accent, définie ci-dessous.
 * Tailles, espacements et survols repris de la maquette du site.
 */

.egram {
  --egram-accent: #a7793d;
  --egram-accent-fonce: #8b6529;
  --egram-texte: #1a1a1a;
  --egram-discret: #6b6459;
  --egram-discret-2: #8a8375;
  --egram-bordure: #e9e2d2;
  --egram-bordure-douce: #eee7d9;
  --egram-fond: #ffffff;
  --egram-fond-doux: #f3eee3;
  --egram-fond-choisi: #fbf6ec;
  --egram-texte-clair: #faf7f2;
  --egram-inactif: #d9d2c2;
  --egram-erreur: #b3261e;
  --egram-succes: #5c7a4e;
  --egram-fond-succes: #e9ede4;
  --egram-ombre: 0 1px 3px rgba(26, 26, 26, 0.05);
  --egram-ombre-survol: 0 6px 14px rgba(26, 26, 26, 0.08);
  --egram-rayon: 3px;
  --egram-titres: "Merriweather", Georgia, serif;
  max-width: 860px;
  margin: 0 auto;
  color: var(--egram-texte);
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.egram *,
.egram *::before,
.egram *::after {
  box-sizing: border-box;
}

.egram .egram-carte {
  background: var(--egram-fond);
  border: 1px solid var(--egram-bordure);
  border-radius: var(--egram-rayon);
  overflow: hidden;
}

/* ---------- En-tête : étape et progression ---------- */

.egram .egram-entete {
  padding: 26px 36px 22px;
  border-bottom: 1px solid var(--egram-bordure);
}

.egram .egram-numero-etape {
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--egram-accent);
}

.egram .egram-progression {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.egram .egram-progression li {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: #b9b1a0;
}

.egram .egram-barre {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: var(--egram-bordure-douce);
  transition: background 0.25s ease;
}

.egram .egram-progression li.egram-actif {
  color: var(--egram-texte);
}

.egram .egram-progression li.egram-actif .egram-barre,
.egram .egram-progression li.egram-fait .egram-barre {
  background: var(--egram-accent);
}

/* Écran équipement : l'étape 1 n'est faite qu'à moitié. */
.egram .egram-progression li.egram-actif.egram-moitie .egram-barre {
  background: linear-gradient(to right, var(--egram-accent) 50%, var(--egram-bordure-douce) 50%);
}

/* ---------- Corps d'étape ---------- */

.egram .egram-etape {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px 36px 8px;
}

.egram .egram-titre-bloc {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.egram .egram-titre {
  margin: 0;
  color: var(--egram-texte);
  font-family: var(--egram-titres);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  outline: none;
}

.egram .egram-sous-titre-etape {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--egram-discret);
}

.egram .egram-note,
.egram .egram-info {
  margin: 0;
  font-size: 12.5px;
  color: var(--egram-discret-2);
}

/* ---------- Alertes ---------- */

.egram .egram-alerte:empty {
  display: none;
}

.egram .egram-alerte {
  margin: 20px 36px 0;
  padding: 12px 16px;
  font-size: 13.5px;
  border-radius: var(--egram-rayon);
  background: #fbefec;
  color: var(--egram-erreur);
  border: 1px solid #f0d4cf;
}

.egram .egram-alerte p,
.egram .egram-message p {
  margin: 0;
}

.egram .egram-message {
  padding: 24px;
}

.egram .egram-message-erreur {
  border-color: #f0d4cf;
  background: #fbefec;
  color: var(--egram-erreur);
}

.egram .egram-message-info {
  background: var(--egram-fond-doux);
}

/* ---------- Cartes (équipements, prestations) ---------- */

.egram .egram-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.egram .egram-grille-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.egram .egram-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 18px 20px;
  background: var(--egram-fond);
  color: var(--egram-texte);
  border: 1.5px solid var(--egram-bordure);
  border-radius: var(--egram-rayon);
  font: inherit;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  cursor: pointer;
  box-shadow: var(--egram-ombre);
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

/* Survol : la carte se soulève légèrement. Les couleurs du thème sont
   neutralisées pour que la carte garde son propre style. */
.egram .egram-option:hover,
.egram .egram-option:focus,
.egram .egram-option:active {
  color: var(--egram-texte);
  background-color: var(--egram-fond);
  background-image: none;
  text-decoration: none;
}

.egram .egram-option:hover {
  transform: translateY(-2px);
  box-shadow: var(--egram-ombre-survol);
}

.egram .egram-option:focus-visible {
  outline: 2px solid var(--egram-accent);
  outline-offset: 2px;
}

.egram .egram-option.egram-choisi,
.egram .egram-option.egram-choisi:hover,
.egram .egram-option.egram-choisi:focus {
  border-color: var(--egram-accent);
  background-color: var(--egram-fond-choisi);
}

/* Pastille ronde avec une coche, en haut à droite de la carte choisie. */
.egram .egram-option.egram-choisi::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--egram-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF7F2' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.egram .egram-option-equipement {
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  padding: 22px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: break-word;
}

/* Icône de l'équipement : pastille crème, plus foncée quand la carte est choisie. */
.egram .egram-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--egram-rayon);
  background: var(--egram-fond-doux);
  color: var(--egram-accent);
  transition: background-color 0.16s ease;
}

.egram .egram-icone svg {
  width: 28px;
  height: 28px;
}

.egram .egram-option.egram-choisi .egram-icone {
  background: #f0e4d0;
}

.egram .egram-option-nom {
  padding-right: 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.egram .egram-description {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--egram-discret);
  overflow-wrap: break-word;
}

.egram .egram-prix-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--egram-bordure-douce);
}

.egram .egram-prix {
  color: var(--egram-texte);
  font-family: var(--egram-titres);
  font-size: 21px;
  font-weight: 600;
}

.egram .egram-prix-bloc {
  display: flex;
  flex-direction: column;
}

.egram .egram-prix-mention {
  font-size: 10.5px;
  font-style: italic;
  color: var(--egram-discret-2);
}

.egram .egram-prix-variable {
  color: var(--egram-accent);
}

.egram .egram-badge {
  padding: 4px 8px;
  border-radius: var(--egram-rayon);
  background: var(--egram-fond-succes);
  color: var(--egram-succes);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.egram .egram-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.egram .egram-badge-appel {
  background: #f3eee3;
  color: var(--egram-accent-fonce);
}

.egram .egram-choisi .egram-badge-appel {
  background: #f0e4d0;
}

.egram .egram-lien {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--egram-accent-fonce);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.egram .egram-lien:hover,
.egram .egram-lien:focus,
.egram .egram-lien:active {
  background: none;
  color: var(--egram-accent-fonce);
}

/* Rappel de l'équipement choisi, avec « Changer ». */
.egram .egram-rappel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--egram-bordure);
  border-radius: var(--egram-rayon);
  background: var(--egram-fond-choisi);
  font-size: 13px;
}

.egram .egram-rappel strong {
  font-weight: 600;
}

/* Prestation « Sur appel » : pas de réservation en ligne. */
.egram .egram-sur-appel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--egram-bordure);
  border-left: 3px solid var(--egram-accent);
  border-radius: var(--egram-rayon);
  background: var(--egram-fond-choisi);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--egram-discret);
  outline: none;
}

.egram .egram-sur-appel strong {
  color: var(--egram-texte);
  font-weight: 600;
}

.egram .egram-sur-appel .egram-telephone,
.egram .egram-sur-appel .egram-telephone:hover,
.egram .egram-sur-appel .egram-telephone:focus,
.egram .egram-succes .egram-telephone,
.egram .egram-succes .egram-telephone:hover,
.egram .egram-succes .egram-telephone:focus {
  color: var(--egram-accent-fonce);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

/* ---------- Questions de la prestation ---------- */

.egram .egram-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--egram-bordure);
}

.egram .egram-question {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.egram .egram-question legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}

.egram .egram-choix {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--egram-fond);
  border: 1.5px solid var(--egram-bordure);
  border-radius: var(--egram-rayon);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.egram .egram-choix:hover,
.egram .egram-choix:focus-within {
  color: inherit;
  background-color: var(--egram-fond);
  background-image: none;
}

.egram .egram-choix input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--egram-accent);
}

.egram .egram-choix.egram-coche,
.egram .egram-choix.egram-coche:hover {
  border-color: var(--egram-accent);
  background-color: var(--egram-fond-choisi);
}

.egram .egram-question.egram-invalide .egram-choix {
  border-color: var(--egram-erreur);
}

.egram .egram-requis {
  color: var(--egram-erreur);
}

/* ---------- Date et créneau ---------- */

.egram .egram-agenda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 24px;
  align-items: start;
  padding: 16px 18px 18px;
  border: 1.5px solid var(--egram-bordure);
  border-radius: var(--egram-rayon);
  box-shadow: var(--egram-ombre);
}

.egram .egram-agenda-calendrier,
.egram .egram-agenda-creneaux {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.egram .egram-agenda-creneaux {
  gap: 8px;
  padding-top: 2px;
}

.egram .egram-mois {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.egram .egram-nom-mois {
  font-family: var(--egram-titres);
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
}

.egram .egram-fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--egram-discret);
  border: 1.5px solid var(--egram-bordure);
  border-radius: var(--egram-rayon);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease;
}

.egram .egram-fleche:focus:not(:disabled),
.egram .egram-fleche:active:not(:disabled) {
  background: none;
  color: var(--egram-discret);
  border-color: var(--egram-bordure);
}

.egram .egram-fleche:hover:not(:disabled) {
  background: none;
  border-color: var(--egram-accent);
  color: var(--egram-accent);
}

.egram .egram-fleche:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.egram .egram-calendrier {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.egram .egram-jour-semaine {
  padding-bottom: 4px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--egram-discret-2);
}

.egram .egram-jour {
  aspect-ratio: 1;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--egram-inactif);
  border: 1px solid transparent;
  border-radius: var(--egram-rayon);
  font: inherit;
  font-size: 13px;
  cursor: not-allowed;
  box-shadow: none;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.egram .egram-jour.egram-libre {
  color: var(--egram-texte);
  background: var(--egram-fond-choisi);
  font-weight: 600;
  cursor: pointer;
}

.egram .egram-jour.egram-libre:hover {
  background: var(--egram-fond-doux);
  border-color: var(--egram-accent);
  color: var(--egram-texte);
}

/* Aujourd'hui : chiffre brun foncé et gras, même s'il n'a plus de créneau. */
.egram .egram-jour.egram-aujourdhui {
  color: var(--egram-accent-fonce);
  font-weight: 700;
}

/* Jour sélectionné : reste brun au survol (plus foncé), sans fond clair. */
.egram .egram-jour.egram-choisi {
  background: var(--egram-accent);
  border-color: var(--egram-accent);
  color: var(--egram-texte-clair);
  font-weight: 600;
}

.egram .egram-jour.egram-choisi:hover {
  background: var(--egram-accent-fonce);
  border-color: var(--egram-accent-fonce);
  color: var(--egram-texte-clair);
}

.egram .egram-libelle {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.egram .egram-date-choisie {
  margin: -2px 0 4px;
  font-size: 12.5px;
  color: var(--egram-discret);
}

.egram .egram-heures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.egram .egram-heure {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  background: var(--egram-fond);
  color: var(--egram-texte);
  border: 1.5px solid var(--egram-bordure);
  border-radius: var(--egram-rayon);
  font: inherit;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.egram .egram-heure:hover,
.egram .egram-heure:focus {
  background: var(--egram-fond);
  color: var(--egram-texte);
  border-color: var(--egram-accent);
}

.egram .egram-heure.egram-choisi,
.egram .egram-heure.egram-choisi:hover {
  border-color: var(--egram-accent);
  background: var(--egram-fond-choisi);
  color: var(--egram-accent-fonce);
  font-weight: 600;
}

/* ---------- Coordonnées et récapitulatif ---------- */

.egram .egram-formulaire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.egram .egram-champ {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.egram .egram-champ.egram-demi {
  grid-column: auto;
}

.egram .egram-champ label {
  font-size: 13px;
  font-weight: 600;
}

.egram .egram-champ input[type="text"],
.egram .egram-champ input[type="tel"],
.egram .egram-champ input[type="email"],
.egram .egram-champ textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 11px 13px;
  background: var(--egram-fond);
  color: var(--egram-texte);
  border: 1.5px solid var(--egram-bordure);
  border-radius: var(--egram-rayon);
  font: inherit;
  font-size: 14px;
  transition: border-color 0.14s ease;
}

.egram .egram-champ input:focus,
.egram .egram-champ textarea:focus {
  border-color: var(--egram-accent);
  outline: none;
}

.egram .egram-invalide input,
.egram .egram-invalide textarea {
  border-color: var(--egram-erreur);
}

.egram .egram-erreur {
  margin: 2px 0 0;
  color: var(--egram-erreur);
  font-size: 12.5px;
}

.egram .egram-recap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 18px 20px;
  border: 1.5px solid var(--egram-bordure);
  border-radius: var(--egram-rayon);
  background: var(--egram-fond);
  box-shadow: var(--egram-ombre);
}

.egram .egram-recap-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--egram-bordure-douce);
}

.egram .egram-recap-titre {
  margin: 0;
  color: var(--egram-texte);
  font-family: var(--egram-titres);
  font-size: 15px;
  font-weight: 700;
}

.egram .egram-recap-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.egram .egram-recap-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}

.egram .egram-recap dt {
  color: var(--egram-discret);
}

.egram .egram-recap dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.egram .egram-recap-total {
  padding-top: 10px;
  border-top: 1px solid var(--egram-bordure-douce);
}

.egram .egram-recap-total dd {
  font-family: var(--egram-titres);
  font-size: 19px;
  color: var(--egram-accent-fonce);
}

.egram .egram-consentement label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 20px;
}

/* Taille fixe (certains thèmes agrandissent les cases) et centrée sur la
   première ligne du texte : (20px de ligne - 16px de case) / 2. */
.egram .egram-consentement input[type="checkbox"] {
  flex: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-width: 0;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  position: static;
  top: auto;
  vertical-align: top;
  accent-color: var(--egram-accent);
}

/* Information sous la case d'accord, alignée sur son texte (case 16 px + 10 px). */
.egram .egram-mention {
  margin: 0;
  padding-left: 26px;
  color: var(--egram-discret);
  font-size: 12px;
  line-height: 1.5;
}

/* Fenêtre de la vérification anti-robot, hors du formulaire. Fermée, elle reste
   affichée mais invisible : le widget doit pouvoir tourner. */
.egram.egram-fenetre:not([open]) {
  display: block;
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  width: 1px;
  max-width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.egram.egram-fenetre[open] {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: calc(100vw - 32px);
  height: fit-content;
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--egram-bordure);
  border-radius: var(--egram-rayon);
  background: var(--egram-fond);
  box-shadow: 0 12px 32px rgba(26, 26, 26, 0.25);
  text-align: center;
}

.egram.egram-fenetre::backdrop {
  background: rgba(26, 26, 26, 0.5);
}

.egram .egram-fenetre-titre {
  margin: 0;
  color: var(--egram-texte);
  font-family: var(--egram-titres);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
}

.egram .egram-fenetre-texte {
  margin: 0;
  max-width: 300px;
  color: var(--egram-discret);
  font-size: 13.5px;
}

/* Mêmes couleurs que dans les e-mails envoyés au client. */
.egram .egram-consigne {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1.5px solid #d6453d;
  border-radius: var(--egram-rayon);
  background: #fdf1f0;
  font-size: 13.5px;
  line-height: 1.5;
}

.egram .egram-consigne p {
  margin: 0;
}

.egram .egram-carte + .egram-consigne {
  margin-top: 16px;
}

.egram .egram-consigne .egram-consigne-titre {
  color: #b0342d;
  font-weight: 700;
}

.egram .egram-consigne .egram-consigne-texte {
  color: var(--egram-texte);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.egram .egram-piege {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Pied : aide et boutons ---------- */

.egram .egram-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 36px 28px;
}

.egram .egram-aide {
  margin: 0;
  font-size: 12.5px;
  color: var(--egram-discret-2);
}

.egram .egram-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.egram .egram-bouton {
  margin: 0;
  padding: 11px 24px;
  background: var(--egram-accent);
  color: var(--egram-texte-clair);
  border: 1.5px solid var(--egram-accent);
  border-radius: var(--egram-rayon);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

/* Grisé tant qu'il manque un choix : le clic reste possible pour guider. */
.egram .egram-bouton-principal:hover:not(.egram-bouton-inactif):not(:disabled),
.egram .egram-bouton-principal:focus:not(.egram-bouton-inactif):not(:disabled),
.egram .egram-bouton-principal:active:not(.egram-bouton-inactif):not(:disabled) {
  background: var(--egram-accent-fonce);
  border-color: var(--egram-accent-fonce);
  color: var(--egram-texte-clair);
}

.egram .egram-bouton.egram-bouton-inactif,
.egram .egram-bouton.egram-bouton-inactif:hover,
.egram .egram-bouton.egram-bouton-inactif:focus {
  background: var(--egram-bordure);
  border-color: var(--egram-bordure);
  color: #a79f8c;
  cursor: not-allowed;
}

.egram .egram-bouton:disabled {
  opacity: 0.6;
  cursor: wait;
}

.egram .egram-bouton-secondaire {
  background: transparent;
  color: var(--egram-discret);
  border-color: var(--egram-bordure);
}

.egram .egram-bouton-secondaire:hover,
.egram .egram-bouton-secondaire:focus,
.egram .egram-bouton-secondaire:active {
  background: transparent;
  color: var(--egram-discret);
  border-color: var(--egram-discret-2);
}

.egram button:focus-visible {
  outline: 2px solid var(--egram-accent);
  outline-offset: 2px;
}

/* ---------- Confirmation ---------- */

.egram .egram-succes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 24px;
  text-align: center;
}

.egram .egram-succes .egram-titre {
  font-size: 22px;
}

.egram .egram-succes p {
  margin: 0;
  max-width: 380px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--egram-discret);
}

.egram .egram-succes .egram-succes-resume {
  color: var(--egram-texte);
  font-weight: 600;
}

.egram .egram-pastille-succes {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--egram-fond-succes);
  color: var(--egram-succes);
}

/* ---------- Mobile ---------- */

@media (max-width: 560px) {
  .egram .egram-entete {
    padding: 18px 16px 14px;
  }
  .egram .egram-etape {
    padding: 22px 16px 4px;
  }
  .egram .egram-alerte {
    margin: 16px 16px 0;
  }
  .egram .egram-pied {
    flex-direction: column-reverse;
    align-items: stretch;
    padding: 18px 16px 20px;
  }
  .egram .egram-aide {
    text-align: center;
  }
  .egram .egram-actions {
    margin-left: 0;
  }
  .egram .egram-actions .egram-bouton-principal {
    flex: 1;
  }
  .egram .egram-nom-etape {
    display: none;
  }
  .egram .egram-grille-2,
  .egram .egram-details,
  .egram .egram-formulaire,
  .egram .egram-agenda {
    grid-template-columns: 1fr;
  }
  .egram .egram-champ.egram-demi {
    grid-column: 1 / -1;
  }
  .egram .egram-agenda {
    padding: 14px;
  }
  .egram .egram-heures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Silhouette affichée avant le chargement du formulaire. */
.egram .egram-carte.egram-attente {
  padding: 26px 36px;
}

/* ---------- Chargement : silhouettes grisées ---------- */

.egram .egram-lecteur {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.egram .egram-squelette {
  display: block;
  border-radius: var(--egram-rayon);
  background: linear-gradient(90deg, #f3eee3 0%, #faf7f2 50%, #f3eee3 100%);
  background-size: 200% 100%;
  animation: egram-reflet 1.2s ease-in-out infinite;
}

.egram .egram-squelette-etapes {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
}

.egram .egram-squelette-etapes .egram-squelette {
  flex: 1;
  height: 34px;
}

.egram .egram-squelette-titre {
  width: 60%;
  height: 26px;
  margin: 0 0 20px;
}

.egram .egram-squelette-option {
  height: 64px;
  margin: 0 0 8px;
}

.egram .egram-squelette-ligne {
  width: 140px;
  height: 20px;
}

.egram .egram-squelette-rond {
  width: 34px;
  height: 34px;
  border-radius: var(--egram-rayon);
}

.egram .egram-squelette-jour {
  aspect-ratio: 1;
  min-height: 36px;
}

@keyframes egram-reflet {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .egram .egram-squelette {
    animation: none;
  }
}

.egram .egram-squelette-heure {
  height: 40px;
}