/* recommendations.css — section « Recommandations LinkedIn », injectée par recommendations.js
   Dépend de base.css : variables, .section, .section-dark, .container, .h2, .text-lead, .btn, .visually-hidden
*/

.section-linkedin-recos { padding: var(--space-section) 0; }
.reco-header { text-align: center; margin-bottom: var(--space-lg); }
.reco-header .text-lead { max-width: 700px; margin: var(--space-sm) auto 0; }
.reco-note { margin: var(--space-xs) 0 0; }

/* 1 colonne par défaut : minmax(0, 1fr) empêche une capture de dilater la piste.
   Les captures LinkedIn font ~985 px de large (texte ~16 px) : en 2 colonnes
   sous 1100 px elles passent sous 8 px et deviennent illisibles. */
.reco-grid { gap: var(--space-lg); display: grid; grid-template-columns: minmax(0, 1fr); }
.reco-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: var(--border); overflow: hidden; }
.section-dark .reco-card { background: var(--white); border-color: var(--black); }

.reco-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.reco-shot[hidden] { display: none; }

.reco-meta {
  margin-top: var(--space-sm);
  padding-left: var(--space-xs);
  font-size: 0.9rem;
  color: var(--black);
  opacity: 0.7;
}
.reco-meta p { font-size: 0.9rem; line-height: 1.4; margin: 0; }

/* Bouton poussé en bas de carte : alignés quand une seule carte est déployée */
.reco-controls {
  margin-top: auto;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-xs);
  padding-right: var(--space-xs);
  padding-left: var(--space-xs);
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);
  background: var(--white);
}
.reco-controls .btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* Chevron des boutons : aligné sur le texte, pivote quand le panneau est ouvert */
.reco-toggle-icon {
  display: inline-block;
  vertical-align: -0.15em;
  margin-left: 0.5rem;
  flex: 0 0 auto;
  transition: transform 0.15s;
}
.reco-toggle[aria-expanded="true"] .reco-toggle-icon,
.reco-translate[aria-expanded="true"] .reco-toggle-icon { transform: rotate(180deg); }

/* Bouton secondaire (traduction EN) : version claire du .btn, bouton principal = fond noir */
.section-dark .reco-translate { background: var(--white); border-color: var(--black); color: var(--black); }
.section-dark .reco-translate:hover { border-color: var(--blue); color: var(--blue); }

/* Traduction EN dépliable (texte noir : la carte est blanche dans une section sombre) */
.reco-translation {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-xs) 0;
  border-top: var(--border);
  color: var(--black);
}
.reco-translation-note { font-size: 0.9rem; font-weight: 600; margin-bottom: var(--space-xs); }
.reco-translation blockquote p { font-size: 1rem; line-height: 1.5; margin-bottom: var(--space-xs); }

.reco-all-link { text-align: center; }
.reco-all-link a {
  font-family: var(--font-h);
  font-size: 1.1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 3px solid var(--black);
  background: var(--white);
  color: var(--black);
  padding: 1rem 1.5rem;
  cursor: pointer;
}
.reco-all-link a:hover,
.reco-all-link a:focus-visible {
  border-color: var(--blue-on-dark);
  color: var(--blue-on-dark);
}
.reco-all-link a:focus-visible {
  outline: 3px solid var(--blue-on-dark);
  outline-offset: 2px;
}

/* Mobile (< 768 px) : les captures (985 px de large, texte ~16 px) deviendraient
   illisibles (~5 px). On les remplace par le texte de la recommandation :
   FR = original, EN = traduction (avec sa note). Les boutons déplier / traduire
   n'ont plus d'objet. Le lien LinkedIn reste la preuve de vérification. */
@media (max-width: 767px) {
  .reco-shot,
  .reco-shot[hidden],
  .reco-controls { display: none; }

  /* FR : annule .visually-hidden (base.css) pour afficher le texte original */
  .reco-quote.visually-hidden {
    position: static;
    width: auto;
    height: auto;
    margin: var(--space-xs) 0 0;
    padding: var(--space-xs);
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    border-top: var(--border);
    color: var(--black);
  }
  .reco-quote p { font-size: 1rem; line-height: 1.5; margin-bottom: var(--space-xs); }
  .reco-quote p:last-child { margin-bottom: 0; }

  /* EN : traduction toujours visible (surcharge l'attribut hidden) */
  .reco-translation,
  .reco-translation[hidden] { display: block; padding-bottom: var(--space-xs); }
  .reco-translation blockquote p:last-child { margin-bottom: 0; }

  .reco-all-link a { display: block; }
}

/* Séparateur discret en pied de section (opt-in : class="has-divider" sur #site-recommendations).
   Filet fin interrompu par un petit carré bleu, centré dans l'espace entre deux sections sombres.
   Décoratif : pseudo-élément, absent de l'arbre d'accessibilité. */
.has-divider .section-linkedin-recos { position: relative; }
.has-divider .section-linkedin-recos::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: calc(min(100%, var(--max-w)) - 10vw);
  height: 8px;
  background:
    linear-gradient(var(--blue-on-dark), var(--blue-on-dark)) center / 8px 8px no-repeat,
    linear-gradient(to right,
      rgba(255, 255, 255, 0.35) calc(50% - 20px),
      transparent calc(50% - 20px) calc(50% + 20px),
      rgba(255, 255, 255, 0.35) calc(50% + 20px)) center / 100% 1px no-repeat;
}

/* 2 colonnes seulement quand chaque capture garde un texte lisible (≥ ~470 px) */
@media (min-width: 1100px) {
  .reco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}