/* =====================================================================
   PAGE A PROPOS — a-propos.html
   ---------------------------------------------------------------------
     .about-grid  : deux colonnes (texte a gauche, cartes a droite)
     .about-text  : les paragraphes de présentation + le bouton CV
     .about-cards : la colonne de cartes (Apprentissage / Curiosité /
                    Passion). Le style de .card lui-même est dans
                    components.css car contact.html s'en sert aussi.
   ===================================================================== */

/* ---------- À propos ---------- */
.about-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;margin-top:8px;align-items:start;}
.about-text p{margin-bottom:18px;color:var(--text-secondary);font-size:17px;max-width:60ch;}
.about-text .btn{margin-top:26px;}

.about-cards{display:flex;flex-direction:column;gap:26px;}
/* Rotation inversée une carte sur deux : effet collage */
.about-cards .card:nth-child(even){transform:rotate(1.2deg);}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  /* Les cartes passent sous le texte */
  .about-grid{grid-template-columns:1fr;}
}
@media (max-width: 860px){
  .about-cards .card:nth-child(even){transform:rotate(0);}
}