/* ==========================================================================
   Estheca : composants du nouveau design (classes e-)
   Règles : docs/design.md. Catalogue visible sur test : /design.php
   Chaque composant est indépendant de la page, de Bootstrap 3 et du thème
   CityBook. Il redéfinit ce que le thème impose aux éléments génériques
   (body centré, p en 12px gris avec marge, label en gras, a relatif…).
   ========================================================================== */

/* --- Zone au nouveau design : envelopper tout bloc refait dans .e-ui ---
   Les remises à zéro passent par :where() (priorité minimale) : elles battent les
   règles génériques du thème (chargé avant) mais jamais une classe e-. */
.e-ui{
	font-family:var(--e-font);
	font-size:var(--e-fs);
	font-weight:var(--e-fw);
	line-height:var(--e-lh);
	color:var(--e-ink);
	text-align:left;
	-webkit-font-smoothing:antialiased;
}
:where(.e-ui) *,:where(.e-ui) *::before,:where(.e-ui) *::after{box-sizing:border-box}
:where(.e-ui) p{font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;margin:0;padding:0}
:where(.e-ui) :is(h1,h2,h3,h4){font-family:var(--e-font);font-weight:var(--e-fw-bold);color:var(--e-ink);margin:0;padding:0;line-height:1.25;text-align:inherit}
:where(.e-ui) label{display:block;font-weight:inherit;margin:0;max-width:none}
:where(.e-ui) a{color:var(--e-primary);text-decoration:none}
:where(.e-ui) a:hover{color:var(--e-primary-hover)}
:where(.e-ui) :is(button,input,textarea,select){font-family:inherit}
.e-ui [hidden]{display:none !important}

/* --- Textes --- */
.e-title{font-size:var(--e-fs-xl);font-weight:var(--e-fw-bold);line-height:1.2}
.e-subtitle{font-size:var(--e-fs-lg);font-weight:var(--e-fw-bold);line-height:1.25}
.e-muted{color:var(--e-muted)}
.e-small{font-size:var(--e-fs-sm)}
.e-xs{font-size:var(--e-fs-xs)}
.e-center{text-align:center}

/* --- Boutons --- */
.e-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:var(--e-sp-2);
	min-height:var(--e-tap);padding:12px 20px;
	font-family:var(--e-font);font-size:var(--e-fs);font-weight:var(--e-fw-bold);line-height:1.2;
	text-align:center;text-decoration:none;white-space:normal;
	border:2px solid transparent;border-radius:var(--e-radius);
	cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
	transition:background var(--e-speed),box-shadow var(--e-speed),transform var(--e-speed),color var(--e-speed);
}
.e-btn:active{transform:scale(.98)}
.e-btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--e-primary-ring)}
.e-btn[disabled],.e-btn.is-loading{opacity:.6;cursor:default;pointer-events:none}
.e-btn--primary{background:var(--e-primary);color:var(--e-on-primary);box-shadow:0 4px 14px var(--e-primary-shadow)}
.e-btn--primary:hover,.e-btn--primary:focus{background:var(--e-primary-hover);color:var(--e-on-primary)}
.e-btn--secondary{background:var(--e-surface);color:var(--e-primary);border-color:var(--e-primary)}
.e-btn--secondary:hover,.e-btn--secondary:focus{background:var(--e-soft);color:var(--e-primary-hover)}
.e-btn--ghost{background:var(--e-soft);color:var(--e-primary)}
.e-btn--ghost:hover,.e-btn--ghost:focus{background:#e9dcf8;color:var(--e-primary-hover)}
.e-btn--danger{background:var(--e-danger);color:#fff}
.e-btn--success{background:var(--e-success);color:#fff;box-shadow:0 4px 14px rgba(31,157,107,.30)}
.e-btn--success:hover,.e-btn--success:focus{background:#17865a;color:#fff}
.e-btn--sm{min-height:36px;padding:8px 14px;font-size:var(--e-fs-sm)}
.e-btn--block{display:flex;width:100%}

/* --- Badges et pastilles de suggestion --- */
.e-badge{
	display:inline-flex;align-items:center;gap:6px;
	padding:5px 10px;border-radius:var(--e-radius-pill);
	font-size:var(--e-fs-xs);font-weight:600;line-height:1.2;
	background:var(--e-soft);color:var(--e-primary);
}
.e-badge--success{background:var(--e-success-soft);color:var(--e-success)}
.e-badge--warning{background:var(--e-warning-soft);color:var(--e-warning)}
.e-badge--danger{background:var(--e-danger-soft);color:var(--e-danger)}

.e-chips{display:flex;flex-wrap:wrap;gap:var(--e-sp-2)}
.e-chip{
	display:inline-flex;align-items:center;min-height:36px;padding:7px 12px;
	font-family:var(--e-font);font-size:var(--e-fs-sm);font-weight:600;line-height:1.3;text-align:left;
	color:var(--e-ink);background:var(--e-surface);
	border:1px solid var(--e-border);border-radius:var(--e-radius-pill);
	cursor:pointer;-webkit-tap-highlight-color:transparent;
	transition:background var(--e-speed),border-color var(--e-speed),color var(--e-speed);
}
.e-chip:hover,.e-chip[aria-pressed="true"]{border-color:var(--e-primary);background:var(--e-soft);color:var(--e-primary)}

/* --- Champs de formulaire --- */
.e-field{display:block;margin:0 0 var(--e-sp-4)}
.e-field__label{display:block;margin:0 0 6px;font-size:var(--e-fs-sm);font-weight:var(--e-fw-bold);color:var(--e-ink)}
.e-input{
	display:block;width:100%;min-height:var(--e-tap);padding:11px 14px;
	font-family:var(--e-font);font-size:16px; /* 16px minimum : sinon iPhone zoome sur le champ */
	font-weight:500;line-height:1.4;color:var(--e-ink);
	background:var(--e-surface);border:1.5px solid var(--e-border);border-radius:var(--e-radius);
	box-shadow:none;outline:none;-webkit-appearance:none;appearance:none;
	transition:border-color var(--e-speed),box-shadow var(--e-speed);
}
.e-input::placeholder{color:#a69fb6}
.e-input:focus{border-color:var(--e-primary);box-shadow:0 0 0 4px var(--e-primary-ring)}
.e-input.is-error{border-color:var(--e-danger)}
textarea.e-input{min-height:96px;resize:vertical}
.e-hint{display:block;margin-top:6px;font-size:var(--e-fs-xs);color:var(--e-muted)}
.e-error{display:block;margin-top:6px;font-size:var(--e-fs-sm);font-weight:600;color:var(--e-danger)}

/* --- Messages --- */
.e-alert{padding:12px 14px;border-radius:var(--e-radius);font-size:var(--e-fs-sm);font-weight:600;background:var(--e-soft);color:var(--e-primary)}
.e-alert--success{background:var(--e-success-soft);color:var(--e-success)}
.e-alert--warning{background:var(--e-warning-soft);color:var(--e-warning)}
.e-alert--danger{background:var(--e-danger-soft);color:var(--e-danger)}

/* --- Carte --- */
.e-card{background:var(--e-surface);border:1px solid var(--e-border);border-radius:var(--e-radius-lg);padding:var(--e-sp-4)}
.e-card--shadow{border-color:transparent;box-shadow:var(--e-shadow)}

/* --- Avatar (photo ou initiale) --- */
.e-avatar{
	flex:none;display:inline-flex;align-items:center;justify-content:center;
	width:44px;height:44px;border-radius:50%;overflow:hidden;
	background:var(--e-soft);color:var(--e-primary);font-weight:800;font-size:var(--e-fs-md);
}
.e-avatar img{width:100%;height:100%;object-fit:cover}

/* --- Indicateur d'étapes --- */
.e-steps{display:flex;gap:6px;margin:0 0 var(--e-sp-4)}
.e-steps > span{flex:1;height:4px;border-radius:4px;background:var(--e-border);transition:background var(--e-speed)}
.e-steps > span.is-on{background:var(--e-primary)}

/* --- Fenêtre (balise native <dialog class="e-modal e-ui">) ---
   Ouverture : el.showModal() ; fermeture : el.close().
   Sur téléphone, elle s'ouvre par le bas, en pleine largeur. */
.e-modal{
	width:min(440px,calc(100vw - 32px));max-width:none;max-height:92vh;
	margin:auto;padding:0;border:0;overflow:auto;
	background:var(--e-surface-form);color:var(--e-ink); /* jamais blanc : les champs blancs doivent ressortir (docs/design.md) */
	border-radius:var(--e-radius-lg);box-shadow:var(--e-shadow-lg);
	z-index:var(--e-z-modal);
}
.e-modal::backdrop{background:var(--e-overlay)}
.e-modal[open]{animation:e-modal-in .2s ease-out}
@keyframes e-modal-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.e-modal__body{padding:var(--e-sp-5) var(--e-sp-5) var(--e-sp-6)}
.e-modal__head{display:flex;align-items:center;gap:var(--e-sp-3);margin:0 0 var(--e-sp-4)}
.e-modal__head h3{font-size:var(--e-fs-lg)}
.e-modal__head p{font-size:var(--e-fs-sm);color:var(--e-muted);margin-top:2px}
.e-modal__close{
	flex:none;margin-left:auto;align-self:flex-start;
	width:36px;height:36px;padding:0;border:0;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--e-surface);color:var(--e-ink);font-size:16px;cursor:pointer;box-shadow:0 1px 3px rgba(56,47,89,.12);
}
.e-modal__close:hover{background:var(--e-soft)}
@media (max-width:600px){
	.e-modal{width:100vw;max-height:92vh;margin:auto 0 0;border-radius:var(--e-radius-lg) var(--e-radius-lg) 0 0}
	.e-modal[open]{animation-name:e-modal-up}
	@keyframes e-modal-up{from{transform:translateY(100%)}to{transform:none}}
	.e-modal__body{padding-bottom:calc(var(--e-sp-6) + env(safe-area-inset-bottom))}
}
/* Empêche la page de défiler derrière une fenêtre ouverte */
html:has(.e-modal[open]){overflow:hidden}

/* --- Fond en dégradé doux (bandeau, emplacement de photo absente) --- */
.e-gradient{background:var(--e-gradient-soft)}

/* --- Aides de mise en page --- */
.e-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-sp-3)}
.e-stack{display:grid;gap:var(--e-sp-3)}

/* --- Fenêtre floutant ce qui est derrière (par-dessus la discussion) --- */
.e-modal--blur::backdrop{background:rgba(22,18,31,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* --- Liste de choix (une seule réponse) : <label class="e-choice"><input type="radio">…</label> --- */
.e-choices{display:grid;gap:var(--e-sp-2);margin:0 0 var(--e-sp-4)}
.e-choice{display:flex;align-items:center;gap:var(--e-sp-3);min-height:var(--e-tap);padding:10px 14px;border:1.5px solid var(--e-border);border-radius:var(--e-radius);background:var(--e-surface);cursor:pointer;transition:border-color var(--e-speed),background var(--e-speed)}
.e-choice input{accent-color:var(--e-primary);width:18px;height:18px;margin:0;flex:none}
.e-choice__txt{flex:1;font-weight:600}
.e-choice__price{font-weight:var(--e-fw-bold);color:var(--e-primary)}
.e-choice:has(input:checked){border-color:var(--e-primary);background:var(--e-soft)}

/* --- Lien en forme de bouton (action secondaire discrète) --- */
.e-link{display:inline;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--e-primary);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.e-link:disabled{color:var(--e-muted);text-decoration:none;cursor:default}

/* --- Champ code SMS --- */
.e-input--code{font-size:24px;font-weight:var(--e-fw-bold);letter-spacing:.4em;text-align:center}

/* --- Numéro de téléphone avec indicatif --- */
.e-tel{display:flex;gap:var(--e-sp-2)}
.e-tel select.e-input{flex:none;width:auto;padding-right:28px;background:var(--e-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e6585' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center}
.e-tel input.e-input{flex:1;min-width:0}

/* --- Discussion façon messagerie : <dialog class="e-chat e-ui"> --- */
.e-chat{
	display:none;flex-direction:column;
	width:min(420px,calc(100vw - 32px));height:min(720px,calc(100vh - 48px));max-width:none;max-height:none;
	margin:auto;padding:0;border:0;overflow:hidden;
	background:var(--e-surface-form);color:var(--e-ink); /* teinté : la zone de saisie blanche ressort */
	border-radius:var(--e-radius-lg);box-shadow:var(--e-shadow-lg);
}
.e-chat[open]{display:flex;animation:e-modal-in .2s ease-out}
.e-chat::backdrop{background:var(--e-overlay)}
@media (max-width:600px){
	.e-chat{width:100vw;height:100vh;height:100dvh;border-radius:0}
	.e-chat[open]{animation:e-chat-in .22s ease-out}
	@keyframes e-chat-in{from{transform:translateX(100%)}to{transform:none}}
}
.e-chat__head{flex:none;display:flex;align-items:center;gap:var(--e-sp-3);padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top));background:var(--e-header);color:var(--e-on-header)}
.e-chat__head .e-avatar{width:40px;height:40px}
.e-chat__who{flex:1;min-width:0;line-height:1.25}
.e-chat__who b{display:block;font-size:var(--e-fs-md);color:var(--e-on-header);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.e-chat__who span{display:block;font-size:var(--e-fs-xs);opacity:.75}
.e-chat__back{flex:none;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--e-on-header);font-size:18px;cursor:pointer}
.e-chat__back:hover{background:rgba(255,255,255,.12)}
.e-chat__thread{flex:1;overflow-y:auto;padding:var(--e-sp-4) var(--e-sp-3);display:flex;flex-direction:column;gap:var(--e-sp-2);
	background:var(--e-surface-form) radial-gradient(circle at 1px 1px,rgba(142,79,208,.09) 1px,transparent 0) 0 0/18px 18px}
.e-chat__note{align-self:center;max-width:88%;padding:8px 12px;border-radius:var(--e-radius);background:rgba(255,255,255,.85);box-shadow:0 1px 2px rgba(0,0,0,.05);font-size:var(--e-fs-sm);color:var(--e-muted);text-align:center}
.e-chat__note .e-btn{margin-top:var(--e-sp-2)}
.e-chat__suggest{flex:none;display:flex;gap:var(--e-sp-2);overflow-x:auto;padding:var(--e-sp-2) var(--e-sp-3) 0;scrollbar-width:none}
.e-chat__suggest::-webkit-scrollbar{display:none}
.e-chat__suggest .e-chip{flex:none;white-space:nowrap;background:var(--e-surface)}
.e-chat__composer{flex:none;display:flex;align-items:flex-end;gap:var(--e-sp-2);padding:var(--e-sp-2) var(--e-sp-3);padding-bottom:calc(var(--e-sp-2) + env(safe-area-inset-bottom))}
.e-chat__input{flex:1;min-width:0;min-height:46px;max-height:140px;padding:12px 16px;resize:none;overflow-y:hidden;
	font-family:var(--e-font);font-size:16px;line-height:1.35;color:var(--e-ink);
	background:var(--e-surface);border:1.5px solid var(--e-border);border-radius:23px;outline:none}
.e-chat__input:focus{border-color:var(--e-primary)}
.e-chat__send{flex:none;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:var(--e-primary);color:var(--e-on-primary);font-size:17px;cursor:pointer;box-shadow:0 4px 14px var(--e-primary-shadow);transition:background var(--e-speed),opacity var(--e-speed)}
.e-chat__send:hover{background:var(--e-primary-hover)}
.e-chat__send:disabled{opacity:.45;cursor:default;box-shadow:none}
.e-chat__closed{flex:none;margin:var(--e-sp-3);}

/* Bulles */
.e-bubble{position:relative;max-width:82%;padding:8px 12px 6px;border-radius:16px;background:var(--e-surface);box-shadow:0 1px 2px rgba(0,0,0,.06);font-size:var(--e-fs);line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;animation:e-bubble-in .18s ease-out}
@keyframes e-bubble-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.e-bubble--out{align-self:flex-end;background:var(--e-primary);color:var(--e-on-primary);border-bottom-right-radius:4px}
.e-bubble--in{align-self:flex-start;border-bottom-left-radius:4px}
.e-bubble__meta{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:2px;font-size:11px;opacity:.8}
.e-bubble__status{font-size:11px}
.e-bubble.is-pending{opacity:.85}
/* « Message non envoyé » sous la bulle : bien visible, rebondit pour rappeler qu'il reste une étape */
.e-bubble__fail{align-self:flex-end;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 10px;max-width:92%;margin-top:2px;padding:8px 10px 8px 12px;
	border-radius:var(--e-radius);background:var(--e-danger-soft);color:var(--e-danger);font-size:var(--e-fs-sm);font-weight:var(--e-fw-bold);
	box-shadow:0 3px 12px rgba(208,63,90,.20);animation:e-rappel 3.5s ease-in-out infinite;transform-origin:bottom right}
.e-bubble__fail .e-btn{min-height:34px;padding:6px 12px;font-size:var(--e-fs-sm);background:var(--e-danger);color:#fff;border-radius:var(--e-radius-pill);box-shadow:none}
@keyframes e-rappel{0%,26%,100%{transform:translateY(0)}6%{transform:translateY(-9px)}12%{transform:translateY(0)}17%{transform:translateY(-4px)}22%{transform:translateY(0)}}
.e-bubble.is-failed{opacity:.8}
@media (prefers-reduced-motion:reduce){.e-bubble__fail{animation:none}}

/* Boutons ronds (fermer, retour) : halo violet au clavier au lieu du contour du navigateur */
.e-modal__close,.e-chat__back,.e-chat__send{outline:none}
.e-modal__close:focus-visible,.e-chat__back:focus-visible,.e-chat__send:focus-visible{box-shadow:0 0 0 3px var(--e-primary-ring)}
.e-modal__close:focus:not(:focus-visible),.e-chat__back:focus:not(:focus-visible){box-shadow:none}

/* Faux focus (js/e/composants.js, eFauxFocus) : barre clignotante et halo, sur téléphone seulement */
.e-faux-caret{position:absolute;width:2px;border-radius:1px;background:var(--e-primary);pointer-events:none;z-index:1;animation:e-caret 1.06s steps(1) infinite}
.e-faux-caret[hidden]{display:none}
@keyframes e-caret{0%{opacity:1}50%{opacity:0}}
.is-invite{animation:e-invite 1.4s ease-out .25s 1}
@keyframes e-invite{0%{box-shadow:0 0 0 0 var(--e-primary-shadow);border-color:var(--e-border)}30%{box-shadow:0 0 0 6px var(--e-primary-ring);border-color:var(--e-primary)}100%{box-shadow:0 0 0 0 transparent;border-color:var(--e-border)}}

/* --- En-tête centré d'une fenêtre (avatar, titre, sous-titre) --- */
.e-sheet-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin:4px 0 18px}
.e-avatar--lg{width:64px;height:64px;font-size:24px;margin-bottom:6px}
/* --- Valeur affichée en grand (numéro de téléphone à vérifier…) --- */
.e-big-value{padding:14px;margin:0 0 16px;background:var(--e-surface);border:1.5px solid var(--e-border);border-radius:var(--e-radius);font-size:26px;font-weight:var(--e-fw-bold);text-align:center;letter-spacing:.04em;color:var(--e-ink)}
/* --- Vignette carrée (photo d'annonce) --- */
.e-thumb{flex:none;width:64px;height:64px;border-radius:var(--e-radius);background-size:cover;background-position:center}

/* --- Barre de progression : <div class="e-progress is-running"><span></span></div>
   Durée de remplissage réglable : style="--e-progress-duree:2s" --- */
.e-progress{height:8px;border-radius:var(--e-radius-pill);background:var(--e-soft);overflow:hidden}
.e-progress > span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--e-primary),var(--e-pink))}
.e-progress.is-running > span{animation:e-progress var(--e-progress-duree,2s) cubic-bezier(.4,0,.2,1) forwards}
@keyframes e-progress{from{width:0}to{width:100%}}

/* --- Carte de fin dans une discussion (« … va vous répondre dans l'app ») --- */
.e-chat__card{align-self:center;width:min(100%,330px);margin-top:auto; /* collée en bas de la discussion, bien séparée du message */padding:var(--e-sp-5) var(--e-sp-4) var(--e-sp-4);
	border-radius:var(--e-radius-lg);background:var(--e-surface);box-shadow:var(--e-shadow);text-align:center;animation:e-bubble-in .3s ease-out}
.e-chat__card .e-app-icon{display:block;width:76px;height:76px;margin:0 auto 14px;border-radius:22%;box-shadow:0 8px 20px rgba(56,47,89,.22)}
.e-chat__card .e-chat__card-ok{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:var(--e-success-soft);color:var(--e-success);font-size:30px}
.e-chat__card p{font-size:var(--e-fs-md);font-weight:var(--e-fw-bold);line-height:1.35;margin:0 0 var(--e-sp-4)}
.e-chat__card p.is-success{color:var(--e-success)}
.e-chat__card p.is-success .fa{margin-right:4px}
.e-chat__card .e-row{justify-content:center}

/* Dans une fenêtre (fond teinté), les pastilles d'avatar ou d'icône sont blanches pour ressortir */
.e-modal .e-avatar{background:var(--e-surface)}

/* Carte de fin affichée dans une fenêtre (et non dans une discussion) */
.e-modal .e-chat__card{width:100%;margin:0 auto}

/* --- Fenêtre à étapes : barre du haut (retour à gauche, fermer à droite) et glissement des étapes ---
   Le bouton retour doit toujours suivre le bouton retour du navigateur et du téléphone
   (une entrée d'historique par étape, retour = history.back() ; règle dans docs/design.md). */
.e-modal{overflow-x:hidden}
.e-modal__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--e-sp-2);min-height:36px}
.e-modal__back{flex:none;width:36px;height:36px;padding:0;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
	background:var(--e-surface);color:var(--e-ink);font-size:16px;cursor:pointer;box-shadow:0 1px 3px rgba(56,47,89,.12);outline:none}
.e-modal__back:hover{background:var(--e-soft)}
.e-modal__back:focus-visible{box-shadow:0 0 0 3px var(--e-primary-ring)}
.e-modal__back[hidden]{visibility:hidden;display:inline-flex !important} /* garde la place : la croix ne bouge pas */
.e-modal__bar .e-modal__close{margin-left:auto}
.e-slide-avant{animation:e-slide-avant .28s cubic-bezier(.2,.8,.2,1)}
.e-slide-arriere{animation:e-slide-arriere .28s cubic-bezier(.2,.8,.2,1)}
@keyframes e-slide-avant{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes e-slide-arriere{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.e-slide-avant,.e-slide-arriere{animation:none}}