/* ──────────────────────────────────────────────────────────────
   « HIDDEN » VEUT DIRE CACHÉ. TOUJOURS.

   Vincent, 31 août, capture d'écran à l'appui : « le dimensionnement
   ici est toujours pas réglé ». Chaque modèle de la fenêtre s'affichait
   encore au complet — quantité, note, coûtant, spécifications — alors
   que le gabarit écrit bien « hidden » sur le volet.

   Le défaut n'était pas dans le gabarit, il était ici. Le navigateur
   cache [hidden] avec « display: none », mais c'est une règle de sa
   feuille à lui : la MOINDRE classe qui déclare un display la bat.
   « .pan-l-plus { display: grid } » suffisait, et rien ne le signalait
   — pas d'erreur, pas de console, juste une fenêtre trois fois trop
   longue devant un client.

   Cette règle-ci referme le piège pour toute la feuille, une fois. Elle
   porte !important parce que c'est exactement son travail : gagner
   contre n'importe quelle classe qui déclarerait un display, y compris
   celles qui n'existent pas encore.

   Vérifiée par outils/verifier-que-cache-veut-dire-cache.py
   ────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }

:root{
  --bg:#F4F7FB; --card:#FFFFFF; --line:#E3EAF2;
  --ink:#0F1E2E; --ink-2:#5B6B7C; --ink-3:#8A9AAB;
  --brand:#0077F9; --brand-dark:#0047F7; --brand-light:#00AAFF; --brand-wash:#E8F3FE;
  --ok-bg:#E2F5EC; --warn:#94590A; --warn-bg:#FBF0DC;
  --alert:#A5301F; --alert-bg:#FBE9E6;
  --radius:11px;
  --shadow:0 1px 2px rgba(15,30,46,.05), 0 10px 28px -18px rgba(15,30,46,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-underline-offset:2px}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* header */
.top{background:var(--card);border-bottom:1px solid var(--line)}
.top-in{max-width:960px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--brand-light),var(--brand-dark));color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.brand span{font-weight:700;font-size:.95rem}
.nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.nav a{padding:7px 13px;border-radius:7px;font-size:.88rem;font-weight:500;color:var(--ink-2);text-decoration:none}
.nav a:hover{background:var(--bg)}
.nav a.on{background:var(--brand-wash);color:var(--brand-dark);font-weight:600}
.nav form{margin:0}
.linkbtn{background:none;border:0;padding:7px 13px;font:inherit;font-size:.88rem;color:var(--ink-3);cursor:pointer;border-radius:7px}
.linkbtn:hover{background:var(--bg);color:var(--ink-2)}

/* layout */
.wrap{max-width:960px;margin:0 auto;padding:30px 20px 70px}
.page-h{margin-bottom:22px}
.page-h h1{font-size:1.6rem;font-weight:700}
.page-h p{color:var(--ink-2);font-size:.95rem;margin-top:5px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.card h2{font-size:1.1rem;font-weight:600}
.card h3{font-size:1rem;font-weight:600}
.card .sub{color:var(--ink-2);font-size:.92rem;margin-top:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.mt{margin-top:18px}

/* alerts */
.flash{border-radius:var(--radius);padding:14px 18px;margin-bottom:20px;font-size:.94rem}
.flash.ok{background:var(--ok-bg);color:var(--ok);border:1px solid #B9E5D0}
.flash.info{background:var(--brand-wash);color:var(--brand-dark);border:1px solid #BFDFFC}
.flash.bad{background:var(--alert-bg);color:var(--alert);border:1px solid #F2C7C0}
.flash ul{margin:6px 0 0;padding-left:18px}

/* prefill banner */
.prefill{background:var(--ok-bg);border:1px solid #B9E5D0;border-radius:var(--radius);padding:16px 20px;margin-bottom:20px}
.prefill strong{color:var(--ok);font-size:.94rem}
.prefill p{margin-top:6px;font-size:.88rem;color:#22614A}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.chips span{background:#fff;border:1px solid #C9E9D9;border-radius:6px;padding:4px 11px;font-size:.82rem;color:#22614A;font-weight:500}

/* forms */
.fld{margin-top:16px}
.fld:first-child{margin-top:0}
label{display:block;font-size:.84rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;border:1px solid var(--line);background:var(--card);border-radius:8px;
  padding:11px 13px;font-size:.95rem;color:var(--ink);font-family:inherit;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-wash)}
textarea{min-height:90px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.two{grid-template-columns:1fr}}
.hint{font-size:.82rem;color:var(--ink-3);margin-top:5px}
.err{color:var(--alert);font-size:.83rem;margin-top:5px}

.btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:8px;padding:11px 22px;font-size:.92rem;font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit}
.btn:hover{background:var(--brand-dark)}
.btn.wide{display:block;width:100%;text-align:center}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--bg)}

/* slots */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:14px;max-height:340px;overflow-y:auto;padding:2px}
.slot{position:relative}
.slot input{position:absolute;opacity:0;width:0;height:0}
.slot span{
  display:block;border:1px solid var(--line);border-radius:9px;padding:12px 14px;cursor:pointer;
  background:var(--card);font-size:.89rem;transition:.12s
}
.slot span b{display:block;font-weight:600;color:var(--ink);text-transform:capitalize}
.slot span em{font-style:normal;color:var(--ink-2);font-size:.85rem}
.slot input:checked + span{border-color:var(--brand);background:var(--brand-wash);box-shadow:0 0 0 2px var(--brand-wash)}
.slot input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}

/* lists */
.list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);margin-top:16px}
.li{display:flex;gap:16px;padding:15px 20px;border-bottom:1px solid var(--line);align-items:center;flex-wrap:wrap}
.li:last-child{border-bottom:0}
.li .when{font-size:.82rem;color:var(--ink-3);min-width:86px;font-variant-numeric:tabular-nums}
.li .mid{flex:1;min-width:180px}
.li .who{font-weight:600;font-size:.94rem}
.li .what{font-size:.85rem;color:var(--ink-2);margin-top:2px}

.tag{display:inline-block;font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:5px;letter-spacing:.02em}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
.tag.info{background:var(--brand-wash);color:var(--brand-dark)}
.tag.off{background:var(--bg);color:var(--ink-3)}

dl.kv{display:grid;grid-template-columns:140px 1fr;gap:8px 16px;font-size:.92rem;margin:14px 0 0}
dl.kv dt{color:var(--ink-3)}
dl.kv dd{margin:0;font-weight:500}
@media(max-width:520px){dl.kv{grid-template-columns:1fr;gap:2px 0}dl.kv dd{margin-bottom:8px}}

.empty{text-align:center;padding:40px 20px;color:var(--ink-2)}
.empty p{margin-bottom:16px}

.login{max-width:410px;margin:60px auto}
.login .mark{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,var(--brand-light),var(--brand-dark));color:#fff;display:grid;place-items:center;font-weight:700;margin:0 auto 20px}
.login h1{font-size:1.45rem;font-weight:700;text-align:center}
.login .sub{text-align:center;color:var(--ink-2);font-size:.94rem;margin-top:8px}
.foot{text-align:center;color:var(--ink-3);font-size:.82rem;margin-top:26px}
.debug{background:#FFF8E1;border:1px dashed #E0C068;border-radius:9px;padding:14px 16px;margin-top:18px;font-size:.83rem;word-break:break-all}
.debug b{display:block;margin-bottom:6px;color:#7A5C00}

/* Case de consentement — texte long, case alignée sur la première ligne */
.consent { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; font-size: .9375rem; line-height: 1.5; }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: .18rem; flex: none; accent-color: var(--vp); }
.consent span { color: var(--ink-2); }

/* Saisie du code à six chiffres — gros, espacé, lisible sur un téléphone */
.code-input {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .45em;
    text-align: center;
    text-indent: .45em;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.code-input::placeholder { color: var(--ink-3); letter-spacing: .45em; font-weight: 500; }

/* ── AquaVP : les analyses d'eau ─────────────────────────── */
.eau{display:grid;gap:8px}
.eau-l{display:flex;align-items:center;justify-content:space-between;gap:16px;
       padding:13px 16px;border-radius:10px;background:var(--bg);border-left:4px solid var(--line)}
.eau-l .what{font-size:.82rem;color:var(--ink-3);margin-top:3px}
.eau-v{text-align:right;white-space:nowrap}
.eau-v b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.eau-v .what{display:block}
.eau-ideal{border-left-color:#2FA36B}
.eau-acceptable{border-left-color:#E2B33C}
.eau-bas,.eau-haut{border-left-color:#D5573B;background:var(--alert-bg)}

.pager{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:.88rem;margin-top:18px}
.pg{color:var(--brand);text-decoration:none;font-weight:600}
.pg.off{color:var(--line)}
.pg-n{color:var(--ink-3)}

.lsi{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 20px;border-radius:12px;
     margin-top:16px;background:var(--bg);border-left:5px solid var(--line)}
.lsi > div:first-child{flex:0 0 auto}
.lsi-l{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.lsi > div:first-child b{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.lsi-v{flex:1 1 240px}
.lsi-v b{display:block;font-size:1rem;font-weight:600}
.lsi-v span{display:block;font-size:.83rem;color:var(--ink-3);margin-top:4px}
.lsi-equilibree{border-left-color:#2FA36B;background:var(--ok-bg)}
.lsi-legerement_corrosive,.lsi-legerement_entartrante{border-left-color:#E2B33C;background:#FDF8EC}
.lsi-corrosive,.lsi-entartrante{border-left-color:#D5573B;background:var(--alert-bg)}

/* ── Saisie d'analyse et dosages ─────────────────────────── */
.mesures{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:16px}
.mesure{display:flex;flex-direction:column;gap:5px}
.mesure label{font-size:.9rem;font-weight:500;color:var(--ink-2);display:flex;justify-content:space-between;gap:8px}
.mesure input{padding:11px 14px;font-size:1rem;font-family:inherit;color:var(--ink);
              background:var(--bg);border:2px solid var(--line);border-radius:9px;outline:none;
              text-align:right;font-variant-numeric:tabular-nums}
.mesure input:focus{border-color:var(--brand);background:#fff}

.dose{margin-top:16px;padding:16px 18px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.dose:first-of-type{margin-top:18px}
.dose-h{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:baseline;
        padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px}
.dose-h .what{font-size:.85rem;color:var(--ink-3)}
.dose-p{padding:8px 0}
.dose-p b{font-variant-numeric:tabular-nums}
.dose-p .what{font-size:.83rem;color:var(--ink-3);margin-top:3px}
.dose-p .what.attention{color:#8A5A00}

/* ═══════════════════════════════════════════════════════════
   TÉLÉPHONE — le portail client

   85 % des visites se font au pouce. La navigation passe en bas,
   rien ne descend sous 44 px, et ce qui était côte à côte s'empile.
   ═══════════════════════════════════════════════════════════ */

.tabbar-c { display: none; }

@media (max-width: 780px) {
    /* R81 -- le même garde-fou que partout ailleurs : rien ne dépasse
       l'écran, donc la page ne « dézoome » pas toute seule. Le portail
       ne l'avait pas; il l'a maintenant. */
    html, body { max-width: 100%; overflow-x: clip; }
    .card, .wrap, .li, .grid, .two { min-width: 0; }

    /* R86 -- la barre passe EN HAUT, comme dans l'espace équipe. Les deux
       moitiés du produit ne doivent pas se tenir à l'envers l'une de
       l'autre : un client qui appelle au bureau décrit ce qu'il voit, et
       il faut qu'on le retrouve. */
    body { padding-top: calc(58px + env(safe-area-inset-top)); padding-bottom: 24px; }

    .top .nav > a { display: none; }
    .top-in { padding: 12px 16px; }
    .nav { margin-left: auto; }

    .tabbar-c {
        position: fixed; left: 0; right: 0; top: 0; z-index: 40;
        display: flex;
        background: rgba(255, 255, 255, .94);
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid var(--line);
        padding-top: env(safe-area-inset-top);
    }
    .tabbar-c a {
        flex: 1; min-height: 58px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        text-decoration: none; color: var(--ink-3); font-size: 10.5px; font-weight: 600; padding: 8px 4px;
    }
    .tabbar-c a.on { color: var(--brand); }
    .tabbar-c .ico { display: grid; place-items: center; height: 21px; }
    .tabbar-c .ico .ic { width: 21px; height: 21px; }

    /* Cinq cases sur un écran de 390 px, c'est 78 px chacune, et
       « Rendez-vous » passait sur deux lignes — la barre grandissait et
       les libellés se décalaient les uns par rapport aux autres. Le même
       garde-fou que du côté de l'équipe : une ligne, coupée s'il le
       faut. */
    .tabbar-c a > span:not(.ico) {
        max-width: 100%; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis;
    }

    .wrap { padding: 20px 16px 40px; }
    .page-h h1 { font-size: 1.4rem; }
    .card { padding: 18px 16px; }
    .two { grid-template-columns: 1fr; gap: 0; }
    .grid { grid-template-columns: 1fr; }

    .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
    .fld input, .fld select, .fld textarea { min-height: 48px; font-size: 16px; }

    .li { flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
    .li .when { flex: 0 0 100%; font-size: .78rem; }
    .li .mid { flex: 1 1 auto; }

    .mesures { grid-template-columns: 1fr 1fr; }
    .eau-l { padding: 12px 14px; }
}

@media (max-width: 400px) {
    .mesures { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   L'IDENTITÉ PISCINES VP

   Relevée sur piscinesvp.com et appliquée par-dessus la feuille
   d'origine : Poppins pour ce qui affirme, le bleu #0077F9, les
   boutons en pilule et en majuscules. Le client doit reconnaître
   son fournisseur, pas découvrir un deuxième site.
   ═══════════════════════════════════════════════════════════ */

body { font-family: var(--corps); }

h1, h2, h3, .page-h h1, .card h2, .card h3 {
    font-family: var(--titre);
    font-weight: 700;
    letter-spacing: -.015em;
}
.page-h h1 { font-weight: 800; letter-spacing: -.025em; }

.brand span { font-family: var(--titre); font-weight: 800; }

.nav a { font-family: var(--titre); font-weight: 600; }
.nav a.on { color: var(--vp); background: rgba(0, 119, 249, .08); }

/* Le bouton du socle prime; on ne garde que la largeur pleine. */
.btn.wide { width: 100%; }

.tabbar-c a { font-family: var(--titre); font-weight: 700; letter-spacing: .02em; }
.tabbar-c a.on { color: var(--vp); }

.fld input:focus, .fld select:focus, .fld textarea:focus {
    border-color: var(--vp);
    box-shadow: 0 0 0 3px rgba(0, 119, 249, .12);
}

.li .who { font-family: var(--titre); font-weight: 600; }
.stat .n, .eau-v b { font-family: var(--titre); font-weight: 800; letter-spacing: -.02em; }

/* ── Les icônes dessinées (f5) ──────────────────────────────
   Mêmes tracés que l'espace équipe, même raison : un caractère (⌂ ✚ ◈)
   part en émoji couleur sur un iPhone, et le client voyait exactement ce
   que Vincent me reprochait. Un tracé en currentColor prend la couleur
   de ce qui l'entoure — la barre, l'onglet actif — sans rien redire. */
.ic {
    display: block;
    width: 20px; height: 20px;
    flex: none;
    stroke: currentColor;
    vector-effect: non-scaling-stroke;
}

/* ── Une visite qui s'ouvre ─────────────────────────────
   Vincent, doc 5 : « oui mais il doit pouvoir cliquer dessus ». Un
   <details> plutôt qu'une fenêtre : ça s'ouvre sur place et ça marche
   sans JavaScript. */
.li-repli { border-bottom: 1px solid var(--line, #EEF1F6); }
.li-repli:last-child { border-bottom: 0; }
.li-repli > summary { cursor: pointer; list-style: none; }
.li-repli > summary::-webkit-details-marker { display: none; }
.li-repli > summary:hover { background: rgba(0, 71, 247, .03); }

/* Une visite sans détail ne fait pas semblant de s'ouvrir : le client
   clique, ne voit rien, et croit que le site est brisé. */
.li-repli[data-fige] > summary { cursor: default; }
.li-repli[data-fige] > summary:hover { background: transparent; }

.li-detail { padding: 4px 16px 18px; }
.visite { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 6px 14px; margin: 0 0 14px; }
.visite dt { font-size: 13px; color: var(--ink-3, #6B7280); }
.visite dd { margin: 0; font-size: 14px; }
.visite-total { margin: 0 0 12px; font-size: 14px; }
.visite-total .sub { display: block; font-size: 12px; color: var(--ink-3, #6B7280); }
.visite-notes {
    background: #F7FAFF;
    border: 1px solid #E3ECFB;
    border-radius: 12px;
    padding: 12px 14px;
}
.visite-notes b { font-size: 13px; }
.visite-notes p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; white-space: pre-line; }

@media (max-width: 560px) {
    .visite { grid-template-columns: 1fr; gap: 2px 0; }
    .visite dd { margin-bottom: 8px; }
}

/* ── Ajouter une deuxième piscine ───────────────────────
   Vincent, doc 5. Replié par défaut : ouvert, le bloc donnerait
   l'impression qu'il manque quelque chose à remplir. */
.ajout { margin-top: 18px; }
.ajout > summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 16px;
    border: 1px dashed var(--line, #DCE3EE);
    border-radius: 14px;
    font-weight: 600;
    font-size: 15px;
    color: #0047F7;
    background: #FAFCFF;
}
.ajout > summary::-webkit-details-marker { display: none; }
.ajout > summary::before { content: "+ "; font-weight: 700; }
.ajout > summary:hover { background: #F2F7FF; }
.ajout[open] > summary { border-radius: 14px 14px 0 0; border-bottom: 0; }
.ajout-in {
    border: 1px dashed var(--line, #DCE3EE);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    padding: 14px 16px 4px;
    background: #FAFCFF;
}
.ajout-in .card { background: transparent; border: 0; padding: 0; box-shadow: none; }

/*
 * L'EN-TÊTE D'ÉCRAN, CÔTÉ CLIENT (D91).
 *
 * Les mêmes règles que dans l'espace équipe, recopiées ici parce que le
 * portail ne charge PAS equipe.css. C'est justement ce que la
 * vérification a attrapé : sept écrans du client se seraient affichés
 * sans aucune mise en forme, et rien à l'écran ne l'aurait dit — le
 * texte était là, juste nu.
 *
 * Recopié et non partagé : une troisième feuille commune pour cinq
 * règles coûterait une requête de plus à chaque page du client, et
 * c'est lui qui est sur le réseau le plus lent.
 */
.tete { display: grid; gap: 2px; margin: 0 0 18px; }

.tete-retour {
    justify-self: start;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; margin: -10px 0 -6px; padding: 0 2px;
    font-size: 15px; font-weight: 600;
    color: var(--vp, #0f766e); text-decoration: none;
}
.tete-retour:hover, .tete-retour:focus-visible { text-decoration: underline; }

.tete-sur {
    font-size: 12px; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; opacity: .7;
}

.tete h1 {
    margin: 0; font-size: 1.55rem; line-height: 1.15;
    letter-spacing: -.01em; text-wrap: balance;
}

.tete-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tete-action { margin: -6px 0 18px; }
.tete-info { margin: -8px 0 16px; font-size: 14px; opacity: .8; }

@media (max-width: 620px) {
    .tete { margin-bottom: 14px; }
    .tete h1 { font-size: 1.35rem; }
}

/* ── LE VOLET QUI SE REPLIE ──────────────────────────────────

   « .repli » n'existait que dans equipe.css, et le portail ne charge pas
   cette feuille-là. Le volet « Cette piscine est à une autre adresse »
   s'affichait donc en <details> nu : la petite flèche noire du
   navigateur, aucun cadre, aucun rembourrage — au milieu d'un
   formulaire soigné, ça se lit comme un bogue.

   C'est le même oubli que les règles .tete* le 31 août : une classe
   écrite dans le gabarit d'un côté, sa mise en forme dans la feuille de
   l'autre. Rien ne casse, et l'écran a l'air abandonné.

   Les valeurs viennent des jetons du portail, pas de ceux de l'espace
   équipe : --field et --line-soft n'existent pas ici. */
.repli {
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
}
.repli > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; cursor: pointer;
    list-style: none; user-select: none;
    border-radius: var(--radius);
    font-size: .88rem; font-weight: 600; color: var(--ink-2);
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::before {
    content: '\203A'; flex: none;
    font-size: 17px; line-height: 1; color: var(--ink-3);
    transform: rotate(0deg); transition: transform .15s ease;
}
.repli[open] > summary::before { transform: rotate(90deg); }
.repli > summary:hover { background: var(--brand-wash); }
.repli > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.repli > *:not(summary) { padding-left: 14px; padding-right: 14px; }
.repli > *:last-child { padding-bottom: 14px; }

/* ══════════════════════════════════════════════════════════════════════
   L'EN-TÊTE DU CLIENT  (D187)

   Vincent, en regardant celle de l'équipe : « ça c'est excellent comme
   affichage pour les clients ! ».

   La même grammaire, dessinée pour un téléphone : tout en colonne, rien
   sous 46 px, et le bureau en exception à partir de 700 px. Le filet
   bleu à gauche dit « ceci n'est pas une carte de contenu » sans coûter
   un point de contraste — ce que le fond sombre coûtait.
   ══════════════════════════════════════════════════════════════════════ */

.cli-tete{
  display:flex;flex-direction:column;gap:14px;
  padding:15px 15px 16px;margin-bottom:16px;
  background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:14px;
}
.cli-haut{display:flex;align-items:center;gap:12px;min-width:0}
.cli-medaillon{
  width:46px;height:46px;flex:none;display:grid;place-items:center;
  font-size:17px;font-weight:700;background:var(--brand);color:#fff;border-radius:50%;
}
.cli-identite{flex:1 1 auto;min-width:0}
.cli-identite h1{margin:0;font-size:21px;font-weight:800;overflow-wrap:anywhere}
.cli-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.cli-tete .tag{background:var(--brand-wash);color:var(--brand-dark);border-color:transparent}

.cli-joindre{display:flex;flex-direction:column;gap:8px;font-size:14px}
.cli-joindre a{
  display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 13px;
  border-radius:11px;text-decoration:none;overflow-wrap:anywhere;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);
}
.cli-joindre a .ico{color:var(--brand);font-size:16px;line-height:1;flex:none}
.cli-joindre a.appeler{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.cli-joindre a.appeler:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.cli-joindre a.appeler .ico{color:#fff}

.cli-action{width:100%;text-align:center}

@media (min-width:700px){
  .cli-tete{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 18px;padding:18px 20px}
  .cli-haut{grid-column:1}
  .cli-joindre{grid-column:1;flex-direction:row;flex-wrap:wrap}
  .cli-joindre a{min-height:40px;border-radius:999px;padding:8px 14px}
  .cli-action{grid-column:2;grid-row:1 / span 2;width:auto}
}