/* ============================================================================
   BIBLIOTHEQUE UI JABS  -  cards.css
   Depend de : theme.css, buttons.css

   Une carte est un objet cliquable dans une liste d'objets comparables.
   Si le contenu n'est pas comparable a ses voisins, ce n'est pas une carte,
   c'est un panneau. Regle tenue partout ici : une seule zone cliquable
   principale par carte, jamais un lien imbrique dans un autre lien.
   ========================================================================= */

.carte {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.carte__corps { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); flex: 1; }
.carte__titre { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-text); letter-spacing: -.01em; }
.carte__texte { margin: 0; font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.55; }
.carte__pied  { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-border); background: var(--c-surface-2); }
.cartes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-4); width: 100%; }

/* ===========================================================================
   FAMILLE A  -  CARTES DE BASE
   ======================================================================== */

/* @v CRD-A1
@nom Carte simple
@usage Le socle. Titre, texte, pied d'actions. Tout le reste de ce fichier en derive.
@html
<div class="carte" style="max-width:320px">
  <div class="carte__corps">
    <h3 class="carte__titre">Pompe a chaleur air/eau</h3>
    <p class="carte__texte">Remplacement d'une chaudiere fioul par une PAC 11 kW, avec depose et evacuation de la cuve.</p>
  </div>
  <div class="carte__pied"><button class="btn btn--secondaire btn--sm">Detail</button><button class="btn btn--plein btn--sm">Choisir</button></div>
</div>
@tw flex flex-col rounded-xl border bg-white [&>div:last-child]:border-t [&>div:last-child]:bg-slate-50
@end */
/* voir le socle .carte en haut du fichier */
/* @endv */

/* @v CRD-A2
@nom Carte cliquable
@usage Toute la carte est un lien. Un seul element interactif : imbriquer un bouton dans un lien casse la navigation au clavier.
@html
<div class="cartes-grille">
  <a href="#" class="carte carte--lien">
    <div class="carte__corps">
      <h3 class="carte__titre">Dossier 2026-103</h3>
      <p class="carte__texte">Neuilly-sur-Marne (93) - pose prevue le 24 septembre</p>
      <span class="carte__fleche">Ouvrir le dossier {{icon:arrow-right}}</span>
    </div>
  </a>
  <a href="#" class="carte carte--lien">
    <div class="carte__corps">
      <h3 class="carte__titre">Dossier 2026-118</h3>
      <p class="carte__texte">Colombes (92) - devis envoye, en attente de signature</p>
      <span class="carte__fleche">Ouvrir le dossier {{icon:arrow-right}}</span>
    </div>
  </a>
</div>
@tw group block transition hover:-translate-y-0.5 hover:border-blue-500 hover:shadow-md
@end */
.carte--lien {
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-fast);
}
.carte--lien:hover { transform: translateY(-2px); border-color: var(--c-primary); box-shadow: var(--sh-2); }
.carte--lien:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.carte__fleche {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-primary-ink);
}
.carte__fleche svg { width: 15px; height: 15px; transition: transform var(--t-base); }
.carte--lien:hover .carte__fleche svg { transform: translateX(4px); }
/* @endv */

/* @v CRD-A3
@nom Carte avec image
@usage Realisation, article, produit. Le rapport de l'image est fixe : sans lui, les cartes d'une meme rangee ne s'alignent plus.
@html
<div class="cartes-grille">
  <article class="carte">
    <div class="carte__image doc-photo doc-photo--3"><span class="doc-etat doc-etat--ok">Termine</span></div>
    <div class="carte__corps">
      <span class="carte__sur">Pompe a chaleur</span>
      <h3 class="carte__titre">Maison 112 m2 a Neuilly</h3>
      <p class="carte__texte">Depose fioul, PAC 11 kW, 4 radiateurs remplaces.</p>
    </div>
  </article>
  <article class="carte">
    <div class="carte__image doc-photo doc-photo--2"></div>
    <div class="carte__corps">
      <span class="carte__sur">Isolation</span>
      <h3 class="carte__titre">Combles perdus a Colombes</h3>
      <p class="carte__texte">Soufflage laine de roche, R = 7.</p>
    </div>
  </article>
</div>
@tw aspect-[16/10] w-full object-cover
@end */
.carte__image { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.carte__sur {
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-primary-ink);
}
/* @endv */

/* @v CRD-A4
@nom Carte horizontale
@usage Resultat de recherche, ligne de panier. Sur mobile elle repasse en vertical plutot que de comprimer l'image.
@html
<article class="carte carte--horizontale">
  <div class="carte__image doc-photo doc-photo--1"></div>
  <div class="carte__corps">
    <h3 class="carte__titre">Chauffe-eau thermodynamique 200 L</h3>
    <p class="carte__texte">Classe A+, COP 3,2. Eligible MaPrimeRenov et CEE.</p>
    <div class="carte__ligne"><strong class="carte__prix">1 890 EUR</strong><span class="doc-etiq doc-etiq--ok">En stock</span></div>
  </div>
</article>
@tw flex flex-row max-sm:flex-col [&>div:first-child]:w-40 [&>div:first-child]:shrink-0
@end */
.carte--horizontale { flex-direction: row; width: 100%; max-width: 480px; }
.carte--horizontale .carte__image { width: 150px; flex: none; aspect-ratio: auto; }
.carte__ligne { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-2); }
.carte__prix { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; color: var(--c-text); }
@media (max-width: 560px) {
  .carte--horizontale { flex-direction: column; }
  .carte--horizontale .carte__image { width: 100%; aspect-ratio: 16 / 9; }
}
/* @endv */

/* @v CRD-A5
@nom Carte avec en-tete colore
@usage Categoriser d'un coup d'oeil dans une grille : chaque famille sa teinte. La couleur double toujours un mot, jamais l'inverse.
@html
<div class="cartes-grille">
  <div class="carte"><div class="carte__bandeau">Chauffage</div><div class="carte__corps"><h3 class="carte__titre">PAC air/eau</h3><p class="carte__texte">11 kW, monobloc</p></div></div>
  <div class="carte"><div class="carte__bandeau carte__bandeau--vert">Isolation</div><div class="carte__corps"><h3 class="carte__titre">Combles perdus</h3><p class="carte__texte">Soufflage, R = 7</p></div></div>
  <div class="carte"><div class="carte__bandeau carte__bandeau--orange">Sanitaire</div><div class="carte__corps"><h3 class="carte__titre">Chauffe-eau</h3><p class="carte__texte">200 L thermodynamique</p></div></div>
</div>
@tw border-t-4 border-t-blue-600
@end */
.carte__bandeau {
  padding: 7px var(--sp-4);
  background: var(--c-primary);
  color: var(--c-primary-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.carte__bandeau--vert   { background: var(--c-success); }
.carte__bandeau--orange { background: var(--c-warn); }
.carte__bandeau--rouge  { background: var(--c-danger); }
/* @endv */

/* @v CRD-A6
@nom Carte selectionnable
@usage Choix exclusif entre des offres decrites. Le radio reste present pour le clavier et les lecteurs d'ecran, meme s'il est masque visuellement.
@html
<div class="cartes-grille">
  <label class="carte carte--choix">
    <input type="radio" name="offre" checked>
    <div class="carte__corps">
      <span class="carte__coche">{{icon:check}}</span>
      <h3 class="carte__titre">Formule Essentielle</h3>
      <p class="carte__texte">Pose et mise en service, garantie 2 ans.</p>
      <strong class="carte__prix">4 280 EUR</strong>
    </div>
  </label>
  <label class="carte carte--choix">
    <input type="radio" name="offre">
    <div class="carte__corps">
      <span class="carte__coche">{{icon:check}}</span>
      <h3 class="carte__titre">Formule Serenite</h3>
      <p class="carte__texte">Pose, entretien annuel et garantie 5 ans.</p>
      <strong class="carte__prix">5 120 EUR</strong>
    </div>
  </label>
</div>
@tw has-[:checked]:border-blue-600 has-[:checked]:ring-1 has-[:checked]:ring-blue-600
@end */
.carte--choix { cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.carte--choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.carte--choix .carte__corps { position: relative; }
.carte__coche {
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 2px solid var(--c-border-strong);
  border-radius: var(--r-full);
  color: transparent;
}
.carte__coche svg { width: 13px; height: 13px; }
.carte--choix:hover { border-color: var(--c-border-strong); }
.carte--choix:has(input:checked) { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.carte--choix:has(input:checked) .carte__coche { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.carte--choix:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* @endv */

/* ===========================================================================
   FAMILLE B  -  CARTES DE DONNEES
   ======================================================================== */

/* @v CRD-B1
@nom Carte statistique
@usage Tuile de tableau de bord. La variation porte un signe ET une fleche : lue en noir et blanc, la couleur seule ne dit rien.
@html
<div class="cartes-grille">
  <div class="carte stat">
    <span class="stat__label">Chiffre d'affaires du mois</span>
    <strong class="stat__valeur">48 250 EUR</strong>
    <span class="stat__delta is-hausse">{{icon:arrow-up}} +12,4 % vs aout</span>
  </div>
  <div class="carte stat">
    <span class="stat__label">Devis en attente</span>
    <strong class="stat__valeur">17</strong>
    <span class="stat__delta is-baisse">{{icon:arrow-up}} -3 vs la semaine derniere</span>
  </div>
  <div class="carte stat">
    <span class="stat__label">Taux de signature</span>
    <strong class="stat__valeur">62 %</strong>
    <span class="stat__delta">stable</span>
  </div>
</div>
@tw flex flex-col gap-1 p-4 [&_strong]:text-3xl [&_strong]:font-extrabold [&_strong]:tabular-nums
@end */
.stat { padding: var(--sp-4); gap: 4px; }
.stat__label { font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: var(--fw-medium); }
.stat__valeur { font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--c-text); font-variant-numeric: tabular-nums; }
.stat__delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-text-muted);
}
.stat__delta svg { width: 13px; height: 13px; }
.stat__delta.is-hausse { color: var(--c-success); }
.stat__delta.is-baisse { color: var(--c-danger); }
.stat__delta.is-baisse svg { transform: rotate(180deg); }
/* @endv */

/* @v CRD-B2
@nom Carte statistique avec courbe
@usage Meme tuile, plus la tendance. La courbe est decorative : le chiffre reste la seule information a lire.
@html
<div class="cartes-grille">
  <div class="carte stat stat--courbe">
    <span class="stat__label">Devis envoyes</span>
    <strong class="stat__valeur">34</strong>
    <span class="stat__delta is-hausse">{{icon:arrow-up}} +8 sur 30 jours</span>
    <svg class="stat__courbe" viewBox="0 0 100 28" preserveAspectRatio="none" aria-hidden="true">
      <path d="M0 22 L14 19 L28 21 L42 12 L56 15 L70 7 L84 9 L100 2" fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke"/>
    </svg>
  </div>
  <div class="carte stat stat--courbe">
    <span class="stat__label">Interventions</span>
    <strong class="stat__valeur">12</strong>
    <span class="stat__delta is-baisse">{{icon:arrow-up}} -2 sur 30 jours</span>
    <svg class="stat__courbe stat__courbe--baisse" viewBox="0 0 100 28" preserveAspectRatio="none" aria-hidden="true">
      <path d="M0 6 L14 9 L28 5 L42 14 L56 11 L70 18 L84 16 L100 23" fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke"/>
    </svg>
  </div>
</div>
@tw relative overflow-hidden [&_svg]:absolute [&_svg]:inset-x-0 [&_svg]:bottom-0 [&_svg]:h-10 [&_svg]:opacity-30
@end */
.stat--courbe { position: relative; padding-bottom: var(--sp-8); overflow: hidden; }
.stat__courbe {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42px;
  color: var(--c-success);
  opacity: .45;
}
.stat__courbe--baisse { color: var(--c-danger); }
/* @endv */

/* @v CRD-B3
@nom Carte avec jauge
@usage Une valeur rapportee a un objectif. Le reste a faire est plus utile que le pourcentage seul : c'est lui qui declenche l'action.
@html
<div class="cartes-grille">
  <div class="carte stat">
    <span class="stat__label">Objectif du trimestre</span>
    <strong class="stat__valeur">148 000 EUR</strong>
    <div class="stat__jauge"><span style="--p: 74%"></span></div>
    <span class="stat__delta">74 % de l'objectif - il reste 52 000 EUR</span>
  </div>
  <div class="carte stat">
    <span class="stat__label">Dossiers complets</span>
    <strong class="stat__valeur">23 / 31</strong>
    <div class="stat__jauge"><span class="is-alerte" style="--p: 74%"></span></div>
    <span class="stat__delta">8 dossiers attendent une piece</span>
  </div>
</div>
@tw h-2 w-full rounded-full bg-slate-200 [&>span]:block [&>span]:h-full [&>span]:rounded-full
@end */
.stat__jauge { height: 8px; margin: 6px 0 4px; border-radius: var(--r-full); background: var(--c-surface-3); overflow: hidden; }
.stat__jauge span { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--c-primary); transition: width var(--t-slow); }
.stat__jauge span.is-alerte { background: var(--c-warn); }
/* @endv */

/* @v CRD-B4
@nom Carte de personne
@usage Client, technicien, contact. Le moyen de contact est une action, pas un texte a recopier a la main.
@html
<div class="cartes-grille">
  <div class="carte personne">
    <span class="personne__avatar">JK</span>
    <div class="personne__corps">
      <strong>Julien Krissi</strong>
      <small>Gerant - JABS</small>
      <div class="personne__actions">
        <a href="tel:+33612345678" class="btn btn--secondaire btn--dense">{{icon:phone}} Appeler</a>
        <a href="mailto:contact@jabsdev.fr" class="btn btn--secondaire btn--dense">{{icon:mail}} Ecrire</a>
      </div>
    </div>
  </div>
  <div class="carte personne">
    <span class="personne__avatar personne__avatar--vert">SM</span>
    <div class="personne__corps">
      <strong>Sophie Martin</strong>
      <small>Technicienne - equipe Nord</small>
      <div class="personne__actions">
        <a href="tel:+33612345678" class="btn btn--secondaire btn--dense">{{icon:phone}} Appeler</a>
      </div>
    </div>
  </div>
</div>
@tw flex flex-row gap-3 p-4 [&_span:first-child]:h-12 [&_span:first-child]:w-12 [&_span:first-child]:rounded-full
@end */
.personne { flex-direction: row; gap: var(--sp-3); padding: var(--sp-4); align-items: flex-start; }
.personne__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--c-primary-soft);
  color: var(--c-primary-ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}
.personne__avatar--vert { background: var(--c-success-soft); color: var(--c-success); }
.personne__corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.personne__corps strong { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.personne__corps small  { font-size: var(--fs-xs); color: var(--c-text-muted); }
.personne__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
/* @endv */

/* @v CRD-B5
@nom Carte de dossier
@usage L'objet central d'un CRM d'artisan : reference, client, statut, montant, prochaine echeance. Tout ce qui sert a decider, rien de plus.
@html
<div class="cartes-grille">
  <a href="#" class="carte carte--lien dossier">
    <div class="dossier__tete">
      <span class="dossier__ref">2026-103</span>
      <span class="doc-etiq doc-etiq--ok">Signe</span>
    </div>
    <div class="carte__corps">
      <h3 class="carte__titre">Krissi Julien</h3>
      <p class="carte__texte">Neuilly-sur-Marne (93) - PAC air/eau 11 kW</p>
      <dl class="dossier__infos">
        <div><dt>Montant</dt><dd>4 280 EUR</dd></div>
        <div><dt>Pose</dt><dd>24 sept.</dd></div>
        <div><dt>Equipe</dt><dd>Nord</dd></div>
      </dl>
    </div>
  </a>
  <a href="#" class="carte carte--lien dossier">
    <div class="dossier__tete">
      <span class="dossier__ref">2026-118</span>
      <span class="doc-etiq doc-etiq--attente">A relancer</span>
    </div>
    <div class="carte__corps">
      <h3 class="carte__titre">Martin Sophie</h3>
      <p class="carte__texte">Colombes (92) - chauffe-eau thermodynamique</p>
      <dl class="dossier__infos">
        <div><dt>Montant</dt><dd>1 890 EUR</dd></div>
        <div><dt>Devis</dt><dd>il y a 9 j</dd></div>
        <div><dt>Equipe</dt><dd>Ouest</dd></div>
      </dl>
    </div>
  </a>
</div>
@tw [&_dl]:grid [&_dl]:grid-cols-3 [&_dt]:text-[11px] [&_dt]:uppercase [&_dd]:font-bold
@end */
.dossier__tete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
}
.dossier__ref { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-text-soft); }
.dossier__infos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.dossier__infos dt { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-muted); }
.dossier__infos dd { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-text); }
/* @endv */

/* ===========================================================================
   FAMILLE C  -  CARTES EDITORIALES ET COMMERCIALES
   ======================================================================== */

/* @v CRD-C1
@nom Carte de tarif
@usage Trois formules cote a cote. Celle du milieu est mise en avant : sans reperage, la comparaison prend trop de temps et personne ne choisit.
@html
<div class="cartes-grille cartes-grille--tarifs">
  <div class="carte tarif">
    <span class="tarif__nom">Essentiel</span>
    <span class="tarif__prix">29 <em>EUR / mois</em></span>
    <ul class="tarif__liste">
      <li>{{icon:check}} Devis et factures illimites</li>
      <li>{{icon:check}} 1 utilisateur</li>
      <li>{{icon:check}} Support par courriel</li>
    </ul>
    <button class="btn btn--secondaire btn--bloc">Choisir</button>
  </div>
  <div class="carte tarif tarif--vedette">
    <span class="tarif__ruban">Le plus choisi</span>
    <span class="tarif__nom">Pro</span>
    <span class="tarif__prix">59 <em>EUR / mois</em></span>
    <ul class="tarif__liste">
      <li>{{icon:check}} Tout Essentiel</li>
      <li>{{icon:check}} 5 utilisateurs</li>
      <li>{{icon:check}} Relances automatiques</li>
      <li>{{icon:check}} Application mobile</li>
    </ul>
    <button class="btn btn--plein btn--bloc">Choisir</button>
  </div>
</div>
@tw relative [&.vedette]:border-2 [&.vedette]:border-blue-600 [&.vedette]:scale-105
@end */
.cartes-grille--tarifs { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; }
.tarif { padding: var(--sp-5); gap: var(--sp-3); position: relative; }
.tarif__nom { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-text-soft); }
.tarif__prix { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--c-text); }
.tarif__prix em { font-size: var(--fs-sm); font-weight: var(--fw-medium); font-style: normal; color: var(--c-text-muted); }
.tarif__liste { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.tarif__liste li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.45; }
.tarif__liste svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--c-success); }
.tarif--vedette { border: 2px solid var(--c-primary); box-shadow: var(--sh-3); }
.tarif__ruban {
  position: absolute;
  top: 0; right: var(--sp-4);
  transform: translateY(-50%);
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--c-primary-text);
  font-size: 11px;
  font-weight: var(--fw-bold);
}
/* @endv */

/* @v CRD-C2
@nom Carte de temoignage
@usage Preuve sociale d'une landing page. Un temoignage sans nom ni lieu ne convainc personne : les deux sont indispensables.
@html
<div class="cartes-grille">
  <figure class="carte temoignage">
    <div class="temoignage__notes">{{icon:star}}{{icon:star}}{{icon:star}}{{icon:star}}{{icon:star}}</div>
    <blockquote>Intervention rapide et proprete irreprochable. La pompe a chaleur a ete posee en deux jours, et le dossier MaPrimeRenov a ete monte par leurs soins.</blockquote>
    <figcaption><span class="personne__avatar">MD</span><span><strong>Marie D.</strong><small>Neuilly-sur-Marne, aout 2026</small></span></figcaption>
  </figure>
</div>
@tw [&_blockquote]:text-sm [&_blockquote]:italic [&_figcaption]:flex [&_figcaption]:items-center [&_figcaption]:gap-3
@end */
.temoignage { padding: var(--sp-5); gap: var(--sp-3); }
.temoignage__notes { display: flex; gap: 2px; color: var(--c-warn); }
.temoignage__notes svg { width: 16px; height: 16px; fill: currentColor; }
.temoignage blockquote { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: var(--c-text); }
.temoignage figcaption { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-2); }
.temoignage figcaption > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.temoignage figcaption strong { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.temoignage figcaption small  { font-size: var(--fs-xs); color: var(--c-text-muted); }
.temoignage .personne__avatar { width: 38px; height: 38px; font-size: var(--fs-sm); }
/* @endv */

/* @v CRD-C3
@nom Carte de service
@usage Grille de prestations d'un site vitrine. L'icone donne le rythme visuel, le titre porte le sens.
@html
<div class="cartes-grille">
  <a href="#" class="carte carte--lien service">
    <span class="service__icone">{{icon:f-pdf}}</span>
    <h3 class="carte__titre">Depannage 7j/7</h3>
    <p class="carte__texte">Intervention sous 2 h en Ile-de-France, y compris le week-end.</p>
  </a>
  <a href="#" class="carte carte--lien service">
    <span class="service__icone service__icone--vert">{{icon:calendar}}</span>
    <h3 class="carte__titre">Entretien annuel</h3>
    <p class="carte__texte">Contrat avec rappel automatique et rapport apres visite.</p>
  </a>
</div>
@tw p-5 [&_span:first-child]:mb-3 [&_span:first-child]:inline-flex [&_span:first-child]:h-12 [&_span:first-child]:w-12
@end */
.service { padding: var(--sp-5); gap: var(--sp-2); }
.service__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.service__icone svg { width: 23px; height: 23px; }
.service__icone--vert { background: var(--c-success-soft); color: var(--c-success); }
/* @endv */

/* @v CRD-C4
@nom Carte en verre
@usage Posee sur une banniere en image. Assortie a la famille Liquid Glass des boutons : meme materiau, meme liser.
@html
<div class="demo-verre">
  <div class="carte carte--verre" style="max-width:280px">
    <div class="carte__corps">
      <h3 class="carte__titre">Devis gratuit sous 24 h</h3>
      <p class="carte__texte">Etude thermique offerte, sans engagement.</p>
      <button class="btn btn--lg-verre btn--lg-teinte">Demander mon devis</button>
    </div>
  </div>
</div>
@tw border-white/25 bg-white/12 text-white backdrop-blur-xl
@end */
.carte--verre {
  position: relative;
  isolation: isolate;
  border: none;
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(16px) saturate(180%) brightness(1.06);
  -webkit-backdrop-filter: blur(16px) saturate(180%) brightness(1.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.16), 0 14px 40px rgba(0,0,0,.22);
}
.carte--verre::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; padding: 1.5px;
  background: linear-gradient(140deg, rgba(255,255,255,.9), rgba(255,255,255,.2) 40%, rgba(255,255,255,.05) 55%, rgba(255,255,255,.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.carte--verre .carte__titre { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.3); }
.carte--verre .carte__texte { color: rgba(255,255,255,.88); }
/* @endv */

/* @v CRD-C5
@nom Carte de rappel
@usage Encadre d'information dans une page : conseil, avertissement, note. Le liser lateral suffit, un cadre complet alourdit la lecture.
@html
<div class="demo-col demo-col--large">
  <div class="rappel"><span class="rappel__icone">{{icon:alerte}}</span><div><strong>Attestation obligatoire</strong><p>Le Cerfa de TVA reduite doit etre signe avant le debut des travaux, pas apres.</p></div></div>
  <div class="rappel rappel--ok"><span class="rappel__icone">{{icon:check}}</span><div><strong>Dossier complet</strong><p>Toutes les pieces ont ete validees. Le versement interviendra sous 15 jours.</p></div></div>
</div>
@tw flex gap-3 rounded-lg border-l-4 border-l-amber-500 bg-amber-50 p-4
@end */
.rappel {
  display: flex;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border-left: 4px solid var(--c-warn);
  background: var(--c-warn-soft);
}
.rappel__icone { color: var(--c-warn); flex: none; }
.rappel__icone svg { width: 20px; height: 20px; }
.rappel strong { display: block; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-text); }
.rappel p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.5; }
.rappel--ok { border-left-color: var(--c-success); background: var(--c-success-soft); }
.rappel--ok .rappel__icone { color: var(--c-success); }
.rappel--info { border-left-color: var(--c-info); background: var(--c-info-soft); }
.rappel--info .rappel__icone { color: var(--c-info); }
/* @endv */

/* @v CRD-C6
@nom Squelette de carte
@usage Pendant le chargement d'une grille. Meme gabarit que la carte reelle, sinon la page saute a l'arrivee des donnees.
@html
<div class="cartes-grille">
  <div class="carte"><div class="carte__image doc-squelette"></div><div class="carte__corps">
    <span class="doc-squelette doc-squelette--ligne" style="width:45%;height:10px"></span>
    <span class="doc-squelette doc-squelette--ligne" style="height:16px"></span>
    <span class="doc-squelette doc-squelette--ligne" style="width:80%"></span></div></div>
  <div class="carte"><div class="carte__image doc-squelette"></div><div class="carte__corps">
    <span class="doc-squelette doc-squelette--ligne" style="width:38%;height:10px"></span>
    <span class="doc-squelette doc-squelette--ligne" style="height:16px"></span>
    <span class="doc-squelette doc-squelette--ligne" style="width:65%"></span></div></div>
</div>
@tw animate-pulse (voir .doc-squelette dans documents.css)
@end */
/* reutilise .doc-squelette de documents.css : un seul scintillement pour tout le catalogue */
/* @endv */