/* ==========================================================================
   CSS AUTONOME ET SÉCURISÉ POUR LA PAGE À PROPOS (a-propos.css)
   Ne modifie PAS main.css — Préserve 100% du reste de votre site !
   ========================================================================== */

/* 1. Déblocage des contraintes du conteneur parent sans toucher à main.css */
#main-content,
.page,
#page-apropos {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 2. Section Hero autonome s'étendant sur toute la largeur */
.ap-hero {
  display: flex !important;
  flex-direction: column !important; /* Neutralise l'ancienne règle .ap-hero de main.css */
  width: 100% !important;
  max-width: 1750px !important;
  margin: 0 auto !important;
  padding: 32px 32px 16px 32px !important;
  box-sizing: border-box !important;
  background: var(--white, #ffffff);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/* En-tête Titre sur 100% de la largeur */
.ap-hero-header {
  width: 100% !important;
  margin-bottom: 12px !important;
}

.offer-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #a67c52;
  background-color: #fdf8f3;
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 10px !important;
}

.ap-hero-header h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 2.7rem);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0 !important;
  color: #111827;
  width: 100% !important;
  overflow-wrap: break-word;
}

.ap-hero-header h1 em {
  font-style: italic;
  color: #a67c52;
}

/* Grille des colonnes */
.ap-hero-grid {
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ap-col {
  min-width: 0;
  overflow-wrap: break-word;
}

.ap-hero-grid p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #374151;
  margin-bottom: 20px;
}

/* Clearfix */
.ap-col p::after {
  content: "";
  display: table;
  clear: both;
}


/* Titre Mon parcours centré */
.ap-parcours-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
  font-weight: 700 !important;
  color: #0d1b2a !important;
  text-align: center !important;
  margin-top: 1rem !important;
  margin-bottom: 2.5rem !important;
  line-height: 1.2 !important;
}

/* --------------------------------------------------------------------------
   1. MOBILE (< 800px) — 1 Colonne Pleine Largeur (mobile.jpg)
   -------------------------------------------------------------------------- */
.ap-main-photo { display: none; }
.ap-dsparis-inline { display: block; float: right; width: 140px; max-width: 40%; height: auto; margin: 4px 0 12px 16px; border-radius: 12px; }
.ap-inline-photo { display: block; float: left; width: 140px; max-width: 40%; height: auto; margin: 4px 16px 12px 0; border-radius: 12px; }
.ap-dunod-photo img { width: 100%; height: auto; border-radius: 12px; display: block; }

.ap-dunod-photo figcaption {
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 8px;
  font-style: italic;
}

.ap-bio-source {
  font-size: 0.95rem;
  color: #4b5563;
  margin-top: 16px;
}

.ap-bio-source a {
  color: #111827;
  text-decoration: none;
}

.ap-bio-source a:hover {
  text-decoration: underline;
  color: #a67c52;
}

/* --------------------------------------------------------------------------
   2. DESKTOP & TABLETTE 2 COLONNES (800px à 1349px) — 50% / 50% PARALLÈLES
   -------------------------------------------------------------------------- */
@media (min-width: 800px) and (max-width: 1349px) {
  .ap-hero-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 28px 44px !important;
    align-items: start !important;
    grid-template-areas:
      "col1 col2"
      "col3 col2" !important;
  }

  .ap-col-1 { grid-area: col1; width: 100% !important; }
  .ap-col-2 { grid-area: col2; width: 100% !important; }
  .ap-col-3 { grid-area: col3; width: 100% !important; }

  .ap-dsparis-inline { display: none !important; }
  .ap-main-photo { display: block !important; margin: 0 0 12px 0 !important; }
  .ap-main-photo img { width: 100% !important; max-width: 400px !important; height: auto !important; border-radius: 16px; object-fit: cover; display: block; }
}

/* --------------------------------------------------------------------------
   3. TRÈS GRAND ÉCRAN (≥ 1350px) — 3 COLONNES PARALLÈLES
   -------------------------------------------------------------------------- */
@media (min-width: 1350px) {
  .ap-hero-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 40px !important;
    align-items: start !important;
    grid-template-areas:
      "col1 col2 col3" !important;
  }

  .ap-col-1 { grid-area: col1; width: 100% !important; }
  .ap-col-2 { grid-area: col2; width: 100% !important; }
  .ap-col-3 { grid-area: col3; width: 100% !important; }

  .ap-dsparis-inline { display: none !important; }
  .ap-main-photo { display: block !important; margin: 0 0 12px 0 !important; }
  .ap-main-photo img { width: 100% !important; max-width: 450px !important; height: auto !important; border-radius: 16px; object-fit: cover; display: block; }
}

/* --------------------------------------------------------------------------
   4. PLAFOND DE LA PHOTO PRINCIPALE (toutes configurations ≥ 800px)
   Placé en fin de fichier : gagne la cascade sur les règles
   max-width: 600px des blocs 2 et 3 colonnes ci-dessus.
   -------------------------------------------------------------------------- */
@media (min-width: 800px) {
  .ap-main-photo img {
    max-width: 400px !important;
  }
}

 /* --------------------------------------------------------------------------
   5. ICÔNES SVG DES CARTES "LES FORMULES" (section ap-links)
   -------------------------------------------------------------------------- */
.ap-link-card .ap-link-icon {
  display: inline-block;   /* contre le display: block global des img (main.css) */
  width: 28px;
  height: 28px;
  vertical-align: -7px;    /* cale l'icône sur la ligne de base du titre */
  margin-right: 6px;
}