/* UX t778 : carte d'avis commune à tout le site, au modèle des maquettes de Béryl (UX t766-t768).
   Texte de l'avis en Roboto (fini le Gochi Hand), prénom en Gochi Hand sur pastille lime, pied « Avis Google · mois année » + « Voir l'avis ↗ ».
   Tout est préfixé md-carte-avis-* : aucune règle globale. Pas de Google Fonts (Roboto et Gochi Hand sont servies par css/md-polices.css).
   Piège du site : custom.css impose Roboto en !important partout sauf H1/H2 : le Gochi Hand du prénom est donc déclaré avec !important.
   Le bloc d'avis des formations est dans .wrapCards (theme.css), qui centre le texte et habille tous les <p> : la carte n'utilise pas de <p>
   et remet text-align à gauche.
   Chargé par les tags common:avisFormation, common:locationAvis et fp:avis-minutedrone :
   <link href="/css/md-carte-avis.css?v=20261101-t778" rel="stylesheet"> */

.md-carte-avis-liste,
.md-carte-avis {
  --md-carte-avis-blanc: #ffffff;
  --md-carte-avis-noir: #000000;
  --md-carte-avis-lime: #e7fdba;
  --md-carte-avis-jaune: #ffb901;
  --md-carte-avis-gris-texte: #5c5c5c;
  --md-carte-avis-gris-trait: #e6e6e6;
}

/* ---------- Liste : 3 colonnes, 2 sur tablette, défilement de côté sur téléphone ---------- */
.md-carte-avis-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 8px 0 0; padding: 0; text-align: left; }
.md-carte-avis-liste.md-carte-avis-seule { grid-template-columns: minmax(0, 640px); justify-content: center; }
/* Directement dans un .row Bootstrap (common:avisFormation) : reprend la gouttière des colonnes (.row a des marges de -15px) */
.row > .md-carte-avis-liste { margin-left: 15px; margin-right: 15px; }

/* ---------- Carte ---------- */
.md-carte-avis { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 22px; background: var(--md-carte-avis-blanc); border: 2px solid var(--md-carte-avis-noir); border-radius: 12px; color: var(--md-carte-avis-noir); text-align: left; transition: transform .2s, box-shadow .2s; }
.md-carte-avis:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.md-carte-avis:focus-within { outline: 3px solid var(--md-carte-avis-noir); outline-offset: 3px; }
.md-carte-avis .md-carte-avis-etoiles { color: var(--md-carte-avis-jaune); font-size: 18px; letter-spacing: 2px; line-height: 1; }
.md-carte-avis .md-carte-avis-texte { flex: 1; margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.55; color: var(--md-carte-avis-noir); }
.md-carte-avis-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.md-carte-avis .md-carte-avis-nom { background: var(--md-carte-avis-lime); border-radius: 999px; padding: 4px 14px 2px; font-family: "Gochi Hand", "Comic Sans MS", cursive !important; font-size: 23px; line-height: 1.1; }
.md-carte-avis .md-carte-avis-ville { font-size: 14px; color: var(--md-carte-avis-gris-texte); }
.md-carte-avis .md-carte-avis-ville a { position: relative; z-index: 1; color: var(--md-carte-avis-noir); text-decoration: underline; text-underline-offset: 3px; }
.md-carte-avis .md-carte-avis-source { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--md-carte-avis-gris-trait); padding-top: 10px; font-size: 13px; line-height: 1.4; color: var(--md-carte-avis-gris-texte); }
.md-carte-avis .md-carte-avis-source a { color: var(--md-carte-avis-noir); font-weight: 700; text-decoration: none; }
.md-carte-avis .md-carte-avis-source a:hover, .md-carte-avis .md-carte-avis-source a:focus { text-decoration: underline; text-underline-offset: 3px; }
/* Toute la carte mène à l'avis d'origine, sans mettre le texte dans un lien (lecteurs d'écran, sélection du texte) */
.md-carte-avis .md-carte-avis-source a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 12px; }
.md-carte-avis .md-carte-avis-source a:focus { outline: 0; }

/* ---------- Lien « Comment sont publiés nos avis » sous chaque bloc d'avis (Unfair t14, L111-7-2) ; .wrapCards p du thème neutralisé ---------- */
.md-carte-avis-info, .wrapCards p.md-carte-avis-info { margin: 18px 0 0; text-align: center; font-size: 14px; line-height: 1.4; color: #5c5c5c; }
.md-carte-avis-info a { color: #000; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Page Avis (/avis-minutedrone) : la carte prend la place de .wrapCard dans la grille à photos de md-avis.css ---------- */
.md-avis-grille .md-carte-avis { height: 100%; }

@media (min-width: 768px) and (max-width: 991px) {
  .md-carte-avis-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .md-carte-avis-liste { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(260px, 84%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .md-carte-avis-liste.md-carte-avis-seule { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .md-carte-avis-liste .md-carte-avis { scroll-snap-align: start; }
  .md-carte-avis .md-carte-avis-nom { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .md-carte-avis { transition: none; }
  .md-carte-avis:hover { transform: none; }
}