/* About page modern redesign */

/* Hero Section */
.about-hero {
  margin: 10px auto 40px;
  padding: 56px 20px;
  max-width: var(--largeur-site, 1200px);
  border-radius: var(--radius-lg);
  background: var(--carbon);
  border: 1px solid var(--border-color);
  text-align: left;
  box-shadow: none;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  margin: 0 0 10px;
  font-size: clamp(32px, 5vw, 48px);
  text-align: left;
}

.hero-title .title-text {
  color: var(--text-primary);
}

.hero-subtitle {
  color: var(--muted);
  margin: 0;
  max-width: 70ch;
  font-size: clamp(16px, 2vw, 18px);
}

/* Identity Grid */
.identity-grid {
  max-width: var(--largeur-site, 1200px);
  margin: 0 auto 40px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

/* Deux colonnes explicites sur un panneau, et c'est l'en-tete qui l'impose.
   -------------------------------------------------------------------------
   `auto-fit` ne reduit une piste que si elle est VIDE. Tant que ce bloc
   n'avait pas de titre de panneau, ses deux cartes se partageaient toute la
   largeur (867px chacune) parce que les pistes en trop se reduisaient a zero.
   Le jour ou un `.section-header` traversant la grille a ete ajoute, plus
   aucune piste n'etait vide : trois pistes de 418px se sont installees pour
   deux cartes, et le tiers droit du panneau s'est vide.
   Meme cause et meme remede que sur la page equipement. Borne au-dessus de
   900px pour ne pas ecraser les bandes responsives d'origine. */
@media (min-width: 901px) {
  .a-heros-fixe .feuille-contenu > section.groupe-plein.identity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.identity-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 32px 40px;
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  width: 100%;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.identity-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: 0 12px 40px rgba(0,0,0,0.38);
}

.card-icon {
  font-size: 56px;
  margin-bottom: 16px;
}

.card-title {
  margin: 0 0 20px;
  font-size: clamp(22px, 3vw, 28px);
  text-align: left;
  width: fit-content;
}

.card-title .title-text {
  color: var(--text-primary);
}

.identity-card p {
  color: var(--muted);
  line-height: 1.8;
  margin: 0 0 18px;
  font-size: 16px;
  text-align: left;
  width: 100%;
}

.identity-card p:last-child {
  margin-bottom: 0;
}

.identity-card ul {
  text-align: left;
  list-style: none;
  padding: 0;
  width: 100%;
}

.identity-card ul li {
  margin: 8px 0;
  color: var(--muted);
}

/* Content Section */
/* Cette largeur vaut pour un DOCUMENT : elle sert aussi aux mentions legales
   et a la politique de confidentialite, qui partagent cette feuille et qui ne
   sont pas des pages a panneaux (ni heros fixe, ni feuille de contenu). Une
   colonne de 1000px y est la bonne mesure pour du texte suivi.
   Sur la page A propos, ou cette meme section devient un PANNEAU plein ecran,
   c'est vivant.css qui la porte a la largeur commune. Ne pas elargir ici :
   l'essai a ete fait et donnait une section de 1870px contenant une colonne de
   texte de 525px, ce qui se lit comme un oubli. */
.content-section {
  max-width: 1000px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

.section-header {
  text-align: left;
  margin-bottom: 40px;
}

.section-title {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 36px);
  text-align: left;
  width: fit-content;
}

.section-title .title-text {
  color: var(--text-primary);
}

.section-description {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  text-align: left;
  max-width: 60ch;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.content-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 28px 24px;
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.content-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: 0 12px 40px rgba(0,0,0,0.38);
}

.content-icon {
  font-size: 48px;
  margin-bottom: 16px;
  text-align: left;
}

.content-title {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 20px;
  text-align: left;
  width: fit-content;
}

.content-card p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 12px;
  font-size: 14px;
  text-align: left;
}

.content-card p:last-child {
  margin-bottom: 0;
}

.content-card .highlight {
  color: var(--accent-text);
  font-weight: 700;
}

.content-card .warning {
  color: #ffb366;
  font-style: italic;
  font-size: 13px;
}

.content-card .cta {
  color: var(--accent-text);
  font-weight: 600;
}

/* Social Section */
.social-section {
  max-width: var(--largeur-site, 1200px);
  margin: 0 auto 40px;
  padding: 0 20px;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.social-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 32px 28px;
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: none;
}

.social-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  box-shadow: 0 12px 40px rgba(0,0,0,0.38);
}

.social-icon {
  font-size: 56px;
  margin-bottom: 16px;
}

.social-title {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 24px;
  text-align: left;
  width: fit-content;
}

.social-handle {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--accent-text);
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 20px;
  text-decoration: none;
  transition: color 0.3s ease;
  width: fit-content;
}

.social-handle:hover {
  color: var(--accent-text);
  text-decoration: underline;
}

.social-card p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 12px;
  font-size: var(--text-base);
  text-align: left;
}

.social-card p:last-child {
  margin-bottom: 0;
}

.social-card .teaser {
  color: var(--accent-text);
  font-weight: 600;
  font-style: italic;
}

/* CTA Section */
/* Meme raison que .content-section ci-dessus : 800px est la mesure d'un bloc
   de fin de document, et c'est ce qu'il reste sur les pages legales. Sur la
   page A propos, ou ce bloc devient un panneau, vivant.css l'elargit et
   l'aplatit.
   Aucune borne a poser sur le texte : base.css limite deja tout paragraphe a
   --container-text, verifie a 525px meme quand la section passe a 1870. */
.cta-section {
  max-width: 800px;
  margin: 0 auto 40px;
  padding: 0 20px;
}

.cta-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 40px 32px;
  text-align: left;
  box-shadow: none;
}

.cta-title {
  margin: 0 0 20px;
  font-size: clamp(24px, 3vw, 32px);
  text-align: left;
  width: fit-content;
}

.cta-title .title-text {
  color: var(--text-primary);
}

.cta-card p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 12px;
  font-size: 16px;
  text-align: left;
}

.cta-card p:last-of-type {
  margin-bottom: 32px;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 16px 32px;
  border: 2px solid var(--accent-ink);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition-property: var(--anim-proprietes);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta-button:hover {
  background: var(--accent-hover);
  transform: translateY(-3px) scale(1.02);
}

.cta-button:active {
  transform: translateY(0);
}

.cta-button svg {
  transition: transform 0.3s ease;
}

.cta-button:hover svg {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
  .about-hero {
    padding: 40px 16px;
    margin-bottom: 24px;
  }

  .identity-grid,
  .content-section,
  .social-section,
  .cta-section {
    padding: 0 16px;
  }

  .identity-grid,
  .content-grid,
  .social-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .identity-card,
  .content-card,
  .social-card {
    padding: 24px 20px;
  }

  .card-icon,
  .social-icon {
    font-size: 48px;
  }

  .content-icon {
    font-size: 40px;
  }

  .cta-card {
    padding: 32px 24px;
  }

  .cta-button {
    font-size: var(--text-base);
    padding: 14px 28px;
  }
}

@media (max-width: 480px) {
  .about-hero {
    padding: 30px 12px;
    border-radius: var(--radius-lg);
  }

  .identity-grid,
  .content-section,
  .social-section,
  .cta-section {
    padding: 0 12px;
  }

  .identity-card,
  .content-card,
  .social-card,
  .cta-card {
    padding: 18px 14px;
    border-radius: var(--radius-sm);
  }

  .social-handle {
    font-size: 16px;
    overflow-wrap: anywhere;
  }

  .cta-button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    padding: 12px 14px;
  }
}

/* ---- Bande tablette ----
   Ces grilles passaient a une colonne des 768px (900px pour certaines), soit
   en pleine tablette : les cartes prenaient toute la largeur et la page
   devenait une longue colonne. Deux colonnes sont retablies jusqu'a 600px,
   ou une colonne unique devient reellement justifiee.
   Regle ajoutee en fin de fichier : a specificite egale, elle l'emporte sur
   la media query d'origine par l'ordre de declaration. */
@media (min-width: 601px) and (max-width: 900px) {
  .identity-grid, .content-grid, .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}