/* =====================================================================
   ESPACE CLIENT · feuille de la page /espace-client/

   La page est une APPLICATION, pas une vitrine : deux états, un seul
   vocabulaire. Elle n'ajoute aucun jeton, aucune police, aucune teinte :
   tout vient de styles.css (rampe bleue unique, élévations Fluent,
   rayons, durées, courbes).

   PLAN
     1 · Cadre commun (largeur, fil d'Ariane, typographie, replis)
     2 · La porte  : l'écran déconnecté (connexion / création)
     3 · L'espace  : le compte, l'activation par code, mes supports
     3bis · Trouver son établissement (supports Avis Google)
     3ter · Les trois sections : onglets, commandes, compte
     4 · Ajouter un support, clôture
     5 · Responsive
     6 · Mouvement réduit

   RÈGLES DE LA PAGE
     · aucune transition en dégradé vertical : les plans se posent bord
       à bord, une plaque dessinée sert de seuil sous les cartes ;
     · une seule animation utile par vue (le sceau de confirmation,
       l'anneau d'attente d'un bouton), coupée en mouvement réduit ;
     · toute cible tactile fait au moins 44 px, tout champ 16 px de
       corps (Safari iOS ne zoome pas en dessous).
   ===================================================================== */

/* =====================================================================
   1 · CADRE COMMUN
   ===================================================================== */
.ec-wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* L'en-tête canonique vit dans .kktop : ici sans le contrat « hauteur d'un
   héros », la bande se réduit à la pilule et laisse la page commencer. */
.ec-top.kktop{display:block;min-height:0;height:auto;background:var(--ku-blue-25)}

/* ---- Vocabulaire typographique -------------------------------------- */
.ec-eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:13px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand)}
.ec-hex{width:13px;height:13px;flex:none;fill:currentColor}
.ec-h1{margin:0;font-weight:700;font-size:clamp(30px,4.2vw,50px);line-height:1.06;
  letter-spacing:-.035em;color:var(--text)}
.ec-h1 .ec-hl{color:var(--brand)}
.ec-lede{margin:16px 0 0;font-size:clamp(16px,1.2vw,17.5px);line-height:1.62;
  color:var(--text-soft);max-width:42em}
.ec-lede b{color:var(--text);font-weight:700}
.ec-sr{position:absolute;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}

html.js .ec-nojs,html.js .ec-nojsband{display:none}
html:not(.js) .ec-js{display:none}

/* Repli sans JavaScript : la page le dit en une phrase, et s'arrête là. */
.ec-nojsband{background:var(--ku-blue-25);padding:0 0 clamp(40px,5vw,72px)}
.ec-nojs{margin:0;padding:18px 20px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);
  font-size:14.5px;line-height:1.6;color:var(--text-soft);max-width:44em}
.ec-nojs b{color:var(--text);font-weight:700}

/* ---- Le fil d'Ariane, posé au-dessus des deux états ------------------ */
.ec-crumbband{background:var(--ku-blue-25);padding:clamp(18px,2.2vw,26px) 0 0}
.ec-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13px;line-height:1.4}
.ec-crumb a{color:var(--text-muted);display:inline-flex;align-items:center;
  border-bottom:1px solid transparent;transition:color var(--dur-fast) var(--curve-easyease)}
.ec-crumb a:hover{color:var(--brand);border-bottom-color:currentColor}
.ec-crumb svg{width:10px;height:10px;flex:none;fill:var(--ku-blue-200)}
.ec-crumb__here{color:var(--text);font-weight:600}

/* ---- L'attente : la page interroge le compte avant de se dessiner ---- */
.ec-bootband{background:var(--ku-blue-25);padding:clamp(60px,9vw,120px) 0}
.ec-boot{display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:14.5px;color:var(--text-muted)}
.ec-ring{width:20px;height:20px;flex:none;border-radius:50%;
  border:2px solid var(--ku-blue-100);border-top-color:var(--brand);
  animation:ec-spin 700ms linear infinite}
@keyframes ec-spin{to{transform:rotate(360deg)}}

/* ---- Boutons : un seul jeu, de la porte à la fiche ------------------- */
.ec-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  padding:0 20px;border-radius:var(--r-pill);font-size:15px;font-weight:600;letter-spacing:-.005em;
  background:var(--surface);color:var(--text);border:1px solid var(--border-strong);
  transition:border-color var(--dur-fast) var(--curve-easyease),
             background var(--dur-fast) var(--curve-easyease),
             color var(--dur-fast) var(--curve-easyease)}
.ec-btn:hover{border-color:var(--brand);color:var(--brand)}
.ec-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ec-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ec-btn--primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand);
  box-shadow:var(--el-brand-4)}
.ec-btn--primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);
  color:var(--on-brand);box-shadow:var(--el-brand-8)}
.ec-btn--quiet{border-color:transparent;color:var(--text-muted);padding-inline:14px}
.ec-btn--quiet:hover{border-color:transparent;color:var(--brand);background:var(--ku-blue-25)}
.ec-btn[disabled]{cursor:default;opacity:.62}
.ec-btn[disabled]:hover{border-color:var(--border-strong);color:var(--text);background:var(--surface)}
.ec-btn--primary[disabled]:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
/* L'anneau d'attente prend la place du pictogramme : le bouton ne bouge pas. */
.ec-btn__ring{width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;opacity:.9;
  animation:ec-spin 700ms linear infinite}

/* ---- Champs : 16 px de corps, 52 px de haut, partout ----------------- */
.ec-fld{display:block;margin:0 0 14px}
.ec-fld__lab{display:block;margin:0 0 7px;font-size:13.5px;font-weight:600;color:var(--text-soft)}
.ec-fld__wrap{position:relative;display:block}
.ec-input{display:block;width:100%;min-height:52px;padding:13px 15px;border-radius:var(--r-md);
  font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);
  transition:border-color var(--dur-fast) var(--curve-easyease),
             box-shadow var(--dur-fast) var(--curve-easyease)}
.ec-input::placeholder{color:var(--ku-ink-300)}
.ec-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ku-blue-100)}
.ec-input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ec-input[disabled]{background:var(--surface-sunken);color:var(--text-muted)}
.ec-fld__wrap .ec-input{padding-right:88px}
.ec-reveal{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  min-height:44px;padding:0 12px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;
  color:var(--brand);background:transparent;
  transition:background var(--dur-fast) var(--curve-easyease)}
.ec-reveal:hover{background:var(--ku-blue-25)}
.ec-reveal:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ec-help{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:var(--text-muted)}

/* ---- Les deux messages de la page : ce qui casse, ce qui réussit ----- */
.ec-alert{margin:0 0 14px;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border-radius:var(--r-md);font-size:14px;line-height:1.5;font-weight:600;
  background:var(--ku-blue-50);border:1px solid var(--ku-blue-200);color:var(--ku-blue-800)}
.ec-alert[hidden]{display:none}
.ec-alert svg{width:16px;height:16px;flex:none;margin-top:2px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ec-alert--ok{background:var(--ku-blue-25);border-color:var(--ku-blue-100);color:var(--ku-blue-700)}
.ec-alert--ok svg{stroke-width:2.6}

/* =====================================================================
   2 · LA PORTE · écran déconnecté
   ===================================================================== */
.ec-gate{background:var(--ku-blue-25);padding:clamp(26px,3.4vw,44px) 0 clamp(52px,6vw,84px)}
.ec-gate__grid{display:grid;gap:clamp(28px,3.8vw,58px);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}

/* Le bandeau du support scanné : il ouvre la page quand on vient d'un QR. */
.ec-flag{display:flex;align-items:flex-start;gap:12px;margin:0 0 clamp(22px,2.6vw,32px);
  padding:14px 18px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--ku-blue-200);box-shadow:var(--el-4)}
.ec-flag[hidden]{display:none}
.ec-flag__ic{width:36px;height:36px;flex:none;border-radius:var(--r-md);display:grid;
  place-items:center;background:var(--brand)}
.ec-flag__ic svg{width:17px;height:17px;fill:#fff}
.ec-flag__t{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-soft)}
.ec-flag__t b{color:var(--text);font-weight:700}
.ec-flag__code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;font-weight:700;color:var(--ku-blue-700)}

.ec-gate__pts{list-style:none;margin:clamp(22px,2.6vw,30px) 0 0;padding:0;display:grid;gap:12px}
.ec-gate__pts li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.55;
  color:var(--text-soft)}
.ec-gate__pts svg{width:15px;height:15px;flex:none;margin-top:4px;fill:none;stroke:var(--brand);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ec-gate__pts b{color:var(--text);font-weight:700}

/* Le seuil : une plaque dessinée sous la carte, jamais une ombre floue. */
.ec-door{position:relative;padding:0 0 26px 26px}
.ec-door__sill{position:absolute;left:0;right:26px;top:34px;bottom:0;border-radius:var(--r-2xl);
  background:var(--ku-blue-50);border:1px solid var(--ku-blue-100)}
.ec-door__card{position:relative;border-radius:var(--r-2xl);
  background:var(--surface);border:1px solid var(--ku-blue-100);box-shadow:var(--el-16);
  padding:clamp(22px,2.6vw,30px)}
.ec-door__mark{width:30px;height:30px;fill:var(--brand);display:block}
.ec-door__t{margin:14px 0 0;font-weight:700;font-size:clamp(20px,1.9vw,24px);
  letter-spacing:-.022em;line-height:1.2;color:var(--text)}
.ec-door__s{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--text-muted)}

/* Le sélecteur : deux panneaux, une seule pastille qui glisse. */
.ec-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin:20px 0 20px;padding:4px;border-radius:var(--r-pill);background:var(--ku-blue-50)}
.ec-seg__pill{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);
  border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--el-4);
  transition:transform var(--dur-gentle) var(--curve-decel)}
.ec-seg[data-tab="signup"] .ec-seg__pill{transform:translateX(100%)}
.ec-seg__b{position:relative;z-index:1;min-height:44px;padding:0 12px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:600;color:var(--text-muted);
  transition:color var(--dur-fast) var(--curve-easyease)}
.ec-seg__b[aria-selected="true"]{color:var(--text)}
.ec-seg__b:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

.ec-panel[hidden]{display:none}
.ec-go{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;
  padding:0 18px;border-radius:var(--r-pill);font-size:16px;font-weight:700;letter-spacing:-.01em;
  background:var(--brand);color:#fff;box-shadow:var(--el-brand-8);
  transition:background var(--dur-fast) var(--curve-easyease)}
.ec-go:hover{background:var(--brand-hover)}
.ec-go:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ec-go[disabled]{cursor:default;opacity:.72}
.ec-go[disabled]:hover{background:var(--brand)}
.ec-go__ring{width:17px;height:17px;flex:none;border-radius:50%;border:2px solid #fff;
  border-top-color:transparent;animation:ec-spin 700ms linear infinite}
.ec-door__legal{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--border);
  display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--text-muted)}
.ec-door__legal svg{width:13px;height:13px;flex:none;margin-top:3px;fill:var(--brand)}
.ec-door__legal a{color:var(--brand);font-weight:600;border-bottom:1px solid transparent}
.ec-door__legal a:hover{border-bottom-color:currentColor}

/* =====================================================================
   3 · L'ESPACE · écran connecté
   ===================================================================== */
.ec-band{background:var(--ku-blue-25);padding:clamp(22px,2.8vw,34px) 0 clamp(30px,3.6vw,46px)}

/* Le compte : l'adresse qui tient la session, et la sortie. */
.ec-acct{display:flex;align-items:center;gap:14px;margin:0 0 clamp(24px,3vw,36px);
  padding:12px 14px 12px 16px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--el-4)}
.ec-acct__ic{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--ku-blue-50);border:1px solid var(--ku-blue-100)}
.ec-acct__ic svg{width:19px;height:19px;fill:none;stroke:var(--brand);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.ec-acct__body{min-width:0}
.ec-acct__k{margin:0;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted)}
.ec-acct__v{margin:3px 0 0;font-size:15px;font-weight:700;color:var(--text);
  overflow-wrap:anywhere}
.ec-acct__out{margin-left:auto;flex:none}

/* ---- L'espace proprement dit ---- */
.ec-space{background:var(--surface);padding:clamp(34px,4.4vw,62px) 0 clamp(46px,5.4vw,78px)}
.ec-shell{display:grid;grid-template-columns:340px minmax(0,1fr);
  gap:clamp(22px,2.6vw,34px) clamp(24px,3vw,40px);align-items:start;
  grid-template-areas:"claim detail" "list detail" "note detail"}
/* Sans support, la rangée « liste » disparaît : sinon son interligne
   resterait en creux entre l'activation et le mot sur le multi-supports. */
.ec-shell.is-empty{grid-template-areas:"claim detail" "note detail"}
.ec-shell__claim{grid-area:claim}
.ec-shell__list{grid-area:list}
.ec-shell__detail{grid-area:detail}
.ec-shell__note{grid-area:note}

/* ---- Activer par code : la porte d'entrée d'un support neuf ---- */
.ec-claim{padding:18px;border-radius:var(--r-xl);
  background:var(--ku-blue-25);border:1px solid var(--ku-blue-100)}
.ec-claim__h{margin:0;font-size:16px;font-weight:700;letter-spacing:-.018em;color:var(--text)}
.ec-claim__p{margin:7px 0 14px;font-size:13.5px;line-height:1.55;color:var(--text-muted)}
.ec-claim .ec-input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.06em;text-transform:uppercase}
.ec-claim .ec-input::placeholder{text-transform:none;letter-spacing:normal}
.ec-claim__go{width:100%;margin-top:10px}
.ec-claim .ec-alert{margin:12px 0 0}

/* ---- La liste des supports ---- */
.ec-list__lab{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted)}
.ec-list{display:flex;flex-direction:column;gap:10px}
/* Le support choisi sort du lot en PAPIER : il rejoint le blanc de sa fiche. */
.ec-item{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;
  align-items:start;width:100%;text-align:left;padding:14px 16px 14px 17px;
  border-radius:var(--r-lg);background:var(--surface-sunken);border:1px solid var(--border);
  transition:border-color var(--dur-fast) var(--curve-easyease),
             background var(--dur-fast) var(--curve-easyease),
             box-shadow var(--dur-fast) var(--curve-easyease)}
.ec-item:hover{border-color:var(--ku-blue-200);background:var(--surface);box-shadow:var(--el-4)}
.ec-item.is-sel{background:var(--surface)}
.ec-item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ec-item__rail{position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:transparent;transition:background var(--dur-fast) var(--curve-easyease)}
.ec-item.is-sel{border-color:var(--brand);box-shadow:var(--el-brand-4)}
.ec-item.is-sel .ec-item__rail{background:var(--brand)}
.ec-item__ic{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-md);
  background:var(--ku-blue-50);border:1px solid var(--ku-blue-100)}
.ec-item__ic svg{width:19px;height:19px;fill:var(--brand)}
.ec-item__body{min-width:0}
.ec-item__name{display:block;font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--text);
  overflow-wrap:anywhere}
.ec-item__meta{display:block;margin-top:3px;font-size:13px;color:var(--text-muted)}
.ec-item__st{display:block;margin-top:8px}

/* Le pied de colonne : le multi-supports, dit en une phrase. */
.ec-aside-note{padding:16px 18px;border-radius:var(--r-lg);
  background:var(--surface-sunken);border:1px solid var(--border)}
.ec-aside-note p{margin:0;font-size:13.5px;line-height:1.58;color:var(--text-muted)}
.ec-aside-note p + p{margin-top:8px}
.ec-aside-note b{color:var(--text-soft);font-weight:700}

/* ---- Pastille d'état ---- */
.ec-state{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 9px;
  border-radius:var(--r-pill);font-size:12.5px;font-weight:700;letter-spacing:.01em;
  white-space:nowrap}
.ec-state__dot{width:8px;height:8px;border-radius:50%;flex:none}
.ec-state--on{background:var(--brand);color:var(--on-brand)}
.ec-state--on .ec-state__dot{background:var(--on-brand)}
.ec-state--off{background:var(--surface);color:var(--text-muted);
  box-shadow:inset 0 0 0 1px var(--border-strong)}
.ec-state--off .ec-state__dot{box-shadow:inset 0 0 0 2px var(--ku-blue-300)}
/* Deux degrés de plus pour les commandes : en cours (bleu clair plein) et
   close (creux, sans accent). */
.ec-state--soft{background:var(--ku-blue-50);color:var(--ku-blue-800);
  box-shadow:inset 0 0 0 1px var(--ku-blue-200)}
.ec-state--soft .ec-state__dot{background:var(--brand)}
.ec-state--gone{background:var(--surface-sunken);color:var(--text-muted);
  box-shadow:inset 0 0 0 1px var(--border)}
.ec-state--gone .ec-state__dot{background:var(--ku-ink-300)}

/* ---- L'état vide : honnête, et il dit quoi faire ---- */
.ec-empty{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);
  padding:clamp(26px,3vw,40px);box-shadow:var(--el-8);text-align:left}
.ec-empty__ic{width:52px;height:52px;border-radius:var(--r-lg);display:grid;place-items:center;
  background:var(--ku-blue-50);border:1px solid var(--ku-blue-100)}
.ec-empty__ic svg{width:24px;height:24px;fill:var(--brand)}
.ec-empty__h{margin:18px 0 0;font-size:clamp(19px,1.8vw,22px);font-weight:700;
  letter-spacing:-.022em;color:var(--text)}
.ec-empty__p{margin:9px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-soft);max-width:40em}

/* ---- La fiche support ---- */
.ec-detail{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);
  padding:clamp(20px,2.2vw,30px);box-shadow:var(--el-8)}
.ec-detail:focus{outline:none}
.ec-detail:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.ec-detail__head{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;
  align-items:center;padding-bottom:22px;border-bottom:1px solid var(--border)}
/* position:relative + <img> en absolu, et NON un simple enfant de grille.
   En grille, la rangée est implicite donc AUTO : `height:100%` sur l'image y
   est un pourcentage cyclique, il retombe sur `auto`, l'image reprend son
   ratio 2/3 (102 → 153 px), la rangée grandit sous le cadre et
   `overflow:hidden` tranchait le tiers bas du produit — « Approchez /
   Scannez » et la signature kuerkod.com disparaissaient sur les 12 supports.
   En absolu, inset:0 se résout sur le bloc conteneur (définitif) : la boîte
   fait exactement le cadre. Et `contain` plutôt que `cover` : un packshot
   portrait dans un carré ne peut pas être rogné d'un tiers sans entamer le
   produit. Le glyphe de repli, lui, reste centré par la grille. */
.ec-detail__shot{margin:0;position:relative;width:104px;height:104px;border-radius:var(--r-lg);
  overflow:hidden;background:#F1F5FB;border:1px solid var(--border);display:grid;place-items:center}
.ec-detail__shot img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;max-height:none;object-fit:contain}
/* Même calibrage que le catalogue : un fichier CARTE porte 15 % de marge
   morte de chaque côté, on la rogne (le produit passe de 45 % à 56 % du
   cadre) ; un fichier PLAQUE n'en a pas, il reste à 100 %. Le rognage
   vertical vaut alors 10,2 % par côté pour 14,7 % de marge : rien n'est
   entamé. max-width/max-height:none est OBLIGATOIRE (piège gravé). */
.ec-detail__shot img[src*="/carte-"]{inset:-13%;width:126%;height:126%}
/* Repli si la photo du produit manque : le glyphe du réseau tient la place. */
.ec-detail__glyph{width:40px;height:40px;fill:var(--ku-blue-300)}
.ec-detail__msg{margin:18px 0 0}
.ec-detail__kind{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-muted)}
.ec-detail__name{margin:6px 0 10px;font-weight:700;font-size:clamp(21px,2vw,26px);
  line-height:1.12;letter-spacing:-.026em;color:var(--text);overflow-wrap:anywhere}
.ec-detail__st{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.ec-detail__stx{font-size:13.5px;line-height:1.5;color:var(--text-muted)}

/* Le sceau se dessine à côté de l'état quand un changement est enregistré.
   C'est la seule animation de la fiche. */
.ec-seal{width:30px;height:30px;flex:none;opacity:0;
  transition:opacity var(--dur-gentle) var(--curve-decel)}
.ec-seal circle{fill:none;stroke:var(--brand);stroke-width:2.4;
  stroke-dasharray:100;stroke-dashoffset:100}
.ec-seal path{fill:none;stroke:var(--brand);stroke-width:2.8;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.ec-seal.is-on{opacity:1}
.ec-seal.is-on circle{animation:ec-draw 460ms var(--curve-decel) forwards}
.ec-seal.is-on path{animation:ec-draw 300ms var(--curve-decel) 260ms forwards}
@keyframes ec-draw{to{stroke-dashoffset:0}}

.ec-rows{margin:0;padding:22px 0 0}
.ec-row{display:grid;grid-template-columns:172px minmax(0,1fr);gap:16px;padding:14px 0;
  border-bottom:1px solid var(--ku-ink-50)}
.ec-row:last-child{border-bottom:0}
.ec-row dt{font-size:13.5px;font-weight:600;color:var(--text-muted);padding-top:1px}
.ec-row dd{margin:0;font-size:15px;line-height:1.55;color:var(--text)}
.ec-net{display:inline-flex;align-items:center;gap:9px;font-weight:600}
.ec-net svg{width:17px;height:17px;fill:var(--brand);flex:none}
.ec-row__note{display:block;margin-top:5px;font-size:13px;line-height:1.5;color:var(--text-muted)}
.ec-page{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;line-height:1.5;color:var(--ku-blue-700);background:var(--ku-blue-25);
  border:1px solid var(--ku-blue-100);border-radius:var(--r-sm);padding:5px 10px;
  overflow-wrap:anywhere;max-width:100%}
.ec-page--empty{color:var(--text-muted);background:var(--surface-sunken);border-color:var(--border);
  font-family:var(--font-body)}
/* La fiche Google reliée se lit en clair ; l'adresse d'avis reste dessous,
   au second plan, pour qui veut la vérifier ou la copier. */
.ec-linked{display:block;font-size:15px;line-height:1.55;color:var(--text)}
.ec-linked b{font-weight:700}
.ec-page--sec{display:block;width:max-content;max-width:100%;margin-top:9px;font-size:12.5px;
  color:var(--text-muted);background:var(--surface-sunken);border-color:var(--border)}
/* Valeur absente : même creux que la page liée vide, sans le costume de
   code (ce n'est pas une adresse). */
.ec-none{display:inline-block;padding:5px 10px;border-radius:var(--r-sm);font-size:13.5px;
  color:var(--text-muted);background:var(--surface-sunken);border:1px solid var(--border)}

/* ---- Actions de la fiche ---- */
.ec-acts{display:flex;flex-wrap:wrap;gap:10px;padding-top:22px;border-top:1px solid var(--border);
  margin-top:8px}

.ec-foot-note{margin:20px 0 0;display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;line-height:1.55;color:var(--text-soft)}
.ec-foot-note svg{width:13px;height:13px;flex:none;fill:var(--brand);margin-top:4px}
.ec-foot-note b{color:var(--text);font-weight:700}

/* ---- Le panneau d'édition : nom, ou page liée ---- */
.ec-edit{margin-top:22px;border:1px solid var(--ku-blue-200);border-radius:var(--r-xl);
  background:var(--ku-blue-25);padding:clamp(18px,2vw,24px)}
.ec-edit__h{margin:0 0 6px;font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.ec-edit__p{margin:0 0 16px;font-size:14.5px;line-height:1.58;color:var(--text-soft);max-width:44em}
.ec-edit .ec-input{border-color:var(--border-strong)}
.ec-edit .ec-fld{margin:0}
.ec-edit__err{margin:12px 0 0}
.ec-edit__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* =====================================================================
   3bis · TROUVER SON ÉTABLISSEMENT · la recherche Google, dans la fiche

   Même caisson que le panneau d'édition (bleu très clair, filet bleu) :
   c'est la même action, dite autrement. Les résultats sont des cartes
   blanches posées dedans, cliquables d'un bout à l'autre.

   UNE EXCEPTION À LA RÈGLE MONOCHROME : l'étoile de la note est en or.
   Elle rend une vraie note Google, dans le seul écran où le client
   choisit sa fiche d'avis. Elle n'existe nulle part ailleurs sur le site.
   ===================================================================== */
.ec-place{margin-top:22px;border:1px solid var(--ku-blue-200);border-radius:var(--r-xl);
  background:var(--ku-blue-25);padding:clamp(18px,2vw,24px);--ec-star:#E9A227}
.ec-place .ec-fld{margin:0}
.ec-place .ec-load{min-height:96px}
.ec-place__hint{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--text-muted)}
.ec-place__err{margin:14px 0 0}
.ec-place__none{margin:14px 0 0;padding:16px 18px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);
  font-size:14px;line-height:1.6;color:var(--text-soft)}
.ec-place__none b{color:var(--text);font-weight:700}

.ec-place__list{list-style:none;display:grid;gap:10px;margin:14px 0 0;padding:0}
.ec-placecard{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;
  width:100%;min-height:76px;text-align:left;padding:10px 14px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--ku-blue-100);
  transition:border-color var(--dur-fast) var(--curve-easyease),
             box-shadow var(--dur-fast) var(--curve-easyease)}
.ec-placecard:hover{border-color:var(--brand);box-shadow:var(--el-4)}
.ec-placecard:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ec-placecard[disabled]{cursor:default;opacity:.62}
.ec-placecard[disabled]:hover{border-color:var(--ku-blue-100);box-shadow:none}
/* La devanture, ou son initiale : jamais un trou à la place d'une photo. */
/* Même mécanique que .ec-detail__shot : en grille la rangée est auto, le
   `height:100%` de l'image est cyclique et retombe sur son ratio naturel —
   une devanture Google portrait (300×400) rendait 54×72 dans un cadre de
   54 px et perdait 24 % de son bas. Position absolue = boîte définitive,
   et `cover` reprend alors son rôle (cadrage carré d'une vignette de lieu). */
.ec-placecard__ph{position:relative;width:56px;height:56px;flex:none;border-radius:var(--r-md);
  overflow:hidden;display:grid;place-items:center;background:var(--ku-blue-50);border:1px solid var(--ku-blue-100)}
.ec-placecard__ph img{position:absolute;inset:0;width:100%;height:100%;
  max-width:none;max-height:none;object-fit:cover;display:block}
.ec-placecard__init{font-size:21px;font-weight:700;line-height:1;color:var(--brand)}
.ec-placecard__body{min-width:0}
.ec-placecard__n{display:block;font-size:15px;font-weight:700;letter-spacing:-.015em;
  color:var(--text);overflow-wrap:anywhere}
.ec-placecard__a{display:block;margin-top:3px;font-size:13px;line-height:1.45;
  color:var(--text-muted);overflow-wrap:anywhere}
.ec-placecard__end{display:inline-flex;align-items:center;justify-content:flex-end;flex:none;
  min-width:44px}
.ec-placecard__r{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:700;
  color:var(--text-soft);font-variant-numeric:tabular-nums}
.ec-placecard__r svg{width:14px;height:14px;flex:none;fill:var(--ec-star);stroke:none}
.ec-placecard__end .ec-btn__ring{border-color:var(--ku-blue-200);border-top-color:var(--brand)}

.ec-place__foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--ku-blue-100)}
/* Le « G » et l'étoile sont des glyphes PLEINS : la règle générale des
   boutons les dessinerait en trait. */
.ec-btn .ec-ic--fill{fill:currentColor;stroke:none}

/* La note de la fiche confirmée (Google) : même étoile OR, hors résultats. */
.ec-linked__r{display:inline-flex;align-items:center;gap:5px;margin-left:9px;font-size:13px;
  font-weight:700;color:var(--text-soft);font-variant-numeric:tabular-nums;vertical-align:baseline}
.ec-linked__r svg{width:13px;height:13px;flex:none;fill:#E9A227;stroke:none}

/* =====================================================================
   3bis-2 · RELIER UN RÉSEAU SOCIAL · instagram, facebook, tiktok, whatsapp

   Même caisson bleu très clair que la recherche Google : c'est la même
   action, dite pour un handle ou un numéro. Le préfixe (« instagram.com/ »)
   est figé, grisé, collé au champ : le client n'écrit que ce qui lui
   appartient, jamais l'URL. L'aperçu « c'est bien ce compte ? » est une
   carte blanche, avec « Ouvrir pour vérifier » et « Relier ».
   ===================================================================== */
.ec-netpanel{margin-top:22px;border:1px solid var(--ku-blue-200);border-radius:var(--r-xl);
  background:var(--ku-blue-25);padding:clamp(18px,2vw,24px)}
.ec-netpanel .ec-fld{margin:0}
.ec-netpanel .ec-load{min-height:96px}

/* Le champ à préfixe figé : une seule boîte, le préfixe grisé, le champ
   transparent dedans. Le focus éclaire la boîte entière. */
.ec-pfx{display:flex;align-items:center;border:1px solid var(--border-strong);border-radius:var(--r-md);
  background:var(--surface);
  transition:border-color var(--dur-fast) var(--curve-easyease),
             box-shadow var(--dur-fast) var(--curve-easyease)}
.ec-pfx:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--ku-blue-100)}
.ec-pfx__lead{flex:none;padding:0 1px 0 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;color:var(--text-muted);white-space:nowrap;user-select:none}
.ec-pfx__in{flex:1 1 auto;min-width:0;min-height:52px;padding:13px 14px 13px 3px;border:0;
  background:transparent;font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--text)}
.ec-pfx__in:focus{outline:none}
.ec-pfx__in:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ec-pfx__in::placeholder{color:var(--ku-ink-300)}

/* L'aperçu du compte : carte blanche posée dans le caisson. */
.ec-netpanel__ask{margin:16px 0 0;font-size:14.5px;font-weight:700;color:var(--text)}
.ec-netcard{margin:10px 0 0;padding:16px 18px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--ku-blue-100)}
.ec-netcard.is-verified{border-color:var(--ku-blue-200)}
.ec-netcard__id{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;
  letter-spacing:-.015em;color:var(--text);overflow-wrap:anywhere}
.ec-netcard__id svg{width:20px;height:20px;flex:none;fill:var(--brand);stroke:none}
.ec-netcard__found{display:inline-flex;align-items:center;gap:5px;margin:8px 0 0;
  font-size:12.5px;font-weight:700;color:var(--ku-blue-700)}
.ec-netcard__found svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ec-netcard__url{display:block;margin:10px 0 0}
.ec-netcard__acts{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.ec-netcard__note{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--text-muted)}

/* =====================================================================
   3bis-3 · RELIER UNE PAGE PERSONNALISÉE · l'aperçu du lien

   Même caisson bleu très clair que les autres voies de liaison. Le réseau
   « perso » n'a pas de préfixe : le client colle l'adresse entière. On en
   déroule un aperçu, à la Slack/WhatsApp — image en bandeau, domaine, titre,
   description. Le titre et la description viennent d'un site tiers : ils sont
   posés en texte côté JS (textContent), jamais en HTML. L'image passe par le
   proxy tokenisé du serveur ; son URL brute n'apparaît nulle part.
   ===================================================================== */
.ec-persopanel{margin-top:22px;border:1px solid var(--ku-blue-200);border-radius:var(--r-xl);
  background:var(--ku-blue-25);padding:clamp(18px,2vw,24px)}
.ec-persopanel .ec-fld{margin:0}
.ec-persopanel .ec-load{min-height:96px}
.ec-persopanel__see{margin-top:12px}

/* La carte d'aperçu : un lien déroulé, posé dans le caisson. */
.ec-prevcard{margin:10px 0 0;overflow:hidden;border:1px solid var(--ku-blue-100);
  border-radius:var(--r-lg);background:var(--surface)}
/* Le bandeau : jamais un trou. Un glyphe attend derrière ; l'image le
   recouvre quand elle arrive, et le glyphe reste si elle échoue. */
.ec-prevcard__media{position:relative;display:grid;place-items:center;width:100%;
  aspect-ratio:1.9 / 1;background:var(--ku-blue-50);border-bottom:1px solid var(--ku-blue-100);overflow:hidden}
.ec-prevcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ec-prevcard__glyph{width:34px;height:34px;fill:var(--ku-blue-200);stroke:var(--ku-blue-200);
  stroke-width:1.7;opacity:.9}
.ec-prevcard__body{padding:14px 16px}
.ec-prevcard__site{display:flex;align-items:center;gap:7px;margin:0;font-size:12.5px;
  color:var(--text-muted);overflow-wrap:anywhere}
.ec-prevcard__fav{position:relative;display:grid;place-items:center;width:18px;height:18px;flex:none;
  border-radius:5px;overflow:hidden;background:var(--ku-blue-50);border:1px solid var(--ku-blue-100)}
.ec-prevcard__fav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ec-prevcard__fav .ec-prevcard__glyph{width:12px;height:12px}
.ec-prevcard__dom{overflow-wrap:anywhere}
.ec-prevcard__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:6px 0 0;font-size:15.5px;font-weight:700;letter-spacing:-.015em;color:var(--text);overflow-wrap:anywhere}
.ec-prevcard__desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin:5px 0 0;font-size:13.5px;line-height:1.5;color:var(--text-soft);overflow-wrap:anywhere}

/* L'échec d'aperçu se dit sobrement : jamais bloquant, « Relier ce lien »
   reste actif juste dessous. */
.ec-prevfail{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;padding:12px 14px;
  border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);
  font-size:14px;line-height:1.55;color:var(--text-soft)}
.ec-prevfail svg{width:16px;height:16px;flex:none;margin-top:2px;fill:none;stroke:var(--text-muted);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   3ter · LES TROIS SECTIONS · onglets, commandes, compte

   Une seule page, trois vues. Les onglets vivent au bas de la bande
   bleutée, les panneaux commencent dans le blanc juste dessous : la
   coupe est franche, sans voile ni dégradé.
   ===================================================================== */
.ec-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(22px,2.6vw,30px) 0 0}
.ec-tab{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  padding:0 18px;border-radius:var(--r-pill);font-size:14.5px;font-weight:600;
  letter-spacing:-.005em;background:var(--surface);color:var(--text-soft);
  border:1px solid var(--ku-blue-100);
  transition:border-color var(--dur-fast) var(--curve-easyease),
             background var(--dur-fast) var(--curve-easyease),
             color var(--dur-fast) var(--curve-easyease)}
.ec-tab:hover{border-color:var(--brand);color:var(--brand)}
.ec-tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ec-tab svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ec-tab .ec-ic--fill{fill:currentColor;stroke:none}
/* Deux libellés, un seul affiché : la version longue au large, la courte
   quand les trois onglets se partagent la largeur d'un téléphone. */
.ec-tab__s{display:none}
.ec-tab[aria-selected="true"]{background:var(--brand);color:var(--on-brand);border-color:var(--brand);
  box-shadow:var(--el-brand-4)}
.ec-tab[aria-selected="true"]:hover{background:var(--brand-hover);border-color:var(--brand-hover);
  color:var(--on-brand)}
[data-ec-panel][hidden]{display:none}
[data-ec-panel]:focus{outline:none}

/* Le colis est un glyphe de trait : les pastilles de la liste et l'état
   vide le dessinent, ils ne le remplissent pas. */
.ec-item__ic .ec-ic--stroke,.ec-empty__ic .ec-ic--stroke{fill:none;stroke:var(--brand);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* L'attente d'un panneau : la même que celle de la page, sans la bande. */
.ec-load{display:flex;align-items:center;justify-content:center;gap:12px;min-height:180px;
  margin:0;font-size:14.5px;color:var(--text-muted)}

/* ---- Mes commandes : même charpente que les supports ---- */
/* La colonne de gauche se serre en haut : la liste, puis le mot sur la
   préversion juste dessous, quelle que soit la hauteur de la fiche. */
.ec-orders{display:grid;grid-template-columns:340px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  gap:clamp(22px,2.6vw,34px) clamp(24px,3vw,40px);align-items:start;
  grid-template-areas:"list detail" "note detail"}
/* Sans commande, la fiche vide occupe seule la largeur. */
.ec-orders.is-empty{grid-template-columns:minmax(0,1fr);grid-template-areas:"detail"}
.ec-orders__list{grid-area:list}
.ec-orders__detail{grid-area:detail}
.ec-orders__note{grid-area:note}
.ec-orders.is-empty .ec-orders__list,
.ec-orders.is-empty .ec-orders__note{display:none}

/* La fiche d'une commande */
.ec-order{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);
  padding:clamp(20px,2.2vw,30px);box-shadow:var(--el-8)}
.ec-order:focus{outline:none}
.ec-order:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.ec-order__head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding-bottom:20px;border-bottom:1px solid var(--border)}
.ec-order__id{min-width:0;flex:1 1 auto}
.ec-order__n{margin:6px 0 0;font-weight:700;font-size:clamp(21px,2vw,26px);line-height:1.12;
  letter-spacing:-.026em;color:var(--text)}
.ec-order__date{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--text-muted)}
.ec-order__h{margin:22px 0 0;font-size:12.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-muted)}
.ec-order__p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-muted);max-width:44em}

/* Les lignes de la commande : libellé, quantité, ce qui a été appliqué. */
.ec-lines{list-style:none;margin:10px 0 0;padding:0}
.ec-line{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--ku-ink-50)}
.ec-line:last-child{border-bottom:0}
.ec-line__main{min-width:0}
.ec-line__lab{display:block;font-size:15px;font-weight:600;letter-spacing:-.012em;color:var(--text);
  overflow-wrap:anywhere}
.ec-line__meta{display:block;margin-top:4px;font-size:13px;line-height:1.55;color:var(--text-muted)}
.ec-line__tot{flex:none;font-size:15px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums}

.ec-tot{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);
  display:grid;gap:6px;justify-content:end}
.ec-tot__r{display:grid;grid-template-columns:auto auto;gap:18px;align-items:baseline;
  font-size:13.5px;color:var(--text-muted)}
.ec-tot__r span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.ec-tot__r--big{font-size:15px;color:var(--text-soft)}
.ec-tot__r--big span:last-child{font-size:21px;font-weight:700;color:var(--text);
  letter-spacing:-.022em}

/* Les codes livrés avec la commande, prêts à activer. */
.ec-codes{margin-top:22px;padding:18px;border-radius:var(--r-xl);
  background:var(--ku-blue-25);border:1px solid var(--ku-blue-100)}
.ec-codes .ec-order__h{margin-top:0}
.ec-codelist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.ec-code{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:12px 14px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--ku-blue-100)}
.ec-code__ic{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-md);
  background:var(--ku-blue-50);border:1px solid var(--ku-blue-100)}
.ec-code__ic svg{width:18px;height:18px;fill:var(--brand)}
.ec-code__body{min-width:0}
.ec-code__meta{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--text-muted)}
.ec-code__done{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:var(--ku-blue-700)}
.ec-code__done svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- Mon compte : deux cartes, puis la sortie ---- */
.ec-account{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,28px);align-items:start}
.ec-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);
  padding:clamp(20px,2.2vw,30px);box-shadow:var(--el-8)}
.ec-card--wide{grid-column:1 / -1}
.ec-card__h{margin:0;font-size:clamp(18px,1.7vw,21px);font-weight:700;letter-spacing:-.024em;
  line-height:1.2;color:var(--text)}
.ec-card__p{margin:8px 0 18px;font-size:14px;line-height:1.58;color:var(--text-muted);max-width:44em}
.ec-card form .ec-alert{margin:0 0 14px}
/* L'adresse e-mail se lit, elle ne s'édite pas : même rangée que la fiche
   support, mais toujours sur une colonne (la carte est étroite). */
.ec-rows--flush{padding:0;margin:0 0 18px}
.ec-rows--flush .ec-row{grid-template-columns:minmax(0,1fr);gap:6px;padding:0 0 16px}
.ec-rows--flush .ec-row dt{padding-top:0}
.ec-strong{font-weight:700;color:var(--text);overflow-wrap:anywhere}

/* =====================================================================
   4 · AJOUTER UN SUPPORT, puis la clôture
   ===================================================================== */
.ec-add{margin-top:clamp(30px,3.4vw,46px);background:var(--surface-dark);
  border-radius:var(--r-2xl);overflow:hidden;position:relative;padding:clamp(26px,3vw,40px)}
.ec-add__mark{position:absolute;right:-30px;top:-30px;width:190px;height:190px;
  fill:#fff;opacity:.05;pointer-events:none}
.ec-add__h{margin:0 0 10px;font-weight:700;font-size:clamp(21px,2.1vw,28px);line-height:1.14;
  letter-spacing:-.026em;color:#fff}
.ec-add__p{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--text-on-dark);max-width:42em}
.ec-add__links{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:1}
.ec-add__a{display:inline-flex;align-items:center;gap:16px;min-height:56px;padding:8px 20px;
  border-radius:var(--r-lg);font-size:14.5px;font-weight:600;background:rgba(255,255,255,.07);
  color:#fff;border:1px solid var(--border-on-dark);
  transition:background var(--dur-fast) var(--curve-easyease),
             border-color var(--dur-fast) var(--curve-easyease)}
.ec-add__a:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34)}
.ec-add__a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;margin-left:auto}
.ec-add__t{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.ec-add__t small{font-size:12.5px;font-weight:500;color:var(--text-soft-on-dark)}
.ec-add__a:focus-visible{outline:2px solid var(--focus-ring-on-dark);outline-offset:3px}

.ec-tail{margin-top:26px;padding-top:20px;border-top:1px solid var(--border)}
.ec-tail__p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-muted);max-width:46em}
.ec-outro{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 0}
.ec-outro__a{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:10px 20px;
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);
  font-size:14.5px;font-weight:600;color:var(--text);
  transition:border-color var(--dur-fast) var(--curve-easyease),
             box-shadow var(--dur-fast) var(--curve-easyease)}
.ec-outro__a:hover{border-color:var(--brand);box-shadow:var(--el-4)}
.ec-outro__a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ec-outro__a svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--brand);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ec-outro__t{display:flex;flex-direction:column;gap:2px;line-height:1.3}
.ec-outro__t small{font-size:12.5px;font-weight:500;color:var(--text-muted)}

/* =====================================================================
   5 · RESPONSIVE
   ===================================================================== */
@media (max-width:1000px){
  .ec-gate__grid{grid-template-columns:1fr}
  .ec-door{padding:0 0 20px 20px}
  .ec-door__sill{right:20px;top:28px}
  .ec-shell{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"claim" "list" "detail" "note"}
  .ec-shell.is-empty{grid-template-areas:"claim" "detail" "note"}
  .ec-orders{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;
    grid-template-areas:"list" "detail" "note"}
  .ec-account{grid-template-columns:minmax(0,1fr)}
  .ec-detail__head{grid-template-columns:84px minmax(0,1fr);gap:16px}
  .ec-detail__shot{width:84px;height:84px}
  .ec-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .ec-row dt{padding-top:0}
}
@media (max-width:640px){
  .ec-wrap{padding:0 18px}
  .ec-h1{font-size:clamp(27px,7.6vw,34px)}
  .ec-acct{flex-wrap:wrap;gap:12px}
  .ec-acct__out{margin-left:0;width:100%}
  .ec-acct__out .ec-btn{width:100%}
  .ec-acts .ec-btn,.ec-edit__acts .ec-btn,.ec-place__foot .ec-btn,
  .ec-netcard__acts .ec-btn{flex:1 1 100%}
  /* La carte d'un résultat se serre : photo plus petite, note en bout. */
  .ec-placecard{grid-template-columns:48px minmax(0,1fr) auto;gap:11px;padding:10px 12px}
  .ec-placecard__ph{width:48px;height:48px}
  .ec-placecard__end{min-width:38px}
  .ec-add__a,.ec-outro__a{flex:1 1 100%;justify-content:space-between}
  .ec-door{padding:0}
  .ec-door__sill{display:none}
  /* Trois onglets sur une seule rangée : parts égales, libellés seuls,
     chacun sur une seule ligne. */
  .ec-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ec-tab{padding:0 8px;font-size:13.5px;gap:0;text-align:center;white-space:nowrap}
  .ec-tab svg{display:none}
  .ec-tab__l{display:none}
  .ec-tab__s{display:inline}
  .ec-line{flex-direction:column;gap:6px}
  .ec-line__tot{align-self:flex-start}
  .ec-tot{justify-content:stretch}
  .ec-tot__r{grid-template-columns:minmax(0,1fr) auto}
  .ec-code{grid-template-columns:36px minmax(0,1fr)}
  .ec-code .ec-btn,.ec-code__done{grid-column:1 / -1;justify-content:center;width:100%}
  .ec-card form > .ec-btn{width:100%}
}
@media (max-width:380px){
  .ec-seg__b{font-size:13.5px;padding:0 6px}
  .ec-fld__wrap .ec-input{padding-right:78px}
  .ec-tab{font-size:12.5px;padding:0 6px}
}

/* =====================================================================
   6 · MOUVEMENT RÉDUIT · état final figé, aucune exception
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .ec-item,.ec-item__rail,.ec-btn,.ec-input,.ec-go,.ec-add__a,.ec-outro__a,
  .ec-seal,.ec-seg__pill,.ec-seg__b,.ec-reveal,.ec-crumb a,.ec-tab,
  .ec-placecard,.ec-pfx{transition:none}
  .ec-ring,.ec-btn__ring,.ec-go__ring{animation:none}
  .ec-seal.is-on circle,.ec-seal.is-on path{animation:none;stroke-dashoffset:0}
}

/* Copier la page liée. Posé sous l'adresse plutôt qu'à côté : sur un téléphone,
   une URL d'avis Google occupe déjà toute la largeur. Cible tactile 44 px de
   haut, comme les autres gestes de cet espace. */
.ec-copy{display:inline-flex;align-items:center;gap:7px;margin-top:9px;
  min-height:44px;padding:9px 14px;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--brand);background:var(--ku-blue-25);
  border:1px solid var(--ku-blue-100);border-radius:var(--r-pill);cursor:pointer;
  transition:background var(--dur-fast) var(--curve-easyease),border-color var(--dur-fast) var(--curve-easyease)}
.ec-copy:hover{background:var(--brand-soft);border-color:var(--ku-blue-200)}
.ec-copy:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ec-copy svg{width:16px;height:16px;flex:none}
.ec-copy.is-done{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
@media (prefers-reduced-motion:reduce){.ec-copy{transition:none}}