/* =====================================================================
   UI FICHE — mécanismes d'interface de la fiche client / contrat
   ---------------------------------------------------------------------
   Portage des quatre mécanismes décrits dans helpers/PORTAGE_UI_FICHE.md :

     §1  .cadre / .cadre-legend    cadres repliables du formulaire client
     §3  .rd-section               sections repliables de la fiche contrat
     §4  #tabbtnsprojects          barre d'onglets « classeur » + actions
     §2  .cl-collant / .cd-slot    repli de la colonne gauche + cartes

   Feuille CHARGÉE POUR TOUTES LES PAGES depuis inc/template_start.php,
   après theme-v3.css : elle consomme les jetons --t3-* du thème quand ils
   existent, et retombe sur des valeurs fixes sinon. Le JS qui l'accompagne
   est dans js/ui-fiche.js.

   RETOUR EN ARRIÈRE : commenter les deux lignes de inc/template_start.php
   (la feuille et le script). Le CRM retrouve son rendu d'avant — aucun
   gabarit ne dépend de ces classes pour s'afficher.
   ===================================================================== */


/* =====================================================================
   §1 — CADRES REPLIABLES DU FORMULAIRE (.cadre / .cadre-legend)
   ---------------------------------------------------------------------
   Le HTML ne décrit PAS le repli : un .cadre contient un .cadre-legend en
   premier enfant, puis son contenu. js/ui-fiche.js enveloppe le reste dans
   un .cadre-content-wrapper et pose le chevron. Rien à écrire de plus dans
   les gabarits que ces deux <div>.

   L'apparence de la légende (fond, ombre, couleur) reste celle de
   main.css / theme-v3.css : on n'ajoute ici que ce que le repli exige.
   ===================================================================== */

.cadre {
    transition: all .3s ease;
}

/* La légende devient une commande : tout le bandeau est cliquable.
   padding-right : réserve la place du chevron, qui est en absolu et ne
   pousse donc pas le texte — sans ça, un titre long passe dessous. */
.cadre-legend {
    position: relative;
    padding-right: 34px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* Chevron : une seule icône qui TOURNE, plutôt que deux classes d'icônes
   échangées. Une rotation s'anime, un changement de classe saute — et on
   évite au passage que le toggle de classes se désynchronise si le bloc
   est rejoué après un rechargement AJAX. */
.cadre-legend .chevron-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 15px;
    opacity: .65;
    transition: transform .25s ease, opacity .15s ease;
}

.cadre-legend:hover .chevron-toggle {
    opacity: 1;
}

.cadre.is-collapsed .cadre-legend .chevron-toggle {
    transform: translateY(-50%) rotate(-90deg);
}

/* Replié, le cadre ne doit plus peser : sa marge basse laissait un blanc
   entre deux légendes accolées. */
.cadre.is-collapsed {
    margin-bottom: 0;
}

/* Un <hr> séparateur juste après un cadre replié n'a plus rien à séparer. */
.cadre.is-collapsed + hr {
    display: none;
}

/* Une vraie commande posée dans une légende (bouton « ajouter »…) ne doit
   pas replier le cadre au passage : le JS ignore les clics sur .cadre-cmd. */
.cadre-legend .cadre-cmd {
    position: relative;
    z-index: 2;
}

/* --- Le repli lui-même ------------------------------------------------
 * On n'utilise PAS slideToggle (le doc §1.4) mais la technique de repli
 * du §3 : une grille animée sur grid-template-rows.
 *
 * Pourquoi ce changement. slideToggle met le conteneur à display:none, et
 * le piège §1.6-a est alors garanti chez nous : le formulaire client est
 * plein de .select-chosen, et chosen initialisé dans un display:none se
 * mesure à zéro puis reste effondré. Avec la grille, la hauteur tombe à
 * zéro mais les champs gardent leur LARGEUR mesurable — chosen s'initialise
 * juste, replié ou non, et l'animation est en CSS pur.
 *
 * Contrainte qui en découle (§3.6-a) : .cadre-content-wrapper ne doit avoir
 * qu'UN SEUL enfant direct, sinon les lignes implicites gardent leur hauteur
 * et le cadre ne se replie qu'à moitié. D'où .cadre-content, que le JS pose
 * à l'intérieur. Les deux conteneurs sont fabriqués par js/ui-fiche.js.
 * -------------------------------------------------------------------- */

.cadre-content-wrapper,
.rd-section-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows .25s ease;
}

/* Sans min-height:0, l'enfant d'une grille refuse de descendre sous sa
   hauteur de contenu et rien ne se replie. */
.cadre-content-wrapper > *,
.rd-section-body > * {
    min-height: 0;
}

.cadre.is-collapsed .cadre-content-wrapper,
.rd-section.is-collapsed .rd-section-body {
    grid-template-rows: 0fr;
}

/* L'overflow n'est masqué QUE au repli et pendant l'animation. En
   permanence, il tronquerait les listes chosen et les datepickers ouverts
   près du bas d'un cadre. */
.cadre.is-collapsed .cadre-content-wrapper > *,
.cadre.is-animating .cadre-content-wrapper > *,
.rd-section.is-collapsed .rd-section-body > *,
.rd-section.is-animating .rd-section-body > * {
    overflow: hidden;
}


/* =====================================================================
   §3 — SECTIONS REPLIABLES DE LA FICHE CONTRAT (.rd-section / legend)
   ---------------------------------------------------------------------
   On n'a PAS reconstruit le markup du document (<section> + <button> +
   pastille + méta) : la fiche contrat porte déjà ce vocabulaire, en
   <fieldset><legend> avec la pastille colorée en style inline. C'est le
   cas « Option C » du document — on hérite les sections au lieu de les
   écrire — et on le pousse plus loin : rien à convertir en JS non plus,
   il a suffi de poser class="rd-section" data-section="…" sur les huit
   <fieldset> existants.

   La <legend> devient l'en-tête cliquable. Son apparence (fond, ombre
   portée, couleur) reste celle de main.css / theme-v3.css : on n'ajoute
   ici que ce que le repli exige.
   ===================================================================== */

.rd-section > legend {
    position: relative;
    padding-right: 34px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.rd-section > legend .chevron-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 15px;
    opacity: .55;
    transition: transform .25s ease, opacity .15s ease;
}

.rd-section > legend:hover .chevron-toggle { opacity: 1; }

.rd-section.is-collapsed > legend .chevron-toggle {
    transform: translateY(-50%) rotate(-90deg);
}

/* Une légende qui porte ses propres commandes (« Envoyer au Leaser »…)
   garde son .block-options au-dessus du chevron. */
.rd-section > legend .block-options {
    position: relative;
    z-index: 2;
    margin-right: 22px;
}

/* --- Le padding bas -------------------------------------------------
 * Il vivait en style inline sur le .block qui enveloppe chaque section
 * (padding-bottom: 30px). En box-sizing: border-box, il SURVIT à une
 * hauteur nulle : il restait une bande de 30 px sous une section repliée
 * (piège §3.6-c). Il est donc déplacé ici, sur le conteneur intérieur —
 * qui est dans la grille et voit donc sa hauteur pilotée — et annulé au
 * repli, avec sa propre transition pour que ça ne saute pas.
 * -------------------------------------------------------------------- */
.rd-section-contenu {
    padding-bottom: 26px;
    transition: padding .25s ease;
}

.rd-section.is-collapsed .rd-section-contenu {
    padding-top: 0;
    padding-bottom: 0;
}

/* Repliée, la section n'a plus à peser : la marge basse de la légende
   laissait un blanc entre deux sections accolées. */
.rd-section.is-collapsed > legend {
    margin-bottom: 0;
}


/* =====================================================================
   §4 — BARRE D'ONGLETS DES CONTRATS (« effet classeur »)
   ---------------------------------------------------------------------
   L'onglet actif et le cadre du contrat ne sont pas reliés par un trait :
   ils PARTAGENT LA MÊME SURFACE. C'est la continuité de fond — pas une
   bordure — qui dit l'appartenance. Six pièces, toutes nécessaires (§4.2) :

     1. une variable de fond déclarée sur leur ancêtre commun, où l'onglet
        actif et le cadre puisent la même valeur : ils ne peuvent pas
        diverger ;
     2. aucun jour entre la barre et le cadre — la barre perd sa marge
        basse, son padding bas et sa bordure basse ;
     3. l'onglet actif n'a AUCUNE bordure : une bordure basse transparente
        laisse toujours un raccord visible ;
     4. deux ombres complémentaires, jamais opposées — l'onglet projette
        vers le HAUT, le cadre vers le BAS. Aucune ne projette vers la
        jointure. Ensemble elles se lisent comme une seule forme soulevée ;
     5. le cadre englobe tout ce qui concerne le contrat ; la barre est
        HORS du cadre, comme une languette de classeur : elle le surmonte,
        elle ne s'y range pas ;
     6. le cadre n'a pas de bordure du tout. Sur un fond de page presque
        blanc, aucune couleur de remplissage ne peut se distinguer. Une
        ombre, elle, ne dépend pas de la teinte et fonctionne sur les trois
        thèmes comme dans les deux modes.
   ===================================================================== */

/* --- 1. La variable partagée ------------------------------------------
 * Si le CRM gagne un thème, il n'y a que ces deux lignes à redéfinir :
 * les deux formes suivent.
 * -------------------------------------------------------------------- */
#contact-right {
    --projet-fond: #f6f9fc;
    --projet-ombre: rgba(21, 70, 116, .22);
}

body.t3 #contact-right {
    --projet-fond: var(--t3-solid-alt);
    --projet-ombre: rgba(0, 0, 0, .18);
}

body.t3.v2-dark #contact-right {
    --projet-ombre: rgba(0, 0, 0, .55);
}

/* --- 2. Aucun jour entre la barre et le cadre --- */
#tabbtnsprojects.projects-switch {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

#tabbtnsprojects .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: stretch;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

#tabbtnsprojects .nav-tabs > li {
    float: none;             /* le flottant Bootstrap se battrait avec le flex */
    margin-bottom: 0;
}

/* --- Onglet au repos --- */
#tabbtnsprojects .nav-tabs > li > a.projelm {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px 6px 0 0;
    background: #f8f9fa;
    color: #495057;
    font-size: 12px;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

#tabbtnsprojects .nav-tabs > li > a.projelm:hover,
#tabbtnsprojects .nav-tabs > li > a.projelm:focus {
    background: #eef1f4;
    border-color: #d7dde5;
    color: #154674;
    text-decoration: none;
}

/* --- 3 et 4. L'onglet actif : aucune bordure, ombre vers le HAUT --- */
#tabbtnsprojects .nav-tabs > li.active > a.projelm,
#tabbtnsprojects .nav-tabs > li.active > a.projelm:hover,
#tabbtnsprojects .nav-tabs > li.active > a.projelm:focus {
    position: relative;
    z-index: 1;                  /* passe devant le cadre */
    border: 0;
    border-radius: 8px 8px 0 0;
    background: var(--projet-fond);
    color: #154674;
    font-weight: 600;
    box-shadow: 0 -4px 12px -6px var(--projet-ombre);
}

/* --- 4 (suite) et 6. Le cadre : ombre vers le BAS, aucune bordure --- */
.project-cadre {
    position: relative;
    padding: 16px;
    border: 0;
    border-radius: 0 0 14px 14px;   /* haut carré : il rejoint la languette */
    background: var(--projet-fond);
    box-shadow: 0 6px 16px -6px var(--projet-ombre),
                0 2px 4px -2px var(--projet-ombre);
}

/* Les blocs repris de l'existant portent leur propre cadre blanc ; le cadre
   est désormais la surface du contrat, on neutralise le doublon de fond. */
.project-cadre > #contproject > #blocproject > .tab-content {
    background: transparent;
}

/* --- Le libellé -------------------------------------------------------
 * Il tronque plutôt que de faire déborder la barre : dix contrats aux noms
 * longs mettaient la barre sur quatre lignes.
 * -------------------------------------------------------------------- */
.projelm-lbl {
    font-weight: 600;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projelm-points {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.projelm-points:empty { display: none; }

/* --- 5. Actions révélées au survol ------------------------------------
 * max-width plutôt que display:none : l'onglet ne SAUTE pas en largeur au
 * survol, il s'ouvre. Un saut de largeur déplacerait les onglets voisins
 * sous le curseur, ce qui déclenche un mouseleave immédiat — et les icônes
 * clignotent (piège §4.7-b). C'est exactement ce que faisait l'ancien JS.
 * -------------------------------------------------------------------- */
.projelm-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 0;
    margin-left: 0;
    padding-left: 0;
    border-left: 1px solid transparent;
    overflow: hidden;
    opacity: 0;
    transition: max-width .22s ease, opacity .18s ease,
                margin-left .22s ease, padding-left .22s ease;
}

/* Sur l'onglet ACTIF seulement : les actions agissent sur le contrat
   ouvert, les montrer ailleurs laisserait deviner sur quoi elles portent. */
#tabbtnsprojects .nav-tabs > li.active > a.projelm:hover .projelm-actions,
#tabbtnsprojects .nav-tabs > li.active > a.projelm:focus-within .projelm-actions {
    max-width: 110px;
    margin-left: 6px;
    padding-left: 6px;
    opacity: 1;
    border-left-color: rgba(21, 70, 116, .15);
}

.projelm-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: #7d93a8;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.projelm-act:hover { background: #e7eef7; color: #154674; }

/* La suppression ne se signale qu'à SON propre survol : rouge en
   permanence, elle attirerait l'œil plus que le contrat lui-même. */
.projelm-danger:hover { background: #fdeef1; color: #c23350; }

/* --- Contrat hors périmètre -------------------------------------------
 * AFFICHÉ, jamais masqué. Le masquer ferait croire que le client n'a qu'un
 * contrat, et le compte sauterait sans explication. L'utilisateur voit
 * qu'il existe et comprend qu'il ne lui est pas ouvert.
 * -------------------------------------------------------------------- */
#tabbtnsprojects .nav-tabs > li > a.projelm-verrouille {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.7);
}

#tabbtnsprojects .nav-tabs > li > a.projelm-verrouille:hover { opacity: .72; }

/* Les pastilles de type gardent leur couleur même grisées : c'est ce qui
   identifie le contrat, et l'utilisateur en a besoin avant de demander
   l'accès. */
.projelm-verrouille .projelm-points { filter: none; }

.projelm-cadenas { margin-left: 4px; font-size: 12px; opacity: .8; }

/* --- L'onglet de création --- */
#tabbtnsprojects .nav-tabs > li > a.projelm-new {
    border-style: dashed;
    background: transparent;
    color: #6c757d;
}

#tabbtnsprojects .nav-tabs > li > a.projelm-new:hover {
    background: #f1f8ff;
    border-color: #90b8e0;
    color: #154674;
}

/* --- Petit écran : pas de survol, les actions restent ouvertes --- */
@media (max-width: 1199px) {
    .project-cadre { padding: 12px; }

    #tabbtnsprojects .nav-tabs > li.active > a.projelm .projelm-actions {
        max-width: 110px;
        margin-left: 6px;
        padding-left: 6px;
        opacity: 1;
        border-left-color: rgba(21, 70, 116, .15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .projelm-actions,
    #tabbtnsprojects .nav-tabs > li > a.projelm { transition: none !important; }
}


/* =====================================================================
   ACCORD AVEC LE THÈME V3
   ---------------------------------------------------------------------
   Les valeurs fixes ci-dessus sont le rendu par défaut, quand la couche
   V3 est désactivée (inc/theme_v3.php). Quand elle est active, tout
   repart des jetons --t3-* : trois thèmes × deux modes, sans réécrire une
   seule forme. La feuille est chargée APRÈS theme-v3.css, donc à
   spécificité égale c'est elle qui gagne.
   ===================================================================== */

/* --- §1 et §3 : le chevron ------------------------------------------- */
body.t3 .rd-section > legend .chevron-toggle {
    color: var(--t3-text-3);
}

body.t3 .rd-section > legend:hover .chevron-toggle {
    color: var(--t3-accent);
}

/* --- §4 : les onglets ------------------------------------------------- */
body.t3 #tabbtnsprojects .nav-tabs > li > a.projelm {
    background: color-mix(in srgb, var(--t3-accent) 5%, var(--t3-glass-hi));
    border-color: var(--t3-border-sub);
    color: var(--t3-text-2);
}

body.t3 #tabbtnsprojects .nav-tabs > li > a.projelm:hover,
body.t3 #tabbtnsprojects .nav-tabs > li > a.projelm:focus {
    background: color-mix(in srgb, var(--t3-accent) 11%, var(--t3-glass-hi));
    border-color: color-mix(in srgb, var(--t3-accent) 25%, transparent);
    color: var(--t3-text);
}

body.t3 #tabbtnsprojects .nav-tabs > li.active > a.projelm,
body.t3 #tabbtnsprojects .nav-tabs > li.active > a.projelm:hover,
body.t3 #tabbtnsprojects .nav-tabs > li.active > a.projelm:focus {
    background: var(--projet-fond);
    border: 0;
    color: var(--t3-text);
}

body.t3 #tabbtnsprojects .nav-tabs > li > a.projelm-new {
    background: transparent;
    color: var(--t3-text-3);
}

body.t3 #tabbtnsprojects .nav-tabs > li > a.projelm-new:hover {
    background: color-mix(in srgb, var(--t3-accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--t3-accent) 35%, transparent);
    color: var(--t3-accent-lo);
}

body.t3 .projelm-act {
    color: var(--t3-text-3);
}

body.t3 .projelm-act:hover {
    background: color-mix(in srgb, var(--t3-accent) 14%, transparent);
    color: var(--t3-accent-lo);
}

/* Le rouge de la suppression ne vient pas du thème : il doit rester rouge
   sur les trois palettes, c'est un code couleur, pas une décoration. */
body.t3 .projelm-danger:hover {
    background: rgba(194, 51, 80, .14);
    color: #e05a72;
}

body.t3 #tabbtnsprojects .nav-tabs > li.active > a.projelm:hover .projelm-actions,
body.t3 #tabbtnsprojects .nav-tabs > li.active > a.projelm:focus-within .projelm-actions {
    border-left-color: var(--t3-border-sub);
}


/* =====================================================================
   §2 — REPLI DE LA COLONNE GAUCHE ET MIGRATION DES CARTES
   ---------------------------------------------------------------------
   Le formulaire client est rarement modifié et prend un quart de la
   largeur. Replié, la colonne se réduit à une bande de 292 px, la droite
   s'élargit d'autant, et les cartes récapitulatives qui vivaient à gauche
   MIGRENT physiquement en haut de la colonne de droite.

   Trois états, une seule règle :

     colonne étroite, fiche repliée  → cartes à gauche, dans .cl-collant
     fiche dépliée                   → cartes à droite, dans #cards-droite
     écran ≤ 1199 px                 → cartes à droite, colonnes empilées

   Les cartes ne sont PAS dupliquées : il n'existe qu'un exemplaire de
   chacune, et le JS le déplace. C'est la décision à ne pas défaire — avec
   deux jeux, il faudrait deux cibles d'écriture pour chaque valeur, et la
   moitié du temps on écrirait dans celui qui est caché (§2.2).
   ===================================================================== */

/* --- La ligne des deux colonnes ---------------------------------------
 * En flex, PAS en flottants Bootstrap. Un flottant se dimensionne sur son
 * contenu : la colonne de gauche s'arrêterait sous les cartes, et un
 * conteneur collant n'a alors aucune course — il ne peut se figer que dans
 * les limites de son parent. En flex, les colonnes s'étirent à la hauteur
 * de la ligne et les cartes suivent le défilement de la droite (§2.7-b).
 * -------------------------------------------------------------------- */
.contact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

#contact-left {
    position: relative;
    flex: 0 0 292px;
    width: 292px;
    transition: flex-basis .25s ease, width .25s ease;
}

#contact-right {
    flex: 0 0 calc(100% - 292px);
    width: calc(100% - 292px);
    transition: flex-basis .25s ease, width .25s ease;
}

/* Dépliée, on retrouve exactement les proportions d'avant (col-lg-3/9). */
.contact-open #contact-left  { flex-basis: 25%; width: 25%; }
.contact-open #contact-right { flex-basis: 75%; width: 75%; }

/* --- Conteneur collant ------------------------------------------------
 * C'est LUI qui porte le sticky, pas les cartes : un position:sticky par
 * carte les ferait se chevaucher en se figeant l'une après l'autre.
 * -------------------------------------------------------------------- */
.cl-collant {
    position: sticky;
    top: 10px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

/* Fiche dépliée : les cartes sont parties à droite et .cc-card est masquée,
   le conteneur est donc vide — sa marge basse décalait le formulaire. */
.contact-open .cl-collant { margin-bottom: 0; }

/* --- Formulaire replié ------------------------------------------------
 * visibility + height:0, PAS display:none. Les plugins de champ (chosen,
 * datepicker) s'initialisent en MESURANT leur conteneur ; dans un
 * display:none ils se mesurent à zéro et restent effondrés jusqu'au premier
 * redimensionnement (§2.7-a). Invisible, inatteignable, mais mesurable.
 * -------------------------------------------------------------------- */
#page-content:not(.contact-open) #contact-left .lepanel {
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

/* Dépliée, la carte condensée répéterait le formulaire : elle s'efface. */
.contact-open .cc-card { display: none; }

/* --- Emplacement d'accueil, colonne de droite ------------------------- */
.cd-slot:empty { display: none; }   /* vide, il ne prend aucune place */

.cd-slot {
    display: grid;
    /* auto-fit et non « 1fr 1fr » : quand la fiche est dépliée, la carte
       contact s'efface et il ne reste qu'une carte. Avec deux colonnes fixes
       elle occuperait la moitié de la largeur en laissant un trou ; auto-fit
       supprime les pistes vides et la carte prend toute la place. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    align-items: stretch;           /* hauteurs égales côte à côte */
    margin: 0 0 16px;
}

.cd-slot > * { height: 100%; }

/* --- Colonnes empilées ------------------------------------------------ */
@media (max-width: 1199px) {
    #contact-left,
    #contact-right,
    .contact-open #contact-left,
    .contact-open #contact-right {
        flex: 0 0 100%;
        width: auto;
    }

    .cl-collant { position: static; }   /* un bandeau figé mangerait l'écran */
}

@media (max-width: 1199px) and (min-width: 768px) {
    .cl-collant { flex-direction: row; align-items: flex-start; }
    .cl-collant > * { flex: 1 1 0; min-width: 0; }
}

/* =====================================================================
   LES CARTES
   ---------------------------------------------------------------------
   Décor, pas structure : la forme peut changer sans toucher au mécanisme.
   Seules comptent les classes que le JS déplace (.cc-card, .kc-card) et
   les attributs data-cc / data-kc qu'il remplit.
   ===================================================================== */

.cc-card,
.kc-card {
    position: relative;
    padding: 14px 16px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 18px -10px rgba(21, 70, 116, .35),
                0 1px 2px rgba(21, 70, 116, .06);
    font-size: 12px;
    color: #45566b;
}

.cc-tete {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cc-pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    background: #e4d9ff;
    color: #5568d3;
    font-size: 17px;
}

.cc-ident { min-width: 0; }

.cc-nom {
    display: block;
    font-size: 13px;
    color: #154674;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-ref {
    display: block;
    font-size: 11px;
    color: #93a5b8;
}

.cc-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-l {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    line-height: 1.35;
}

.cc-l > i { flex: 0 0 auto; margin-top: 2px; opacity: .6; }

.cc-l > a,
.cc-l > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-l > a { color: #2d6a4f; }
.cc-l > a:hover { color: #154674; }

/* Une ligne sans valeur ne dit rien : elle disparaît. */
.cc-l.est-vide { display: none; }

/* --- Le pied de la carte : la commande d'ouverture --------------------
 * Un vrai <button>, pas la carte entière : la carte contient des liens
 * (téléphone, courriel) qu'il faut pouvoir cliquer sans tout déplier.
 * -------------------------------------------------------------------- */
.cc-expand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% + 32px);       /* déborde le padding de la carte */
    margin: 12px -16px -14px;
    padding: 9px 16px;
    border: 0;
    border-top: 1px solid #e6eef4;
    border-radius: 0 0 15px 15px;
    background: rgba(240, 245, 250, .6);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7d93a8;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.cc-expand:hover,
.cc-expand:focus-visible {
    background: rgba(45, 106, 79, .07);
    color: #2d6a4f;
    outline: none;
}

/* Un bouton qui ne dit pas son état se lit à l'envers : le chevron tourne
   et le libellé bascule. */
.cc-expand i                    { transition: transform .22s ease; }
.contact-open .cc-expand i      { transform: rotate(90deg); }
.cc-expand-fermer               { display: none; }
.contact-open .cc-expand-ouvrir { display: none; }
.contact-open .cc-expand-fermer { display: inline; }

/* --- Carte contrat --------------------------------------------------- */
.kc-tete {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef1f5;
    font-size: 13px;
    font-weight: 600;
    color: #154674;
}

.kc-tete > i { color: #c23350; }

.kc-num {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kc-liste {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 10px;
    align-items: baseline;
}

.kc-cle   { color: #93a5b8; white-space: nowrap; }
.kc-val   { color: #45566b; overflow: hidden; text-overflow: ellipsis; }

.kc-l.est-vide { display: none; }

/* Le statut porte la couleur décidée dans les réglages : elle arrive en
   style inline, aucune règle d'ici ne doit la recouvrir. */
.kc-statut {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .cc-expand, .cc-expand i,
    #contact-left, #contact-right { transition: none !important; }
}

/* --- Accord avec le thème V3 ----------------------------------------- */
body.t3 .cc-card,
body.t3 .kc-card {
    background: var(--t3-solid);
    color: var(--t3-text-2);
    box-shadow: var(--t3-sh-2);
}

body.t3 .cc-nom,
body.t3 .kc-tete { color: var(--t3-text); }

body.t3 .cc-ref,
body.t3 .kc-cle,
body.t3 .cc-l > i { color: var(--t3-text-3); }

body.t3 .kc-val { color: var(--t3-text-2); }

body.t3 .cc-l > a { color: var(--t3-accent-lo); }
body.t3 .cc-l > a:hover { color: var(--t3-accent); }

body.t3 .cc-pastille {
    background: color-mix(in srgb, var(--t3-accent) 16%, transparent);
    color: var(--t3-accent-lo);
}

body.t3 .cc-expand {
    background: color-mix(in srgb, var(--t3-accent) 5%, transparent);
    border-top-color: var(--t3-border-sub);
    color: var(--t3-text-3);
}

body.t3 .cc-expand:hover,
body.t3 .cc-expand:focus-visible {
    background: color-mix(in srgb, var(--t3-accent) 12%, transparent);
    color: var(--t3-accent-lo);
}

body.t3 .kc-tete { border-bottom-color: var(--t3-border-sub); }