/* ═══════════════════════════════════════════════════════════════
   THOMCLIENT — L'ESPACE CLIENT (14/10/2026)

   Deux écrans dans une page : la PORTE (le mot-clé) et le TABLEAU
   (le projet en direct). Tout est préfixé `ec-` : la feuille commune
   (thomax.css) porte encore les classes de l'ancienne porte, et rien
   ici ne doit dépendre d'elles ni les déranger. Le voile de
   chargement, lui, est celui du site (.voile), au mot près.

   La marque : le crème, le noir, l'or, Codec Pro, et la « fiche » —
   le mot posé dans un cadre à bord pointillé doré, légèrement de
   biais. Elle sert ici à ce qui compte pour le client : son statut.
   ═══════════════════════════════════════════════════════════════ */

html:has(.ec), body:has(.ec) { background: #FFFDF7; color: #000; }
.ec-voile .voile-logo { width: 280px; }

.ec {
  --ec-creme: #FFFDF7;
  --ec-creme-2: #F6F1E4;
  --ec-creme-3: #EFE8D6;
  --ec-noir: #000;
  --ec-charbon: #0E0E0E;
  --ec-charbon-2: #1A1A1A;
  --ec-encre-2: #3A3A3A;
  --ec-encre-3: #5A5A5A;
  --ec-or: #D1A326;
  --ec-or-titre: #A8801A;
  --ec-or-lisible: #8A6B12;
  --ec-or-clair: #FFEEBA;
  --ec-vert: #0A7A54;
  --ec-vert-nuit: #3BD597;
  --ec-rouge: #B3261E;
  --ec-trait: rgba(0, 0, 0, 0.1);
  --ec-trait-nuit: rgba(255, 255, 255, 0.12);
  --ec-ressort: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ec-gouttiere: clamp(16px, 4vw, 40px);
  --ec-barre: 68px;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--police, 'Codec Pro', Arial, sans-serif);
  color: #000;
  background: var(--ec-creme);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.ec *:focus-visible { outline: 2px solid var(--ec-or); outline-offset: 3px; border-radius: 6px; }
:where(.ec) button { font: inherit; color: inherit; cursor: pointer; }
:where(.ec) a { color: inherit; }
.ec [hidden] { display: none !important; }
.ec-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ec [id] { scroll-margin-top: calc(var(--ec-barre) + 24px); }

/* La fiche dorée, signature de la marque. */
.ec-fiche {
  display: inline-block;
  padding: 0.04em 0.32em 0.1em;
  border: 2px dashed var(--ec-or);
  border-radius: 0.22em;
  background: #fff;
  transform: rotate(-2.2deg);
  line-height: 1;
  box-shadow: 0 10px 24px -14px rgba(138, 107, 18, 0.55);
}
.ec-or { color: var(--ec-or-titre); }

/* Le logo : THOM + CLIENT en or, comme ThomAdmin. */
.ec-marque { display: inline-flex; align-items: center; text-decoration: none; }
.ec-marque svg { width: 196px; height: 32px; overflow: visible; }
.ec-marque-losange { stroke: #000; transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(45deg); transition: transform 700ms var(--ec-ressort); }
.ec-marque:hover .ec-marque-losange { transform: rotate(135deg); }
.ec-marque-etincelle { fill: var(--ec-or); }
.ec-marque-mot { font-family: 'Questrial', var(--police); fill: #000; }
.ec-marque-or { fill: var(--ec-or-titre); }
.ec-marque--nuit .ec-marque-losange { stroke: #fff; }
.ec-marque--nuit .ec-marque-mot { fill: #fff; }
.ec-marque--nuit .ec-marque-or { fill: var(--ec-or); }

/* ═══════════════════════ LA PORTE ═══════════════════════
   Refonte du 14/10 : tout au centre, épuré. En fond, le logo Thomax
   en très grand et au trait fin, un halo doré qui suit le curseur et
   deux filets qui se croisent derrière le sceau. Au premier plan, une
   apparition orchestrée après le voile (≈ 900 ms) : le sceau se
   dessine, le surtitre, le titre mot par mot, la fiche qui tombe, puis
   le texte, le champ, le bouton, l'aide et le pied. */
.ec-porte {
  --ec-t0: 850ms;
  position: relative; isolation: isolate;
  display: grid; grid-template-rows: auto 1fr auto;
  min-height: 100vh; min-height: 100dvh;
  padding: clamp(18px, 3vw, 32px) var(--ec-gouttiere);
  overflow: hidden;
}
.ec-porte.est-sortie .ec-porte-centre, .ec-porte.est-sortie .ec-porte-haut, .ec-porte.est-sortie .ec-porte-pied { animation: ec-sortie 700ms cubic-bezier(0.7, 0, 0.2, 1) forwards; }

/* Le décor : le halo jaune des titres du site (thomax.css ›
   .ouverture::before, mêmes mesures), posé au-dessus du titre pour qu'il
   descende sur lui, et les tuiles flottantes des pages d'offre
   (offre-design.css › .od-outil-badge). */
.ec-porte-centre { position: relative; }
.ec-porte-centre::before {
  content: ''; position: absolute; z-index: -1;
  top: -28%; left: 50%; width: 1100px; height: 700px; max-width: 160vw;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 224, 138, 0.55) 0%, rgba(255, 224, 138, 0) 70%);
  pointer-events: none;
  animation: ec-fondu 1400ms var(--ec-ressort) 500ms backwards;
}
.ec-outils { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.ec-outil { position: absolute; display: grid; justify-items: center; pointer-events: auto; animation: ec-outil-entree 700ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.ec-outil-tuile {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: #fff; border: 1px solid transparent; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.4);
  animation: flotter 6s ease-in-out infinite; transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ec-outil-tuile svg { width: 26px; height: 26px; }
.ec-outil:hover .ec-outil-tuile { border-color: var(--ec-or); box-shadow: 0 0 0 3px rgba(209, 163, 38, 0.18), 0 18px 34px -16px rgba(0, 0, 0, 0.45); }
.ec-outil--1 { top: 22%; left: 9%;   animation-delay: calc(var(--ec-t0) + 1000ms); }
.ec-outil--2 { top: 44%; left: 4.5%; animation-delay: calc(var(--ec-t0) + 1150ms); }
.ec-outil--3 { top: 66%; left: 10%;  animation-delay: calc(var(--ec-t0) + 1300ms); }
.ec-outil--4 { top: 20%; right: 9%;  animation-delay: calc(var(--ec-t0) + 1070ms); }
.ec-outil--5 { top: 42%; right: 5%;  animation-delay: calc(var(--ec-t0) + 1220ms); }
.ec-outil--6 { top: 64%; right: 10.5%; animation-delay: calc(var(--ec-t0) + 1370ms); }
.ec-outil--1 .ec-outil-tuile { animation-delay: 0s; }
.ec-outil--2 .ec-outil-tuile { animation-delay: -1.1s; }
.ec-outil--3 .ec-outil-tuile { animation-delay: -2.3s; }
.ec-outil--4 .ec-outil-tuile { animation-delay: -3s; }
.ec-outil--5 .ec-outil-tuile { animation-delay: -4.1s; }
.ec-outil--6 .ec-outil-tuile { animation-delay: -5.2s; }
.ec-porte.est-sortie .ec-outils { animation: ec-sortie 600ms cubic-bezier(0.7, 0, 0.2, 1) forwards; }
@keyframes ec-outil-entree { from { opacity: 0; transform: scale(0.6) translateY(16px); } }
/* Comme sur le site : deux tuiles par côté quand la marge rétrécit, plus
   aucune quand il n'y a plus de marge où les poser. */
@media (max-width: 1240px) { .ec-outil--2, .ec-outil--5 { display: none; } }
@media (max-width: 1000px) { .ec-outils { display: none; } }

/* Le haut et le pied. */
.ec-porte-haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; animation: ec-fondu 900ms var(--ec-ressort) calc(var(--ec-t0) + 900ms) backwards; }
.ec-porte-retour { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ec-trait); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px); font-size: 0.8125rem; font-weight: 600; text-decoration: none; transition: background 250ms, color 250ms, transform 320ms var(--ec-ressort); }
.ec-porte-retour svg { width: 12px; height: 12px; transition: transform 320ms var(--ec-ressort); }
.ec-porte-retour:hover { background: #000; color: #fff; transform: translateY(-2px); }
.ec-porte-retour:hover svg { transform: translate(2px, -2px); }
.ec-porte-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 0.8125rem; color: var(--ec-encre-3); animation: ec-fondu 900ms var(--ec-ressort) calc(var(--ec-t0) + 1500ms) backwards; }
.ec-porte-confiance { display: inline-flex; align-items: center; gap: 8px; }
.ec-porte-confiance svg { width: 14px; height: 14px; color: var(--ec-or-lisible); }

/* Le centre. */
.ec-porte-centre { align-self: center; justify-self: center; width: min(100%, 560px); padding: clamp(28px, 6vh, 64px) 0; text-align: center; }
.ec-sceau { display: block; width: 58px; height: 58px; margin: 0 auto 22px; }
.ec-sceau .ec-logo-tx--anime rect { animation-delay: var(--ec-t0); }
.ec-sceau .ec-logo-tx--anime path { animation-delay: calc(var(--ec-t0) + 650ms); }
.ec-porte.est-sortie .ec-sceau .ec-logo-tx rect { transform: rotate(135deg); }
.ec-porte-sur { margin: 0 0 18px; overflow: hidden; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ec-or-lisible); }
.ec-porte-sur span { display: inline-block; animation: ec-monte-masque 900ms var(--ec-ressort) calc(var(--ec-t0) + 450ms) backwards; }
.ec-porte-titre { margin: 0 0 22px; font-size: clamp(2.9rem, 8.4vw, 6rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.045em; }
.ec-ligne { display: block; }
.ec-mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ec-mot > span { display: inline-block; animation: ec-monte-masque 1000ms var(--ec-ressort) calc(var(--ec-t0) + 600ms + var(--d) * 110ms) backwards; }
.ec-ligne--fiche { margin-top: 0.1em; }
/* La fiche de l'accueil au détail près (thomax.css › .fiche) : tiret de 5 px, coins de 10 px, −3°, ombre douce. */
.ec-porte-fiche { position: relative; display: inline-grid; padding: 0.06em 0.34em 0.12em; border: 5px dashed var(--ec-or); border-radius: 10px; transform: rotate(-3deg); box-shadow: 0 1px 16px rgba(0, 0, 0, 0.25); transition: width 600ms var(--ec-ressort); overflow: hidden; vertical-align: top; animation: ec-fiche-tombe 1100ms cubic-bezier(0.34, 1.4, 0.5, 1) calc(var(--ec-t0) + 900ms) backwards; }
.ec-fiche-mot { display: inline-block; white-space: nowrap; color: #000; }
.ec-fiche-mot.est-sort { animation: ec-mot-sort 380ms cubic-bezier(0.7, 0, 0.84, 0) forwards; }
.ec-fiche-mot.est-entre { animation: ec-mot-entre 520ms cubic-bezier(0.16, 1, 0.3, 1); }
.ec-porte-sous { max-width: 30em; margin: 0 auto 34px; font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.55; color: var(--ec-encre-2); animation: ec-fondu-monte 1000ms var(--ec-ressort) calc(var(--ec-t0) + 1150ms) backwards; }
.ec-porte-form { text-align: left; animation: ec-fondu-monte 1000ms var(--ec-ressort) calc(var(--ec-t0) + 1300ms) backwards; }
.ec-porte-aide { margin: 20px 0 0; font-size: 0.875rem; color: var(--ec-encre-3); animation: ec-fondu 900ms var(--ec-ressort) calc(var(--ec-t0) + 1500ms) backwards; }
.ec-porte-aide a { color: var(--ec-or-lisible); font-weight: 700; text-underline-offset: 3px; }

/* Le mot-clé : une vraie saisie, rendue en tuiles. */
.ec-code-libelle { display: block; margin-bottom: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--ec-encre-2); }
.ec-code-cadre {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 76px; padding: 14px 16px;
  border: 1px dashed rgba(0, 0, 0, 0.22); border-radius: 16px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(10px);
  box-shadow: 0 0.7px 0.7px -0.3px rgba(16, 49, 77, 0.05), 0 3.6px 3.6px -0.9px rgba(16, 49, 77, 0.06), 0 13.6px 13.6px -1.5px rgba(16, 49, 77, 0.07), 0 30px 30px -1.8px rgba(16, 49, 77, 0.08);
  transition: border-color 250ms, box-shadow 350ms, transform 400ms var(--ec-ressort); cursor: text;
}
.ec-code-cadre.est-actif { border-style: solid; border-color: var(--ec-or); box-shadow: 0 0 0 5px rgba(209, 163, 38, 0.14), 0 30px 40px -24px rgba(138, 107, 18, 0.35); transform: translateY(-2px); }
.ec-code-cadre.est-faux { border-style: solid; border-color: var(--ec-rouge); animation: ec-secousse 420ms; }
.ec-code-saisie { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 16px; border: 0; background: transparent; color: transparent; caret-color: transparent; font: 600 1.4rem/1 var(--police); letter-spacing: 0.2em; text-transform: uppercase; outline: none; z-index: 2; }
.ec-code-saisie::selection { background: transparent; }
.ec-tuiles { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 4px; pointer-events: none; min-height: 46px; }
.ec-tuile { display: grid; place-items: center; width: 30px; height: 42px; border-radius: 8px; background: var(--ec-creme-2); font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; animation: ec-tuile-entre 320ms cubic-bezier(0.34, 1.5, 0.5, 1); }
.ec-tuile--or { background: var(--ec-or); color: #000; transform: translateY(-3px); transition: background 200ms, transform 300ms var(--ec-ressort); }
.ec-tuile-tiret { width: 12px; display: grid; place-items: center; }
.ec-tuile-tiret::before { content: ""; width: 6px; height: 6px; background: var(--ec-or); transform: rotate(45deg); border-radius: 1px; }
.ec-curseur { width: 2px; height: 30px; margin-left: 3px; background: var(--ec-or); border-radius: 2px; animation: ec-clignote 1s steps(1) infinite; }
.ec-code-cadre:not(.est-actif) .ec-curseur { opacity: 0; animation: none; }
.ec-code-fantome { font-size: 1rem; letter-spacing: 0.16em; color: #B5B0A4; font-weight: 600; }
.ec-porte-erreur { min-height: 1.5em; margin: 12px 0 0; font-size: 0.9375rem; color: var(--ec-rouge); text-align: center; }
.ec-porte-erreur:empty { min-height: 0; margin: 0; }
.ec-porte-form .ec-bouton { margin-top: 14px; }
.ec-porte-form.est-pret .ec-bouton { --fond-bouton: #000; box-shadow: 0 0 0 4px rgba(209, 163, 38, 0.3), 0 20px 34px -18px rgba(138, 107, 18, 0.9); }
.ec-bouton.est-verif::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(209, 163, 38, 0.1), rgba(209, 163, 38, 0.6)); transform-origin: left; animation: ec-verif 1.3s var(--ec-ressort) infinite; z-index: -1; }

/* Le bouton du site, au détail près (thomax.css › .bouton) : trait
   tireté, ombre en six couches, texte qui roule au survol, flèche qui
   glisse. Seules les variantes de fond sont propres à l'espace client. */
.ec-bouton {
  --fond-bouton: #000; --encre-bouton: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 18px; border-radius: 10px;
  background: var(--fond-bouton); color: var(--encre-bouton);
  border: 1px dashed var(--trait-bouton, rgba(255, 255, 255, 0.45));
  box-shadow: 0 0.7px 0.7px -0.3px rgba(16, 49, 77, 0.05), 0 1.8px 1.8px -0.6px rgba(16, 49, 77, 0.06), 0 3.6px 3.6px -0.9px rgba(16, 49, 77, 0.06), 0 6.9px 6.9px -1.2px rgba(16, 49, 77, 0.06), 0 13.6px 13.6px -1.5px rgba(16, 49, 77, 0.07), 0 30px 30px -1.8px rgba(16, 49, 77, 0.10);
  font-size: 0.8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; text-decoration: none;
  overflow: hidden; isolation: isolate;
  transition: transform var(--pose, 320ms) var(--ressort, ease), box-shadow var(--pose, 320ms) ease;
}
.ec-bouton:hover { transform: translateY(-2px); }
.ec-bouton:active { transform: translateY(0); }
.ec-bouton .roule > span { transition: transform var(--ample, 640ms) var(--ressort, ease); }
.ec-bouton:hover .roule > span { transform: translateY(-1em); }
.ec-bouton:hover .bouton-fleche { transform: translate(2px, -2px); }
.ec-bouton:disabled { opacity: 0.6; cursor: progress; transform: none; }
.ec-bouton--large { width: 100%; min-height: 56px; }
.ec-bouton--clair { --fond-bouton: #fff; --encre-bouton: #000; --trait-bouton: rgba(0, 0, 0, 0.22); }
.ec-bouton--or { --fond-bouton: var(--ec-or); --encre-bouton: #000; --trait-bouton: rgba(0, 0, 0, 0.30); }
.ec-bouton--fin { --fond-bouton: #fff; --encre-bouton: #000; --trait-bouton: rgba(0, 0, 0, 0.22); }
.ec-bouton--nuit { --fond-bouton: transparent; --encre-bouton: #fff; --trait-bouton: rgba(255, 255, 255, 0.45); box-shadow: none; }
.ec-rideau { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none; }
.ec-rideau-losange { width: 80px; height: 80px; background: #000; transform: rotate(45deg) scale(0); border-radius: 8px; }
.ec-rideau.est-joue .ec-rideau-losange { animation: ec-rideau 1100ms cubic-bezier(0.7, 0, 0.2, 1) forwards; }

@keyframes ec-fondu { from { opacity: 0; } }
@keyframes ec-fondu-monte { from { opacity: 0; transform: translateY(22px); } }
@keyframes ec-monte-masque { from { transform: translateY(110%); } }
@keyframes ec-fiche-tombe { 0% { opacity: 0; transform: translateY(-60px) rotate(-14deg) scale(0.9); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(-3deg); } }
@keyframes ec-mot-sort { to { transform: translateY(-110%); opacity: 0; } }
@keyframes ec-mot-entre { from { transform: translateY(110%); opacity: 0; } }
@keyframes ec-sortie { to { opacity: 0; transform: translateY(-24px) scale(0.98); } }
@keyframes ec-verif { from { transform: scaleX(0); } to { transform: scaleX(1); opacity: 0; } }

@media (max-width: 640px) {
  .ec-porte-haut .ec-marque svg { width: 150px; }
  .ec-porte-retour { padding: 7px 12px; font-size: 0.75rem; }
  .ec-porte-centre { padding: 24px 0 28px; }
  .ec-sceau { width: 48px; height: 48px; margin-bottom: 18px; }
  .ec-porte-sur { margin-bottom: 14px; }
  .ec-porte-titre { font-size: clamp(2.5rem, 12.5vw, 3.4rem); }
  .ec-code-cadre { min-height: 68px; padding: 12px 10px; }
  .ec-porte-pied { justify-content: center; text-align: center; font-size: 0.75rem; }
}

/* ═══════════════════════ LE TABLEAU ═══════════════════════ */
.ec-tableau { position: relative; }

/* La barre : logo, sections, direct, compte. */
.ec-barre {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  min-height: var(--ec-barre); padding: 10px var(--ec-gouttiere);
  background: rgba(255, 253, 247, 0.84); backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color 300ms, box-shadow 300ms;
}
.ec-barre.est-collee { border-bottom-color: var(--ec-trait); box-shadow: 0 10px 30px -24px rgba(0, 0, 0, 0.4); }
.ec-sommaire { position: relative; justify-self: center; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.04); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ec-sommaire::-webkit-scrollbar { display: none; }
.ec-sommaire a { position: relative; z-index: 1; flex: none; padding: 8px 14px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: var(--ec-encre-3); transition: color 250ms; }
.ec-sommaire a:hover { color: #000; }
.ec-sommaire a[aria-current="true"] { color: #fff; }
.ec-sommaire-pastille { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: #000; transition: transform 450ms var(--ec-ressort), width 450ms var(--ec-ressort); }
.ec-barre-droite { display: flex; align-items: center; gap: 12px; }
.ec-direct { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ec-encre-3); white-space: nowrap; }
.ec-direct::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #B9B4A8; }
.ec-direct.est-vivant::before { background: var(--ec-vert); box-shadow: 0 0 0 4px rgba(10, 122, 84, 0.16); animation: ec-pouls 1.8s infinite; }
.ec-compte { position: relative; }
.ec-compte-bouton { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border: 1.5px solid var(--ec-trait); border-radius: 999px; background: #fff; font-size: 0.8125rem; font-weight: 600; transition: border-color 200ms; }
.ec-compte-bouton:hover, .ec-compte-bouton[aria-expanded="true"] { border-color: var(--ec-or); }
.ec-monogramme { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none; }
.ec-monogramme::before { content: ""; position: absolute; inset: 5px; border-radius: 5px; background: #000; transform: rotate(45deg); transition: transform 600ms var(--ec-ressort), background 300ms; }
.ec-monogramme span { position: relative; color: #fff; font-size: 0.6875rem; font-weight: 700; }
.ec-compte-bouton:hover .ec-monogramme::before { transform: rotate(135deg); background: var(--ec-or); }
.ec-compte-bouton:hover .ec-monogramme span { color: #000; }
.ec-compte-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 260px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--ec-trait); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45); transform-origin: top right; animation: ec-menu 280ms var(--ec-ressort); }
.ec-compte-menu b { display: block; font-size: 0.9375rem; }
.ec-compte-menu small { display: block; margin: 2px 0 14px; color: var(--ec-encre-3); font-size: 0.8125rem; }
.ec-compte-menu .ec-bouton { width: 100%; min-height: 42px; }
.ec-bandeau-apercu { margin: 0; padding: 10px var(--ec-gouttiere); background: #000; color: #fff; font-size: 0.875rem; text-align: center; }
.ec-bandeau-apercu b { color: var(--ec-or); }

.ec-cadre { width: min(1240px, 100%); margin: 0 auto; padding: 0 var(--ec-gouttiere); }

.ec-onglets { display: flex; gap: 8px; padding-top: 28px; overflow-x: auto; scrollbar-width: none; }
.ec-onglet { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 18px; border: 1.5px solid var(--ec-trait); border-radius: 999px; background: #fff; font-size: 0.875rem; font-weight: 600; transition: background 200ms, color 200ms, border-color 200ms, transform 300ms var(--ec-ressort); }
.ec-onglet:hover { transform: translateY(-1px); border-color: var(--ec-or); }
.ec-onglet[aria-selected="true"] { background: #000; color: #fff; border-color: #000; }
.ec-onglet svg { width: 16px; height: 16px; }

/* L'en-tête : le bonjour, le rythme et l'anneau. */
.ec-tete { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(20px, 3vw, 40px); padding: clamp(28px, 5vw, 60px) 0 clamp(28px, 4vw, 44px); align-items: stretch; }
.ec-date-jour { margin: 0 0 14px; font-size: 0.875rem; color: var(--ec-encre-3); text-transform: capitalize; }
.ec-bonjour { margin: 0 0 18px; font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.045em; }
.ec-bonjour-mot { display: inline-block; animation: ec-mot 900ms var(--ec-ressort) backwards; }
.ec-accueil { margin: 0 0 22px; max-width: 36em; font-size: 1.125rem; line-height: 1.55; color: var(--ec-encre-2); }
.ec-rythme { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 26px; padding: 14px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--ec-trait); max-width: 40em; font-size: 0.9375rem; line-height: 1.5; }
.ec-rythme::before { content: ""; flex: none; margin-top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ec-vert); box-shadow: 0 0 0 5px rgba(10, 122, 84, 0.14); }
.ec-rythme.est-decale::before { background: var(--ec-or); box-shadow: 0 0 0 5px rgba(209, 163, 38, 0.2); }
.ec-rythme.est-attente::before { background: #9B958A; box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.06); }
.ec-rythme b { font-weight: 700; }
.ec-nouveautes { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--ec-or-clair); color: var(--ec-or-lisible); font-size: 0.8125rem; font-weight: 700; text-decoration: none; animation: ec-monte 700ms var(--ec-ressort) 600ms backwards; }
.ec-projet-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 20px; }
.ec-projet-titre { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; }
.ec-statut { font-size: 0.875rem; font-weight: 700; }
.ec-statut.ec-fiche { padding: 6px 12px 7px; border-radius: 10px; }
.ec-reperes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ec-repere { position: relative; padding: 18px; border: 1px solid var(--ec-trait); border-radius: 22px; background: #fff; min-width: 0; overflow: hidden; transition: transform 400ms var(--ec-ressort), box-shadow 400ms, border-color 300ms; }
.ec-repere:hover { transform: translateY(-3px); border-color: var(--ec-or); box-shadow: 0 20px 40px -30px rgba(138, 107, 18, 0.6); }
.ec-repere-nom { display: block; margin-bottom: 10px; font-size: 0.8125rem; color: var(--ec-encre-3); }
.ec-repere-valeur { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.ec-repere-plus { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--ec-or-lisible); font-weight: 600; }
.ec-repere--fin { background: #000; color: #fff; border-color: #000; }
.ec-repere--fin .ec-repere-nom { color: rgba(255, 255, 255, 0.6); }
.ec-repere--fin .ec-repere-plus { color: var(--ec-or); }
.ec-repere-j { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-bottom: 6px; font-variant-numeric: tabular-nums; color: var(--ec-or); }

.ec-jauge {
  position: relative; display: grid; grid-template-rows: 1fr auto; gap: 20px; padding: 28px; border-radius: 30px;
  background: radial-gradient(80% 70% at var(--jx, 75%) var(--jy, 15%), #2C2413 0%, #0E0E0E 62%, #050505 100%);
  color: #fff; overflow: hidden; min-height: 400px;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms var(--ec-ressort);
  will-change: transform;
}
.ec-anneau { position: relative; width: min(100%, 250px); aspect-ratio: 1; margin: 0 auto; align-self: center; }
.ec-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ec-anneau circle { fill: none; stroke-width: 8; }
.ec-anneau-fond { stroke: rgba(255, 255, 255, 0.08); }
.ec-anneau-arc { stroke: url(#ec-degrade-or-2); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1800ms var(--ec-ressort); filter: drop-shadow(0 0 6px rgba(209, 163, 38, 0.5)); }
.ec-anneau-temps { stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; stroke-dasharray: 0 100; transition: stroke-dasharray 1800ms var(--ec-ressort) 200ms; }
.ec-anneau-graduation { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; stroke-dasharray: 0.3 4.7; }
.ec-anneau-centre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ec-anneau-chiffre { font-size: clamp(3rem, 6vw, 4.4rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.ec-anneau-chiffre sup { font-size: 0.4em; color: var(--ec-or); vertical-align: 0.9em; margin-left: 2px; }
.ec-anneau-legende { margin-top: 8px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); }
.ec-jauge-pied { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.65); border-top: 1px solid var(--ec-trait-nuit); padding-top: 16px; }
.ec-jauge-pied b { display: block; font-size: 1rem; color: #fff; margin-top: 2px; }
.ec-jauge-legende { position: absolute; top: 22px; left: 26px; display: grid; gap: 6px; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }
.ec-jauge-legende span { display: inline-flex; align-items: center; gap: 8px; }
.ec-jauge-legende i { width: 14px; height: 3px; border-radius: 2px; background: var(--ec-or); }
.ec-jauge-legende i.est-temps { background: rgba(255, 255, 255, 0.4); height: 2px; }

/* À vous de jouer. */
.ec-attentes { display: grid; gap: 12px; margin: 0 0 clamp(28px, 4vw, 44px); }
.ec-attente-carte {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 22px; align-items: center;
  padding: 22px 24px; border: 2px dashed var(--ec-or); border-radius: 26px; background: linear-gradient(120deg, #FFF6D8, #fff 55%);
  overflow: hidden;
}
.ec-attente-carte::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.75) 50%, transparent 60%); transform: translateX(-100%); animation: ec-reflet 5s 1.5s infinite; pointer-events: none; }
.ec-attente-icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #000; color: var(--ec-or); animation: ec-battement-doux 2.4s ease-in-out infinite; }
.ec-attente-icone svg { width: 24px; height: 24px; }
.ec-attente-quoi { display: block; margin-bottom: 4px; font-size: 0.8125rem; font-weight: 700; color: var(--ec-or-lisible); }
.ec-attente-texte { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.ec-attente-etape { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--ec-encre-3); }

/* Le compte à rebours : temps écoulé contre travail accompli. */
.ec-rebours { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 30px; background: #000; color: #fff; overflow: hidden; }
.ec-rebours::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; background: radial-gradient(closest-side, rgba(209, 163, 38, 0.22), transparent); pointer-events: none; }
.ec-rebours-j { position: relative; font-size: clamp(4.4rem, 11vw, 9rem); font-weight: 700; letter-spacing: -0.06em; line-height: 0.85; font-variant-numeric: tabular-nums; }
.ec-rebours-j small { display: block; margin-top: 12px; font-size: 0.875rem; letter-spacing: 0; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.ec-rebours-j em { font-style: normal; color: var(--ec-or); }
.ec-rebours-droite { position: relative; display: grid; gap: 22px; }
.ec-rebours-titre { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.1; }
.ec-rebours-titre em { font-style: normal; color: var(--ec-or); }
.ec-compare { display: grid; gap: 14px; }
.ec-compare-ligne { display: grid; grid-template-columns: 150px minmax(0, 1fr) 52px; gap: 14px; align-items: center; font-size: 0.875rem; color: rgba(255, 255, 255, 0.75); }
.ec-compare-ligne b { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.ec-compare-piste { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ec-compare-piste span { display: block; height: 100%; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, #A8801A, #F2C94C); transform-origin: left; transform: scaleX(0); transition: transform 1600ms var(--ec-ressort); }
.ec-compare-piste.est-temps span { background: rgba(255, 255, 255, 0.55); }
.est-vu .ec-compare-piste span { transform: scaleX(1); }
.ec-rebours-note { margin: 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); line-height: 1.5; }

/* Les sections. */
.ec-section { padding: clamp(40px, 6vw, 80px) 0 0; }
.ec-section-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(22px, 3vw, 34px); }
.ec-h2 { margin: 0; font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.ec-h2 em { font-style: normal; color: var(--ec-or-titre); }
.ec-section-note { margin: 0; font-size: 0.9375rem; color: var(--ec-encre-3); max-width: 34em; }
.ec-vide { margin: 0; padding: 26px; border: 1.5px dashed var(--ec-trait); border-radius: 22px; color: var(--ec-encre-3); font-size: 0.9375rem; text-align: center; }
.ec-revele { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ec-ressort), transform 900ms var(--ec-ressort); }
.ec-revele.est-vu { opacity: 1; transform: none; }

/* Le calendrier : une barre par étape, le repère « aujourd'hui ». */
.ec-calendrier { position: relative; padding: 24px; border-radius: 30px; background: #fff; border: 1px solid var(--ec-trait); overflow: hidden; }
.ec-cal-mois { position: relative; height: 26px; margin-left: var(--ec-cal-gauche); border-bottom: 1px solid var(--ec-trait); }
.ec-cal-mois span { position: absolute; top: 0; font-size: 0.75rem; font-weight: 600; color: var(--ec-encre-3); text-transform: capitalize; padding-left: 6px; border-left: 1px solid var(--ec-trait); height: 26px; }
.ec-cal-lignes { position: relative; display: grid; gap: 6px; padding-top: 12px; }
.ec { --ec-cal-gauche: 200px; }
.ec-cal-ligne { display: grid; grid-template-columns: var(--ec-cal-gauche) minmax(0, 1fr); align-items: center; min-height: 40px; border: 0; padding: 0; background: none; text-align: left; border-radius: 12px; transition: background 200ms; }
.ec-cal-ligne:hover, .ec-cal-ligne[aria-expanded="true"] { background: var(--ec-creme); }
.ec-cal-nom { padding: 0 14px 0 8px; font-size: 0.875rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-cal-piste { position: relative; height: 40px; }
.ec-cal-barre { position: absolute; top: 9px; height: 22px; border-radius: 7px; left: var(--g); width: var(--l); min-width: 8px; background: var(--ec-creme-3); transform-origin: left; transform: scaleX(0); transition: transform 1000ms var(--ec-ressort); transition-delay: calc(var(--i) * 70ms); }
.est-vu .ec-cal-barre { transform: scaleX(1); }
.ec-cal-barre.est-fait { background: linear-gradient(90deg, #A8801A, #E0B93E); }
.ec-cal-barre.est-en-cours { background: repeating-linear-gradient(-45deg, #000 0 8px, #222 8px 16px); box-shadow: 0 0 0 3px rgba(209, 163, 38, 0.35); }
.ec-cal-barre.est-en-cours::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(209, 163, 38, 0.6), transparent); background-size: 200% 100%; animation: ec-defile 2.4s linear infinite; }
.ec-cal-aujourdhui { position: absolute; top: -38px; bottom: 0; left: calc(var(--ec-cal-gauche) + (100% - var(--ec-cal-gauche)) * var(--t)); width: 2px; background: var(--ec-or); z-index: 2; pointer-events: none; }
.ec-cal-aujourdhui::before { content: "Aujourd’hui"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: var(--ec-or); color: #000; font-size: 0.6875rem; font-weight: 700; white-space: nowrap; }
.ec-cal-aujourdhui::after { content: ""; position: absolute; bottom: -4px; left: -4px; width: 10px; height: 10px; background: var(--ec-or); transform: rotate(45deg); border-radius: 2px; animation: ec-pouls-or 2s infinite; }
.ec-cal-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--ec-encre-3); }
.ec-cal-legende li { display: inline-flex; align-items: center; gap: 8px; }
.ec-cal-legende i { width: 18px; height: 8px; border-radius: 3px; }

/* La frise des étapes. */
.ec-frise-piste { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; padding: 8px 2px 18px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.ec-etape { position: relative; scroll-snap-align: start; padding: 0 10px 0 0; border: 0; background: none; text-align: left; }
.ec-etape-rail { position: relative; display: flex; align-items: center; height: 30px; margin-bottom: 16px; }
.ec-etape-rail::before { content: ""; position: absolute; left: 0; right: -10px; top: 50%; height: 2px; background: var(--ec-trait); }
.ec-etape-rail::after { content: ""; position: absolute; left: 0; right: -10px; top: 50%; height: 2px; background: var(--ec-or); transform-origin: left; transform: scaleX(var(--rempli, 0)); transition: transform 900ms var(--ec-ressort); transition-delay: calc(var(--i, 0) * 110ms); }
.ec-etape:last-child .ec-etape-rail::before, .ec-etape:last-child .ec-etape-rail::after { right: 50%; }
.ec-etape-noeud { position: relative; z-index: 1; width: 22px; height: 22px; border: 2px solid #C9C3B5; border-radius: 4px; background: var(--ec-creme); transform: rotate(45deg); transition: background 300ms, border-color 300ms, transform 400ms var(--ec-ressort); }
.ec-etape.est-fait .ec-etape-noeud { background: var(--ec-or); border-color: var(--ec-or); }
.ec-etape.est-fait .ec-etape-noeud::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #000; border-width: 0 2px 2px 0; }
.ec-etape.est-en-cours .ec-etape-noeud { border-color: var(--ec-or); background: #fff; box-shadow: 0 0 0 6px rgba(209, 163, 38, 0.22); animation: ec-pouls-or 2s infinite; }
.ec-etape.est-en-cours .ec-etape-noeud::after { content: ""; position: absolute; inset: 4px; background: var(--ec-or); border-radius: 2px; }
.ec-etape-num { display: block; font-size: 0.75rem; color: var(--ec-encre-3); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.ec-etape-nom { display: block; font-size: 1rem; font-weight: 700; line-height: 1.25; padding-right: 8px; transition: color 200ms; }
.ec-etape-date { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--ec-encre-3); }
.ec-etape:hover .ec-etape-noeud { transform: rotate(45deg) scale(1.15); }
.ec-etape[aria-expanded="true"] .ec-etape-nom { color: var(--ec-or-titre); }
.ec-etape[aria-expanded="true"] .ec-etape-noeud { transform: rotate(45deg) scale(1.2); }
.ec-etape-attente { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ec-or-clair); color: var(--ec-or-lisible); font-size: 0.6875rem; font-weight: 700; }
.ec-etape-detail { margin-top: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 24px; align-items: center; padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--ec-trait); animation: ec-ouvre 420ms var(--ec-ressort); }
.ec-etape-detail h3 { margin: 0 0 6px; font-size: 1.25rem; letter-spacing: -0.01em; }
.ec-etape-detail p { margin: 0; color: var(--ec-encre-2); line-height: 1.55; }
.ec-etape-detail .ec-etape-detail-attente { margin-top: 10px; color: var(--ec-or-lisible); font-weight: 600; }
.ec-etape-detail-num { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.04em; color: var(--ec-or); line-height: 1; }
.ec-etape-detail-dates { font-size: 0.875rem; color: var(--ec-encre-3); text-align: right; white-space: nowrap; }
.ec-etape-detail-temps { display: block; margin-top: 8px; height: 6px; width: 160px; margin-left: auto; border-radius: 999px; background: var(--ec-creme-2); overflow: hidden; }
.ec-etape-detail-temps span { display: block; height: 100%; width: var(--v); background: var(--ec-or); border-radius: inherit; animation: ec-barre 900ms var(--ec-ressort) both; transform-origin: left; }

/* Livrables et budget côte à côte. */
.ec-duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.ec-livrables { display: grid; gap: 10px; }
.ec-livrable { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--ec-trait); border-radius: 20px; background: #fff; text-decoration: none; transition: transform 300ms var(--ec-ressort), box-shadow 300ms, border-color 300ms; }
a.ec-livrable:hover { transform: translateY(-2px) translateX(2px); border-color: var(--ec-or); box-shadow: 0 18px 36px -24px rgba(138, 107, 18, 0.55); }
.ec-livrable-icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--ec-creme-2); color: var(--ec-or-lisible); transition: background 300ms, color 300ms, transform 500ms var(--ec-ressort); }
a.ec-livrable:hover .ec-livrable-icone { background: #000; color: var(--ec-or); transform: rotate(-8deg); }
.ec-livrable-icone svg { width: 22px; height: 22px; }
.ec-livrable-nom { display: block; font-weight: 700; line-height: 1.3; }
.ec-livrable-texte { display: block; margin-top: 3px; font-size: 0.875rem; color: var(--ec-encre-3); line-height: 1.45; }
.ec-livrable-date { font-size: 0.8125rem; color: var(--ec-encre-3); text-align: right; white-space: nowrap; }
.ec-livrable-date b { display: block; color: #000; font-size: 0.8125rem; }
.ec-neuf { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ec-or-clair); color: var(--ec-or-lisible); font-size: 0.6875rem; font-weight: 700; vertical-align: 2px; }

.ec-budget { padding: clamp(22px, 3vw, 32px); border-radius: 30px; background: var(--ec-charbon); color: #fff; }
.ec-budget-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 4px; }
.ec-budget-total b { font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; line-height: 1; }
.ec-budget-total span { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }
.ec-budget-sous { margin: 0 0 22px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }
.ec-budget-barre { display: flex; gap: 3px; height: 14px; margin-bottom: 14px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.ec-budget-barre span { height: 100%; transform-origin: left; transform: scaleX(0); transition: transform 1100ms var(--ec-ressort); }
.est-vu .ec-budget-barre span { transform: scaleX(1); }
.ec-budget-barre .est-paye { background: linear-gradient(90deg, #A8801A, #F2C94C); }
.ec-budget-barre .est-a-payer { background: repeating-linear-gradient(-45deg, rgba(209, 163, 38, 0.75) 0 6px, rgba(209, 163, 38, 0.35) 6px 12px); }
.ec-budget-barre .est-a-venir { background: rgba(255, 255, 255, 0.16); }
.ec-budget-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); }
.ec-budget-legende li { display: inline-flex; align-items: center; gap: 8px; }
.ec-budget-legende i { width: 10px; height: 10px; border-radius: 3px; }
.ec-budget-legende b { color: #fff; font-variant-numeric: tabular-nums; }
.ec-prochaine { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: rgba(209, 163, 38, 0.12); border: 1px solid rgba(209, 163, 38, 0.3); font-size: 0.875rem; }
.ec-prochaine b { color: var(--ec-or); font-variant-numeric: tabular-nums; }
.ec-echeances { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ec-echeance { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--ec-trait-nuit); }
.ec-echeance-nom { font-weight: 600; }
.ec-echeance-date { grid-column: 1; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); }
.ec-echeance-montant { grid-row: 1; grid-column: 2; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ec-echeance-etat { grid-column: 2; justify-self: end; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.ec-echeance-etat.est-paye { background: rgba(59, 213, 151, 0.14); color: var(--ec-vert-nuit); }
.ec-echeance-etat.est-a-payer { background: rgba(209, 163, 38, 0.18); color: var(--ec-or); }
.ec-echeance-etat.est-a-venir { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); }
.ec-echeance a { color: var(--ec-or); font-size: 0.8125rem; font-weight: 600; text-underline-offset: 3px; }

/* Les nouvelles et l'équipe. */
.ec-duo--fil { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
.ec-fil { position: relative; display: grid; margin: 0; padding: 0 0 0 30px; list-style: none; }
.ec-fil::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--ec-or), rgba(209, 163, 38, 0.1)); transform-origin: top; transform: scaleY(0); transition: transform 1400ms var(--ec-ressort); }
.est-vu .ec-fil::before { transform: scaleY(1); }
.ec-nouvelle { position: relative; padding: 0 0 28px; }
.ec-nouvelle::before { content: ""; position: absolute; left: -27px; top: 6px; width: 12px; height: 12px; background: var(--ec-creme); border: 2px solid var(--ec-or); transform: rotate(45deg); border-radius: 2px; }
.ec-nouvelle:first-child::before { background: var(--ec-or); }
.ec-nouvelle-quand { display: block; margin-bottom: 6px; font-size: 0.8125rem; color: var(--ec-encre-3); }
.ec-nouvelle-titre { margin: 0 0 6px; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; }
.ec-nouvelle-texte { margin: 0; line-height: 1.6; color: var(--ec-encre-2); white-space: pre-line; }
.ec-plus { margin-top: 4px; padding: 10px 18px; border: 1.5px solid var(--ec-trait); border-radius: 999px; background: #fff; font-size: 0.8125rem; font-weight: 700; }
.ec-plus:hover { border-color: var(--ec-or); }

.ec-equipe { position: sticky; top: calc(var(--ec-barre) + 20px); padding: 26px; border-radius: 30px; background: #fff; border: 1px solid var(--ec-trait); }
.ec-equipe-qui { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ec-equipe-nom { display: block; font-size: 1.25rem; font-weight: 700; }
.ec-equipe-role { display: block; font-size: 0.875rem; color: var(--ec-encre-3); }
.ec-equipe p { margin: 0 0 18px; color: var(--ec-encre-2); line-height: 1.55; font-size: 0.9375rem; }
.ec-equipe-dispo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 0.8125rem; font-weight: 600; color: var(--ec-vert); }
.ec-equipe-dispo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ec-vert); animation: ec-pouls 1.8s infinite; }
.ec-equipe-actions { display: grid; gap: 8px; }
.ec-equipe-actions .ec-bouton { width: 100%; min-height: 48px; }

/* Et ensuite : les propositions. */
.ec-propositions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.ec-proposition { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 24px; border-radius: 26px; background: #fff; border: 1px solid var(--ec-trait); overflow: hidden; transition: border-color 300ms, box-shadow 300ms, transform 400ms var(--ec-ressort); }
.ec-proposition:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -34px rgba(0, 0, 0, 0.55); }
.ec-proposition.est-interesse { border: 2px dashed var(--ec-or); background: linear-gradient(160deg, #FFF8E2, #fff 60%); }
.ec-proposition-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ec-proposition-metier { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--ec-or-lisible); }
.ec-proposition-metier svg { width: 18px; height: 18px; }
.ec-proposition-prix { font-size: 0.8125rem; color: var(--ec-encre-3); font-variant-numeric: tabular-nums; }
.ec-proposition h3 { margin: 0; font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.15; }
.ec-proposition p { margin: 0; color: var(--ec-encre-2); line-height: 1.55; }
.ec-interet { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1.5px solid #000; border-radius: 999px; background: #fff; font-size: 0.875rem; font-weight: 700; transition: background 200ms, color 200ms, transform 300ms var(--ec-ressort); }
.ec-interet:hover { transform: translateY(-1px); }
.ec-interet:active { transform: scale(0.96); }
.ec-interet[aria-pressed="true"] { background: #000; color: #fff; }
.ec-interet-coeur { width: 16px; height: 16px; }
.ec-interet-coeur { transition: color 200ms, transform 300ms var(--ec-ressort); }
.ec-interet:hover .ec-interet-coeur { color: #E0245E; transform: scale(1.2); animation: ec-battement 700ms var(--ec-ressort); }
.ec-interet[aria-pressed="true"] .ec-interet-coeur { color: #FF4D6D; animation: ec-battement 600ms var(--ec-ressort); }
.ec-proposition-statut { font-size: 0.8125rem; font-weight: 700; }

/* Le pied. */
.ec-pied { margin: clamp(48px, 7vw, 96px) 0 0; padding: clamp(40px, 6vw, 80px) var(--ec-gouttiere) 28px; background: #000; color: #fff; border-radius: 30px 30px 0 0; overflow: hidden; position: relative; }
.ec-pied-grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px 40px; align-items: end; width: min(1240px, 100%); margin: 0 auto; }
.ec-pied h2 { margin: 0 0 12px; font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -0.04em; line-height: 0.98; }
.ec-pied h2 em { font-style: normal; color: var(--ec-or); }
.ec-pied p { margin: 0; color: rgba(255, 255, 255, 0.7); line-height: 1.55; max-width: 32em; }
.ec-pied-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ec-pied-bas { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; width: min(1240px, 100%); margin: clamp(40px, 6vw, 64px) auto 0; padding-top: 24px; border-top: 1px solid var(--ec-trait-nuit); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); }
.ec-pied-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.ec-pied-liens a, .ec-pied-bas button { color: rgba(255, 255, 255, 0.75); text-decoration: none; background: none; border: 0; padding: 0; font-size: 0.8125rem; }
.ec-pied-liens a:hover, .ec-pied-bas button:hover { color: var(--ec-or); }
.ec-pied-surete { display: inline-flex; align-items: center; gap: 8px; }
.ec-pied-surete svg { width: 14px; height: 14px; color: var(--ec-or); }
.ec-pied .ec-marque svg { width: 170px; }

/* Le signal d'une mise à jour en direct. */
.ec-maj { animation: ec-maj 1800ms ease-out; }
.ec-annonce { position: fixed; left: 50%; bottom: 22px; z-index: 40; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); margin: 0; padding: 12px 18px 12px 14px; border-radius: 999px; background: #000; color: #fff; font-size: 0.875rem; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8); transform: translate(-50%, calc(100% + 40px)); visibility: hidden; transition: transform 500ms var(--ec-ressort), visibility 0s 500ms; }
.ec-annonce.est-visible { transform: translate(-50%, 0); visibility: visible; transition: transform 500ms var(--ec-ressort), visibility 0s; }
.ec-annonce::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--ec-or); transform: rotate(45deg); border-radius: 2px; }
.ec-eclats { position: fixed; inset: 0; z-index: 45; pointer-events: none; }

.ec-attente { display: grid; place-items: center; min-height: 60vh; }
.ec-attente span { width: 26px; height: 26px; border: 2px solid var(--ec-or); border-radius: 4px; animation: ec-tourne 1.2s var(--ec-ressort) infinite; }

/* ═══ Les mouvements ═══ */
@keyframes ec-secousse { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes ec-clignote { 50% { opacity: 0; } }
@keyframes ec-tuile-entre { from { transform: translateY(8px) scale(0.8); opacity: 0; } }
@keyframes ec-monte { from { opacity: 0; transform: translateY(22px); } }
@keyframes ec-mot { from { opacity: 0; transform: translateY(0.4em) rotate(2deg); } }
@keyframes ec-pouls { 50% { box-shadow: 0 0 0 8px rgba(10, 122, 84, 0); } }
@keyframes ec-pouls-or { 50% { box-shadow: 0 0 0 12px rgba(209, 163, 38, 0); } }
@keyframes ec-flotte { 50% { transform: translateY(-12px); } }
@keyframes ec-rideau { 0% { transform: rotate(45deg) scale(0); } 55% { transform: rotate(45deg) scale(1); } 100% { transform: rotate(45deg) scale(40); opacity: 1; } }
@keyframes ec-ouvre { from { opacity: 0; transform: translateY(-8px) scale(0.99); } }
@keyframes ec-barre { from { transform: scaleX(0); } }
@keyframes ec-battement { 40% { transform: scale(1.35); } }
@keyframes ec-battement-doux { 50% { transform: scale(1.06) rotate(-3deg); } }
@keyframes ec-maj { 0% { box-shadow: 0 0 0 0 rgba(209, 163, 38, 0.7); } 40% { box-shadow: 0 0 0 10px rgba(209, 163, 38, 0.15); } 100% { box-shadow: 0 0 0 0 rgba(209, 163, 38, 0); } }
@keyframes ec-tourne { to { transform: rotate(360deg); } }
@keyframes ec-tourne-lent { to { rotate: 360deg; } }
@keyframes ec-reflet { 0% { transform: translateX(-100%); } 30%, 100% { transform: translateX(100%); } }
@keyframes ec-defile { to { background-position: -200% 0; } }
@keyframes ec-menu { from { opacity: 0; transform: translateY(-6px) scale(0.96); } }

/* ═══ Les écrans ═══ */
@media (max-width: 1100px) {
  .ec-barre { grid-template-columns: auto auto; }
  .ec-sommaire { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .ec { --ec-barre: 112px; }
}
@media (max-width: 980px) {
  .ec-tete, .ec-duo, .ec-duo--fil, .ec-pied-grille, .ec-rebours { grid-template-columns: 1fr; }
  .ec-equipe { position: static; }
  .ec-pied-bas { grid-template-columns: 1fr; justify-items: start; }
  .ec-pied-liens { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .ec { --ec-cal-gauche: 110px; }
  .ec-marque svg { width: 160px; }
  .ec-direct, .ec-compte-nom { display: none; }
  .ec-reperes { grid-template-columns: 1fr; }
  .ec-tuile { width: 24px; height: 38px; font-size: 1.05rem; border-radius: 7px; }
  .ec-tuile-tiret { width: 9px; }
  .ec-etape-detail { grid-template-columns: 1fr; }
  .ec-etape-detail-dates { text-align: left; }
  .ec-etape-detail-temps { margin-left: 0; }
  .ec-livrable { grid-template-columns: 40px minmax(0, 1fr); }
  .ec-livrable-icone { width: 40px; height: 40px; }
  .ec-livrable-date { grid-column: 2; text-align: left; }
  .ec-jauge { min-height: 0; }
  .ec-attente-carte { grid-template-columns: auto minmax(0, 1fr); }
  .ec-attente-carte .ec-bouton { grid-column: 1 / -1; }
  .ec-compare-ligne { grid-template-columns: minmax(0, 1fr) 46px; }
  .ec-compare-ligne .ec-compare-piste { grid-column: 1 / -1; grid-row: 2; }
  .ec-calendrier { padding: 16px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ec *, .ec *::before, .ec *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .ec-revele { opacity: 1; transform: none; }
}

/* ─── Le logo du client, en co-marque (14/10) ─── */
.ec-barre-gauche { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Dans la barre et le pied, le SVG est rogné au mot (viewBox 168) : plus de vide avant le « × ». */
.ec-barre-gauche .ec-marque svg { width: 157px; }
.ec-co { display: inline-flex; align-items: center; gap: 9px; animation: ec-monte 700ms var(--ec-ressort) 300ms backwards; }
.ec-co i { font-style: normal; font-size: 0.9rem; color: var(--ec-or-titre); }
.ec-co img { height: 30px; width: auto; max-width: 120px; object-fit: contain; }
.ec-co--nuit img { filter: brightness(0) invert(1); opacity: 0.85; }
.ec-monogramme.est-logo::before { display: none; }
.ec-monogramme.est-logo { border-radius: 50%; background: #fff; border: 1px solid var(--ec-trait); overflow: hidden; }
.ec-monogramme.est-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ec-pied-bas .ec-barre-gauche { flex-wrap: wrap; }
@media (max-width: 640px) { .ec-co img { height: 24px; max-width: 80px; } .ec-barre .ec-co i { display: none; } }

/* ═══ LE LOGO THOMAX STUDIO (14/10/2026) ═══
   Le vrai logo, aux valeurs de thomax.css (.marque-losange,
   .marque-etincelle) : losange au trait #0A0A0A de 1,5 qui s'épaissit
   avec lui, étincelle dorée #9A7820 ; sur le noir, la variante du pied
   du site (trait blanc). Et le même geste que le logo du site au
   survol : le LOSANGE fait un quart de tour (45° → 135°), l'étincelle
   reste droite et se soulève. Ici, la fin du mouvement claque. */
.ec-logo-tx { display: block; width: 100%; height: 100%; overflow: visible; }
.ec-logo-tx rect { fill: none; stroke: var(--tx-trait, #0A0A0A); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(45deg); transition: transform 560ms cubic-bezier(0.34, 1.7, 0.5, 1); }
.ec-logo-tx path { fill: var(--tx-or, #9A7820); transform-box: fill-box; transform-origin: 50% 80%; transition: transform 560ms cubic-bezier(0.34, 1.7, 0.5, 1); }
.ec-logo-tx--anime rect { stroke-dasharray: 80; stroke-dashoffset: 80; animation: ec-tx-trait 1400ms var(--ec-ressort) 200ms forwards; }
.ec-logo-tx--anime path { opacity: 0; animation: ec-tx-etincelle 700ms var(--ec-ressort) 900ms forwards; }
.ec-jauge:hover .ec-logo-tx rect, .ec-equipe:hover .ec-logo-tx rect, .ec-proposition:hover .ec-logo-tx rect { transform: rotate(135deg); }
.ec-jauge:hover .ec-logo-tx path, .ec-equipe:hover .ec-logo-tx path, .ec-proposition:hover .ec-logo-tx path { transform: translateY(-12%) scale(1.12); }

/* La carte du pourcentage : en haut à gauche ; la légende passe à droite. */
.ec-jauge-logo { position: absolute; z-index: 1; top: 22px; left: 24px; width: 44px; height: 44px; --tx-trait: #FFFFFF; --tx-or: #D1A326; }
.ec-jauge-legende { left: auto; right: 26px; text-align: right; justify-items: end; }
.ec-anneau, .ec-jauge-legende { z-index: 1; }
.ec-jauge-pied { position: relative; z-index: 1; }

/* L'interlocuteur et la pastille « nouveautés ». */
.ec-equipe-logo { flex: none; width: 56px; height: 56px; }
.ec-nouveautes .ec-logo-tx { width: 13px; height: 13px; flex: none; }

/* Les cartes « Et ensuite ? » : le logo posé dans l'angle, fixe. */
.ec-prop-logo { position: absolute; z-index: 1; top: 20px; right: 20px; width: 40px; height: 40px; pointer-events: none; }
.ec-proposition-tete { padding-right: 52px; }
.ec-proposition-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }

@keyframes ec-tx-trait { to { stroke-dashoffset: 0; } }
@keyframes ec-tx-etincelle { from { opacity: 0; transform: translateY(40%) scale(0.6); } to { opacity: 1; transform: none; } }

.ec-proposition > :not(.ec-prop-logo) { position: relative; z-index: 1; }

/* ═══ LE SUPPORT CLIENT (15/10/2026) ═══
   Sur la porte : une carte discrète sous le formulaire. Dans le
   tableau : un bandeau avant le pied, avec le bouton « Écrire au support ». */
.ec-support { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--ec-trait), 0 18px 40px -30px rgba(0, 0, 0, 0.35); color: var(--ec-noir); text-align: left; text-decoration: none; transition: box-shadow 300ms ease, transform 400ms var(--ec-ressort); }
.ec-support:hover, .ec-support:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ec-or), 0 22px 44px -28px rgba(209, 163, 38, 0.55); transform: translateY(-2px); }
.ec-support-icone { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; color: var(--ec-or); isolation: isolate; }
.ec-support-icone::before { content: ''; position: absolute; inset: 7px; z-index: -1; border-radius: 7px; background: var(--ec-noir); transform: rotate(45deg); }
.ec-support-icone svg { width: 20px; height: 20px; }
.ec-support-texte { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ec-support-texte b { font-size: 0.95rem; font-weight: 700; }
.ec-support-texte small { color: var(--ec-encre-3); font-size: 0.82rem; line-height: 1.45; }
.ec-support-texte u { color: var(--ec-or-lisible); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ec-support-fleche { flex: none; width: 18px; height: 18px; color: var(--ec-or-lisible); transition: transform 300ms var(--ec-ressort); }
.ec-support:hover .ec-support-fleche { transform: translate(2px, -2px); }
.ec-support--porte { width: min(520px, 100%); margin: 22px auto 0; animation: ec-fondu 900ms var(--ec-ressort) calc(var(--ec-t0) + 1650ms) backwards; }
.ec-support-bloc { width: min(1240px, 100%); margin: clamp(40px, 6vw, 72px) auto 0; padding: 0 var(--ec-gouttiere); }
.ec-support-bloc .ec-support { padding: 22px 26px; border-radius: 24px; background: linear-gradient(110deg, #fff 55%, var(--ec-creme-2)); }
.ec-support-bloc .ec-support-texte b { font-size: 1.15rem; }
.ec-support-bloc .ec-support-texte small { font-size: 0.92rem; max-width: 56ch; }
.ec-support-bouton { flex: none; pointer-events: none; }
@media (max-width: 680px) {
  .ec-support-bloc .ec-support { flex-wrap: wrap; }
  .ec-support-bouton { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ec-support, .ec-support--porte { transition: none; animation: none; } }