/* carte-pro.css — carte professionnelle d'agent de sécurité privée.
 *
 * Document légal (art. R613-4 du Code de la sécurité intérieure) : le contenu
 * suit le modèle officiel, l'habillage est paramétrable (Réglages > Sociétés
 * & cartes pro).
 *
 * TOUT est dimensionné en `em` à partir de la largeur de la carte : une seule
 * variable, --cw, fait passer la même carte de l'écran (grande) au papier
 * (85,6 × 54 mm exacts). Aucune valeur en pixels ne se glisse dans la carte,
 * sinon l'impression serait fausse.
 *
 * Cinq modèles, TOUS bâtis sur le même HTML — c'est la grille qui change :
 *   .cp-classique  bandeaux horizontaux, fidèle au modèle officiel
 *   .cp-moderne    photo pleine hauteur à gauche, colonne d'infos à droite
 *   .cp-sobre      fond clair, filet fin — le moins gourmand en encre
 *   .cp-club       habillage Live Club : fond noir, logo en grand, liseré rouge
 *   .cp-nuit       fond noir, photo pleine hauteur à gauche
 *
 * L'IMPRESSION ne passe plus par ce fichier : le serveur produit la feuille A4
 * en PDF (carte-pdf.js) et l'envoie aux imprimantes IPP. Toute retouche d'un
 * modèle ici doit donc être reportée dans carte-pdf.js, et inversement.
 */

.carte-pro {
  --cw: 420px;
  --carte-fond: #14171D;              /* couleur des bandeaux */
  --carte-accent: #FF2D46;            /* filet et puces */
  --carte-radius: 0;
  --cp-logo-h: 2.4em;                 /* hauteur du logo employeur */
  --cp-papier: #fff;
  --cp-encre: #14171D;
  --cp-pied-fond: #EDEFF3;
  --cp-pied-bord: #C8CCD6;
  --cp-label: #4A5163;
  width: var(--cw);
  height: calc(var(--cw) / 1.5852);   /* format carte bancaire : 85,6 / 54 */
  font-size: calc(var(--cw) / 38);    /* toutes les tailles en découlent (v106 : +10 %) */
  font-family: Inter, system-ui, sans-serif;
  background: var(--cp-papier);
  color: var(--cp-encre);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  border-radius: var(--carte-radius);
}

/* ---- Bandeau titre ---- */
.cp-titre {
  background: var(--carte-fond);
  color: #fff;
  padding: 0.55em 0.9em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  border-bottom: 0.18em solid var(--carte-accent);
  flex-shrink: 0;
}
.cp-titre h1 {
  margin: 0;
  font-family: 'Barlow Condensed', Inter, sans-serif;
  font-weight: 700;
  font-size: 1.55em;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cp-logo { max-height: var(--cp-logo-h); max-width: 7em; object-fit: contain; flex-shrink: 0; }

/* ---- Bandeau numéro CNAPS ---- */
.cp-num {
  background: color-mix(in srgb, var(--carte-fond) 88%, #fff);
  color: #fff;
  padding: 0.35em 0.9em 0.4em;
  flex-shrink: 0;
}
.cp-num-label { font-size: 0.66em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; }
/* Le numero de carte est CE QU'ON LIT lors d'un controle : il passe en gros,
   en gras, souligne d'un filet d'accent. Le pas des caracteres se resserre
   automatiquement quand le numero est long (format officiel complet), pour
   qu'il tienne sur une ligne sans jamais deborder. */
.cp-num-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 2.3em;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 0.12em solid var(--carte-accent);
  padding-bottom: 0.08em;
  display: inline-block;
  max-width: 100%;
}
/* Numero au format officiel complet (30 caracteres) : on descend juste ce
   qu'il faut pour tenir sur une ligne, pas plus. */
.cp-num-val.cp-num-long { font-size: 1.88em; letter-spacing: -0.04em; }
.cp-num-src { font-size: 0.55em; font-style: italic; opacity: 0.55; margin-top: 0.12em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Corps : photo + identité ---- */
.cp-corps { display: flex; gap: 0.85em; padding: 0.7em 0.9em; flex: 1; min-height: 0; overflow: hidden; }
.cp-photo {
  width: 8.4em;
  height: 11.2em;           /* photo d'identité : ratio 3/4 */
  object-fit: cover;
  background: #E7E9EE;
  border: 0.08em solid var(--cp-pied-bord);
  flex-shrink: 0;
  align-self: flex-start;
}
.cp-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.32em; overflow: hidden; }
/* Grille 2 colonnes plutôt que flex : le libellé garde une largeur fixe, ce
   qui aligne les valeurs et empêche « NOM – Prénom » de passer à la ligne. */
.cp-ligne { display: grid; grid-template-columns: 6.2em 1fr; gap: 0.45em; align-items: baseline; }
.cp-k { font-size: 0.78em; font-weight: 700; color: var(--cp-label); letter-spacing: 0.02em; white-space: nowrap; }
.cp-v { font-size: 1.02em; font-weight: 600; min-width: 0; }
/* Le nom retrecit tout seul quand il est long : deux lignes maximum, jamais
   de debordement hors de la carte. */
.cp-v.cp-nom { font-family: 'Barlow Condensed', Inter, sans-serif; font-size: 1.6em; font-weight: 700; line-height: 1.02;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-v.cp-nom.cp-nom-long { font-size: 1.2em; }
.cp-act-titre { font-size: 0.68em; font-weight: 700; color: var(--cp-label); margin-top: 0.15em; letter-spacing: 0.02em; }
.cp-activites { margin: 0.15em 0 0; padding: 0; list-style: none; }
/* Les mentions CNAPS sont longues et la carte fait 54 mm de haut : la taille
   descend par palier selon LEUR NOMBRE, pour qu'elles tiennent toutes sans
   jamais deborder. Mieux vaut quatre mentions petites qu'une escamotee sur un
   document legal. */
.cp-activites li { line-height: 1.22; font-weight: 500;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.cp-activites            li { font-size: 0.86em; -webkit-line-clamp: 2; }
.cp-activites.cp-act-2   li { font-size: 0.78em; -webkit-line-clamp: 2; }
.cp-activites.cp-act-3   li { font-size: 0.64em; -webkit-line-clamp: 1; }
.cp-activites.cp-act-4   li { font-size: 0.55em; -webkit-line-clamp: 1; line-height: 1.18; }
.cp-activites li::before { content: '▪'; color: var(--carte-accent); margin-right: 0.35em; }

/* ---- Pied : employeur ---- */
.cp-pied {
  background: var(--cp-pied-fond);
  border-top: 0.08em solid var(--cp-pied-bord);
  padding: 0.55em 0.9em;
  display: flex;
  align-items: center;
  gap: 0.8em;
  flex-shrink: 0;
}
.cp-pied-txt { flex: 1; min-width: 0; }
.cp-soc-nom { font-family: 'Barlow Condensed', Inter, sans-serif; font-weight: 700; font-size: 1.25em; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-soc-l { font-size: 0.8em; line-height: 1.28; color: #363B47; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-soc-auto { font-size: 0.78em; line-height: 1.28; color: #363B47; margin-top: 0.12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===========================================================================
   Modèle « moderne » — photo pleine hauteur à gauche.
   `display: contents` sur .cp-corps dissout le conteneur : la photo et le bloc
   d'infos deviennent des enfants directs de la grille de la carte, ce qui
   permet à la photo d'occuper les quatre rangées. Aucun HTML différent.
   =========================================================================== */
.carte-pro.cp-moderne {
  display: grid;
  grid-template-columns: 11.5em minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.cp-moderne .cp-corps { display: contents; }
.cp-moderne .cp-photo {
  grid-column: 1; grid-row: 1 / -1;
  width: 100%; height: 100%;
  border: none; border-right: 0.18em solid var(--carte-accent);
  align-self: stretch;
}
/* Sans photo, la colonne resterait vide : un aplat sombre vaut mieux qu'un trou. */
.cp-moderne::before {
  content: ''; grid-column: 1; grid-row: 1 / -1;
  background: var(--carte-fond); z-index: 0;
}
.cp-moderne .cp-photo { z-index: 1; }
.cp-moderne .cp-titre,
.cp-moderne .cp-num,
.cp-moderne .cp-infos,
.cp-moderne .cp-pied { grid-column: 2; }
.cp-moderne .cp-titre { border-bottom: none; padding-bottom: 0.35em; }
.cp-moderne .cp-titre h1 { font-size: 1.4em; }
.cp-moderne .cp-num { background: var(--carte-fond); padding-top: 0; border-bottom: 0.14em solid var(--carte-accent); }
.cp-moderne .cp-infos { padding: 0.7em 0.9em; align-content: start; }
/* La colonne de libellés doit tenir « NOM – Prénom » sans déborder : à 5,6em
   le libellé chevauchait la valeur (la nowrap l'empêchait de se replier). */
.cp-moderne .cp-ligne { grid-template-columns: 6.4em 1fr; gap: 0.6em; }
.cp-moderne .cp-v.cp-nom { font-size: 1.35em; }
/* Colonne d'infos plus etroite que sur les autres modeles (la photo prend
   11,5em) : le numero au format complet y etait coupe par l'ellipse. */
.cp-moderne .cp-num-val { font-size: 1.7em; }
.cp-moderne .cp-num-val.cp-num-long { font-size: 1.38em; }

/* ===========================================================================
   Modèle « sobre » — fond clair, pas d'aplat sombre.
   Le plus économe à l'impression et le plus lisible en photocopie.
   =========================================================================== */
.carte-pro.cp-sobre {
  --cp-pied-fond: #fff;
  border: 0.08em solid var(--cp-pied-bord);
}
.cp-sobre .cp-titre {
  background: transparent; color: var(--cp-encre);
  border-bottom: 0.22em solid var(--carte-accent);
  padding-bottom: 0.4em;
}
.cp-sobre .cp-num {
  background: transparent; color: var(--cp-encre);
  border-bottom: 0.08em solid var(--cp-pied-bord);
}
.cp-sobre .cp-num-label { opacity: 1; color: var(--cp-label); }
.cp-sobre .cp-num-src { opacity: 1; color: var(--cp-label); }
.cp-sobre .cp-pied { border-top: 0.08em solid var(--cp-pied-bord); }

/* ===========================================================================
   Modèles « club » et « nuit » — habillage Live Club.
   Fond noir profond, logo traité comme l'élément principal, photo encadrée
   d'un liseré rouge, libellé en lecture verticale sur la tranche gauche.
   Format paysage 85,6 × 54 mm comme les autres : une seule feuille A4 (2 × 5).
   =========================================================================== */
.cp-vertical { display: none; }
.carte-pro.cp-club, .carte-pro.cp-nuit {
  --cp-papier: #0B0D11;
  --cp-encre: #fff;
  --cp-label: #9AA3B4;
  color: #fff;
}
/* Voile diagonal discret : donne du relief sans coûter d'encre. */
.cp-club::after, .cp-nuit::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, transparent 42%, rgba(255,255,255,.055) 52%, transparent 62%);
}

.carte-pro.cp-club {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) 8.2em;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.cp-club .cp-vertical {
  display: block; grid-area: 1 / 1 / 4 / 2;
  writing-mode: vertical-rl; transform: rotate(180deg);
  align-self: center; justify-self: center;
  font-size: 0.72em; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--cp-label);
}
.cp-club .cp-titre {
  grid-area: 1 / 2 / 2 / 3;
  background: transparent; border-bottom: none;
  padding: 0.75em 0.6em 0.2em 0; justify-content: flex-start;
}
.cp-club .cp-titre h1 { display: none; }      /* remplacé par le libellé vertical */
/* Plafond : a « tres grand », le logo poussait le nom hors de la carte. */
.cp-club .cp-logo { max-height: min(var(--cp-logo-h), 2.9em); max-width: 100%; }
.cp-club .cp-corps { display: contents; }
.cp-club .cp-photo {
  /* PAS de « height: 100% » : elle s'ajoute aux marges et fait deborder la
     photo dans le bandeau employeur. « align-self: stretch » l'ajuste a sa
     zone, marges comprises. */
  grid-area: 1 / 3 / 4 / 4; width: 100%;
  align-self: stretch; margin: 0.6em 0.6em 0.5em 0; min-height: 0;
  border: 0.16em solid var(--carte-accent); border-radius: 0.45em;
  box-sizing: border-box; background: #171B22;
}
/* min-height: 0 est INDISPENSABLE dans une grille : sans lui, une rangee en
   « 1fr » se laisse deborder par son contenu et le bloc d'infos chevauchait le
   numero de carte des qu'il y avait quatre mentions. */
.cp-club .cp-infos { grid-area: 2 / 2 / 3 / 3; padding: 0.2em 0.6em 0.3em 0; gap: 0.25em; min-height: 0; }
/* Colonne plus etroite que sur le modele classique : un palier de moins. */
.cp-club .cp-activites            li { font-size: 0.74em; }
.cp-club .cp-activites.cp-act-2   li { font-size: 0.68em; }
.cp-club .cp-activites.cp-act-3   li { font-size: 0.6em; }
.cp-club .cp-activites.cp-act-4   li { font-size: 0.54em; }
.cp-club .cp-ligne { grid-template-columns: 1fr; gap: 0; }
.cp-club .cp-k { font-size: 0.7em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cp-label); }
.cp-club .cp-v.cp-nom { font-size: 1.7em; letter-spacing: 0.01em; }
.cp-club .cp-act-titre { font-size: 0.7em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cp-label); }
.cp-club .cp-num {
  grid-area: 3 / 2 / 4 / 3; background: transparent;
  padding: 0 0.6em 0.3em 0; display: flex; flex-direction: column; gap: 0;
}
.cp-club .cp-num-label { font-size: 0.6em; letter-spacing: 0.12em; opacity: .6; }
.cp-club .cp-num-val { font-size: 1.5em; margin: 0; }
.cp-club .cp-num-src { display: none; }        /* la mention CNAPS passe en pied */
.cp-club .cp-pied {
  grid-area: 4 / 1 / 5 / 4;
  background: rgba(255,255,255,.05); border-top: 0.14em solid var(--carte-accent);
  padding: 0.4em 0.9em; color: #fff;
}
.cp-club .cp-soc-nom { font-size: 1em; }
.cp-club .cp-soc-l, .cp-club .cp-soc-auto { color: #B7BFCD; font-size: 0.7em; }

/* --- « nuit » : la photo occupe toute la hauteur à gauche --- */
.carte-pro.cp-nuit {
  display: grid;
  grid-template-columns: 10em minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.cp-nuit .cp-corps { display: contents; }
.cp-nuit .cp-photo {
  grid-column: 1; grid-row: 1 / -1; width: 100%; height: 100%;
  border: none; border-right: 0.16em solid var(--carte-accent); align-self: stretch;
}
.cp-nuit::before {
  content: ''; grid-column: 1; grid-row: 1 / -1;
  background: linear-gradient(160deg, #1A1F29, #0B0D11); z-index: 0;
}
.cp-nuit .cp-photo { z-index: 1; }
.cp-nuit .cp-vertical {
  display: block; grid-column: 2; grid-row: 1;
  writing-mode: horizontal-tb; padding: 0.7em 0.9em 0 1.1em;
  font-size: 0.68em; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--cp-label);
}
.cp-nuit .cp-titre {
  grid-column: 2; grid-row: 2; background: transparent; border-bottom: none;
  padding: 0.15em 0.9em 0.35em 1.1em; justify-content: flex-start;
}
.cp-nuit .cp-titre h1 { display: none; }
.cp-nuit .cp-logo { max-height: min(var(--cp-logo-h), 2.6em); max-width: 100%; }
.cp-nuit .cp-infos { grid-column: 2; grid-row: 3; padding: 0 0.9em 0.4em 1.1em; gap: 0.25em; min-height: 0; }
.cp-nuit .cp-activites            li { font-size: 0.74em; }
.cp-nuit .cp-activites.cp-act-2   li { font-size: 0.68em; }
.cp-nuit .cp-activites.cp-act-3   li { font-size: 0.6em; }
.cp-nuit .cp-activites.cp-act-4   li { font-size: 0.54em; }
.cp-nuit .cp-ligne { grid-template-columns: 1fr; gap: 0; }
.cp-nuit .cp-k { font-size: 0.7em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cp-label); }
.cp-nuit .cp-v.cp-nom { font-size: 1.5em; }
.cp-nuit .cp-act-titre { font-size: 0.7em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cp-label); }
.cp-nuit .cp-num { grid-column: 2; grid-row: 3; align-self: end; background: transparent; padding: 0 0.9em 0.2em 1.1em; }
.cp-nuit .cp-num-label { font-size: 0.58em; letter-spacing: 0.12em; opacity: .58; }
.cp-nuit .cp-num-val { font-size: 1.4em; }
.cp-nuit .cp-num-src { display: none; }
/* Le pied ne traverse plus la carte : son texte se posait sur la photo et
   devenait illisible. Il reste dans la colonne d'informations. */
.cp-nuit .cp-pied {
  grid-column: 2; grid-row: 4;
  background: rgba(255,255,255,.05); border-top: 0.14em solid var(--carte-accent);
  padding: 0.4em 0.9em 0.4em 1.1em; color: #fff; z-index: 2;
}
.cp-nuit .cp-soc-nom { font-size: 0.95em; }
.cp-nuit .cp-soc-l, .cp-nuit .cp-soc-auto { color: #B7BFCD; font-size: 0.68em; }

/* ---- Écran : présentation des cartes ---- */
.cartes-liste { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; margin-top: 22px; }
.carte-bloc { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.carte-bloc .carte-pro {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
  transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.carte-bloc:hover .carte-pro { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3); }
.carte-bloc-nom { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.carte-avert {
  max-width: 420px; font-size: 12.5px; line-height: 1.5; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: var(--radius-sm); padding: 8px 11px; text-align: left;
}
.carte-avert a { color: var(--warn); margin-left: 6px; white-space: nowrap; }
.cartes-bandeau {
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-radius: var(--radius-md); padding: 12px 16px; margin-top: 26px; font-size: 13.5px; line-height: 1.6;
}
/* Barre d'outils de la page Cartes : zoom + modèle, sans quitter la page. */
.cartes-barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 14px; margin-top: 16px;
}
.cartes-barre label { font-size: 12.5px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.cartes-barre .spacer { flex: 1; }

/* ---- Aperçu PDF avant impression ---- */
/* L'impression passe par le serveur (PDF + IPP) : plus aucune feuille A4 en
   HTML, plus de règles @media print. Ce qui est affiché ici EST le document
   envoyé à l'imprimante. */
.cp-apercu-pdf {
  width: 100%; height: 62vh; min-height: 380px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #fff; display: block;
}

/* ---------------------------------------------------------------------------
   Page des cartes professionnelles : agencement
   ---------------------------------------------------------------------------
   `.mc-page-head` n'avait AUCUNE regle : le titre et les actions s'empilaient
   au lieu de se repondre sur une ligne, d'ou trois blocs alignes a gauche et un
   bouton d'impression perdu au milieu de la page. */
.mc-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 22px;
}
.mc-page-head .mc-h1 { margin: 0 0 4px; }
.mc-page-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Pleine largeur, comme la fiche agent : une planche de cartes n'a aucune
   raison d'etre bridee a 1500 px. */
body[data-page="Cartes professionnelles"] .page { max-width: none; }

/* Les cartes prennent la largeur utile, les reglages tiennent dans un panneau
   lateral de largeur fixe. */
/* Rangee souple plutot que grille a colonnes fixes : avec UNE carte, une
   colonne en `1fr` s'etirait sur toute la largeur utile et laissait pres de
   900 px de vide entre la carte et le panneau. Ici la colonne principale ne
   prend que ce qu'elle a a montrer, et le panneau vient se placer juste apres.
   Avec plusieurs cartes, la liste s'etale et repousse naturellement le
   panneau vers le bord. */
.ct-corps { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
/* Plafonnee a la largeur disponible MOINS le panneau : sans ce plafond, une
   liste de huit cartes prenait toute la ligne et renvoyait le panneau en
   dessous. Avec une seule carte, `flex: 0 1 auto` la laisse se retracter. */
.ct-principal { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 348px); }
.ct-cote { flex: 0 0 320px; }
.ct-cote { display: flex; flex-direction: column; gap: 16px; }

/* Dans le panneau, la barre de reglages passe en colonne : sur 320 px, une
   rangee horizontale se serait repliee n'importe comment. */
.ct-cote .cartes-barre { flex-direction: column; align-items: stretch; gap: 14px; margin: 0; }
.ct-cote .cartes-barre label { flex-direction: column; align-items: flex-start; gap: 6px; }
.ct-cote .cartes-barre select, .ct-cote .cartes-barre input[type="range"] { width: 100%; }
.ct-cote .cartes-bandeau { margin: 0; }

/* Les cartes s'alignent a GAUCHE et non au centre : centrees, une carte unique
   flottait au milieu d'un vide de 500 px de chaque cote. */
.ct-principal .cartes-liste { justify-content: flex-start; margin-top: 0; }

@media (max-width: 1100px) {
  .ct-principal { max-width: 100%; }
  .ct-cote { position: static; }
  .ct-cote .cartes-barre { flex-direction: row; align-items: center; }
  .ct-cote .cartes-barre label { flex-direction: row; align-items: center; }
  .ct-principal .cartes-liste { justify-content: center; }
}