/* =================================================================
   card-flip.css - Cartes 3D qui se retournent au hover
   Pattern repris de Crea-PGC / Selection-Client.css (ScenarX-V2 origin)

   Structure HTML :
     <div class="cards-grid">
       <div class="card-flip">
         <div class="card-inner">
           <div class="card-front">
             <div class="card-icon">JQ</div>
             <div class="card-name">Cegep de Jonquiere</div>
             <div class="card-type">Etablissement</div>
           </div>
           <div class="card-back">
             <div class="card-back-head">
               <div class="back-title">Actions</div>
               <div class="back-actions">
                 <button class="back-btn">...</button>
                 <button class="back-btn danger">...</button>
               </div>
             </div>
             <div class="card-back-body">
               <div class="meta">Cree le 2026-02-12</div>
               <button class="btn-open" title="Ouvrir la fiche"></button>
             </div>
           </div>
         </div>
       </div>

       <div class="card-new">
         <div class="icon">+</div>
         <div class="text">Nouveau</div>
       </div>
     </div>
   ================================================================= */

/* === Grille de cartes === */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gap-lg);
  max-width: 1200px;
  margin: 0 auto;
}

/* === Carte flip ===
   container-type: inline-size permet aux enfants d'utiliser cqi (1% de la largeur
   du container), donc la carte s'adapte a sa taille (pattern Team-UP) */
.card-flip {
  aspect-ratio: 1 / 1;
  perspective: 800px;
  cursor: pointer;
  container-type: inline-size;
}

.card-flip .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.card-flip:hover .card-inner {
  transform: rotateY(180deg);
}

/* Cadre carte : style GLASS (frosted glass) coherent avec les boutons.
   Sur fond noir, l'effet vient du degrade subtile blanc + bordure brillante. */
.card-flip .card-front,
.card-flip .card-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.04) 100%),
    rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}

/* Face avant : padding et gap en cqi pour adapter au size de la carte (Team-UP) */
.card-flip .card-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqi;
  padding: 6cqi;
}

.card-flip .card-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Hover : bordure dore + glow accent (l'effet glass est maintenu) */
.card-flip:hover .card-front,
.card-flip:hover .card-back {
  border-color: rgba(212, 166, 74, 0.50);
  box-shadow:
    0 8px 32px rgba(212, 166, 74, 0.15),
    0 0 24px rgba(212, 166, 74, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}

/* === Face avant === */
.card-flip .card-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--bg-base);                /* noir sur dore : WCAG AAA */
  box-shadow: 0 2px 12px var(--accent-glow);
}

.card-flip .card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

.card-flip .card-type {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* === Face arriere : header === */
.card-flip .card-back-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.card-flip .card-back-head .back-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.card-flip .card-back-head .back-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Bouton d'action sur la face arriere : ROND + glass (standard socle) */
.card-flip .back-btn {
  width: 24px; height: 24px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;                                /* rond (standard socle) */
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-icon), var(--font);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-norm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card-flip .back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--accent);
}
.card-flip .back-btn.danger:hover {
  background: rgba(251, 113, 133, 0.20);
  border-color: rgba(251, 113, 133, 0.40);
  color: var(--error-text);
}

/* Boutons de confirmation suppression inline (coche verte / croix rouge)
   Pattern CLAUDE.md NON NEGOCIABLE, RONDS pour coherence avec le standard */
.card-flip .back-btn-confirm {
  width: 24px; height: 24px;
  border-radius: 50%;                                /* rond */
  cursor: pointer;
  font-family: var(--font-icon), var(--font);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition-norm);
  border: 1px solid;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card-flip .back-btn-confirm.ok {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.40);
  color: var(--success-text);
}
.card-flip .back-btn-confirm.ok:hover {
  background: var(--success);
  color: var(--bg-base);                /* noir sur vert : WCAG AAA */
}
.card-flip .back-btn-confirm.cancel {
  background: rgba(251, 113, 133, 0.15);
  border-color: rgba(251, 113, 133, 0.40);
  color: var(--error-text);
}
.card-flip .back-btn-confirm.cancel:hover {
  background: var(--error);
  color: var(--bg-base);                /* noir sur rose : WCAG AAA */
}

/* === Face arriere : body === */
.card-flip .card-back-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: var(--gap-lg);
}

.card-flip .card-back-body .meta {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
}

/* Bouton "Ouvrir" : utilise la convention socle .btn-open (cercle chevron),
   stylee globalement dans buttons.css. */

/* === Carte "+ Nouveau" (variante en pointille) === */
.card-new {
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3cqi;
  cursor: pointer;
  transition: var(--transition-norm);
  container-type: inline-size;
}

.card-new:hover {
  border-color: var(--accent);
  background: var(--accent-alpha);
}

.card-new .icon {
  font-size: 28px;
  color: var(--text-muted);
}
.card-new:hover .icon { color: var(--accent); }

.card-new .text {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.card-new:hover .text { color: var(--accent); }

/* === Etat vide (aucune carte) === */
.cards-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 12px;
  grid-column: 1 / -1;
}