/* ============================================================================
   ED 2026-08-13 : widget chatbot Renault Eurodrive — feuille de style.
   Fichier autonome, servi en <link> separe depuis foot.php (hors bundle
   ed-core.min.css : aucun rebuild, isolable en cas de retour arriere).
   Destination serveur : htdocs/css/ed-chatbot.css (CONTRAT § 2).

   ALIGNE SUR LE CONTRAT UNIQUE — build/CONTRAT.md v1.0 (ED_CHAT_CONTRAT 1.0).

   RETOUR ARRIERE : retirer le bloc ajoute dans htdocs/foot.php.
   COUPE-CIRCUIT : sudo touch <racine>/ED_CHAT_OFF (CONTRAT § 3) — foot.php
   n'ecrit alors ni <link>, ni <script>, ni window.ED_BOT.
   Aucun autre fichier n'est touche par le widget.

   REGLES DE COHABITATION (verifiees sur la prod le 12/08/2026)
   - Prefixe unique « edchat- ». NE JAMAIS renommer en « ed-chat- » : head.php
     force  [class^="ed-"] h1|h2|h3  et  [class*=" ed-"] b  en Archivo !important.
     « edchat- » ne matche pas ces selecteurs, « ed-chat- » les matcherait.
   - head.php force aussi  button[type="submit"], input[type=submit], a.btn …
     en  border-radius:999px !important; font-family:Archivo !important;
     font-weight:700 !important.  Les proprietes concernees sont donc
     redeclarees ici en !important avec une specificite superieure (0,2,0).
   - Pas de classe « btn », « close », « modal », « sticky » nue : toutes
     portent des regles !important du site.
   - Le site n'a pas de theme sombre (body #fff). Le widget reste clair,
     volontairement : il doit appartenir a la page, pas suivre l'OS.

   PLAN
     1. Jetons et racine          6. Fil de conversation
     2. Lanceur (mascotte seule)  7. Suggestions
     3. Mascotte pixel-art        8. Zone de saisie
     4. Panneau                   9. Plein ecran / responsive
     5. En-tete                  10. Mouvement reduit, impression, eclipse
                                 11. Mode relais (conseiller, frappe, paylink)
                                 12. Pieces jointes (trombone, carte fichier)
   ========================================================================= */

/* --------------------------------------------------------------- 1. Racine */

.edchat {
	/* Marque */
	--edchat-brand:        #F45000;
	--edchat-brand-ink:    #C24000;
	--edchat-brand-soft:   #FCEFE8;
	--edchat-brand-line:   #F6D9C7;

	/* Gris chauds, alignes sur la charte V2 du site */
	--edchat-ink:          #1A1A1A;
	--edchat-ink-2:        #5C534C;
	--edchat-ink-3:        #8C8079;
	--edchat-surface:      #FFFFFF;
	--edchat-surface-2:    #F7F5F2;
	--edchat-surface-3:    #F1EDE8;
	--edchat-line:         #EEE3DA;
	--edchat-line-2:       #E1D5C9;

	/* Formes — 12/16px comme les cartes et champs V2, 999px comme les boutons */
	--edchat-radius:       16px;
	--edchat-radius-sm:    12px;
	--edchat-bubble:       14px;

	--edchat-shadow:       0 20px 48px -22px rgba(38,24,16,.42), 0 2px 10px rgba(38,24,16,.07);
	--edchat-shadow-soft:  0 8px 22px -14px rgba(38,24,16,.34);

	/* Geometrie imposee */
	--edchat-size:         clamp(52px, 7vw, 68px);      /* largeur du lanceur    */
	--edchat-edge:         clamp(10px, 2.2vw, 22px);    /* marge au bord         */
	--edchat-lift:         0px;   /* releve mesure au-dessus d un CTA collant    */
	--edchat-bar:          0px;   /* barre d outils Safari iOS, mesuree en JS    */
	--edchat-kb:           0px;   /* hauteur du clavier virtuel (visualViewport) */

	/* Empilement — releve : le site utilise 9000 (.ed-sticky-cta), 9990
	   (.main-header collant), 99999+ (tiroir mobile), 2147483 (CookieHub).
	   Ferme, le widget passe DERRIERE tout overlay (1035 < 1040 = backdrop
	   Bootstrap 3). Ouvert, il passe devant l en-tete collant mais reste
	   derriere le tiroir et le bandeau cookies. Une modale du site declenche
	   en plus l eclipse (§10) : le widget s efface, il ne lutte jamais. */
	--edchat-z:            1035;
	--edchat-z-open:       9995;

	position: fixed;
	right:  calc(var(--edchat-edge) + env(safe-area-inset-right, 0px));
	bottom: calc(var(--edchat-edge) + var(--edchat-lift) + var(--edchat-bar, 0px) + env(safe-area-inset-bottom, 0px));
	z-index: var(--edchat-z);
	font-family: inherit;              /* typographie heritee de la page */
	font-size: 14px;
	line-height: 1.5;
	color: var(--edchat-ink);
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

.edchat[data-open="1"] { z-index: var(--edchat-z-open); }

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

/* Accessibilite : texte reserve aux lecteurs d ecran */
.edchat-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

/* Focus clavier visible partout, jamais a la souris */
.edchat :focus-visible {
	outline: 2px solid var(--edchat-brand);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---------------------------------------------------------- 2. Le lanceur  */
/* Une mascotte posee dans le coin : pas de cercle, pas de cartouche, pas de
   fond. Seulement le personnage et son ombre de contact au sol.             */

.edchat-launcher {
	display: block;
	position: relative;
	width: var(--edchat-size);
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	/* entree en scene depuis le bord droit (§ .is-entered) */
	opacity: 0;
	transform: translateX(150%);
	transition: opacity .32s ease, transform .62s cubic-bezier(.18,.9,.24,1.04);
}

.edchat-launcher.is-entered {
	opacity: 1;
	transform: none;
	/* ronde d'arcade : pas discrets de 8 px (steps), course ~104 px vers la
	   gauche, pause a chaque bout. Demarre 2,6 s apres l'entree en scene. */
	animation: edchat-patrouille 18s steps(13) 2.6s infinite;
}

/* Une cible mouvante est penible a viser : la ronde s'arrete net des que le
   pointeur approche ou que le clavier prend le focus. */
.edchat-launcher:hover,
.edchat-launcher:focus-visible { animation-play-state: paused; }

@keyframes edchat-patrouille {
	0%, 7%     { transform: translateX(0); }
	43%, 57%   { transform: translateX(-104px); }
	93%, 100%  { transform: translateX(0); }
}

/* ---- hors page d'accueil, sur mobile : Eddy discret ----
   Mascotte reduite, sans ronde ni bulle — un simple bouton de rappel dans le
   coin (demande Filipe 02/09). Le chat ouvert, lui, est identique partout. */
@media (max-width: 767px) {
	.edchat[data-accueil="0"] { --edchat-size: 46px; }
	.edchat[data-accueil="0"] .edchat-bulle { display: none !important; }
	.edchat[data-accueil="0"] .edchat-launcher.is-entered { animation: none; }
}

/* ---- bulle retro, facon borne d'arcade ---- */
.edchat-bulle {
	position: absolute;
	right: 72%;
	bottom: calc(100% + 12px);
	padding: 7px 9px 6px;
	background: #FFFDF9;
	color: #1A1210;
	border: 2px solid #1A1210;
	border-radius: 0;                        /* pas d'arrondi : pixel-art */
	box-shadow: 3px 3px 0 rgba(26,18,16,.5);
	font: 700 10px/1 ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;                    /* le clic traverse vers le bouton */
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s steps(2), transform .2s steps(2);
}
.edchat-launcher.is-entered .edchat-bulle {
	opacity: 1;
	transform: none;
	transition-delay: 1.4s;
}
/* queue de la bulle : deux marches carrees, jamais de diagonale */
.edchat-bulle::before,
.edchat-bulle::after {
	content: "";
	position: absolute;
	background: #FFFDF9;
	border: 2px solid #1A1210;
}
.edchat-bulle::before {
	right: 16px; top: 100%;
	width: 10px; height: 5px;
	border-top: 0;
}
.edchat-bulle::after {
	right: 12px; top: calc(100% + 5px);
	width: 6px; height: 4px;
	border-top: 0;
}

/* Le lanceur s efface pendant que le panneau est ouvert : le panneau prend
   le coin, on ne laisse pas deux objets se disputer la meme place. */
.edchat[data-open="1"] .edchat-launcher {
	opacity: 0;
	transform: translateY(6px) scale(.9);
	pointer-events: none;
	transition-duration: .18s;
	animation: none;                          /* la ronde cesse, panneau ouvert */
}

.edchat-launcher-fig {
	display: block;
	position: relative;
	z-index: 1;
	transform-origin: 50% 100%;
	animation: edchat-float 4.2s ease-in-out infinite;
	transition: transform .18s ease;
	will-change: transform;
}

.edchat-launcher:hover .edchat-launcher-fig  { transform: scale(1.07); }
.edchat-launcher:active .edchat-launcher-fig { transform: scale(.96); }

/* Ombre de contact : une tache au sol, pas un halo autour du personnage. */
.edchat-launcher-shade {
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 78%;
	height: 10px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%,
	            rgba(38,24,16,.34) 0%, rgba(38,24,16,.14) 55%, rgba(38,24,16,0) 78%);
	animation: edchat-shade 4.2s ease-in-out infinite;
	pointer-events: none;
}

@keyframes edchat-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}
@keyframes edchat-shade {
	0%, 100% { transform: translateX(-50%) scaleX(1)   scaleY(1);   opacity: 1; }
	50%      { transform: translateX(-50%) scaleX(.86) scaleY(.82); opacity: .72; }
}

/* Pastille « le bot a repondu pendant que le panneau etait ferme » */
.edchat-badge {
	position: absolute;
	top: -2px; right: -2px;
	z-index: 2;
	min-width: 16px; height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--edchat-brand);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}
.edchat-badge[hidden] { display: none; }

/* ------------------------------------------------------ 3. Mascotte SVG    */
/* Le SVG source (ed-chat-mascotte.svg) embarque ses propres regles ; injecte
   en ligne dans la page, ce <style> ne serait PAS isole et fuirait sur tout
   le site (.f1 / .f2 sont des noms trop courants). Le widget injecte donc une
   copie sans <style>, aux classes prefixees, animee ici.
   /!\ Toute retouche du pixel-art doit etre reportee dans les deux fichiers. */

.edchat-mascotte {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	filter: drop-shadow(0 5px 8px rgba(38,24,16,.20));
}

.edchat-m1{animation:edchat-a 1.4s steps(1) infinite}
.edchat-m2{animation:edchat-b 1.4s steps(1) infinite}
@keyframes edchat-a{0%,49.9%{opacity:1}50%,100%{opacity:0}}
@keyframes edchat-b{0%,49.9%{opacity:0}50%,100%{opacity:1}}
.edchat-sal1,.edchat-sal2,.edchat-orb,.edchat-mouth{opacity:0}
.edchat-yeux{opacity:1}
.edchat-mascotte.is-idle .edchat-yeux{animation:edchat-clin 5.6s steps(1) infinite}
@keyframes edchat-clin{0%,93%{opacity:1}94%,97%{opacity:0}98%,100%{opacity:1}}
.edchat-mascotte.is-thinking .edchat-yeux{opacity:0}
.edchat-mascotte.is-thinking .edchat-orb{animation:edchat-orb 2.62s steps(1) infinite}
.edchat-mascotte.is-thinking .edchat-o1{animation-delay:0s}
.edchat-mascotte.is-thinking .edchat-o2{animation-delay:-1.965s}
.edchat-mascotte.is-thinking .edchat-o3{animation-delay:-1.310s}
.edchat-mascotte.is-thinking .edchat-o4{animation-delay:-0.655s}
@keyframes edchat-orb{0%,24.9%{opacity:1}25%,100%{opacity:0}}
.edchat-mascotte.is-speaking .edchat-mouth{opacity:1}
.edchat-mascotte.is-speaking .edchat-s1{animation:edchat-scan1 2s steps(1) infinite}
.edchat-mascotte.is-speaking .edchat-s2{animation:edchat-scan2 2s steps(1) infinite}
.edchat-mascotte.is-speaking .edchat-s3{animation:edchat-scan3 2s steps(1) infinite}
.edchat-mascotte.is-speaking .edchat-s4{animation:edchat-scan4 2s steps(1) infinite}
.edchat-mascotte.is-speaking .edchat-s5{animation:edchat-scan5 2s steps(1) infinite}
@keyframes edchat-scan1{0%,12.49%{opacity:1}12.5%,100%{opacity:0}}
@keyframes edchat-scan2{0%,12.49%{opacity:0}12.5%,24.99%{opacity:1}25%,87.49%{opacity:0}87.5%,99.99%{opacity:1}}
@keyframes edchat-scan3{0%,24.99%{opacity:0}25%,37.49%{opacity:1}37.5%,74.99%{opacity:0}75%,87.49%{opacity:1}87.5%,100%{opacity:0}}
@keyframes edchat-scan4{0%,37.49%{opacity:0}37.5%,49.99%{opacity:1}50%,62.49%{opacity:0}62.5%,74.99%{opacity:1}75%,100%{opacity:0}}
@keyframes edchat-scan5{0%,49.99%{opacity:0}50%,62.49%{opacity:1}62.5%,100%{opacity:0}}
.edchat-mascotte.is-greeting .edchat-m1,.edchat-mascotte.is-greeting .edchat-m2{opacity:0;animation:none}
.edchat-mascotte.is-greeting .edchat-sal1{animation:edchat-a .62s steps(1) infinite}
.edchat-mascotte.is-greeting .edchat-sal2{animation:edchat-b .62s steps(1) infinite}
.edchat-mascotte.is-greeting .edchat-yeux{animation:edchat-clin 1.3s steps(1) infinite}
@media (prefers-reduced-motion:reduce){
  .edchat-m1,.edchat-m2,.edchat-sal1,.edchat-sal2,.edchat-yeux,.edchat-orb,.edchat-scan{animation:none!important}
  .edchat-m1,.edchat-yeux{opacity:1!important}
  .edchat-m2,.edchat-sal1,.edchat-sal2,.edchat-orb{opacity:0!important}
}

/* ------------------------------------------------------------ 4. Panneau   */

.edchat-panel {
	position: fixed;
	right:  calc(var(--edchat-edge) + env(safe-area-inset-right, 0px));
	bottom: calc(var(--edchat-edge) + var(--edchat-lift) + var(--edchat-bar, 0px) + env(safe-area-inset-bottom, 0px));

	width:  min(400px, calc(100vw - 2rem));
	height: min(620px, calc(100vh - 2rem));      /* repli navigateurs anciens */
	height: min(620px, calc(100dvh - 2rem));     /* dvh : barre d URL mobile  */
	/* garde-fou : le panneau ne doit jamais depasser le haut de l ecran
	   lorsqu il est releve au-dessus d un CTA collant */
	max-height: calc(100dvh - var(--edchat-edge) * 2 - var(--edchat-lift)
	                 - env(safe-area-inset-bottom, 0px));

	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--edchat-surface);
	border: 1px solid var(--edchat-line);
	border-radius: var(--edchat-radius);
	box-shadow: var(--edchat-shadow);

	transform-origin: 100% 100%;
	opacity: 0;
	transform: translateY(12px) scale(.97);
	transition: opacity .2s ease, transform .26s cubic-bezier(.2,.85,.3,1);
}

.edchat-panel[hidden] { display: none; }

.edchat[data-open="1"] .edchat-panel {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------ 5. En-tete   */

.edchat-head {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 12px 12px 14px;
	border-bottom: 1px solid var(--edchat-line);
	background: var(--edchat-surface);
}

.edchat-head-fig {
	flex: none;
	width: 38px;
}
.edchat-head-fig .edchat-mascotte { filter: none; }

.edchat-head-txt { flex: 1 1 auto; min-width: 0; }

.edchat-title {
	margin: 0;
	font-family: 'Archivo', 'Montserrat', 'Montserrat Fallback', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--edchat-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Mention IA — reglement (UE) sur l IA, art. 50 : visible, pas enfouie. */
.edchat-sub {
	margin: 1px 0 0;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--edchat-ink-3);
}

/* Deux boutons d en-tete, meme gabarit : « Nouvelle conversation » (init avec
   reset:true) et « Fermer ». Le premier reste cache tant que le service n a
   pas repondu — il ne sert a rien avant d avoir une conversation. */
.edchat-new,
.edchat-close {
	flex: none;
	width: 34px; height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--edchat-ink-2);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.edchat-new:hover,
.edchat-close:hover {
	background: var(--edchat-surface-2);
	border-color: var(--edchat-line);
	color: var(--edchat-ink);
}
.edchat-new svg,
.edchat-close svg { width: 15px; height: 15px; display: block; }

/* display:flex ci-dessus l emporterait sur la regle « [hidden] » du
   navigateur : le bouton doit etre explicitement retire quand il est cache. */
.edchat-new[hidden] { display: none; }

/* ------------------------------------------------- 6. Fil de conversation  */

.edchat-thread {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/* pas de scroll-behavior:smooth ici : le defilement est pilote en JS, une
	   animation CSS se fait interrompre par l arrivee du message suivant. */
	padding: 14px;
	background:
		linear-gradient(var(--edchat-surface) 30%, rgba(255,255,255,0)) top / 100% 22px no-repeat,
		var(--edchat-surface);
}

/* Le contenu du fil se colle a la zone de saisie quand il est court, comme
   dans une vraie messagerie : la note d information reste donc juste au-dessus
   du premier message, la ou elle se lit, et non seule en haut d un grand vide.
   On evite justify-content:flex-end, qui rogne le haut du fil des qu il
   deborde ; une marge auto, elle, retombe a 0 toute seule. */
.edchat-thread > .edchat-note { margin-top: auto; }
/* La note n apparait qu apres la reponse de « init » (elle porte le texte de
   l avertissement renvoye par le serveur) : tant qu elle est cachee, c est la
   liste des messages qui prend le relais du calage en bas. */
.edchat-thread > .edchat-note[hidden] + .edchat-msgs { margin-top: auto; }

.edchat-msgs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.edchat-m {
	display: flex;
	max-width: 100%;
	animation: edchat-in .22s ease both;
}
.edchat-m.is-user { justify-content: flex-end; }

@keyframes edchat-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* Bulles */
.edchat-b {
	max-width: 88%;
	padding: 9px 12px;
	border: 1px solid var(--edchat-line);
	border-radius: var(--edchat-bubble);
	background: var(--edchat-surface-2);
	color: var(--edchat-ink);
	font-size: 14px;
	line-height: 1.5;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.edchat-m.is-bot  .edchat-b { border-bottom-left-radius: 5px; }
.edchat-m.is-user .edchat-b {
	background: var(--edchat-brand-soft);
	border-color: var(--edchat-brand-line);
	border-bottom-right-radius: 5px;
}

.edchat-b p { margin: 0 0 .55em; font-size: 14px; line-height: 1.5; color: inherit; }
.edchat-b p:last-child { margin-bottom: 0; }
.edchat-b ul { margin: .2em 0 .55em; padding-left: 18px; }
.edchat-b ul:last-child { margin-bottom: 0; }
.edchat-b li { margin: 0 0 .18em; font-size: 14px; line-height: 1.5; color: inherit; }
.edchat-b a { color: var(--edchat-brand-ink); text-decoration: underline; }
.edchat-b a:hover { color: var(--edchat-brand); }
.edchat-b strong { font-weight: 700; }

/* Note d information (mention IA + rappel « aucune piece d identite ici ») */
.edchat-note {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--edchat-line);
	border-left: 3px solid var(--edchat-brand);
	border-radius: var(--edchat-radius-sm);
	background: var(--edchat-surface-2);
	color: var(--edchat-ink-2);
	font-size: 12px;
	line-height: 1.5;
}
.edchat-note a { color: var(--edchat-brand-ink); text-decoration: underline; }
.edchat-note[hidden] { display: none; }

/* Ligne systeme (reference de demande transmise, renvoi vers un conseiller) */
.edchat-sys {
	align-self: center;
	max-width: 92%;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--edchat-surface-3);
	color: var(--edchat-ink-3);
	font-size: 11.5px;
	line-height: 1.45;
	text-align: center;
}

/* Bouton d action dans le fil : connexion, espace client, reessayer.
   !important defensif : head.php force border-radius / font-family / weight
   sur tout ce qui ressemble a un bouton. */
.edchat-cta,
.edchat .edchat-cta {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	margin-top: 8px;
	padding: 8px 15px !important;
	border: 1px solid var(--edchat-brand) !important;
	border-radius: 999px !important;
	background: var(--edchat-brand) !important;
	color: #fff !important;
	font-family: 'Archivo', 'Montserrat', 'Montserrat Fallback', sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.edchat .edchat-cta:hover {
	background: var(--edchat-brand-ink) !important;
	border-color: var(--edchat-brand-ink) !important;
	color: #fff !important;
}
.edchat .edchat-cta.is-ghost {
	background: transparent !important;
	border-color: var(--edchat-line-2) !important;
	color: var(--edchat-ink-2) !important;
}
.edchat .edchat-cta.is-ghost:hover {
	background: var(--edchat-surface-2) !important;
	border-color: var(--edchat-ink-3) !important;
	color: var(--edchat-ink) !important;
}
.edchat-cta svg { width: 14px; height: 14px; flex: none; }

/* Erreur : ton humain, pas un code HTTP */
.edchat-err .edchat-b {
	background: #FDF3EE;
	border-color: var(--edchat-brand-line);
	color: var(--edchat-ink);
}

/* Indicateur de reflexion */
.edchat-typing {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 12px 13px;
}
.edchat-typing i {
	display: block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--edchat-ink-3);
	animation: edchat-dot 1.25s ease-in-out infinite;
}
.edchat-typing i:nth-child(2) { animation-delay: .16s; }
.edchat-typing i:nth-child(3) { animation-delay: .32s; }

@keyframes edchat-dot {
	0%, 60%, 100% { opacity: .28; transform: translateY(0); }
	30%           { opacity: .9;  transform: translateY(-3px); }
}

/* Barre de defilement discrete */
.edchat-thread::-webkit-scrollbar { width: 8px; }
.edchat-thread::-webkit-scrollbar-thumb {
	background: var(--edchat-line-2);
	border: 2px solid var(--edchat-surface);
	border-radius: 999px;
}
.edchat-thread { scrollbar-width: thin; scrollbar-color: var(--edchat-line-2) transparent; }

/* -------------------------------------------------------- 7. Suggestions   */

.edchat-sugg {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 14px 10px;
}
.edchat-sugg[hidden] { display: none; }

.edchat-chip,
.edchat .edchat-chip {
	padding: 6px 12px !important;
	border: 1px solid var(--edchat-line-2) !important;
	border-radius: 999px !important;
	background: var(--edchat-surface) !important;
	color: var(--edchat-ink-2) !important;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.edchat .edchat-chip:hover {
	background: var(--edchat-surface-2) !important;
	border-color: var(--edchat-ink-3) !important;
	color: var(--edchat-ink) !important;
}

/* ------------------------------------------------------ 8. Zone de saisie  */

.edchat-form {
	flex: none;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px;
	margin: 0;
	border-top: 1px solid var(--edchat-line);
	background: var(--edchat-surface);
}

/* « connexion_requise », ou chatbot desactive en cours de conversation : la
   saisie disparait, le fil deja affiche reste lisible (CONTRAT § 5.5).
   display:flex ci-dessus l emporterait sur « [hidden] » : on tranche ici. */
.edchat-form[hidden] { display: none; }

.edchat-input,
.edchat .edchat-input {
	flex: 1 1 auto;
	min-width: 0;
	/* PAS de !important sur height : le champ s agrandit ligne par ligne via
	   une hauteur en ligne posee par le JS, qu un !important ecraserait. */
	min-height: 42px;
	height: 42px;
	max-height: 118px;
	padding: 10px 13px !important;
	border: 1px solid var(--edchat-line-2) !important;
	border-radius: var(--edchat-radius-sm) !important;
	background: var(--edchat-surface) !important;
	color: var(--edchat-ink) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	resize: none;
	/* hidden par defaut : sinon une barre de defilement apparait des la
	   premiere ligne. Le JS bascule sur auto quand la hauteur max est atteinte. */
	overflow-y: hidden;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.edchat .edchat-input::placeholder { color: var(--edchat-ink-3); opacity: 1; }
.edchat .edchat-input:focus {
	outline: none;
	border-color: var(--edchat-brand) !important;
	box-shadow: 0 0 0 3px rgba(244,80,0,.13);
}
/* Pendant l appel : lecture seule plutot que disabled, pour ne pas perdre le
   focus ni refermer le clavier virtuel au milieu d une conversation. */
.edchat .edchat-input[readonly] {
	background: var(--edchat-surface-2) !important;
	color: var(--edchat-ink-3) !important;
}
/* « hors_bloque » (portier, SPEC-PERIMETRE § 6) : la saisie est fermee pour
   la conversation et le placeholder porte le texte du serveur. Distinct de
   [readonly] (envoi en cours) : ici le champ est vraiment inerte, seul le
   bouton « nouvelle conversation » reste. opacity et text-fill : iOS grise
   les champs disabled au point de rendre le placeholder illisible. */
.edchat .edchat-input:disabled {
	background: var(--edchat-surface-2) !important;
	color: var(--edchat-ink-3) !important;
	-webkit-text-fill-color: var(--edchat-ink-3);
	opacity: 1;
	cursor: not-allowed;
}

.edchat-send,
.edchat .edchat-send {
	flex: none;
	width: 42px !important;
	height: 42px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--edchat-brand) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-weight: 400 !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .15s ease, transform .12s ease, opacity .15s ease;
}
.edchat .edchat-send:hover   { background: var(--edchat-brand-ink) !important; }
.edchat .edchat-send:active  { transform: scale(.94); }
.edchat .edchat-send:disabled {
	background: var(--edchat-line-2) !important;
	color: var(--edchat-surface) !important;
	cursor: default;
	transform: none;
}
.edchat-send svg { width: 17px; height: 17px; display: block; }

/* Pied : information au point de collecte (RGPD) */
.edchat-foot {
	flex: none;
	margin: 0;
	padding: 0 14px 10px;
	color: var(--edchat-ink-3);
	font-size: 11px;
	line-height: 1.4;
	text-align: center;
}
.edchat-foot a { color: var(--edchat-ink-3); text-decoration: underline; }
.edchat-foot a:hover { color: var(--edchat-brand-ink); }

/* --------------------------------------------- 9. Plein ecran / responsive */
/* La hauteur compte autant que la largeur : un ecran bas (paysage mobile,
   fenetre reduite) rend le panneau flottant inutilisable.                  */

@media (max-width: 620px), (max-height: 560px) {

	.edchat {
		right:  0;
		bottom: 0;
	}

	/* Le lanceur garde ses marges, le panneau prend tout l ecran. */
	.edchat-launcher {
		position: fixed;
		right:  calc(var(--edchat-edge) + env(safe-area-inset-right, 0px));
		bottom: calc(var(--edchat-edge) + var(--edchat-lift) + var(--edchat-bar, 0px) + env(safe-area-inset-bottom, 0px));
	}

	.edchat-panel {
		right: 0; bottom: 0; left: 0; top: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		/* le clavier virtuel ne doit pas manger la zone de saisie */
		height: calc(100dvh - var(--edchat-kb, 0px));
		max-height: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		transform-origin: 50% 100%;
		transform: translateY(14px);
	}

	.edchat-head {
		padding-top: calc(12px + env(safe-area-inset-top, 0px));
		padding-left:  calc(14px + env(safe-area-inset-left, 0px));
		padding-right: calc(12px + env(safe-area-inset-right, 0px));
	}
	.edchat-thread { padding: 14px calc(14px + env(safe-area-inset-right, 0px))
	                          14px calc(14px + env(safe-area-inset-left, 0px)); }
	.edchat-form   { padding-bottom: 10px; }
	.edchat-foot   { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

	.edchat-b { max-width: 92%; }

	/* 16px : en dessous, iOS Safari zoome la page a la prise de focus et le
	   client se retrouve avec le site agrandi en sortant du widget. */
	.edchat .edchat-input { font-size: 16px !important; }
}

/* Ecran tres bas : on rend au fil chaque pixel possible. */
@media (max-height: 460px) {
	.edchat-note { display: none; }        /* rappelee dans le pied */
	.edchat-msgs { margin-top: auto; }     /* la note masquee ne pousse plus rien */
	.edchat-head { padding-top: 8px; padding-bottom: 8px; }
	.edchat-head-fig { width: 30px; }
}

/* -------------------------------- 10. Mouvement reduit, impression, eclipse */

@media (prefers-reduced-motion: reduce) {
	.edchat-launcher {
		transform: none;
		transition: opacity .2s ease;
	}
	.edchat-launcher { animation: none !important; }
	.edchat-bulle { transition: none; }
	.edchat-launcher-fig,
	.edchat-launcher-shade { animation: none; }
	.edchat-launcher-shade { opacity: .85; }
	.edchat-panel {
		transform: none;
		transition: opacity .15s ease;
	}
	.edchat[data-open="1"] .edchat-launcher { transform: none; }
	.edchat-m { animation: none; }
	.edchat-thread { scroll-behavior: auto; }
	.edchat-m1,.edchat-m2,.edchat-sal1,.edchat-sal2,.edchat-yeux,.edchat-orb,.edchat-scan{animation:none!important}
	.edchat-m1,.edchat-yeux{opacity:1!important}
	.edchat-m2,.edchat-sal1,.edchat-sal2,.edchat-orb{opacity:0!important}
	.edchat-typing i { animation: none; opacity: .5; }
}

/* Une modale, un tiroir ou le bandeau cookies du site est ouvert : le widget
   s efface completement. Il ne passe jamais devant une decision utilisateur. */
.edchat[data-eclipsed="1"] {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity .15s ease, visibility 0s linear .15s;
}

/* ------------------------------------------------------- 11. Mode relais   */
/* CONTRAT-RELAIS § 5. Tout ce bloc ne cible que data-mode="relais" ou des
   noeuds caches par defaut : en mode bot, rendu identique au pixel pres.   */

/* Pastille verte dans l en-tete : un conseiller humain est en ligne. Le titre
   est alors « {Prenom} — Service client » (pose par le JS). */
.edchat[data-mode="relais"] .edchat-title::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 6px 1px 0;
	border-radius: 50%;
	background: #2EA84F;
	box-shadow: 0 0 0 3px rgba(46, 168, 79, .16);
	vertical-align: middle;
}

/* La ligne « assistant automatique (IA) » serait fausse pendant qu un humain
   repond : elle se retire, le titre porte deja « Service client ». */
.edchat[data-mode="relais"] .edchat-sub { display: none; }

/* Avatar du conseiller dans l en-tete (CONTRAT-RELAIS § 11) : a la place de
   la mascotte, la photo RONDE du profil (28 px, bordure), ou la pastille
   initiales dessinee ici quand le profil n a pas d image (agent_img vide).
   Ces classes n existent qu en relais — le JS ne les pose jamais en bot, le
   rendu bot reste identique au pixel pres. */
.edchat[data-mode="relais"] .edchat-head-fig { width: 28px; }

.edchat-avatar,
.edchat-avatar-ini {
	box-sizing: border-box;
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--edchat-brand-line);
	overflow: hidden;
}

/* La photo remplit le rond sans se deformer ; le fond neutre couvre le
   temps de chargement. */
.edchat-avatar {
	object-fit: cover;
	background: var(--edchat-surface-2);
}

/* Pastille initiales : memes proportions, lettres du prenom sur fond doux
   de la charte — jamais d image cassee, jamais de rond vide. */
.edchat-avatar-ini {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--edchat-brand-soft);
	color: var(--edchat-brand-ink);
	font-family: 'Archivo', 'Montserrat', 'Montserrat Fallback', sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .4px;
	text-transform: uppercase;
	user-select: none;
	-webkit-user-select: none;
}

/* Bulle du conseiller : meme cote que le bot, mais fond blanc et lisere
   orange — l oeil distingue l humain de la machine d un coup. */
.edchat-m.is-agent .edchat-b {
	background: var(--edchat-surface);
	border-color: var(--edchat-brand-line);
	border-left: 3px solid var(--edchat-brand);
	border-bottom-left-radius: 5px;
}

/* Bandeau « connexion instable » : apparait apres 3 polls rates d affilee,
   disparait au premier succes (le JS bascule [hidden]). */
.edchat-instable {
	flex: none;
	padding: 6px 12px;
	border-bottom: 1px solid var(--edchat-brand-line);
	background: #FDF3EE;
	color: var(--edchat-brand-ink);
	font-size: 11.5px;
	line-height: 1.4;
	text-align: center;
}
.edchat-instable[hidden] { display: none; }

/* Mention discrete sous le compositeur : la frappe est visible du conseiller.
   Affichee uniquement en relais avec relais_frappe=1 (le JS decide). */
.edchat-frappe-note {
	flex: none;
	margin: 0;
	padding: 0 14px 8px;
	color: var(--edchat-ink-3);
	font-size: 10.5px;
	line-height: 1.4;
	text-align: center;
}
.edchat-frappe-note[hidden] { display: none; }

/* Carte de paiement — donnees chargees par paylink_etat UNIQUEMENT.
   Trois etats : a payer (bouton), paye ✓ (vert), expire/annule (gris). */
.edchat-b.edchat-pay {
	min-width: min(230px, 100%);
	background: var(--edchat-surface);
	border-color: var(--edchat-brand-line);
}
.edchat-pay-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 4px;
}
.edchat-pay-lbl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--edchat-ink-3);
}
.edchat-pay-sta {
	flex: none;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--edchat-brand-soft);
	color: var(--edchat-brand-ink);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}
.edchat-pay-sta.is-ok  { background: #E7F6EC; color: #1E7A3C; }
.edchat-pay-sta.is-off { background: var(--edchat-surface-3); color: var(--edchat-ink-3); }
.edchat-pay-motif {
	margin: 0 0 2px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--edchat-ink);
}
.edchat-pay-mnt {
	margin: 0;
	font-family: 'Archivo', 'Montserrat', 'Montserrat Fallback', sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--edchat-ink);
}
.edchat-pay .edchat-cta { margin-top: 10px; }

/* -------------------------------- 12. Pieces jointes (CONTRAT-RELAIS § 10) */
/* Tout ce bloc ne cible que des noeuds ABSENTS ou caches en mode bot : le
   trombone porte [hidden] hors relais (pose par le JS, comme la mention de
   frappe) et la carte fichier n existe que sur un message rol:"fichier".
   Rendu bot inchange au pixel pres.                                        */

/* Trombone du compositeur — meme gabarit que le bouton d envoi, en creux.
   !important defensif : head.php force border-radius / font sur les boutons. */
.edchat-attach,
.edchat .edchat-attach {
	flex: none;
	width: 42px !important;
	height: 42px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	border: 1px solid var(--edchat-line-2) !important;
	border-radius: 999px !important;
	background: var(--edchat-surface) !important;
	color: var(--edchat-ink-2) !important;
	font-family: inherit !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.edchat .edchat-attach:hover {
	background: var(--edchat-brand-soft) !important;
	border-color: var(--edchat-brand) !important;
	color: var(--edchat-brand-ink) !important;
}
.edchat .edchat-attach:focus-visible {
	outline: 2px solid var(--edchat-brand);
	outline-offset: 2px;
}
/* display:flex ci-dessus l emporterait sur [hidden] : on tranche, comme pour
   .edchat-form[hidden]. Hors relais, le trombone N EXISTE PAS a l ecran. */
.edchat-attach[hidden] { display: none !important; }
.edchat-attach svg { width: 18px; height: 18px; display: block; }

/* Champ fichier : jamais visible, ouvert par le trombone. */
.edchat-fic-input { display: none !important; }

/* Carte fichier — donnees chargees par piece_etat UNIQUEMENT (motif paylink).
   Icone par type, nom, taille lisible, bouton de telechargement. */
.edchat-b.edchat-fic {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: min(215px, 100%);
	background: var(--edchat-surface);
}
.edchat-fic-ico {
	flex: none;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: var(--edchat-brand-soft);
	color: var(--edchat-brand-ink);
}
.edchat-fic-ico svg { width: 18px; height: 18px; display: block; }
.edchat-fic-txt { flex: 1; min-width: 0; }
.edchat-fic-nom {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--edchat-ink);
	word-break: break-all;
	overflow-wrap: anywhere;
}
.edchat-fic-taille {
	margin: 1px 0 0;
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--edchat-ink-3);
}
/* Telechargement : pastille ronde discrete, orange au survol. <a> sans classe
   « btn » (head.php la stylerait), !important defensif tout de meme. */
.edchat-fic-dl,
.edchat .edchat-fic-dl {
	flex: none;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--edchat-line-2) !important;
	border-radius: 999px !important;
	background: var(--edchat-surface) !important;
	color: var(--edchat-ink-2) !important;
	text-decoration: none !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.edchat .edchat-fic-dl:hover {
	background: var(--edchat-brand) !important;
	border-color: var(--edchat-brand) !important;
	color: #fff !important;
}
.edchat-fic-dl svg { width: 15px; height: 15px; display: block; }

/* Barre de progression du televersement : sobre — 3 px, la marque, rien
   d autre. La largeur est posee en ligne par le JS (0 -> 100 %). */
.edchat-fic-prog {
	display: block;
	margin-top: 6px;
	height: 3px;
	border-radius: 999px;
	background: var(--edchat-surface-3);
	overflow: hidden;
}
.edchat-fic-prog i {
	display: block;
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background: var(--edchat-brand);
	transition: width .2s ease;
}
@media (prefers-reduced-motion: reduce) {
	.edchat-fic-prog i { transition: none; }
}

@media print { .edchat { display: none !important; } }

/* ------------------------------------------------ 12. Plein ecran mobile   */
/* Quand le chat occupe tout l'ecran, RIEN ne flotte au-dessus de lui : le
   badge Trusted Shops et la pastille CookieHub passaient PAR-DESSUS la zone
   de saisie (iPhone, 15/08 — saisie impossible). La classe est posee par le
   widget sur <body> a l'ouverture plein ecran, retiree a la fermeture. */
/* Les pastilles tierces ne sont PAS cachees pendant le chat : le widget les
   deplace en haut a droite par styles en ligne (demande de Filipe, 15/08).
   Voir lockBodyIfFullscreen() dans ed-chat.js. */
/* Et le panneau ouvert domine tout empilement du site, y compris les tiers. */
.edchat[data-open="1"] {
	z-index: 2147482000;
}


/* Mobile hors chat : le badge Trusted Shops et le temoin cookies convoitent le
   meme coin bas-gauche — pile VERTICALE imposee (badge au-dessus du temoin).
   !important dans une feuille bat leurs styles en ligne non-importants.
   (Leur data-disable-mobile est ignore par leur propre script, verifie 15/08.) */
@media (max-width: 767px) {
	button[id^="minimized-trustbadge"] {
		bottom: 160px !important;
		left: 8px !important;
		top: auto !important;
		right: auto !important;
	}
}