/* =========================================================================
   apropos.css — Habillage de la page « À propos ».

   Cette page n'est PAS un gabarit PHP : elle est construite avec Elementor à
   partir du modèle « a-propos-elementor.json ». Ce fichier habille les
   sections de ce modèle.

   PRINCIPE
   --------
   - Toutes les classes sont préfixées « apr- » : aucun risque de conflit
     avec le reste du thème ni avec Elementor.
   - Les classes « apr- » posées sur les sections / colonnes / widgets
     Elementor proviennent du champ « Avancé > Classes CSS » d'Elementor
     (déjà renseigné dans le modèle importé).
   - Les variables de couleur (--volcan, --sand…) et les polices viennent
     de front.css, chargé sur tout le site : elles sont donc disponibles ici.

   CHARGEMENT
   ----------
   Ce fichier est chargé uniquement sur la page de slug « a-propos »
   (voir inc/enqueue.php). Adapter le slug dans ce fichier si besoin.
   ========================================================================= */


/* -------------------------------------------------------------------------
 * 1. Réinitialisation des conteneurs Elementor
 * Elementor ajoute des marges et limite la largeur du contenu. On neutralise
 * ces réglages pour retrouver la largeur de lecture du site (1280 px) et
 * maîtriser nous-mêmes les espacements.
 * ---------------------------------------------------------------------- */
.apr-hero > .elementor-container,
.apr-sec  > .elementor-container,
.apr-cta  > .elementor-container {
  max-width: 1280px;
  padding-left: 36px;
  padding-right: 36px;
}

/* Les sections de contenu : on supprime les remplissages internes par
   défaut d'Elementor (colonnes et enrobages de widgets). */
.apr-sec .elementor-widget-wrap,
.apr-sec .elementor-element-populated {
  padding: 0;
}

/* Espacement vertical commun à toutes les sections de contenu. */
.apr-sec { padding: 110px 0; }

/* Variante : section sur fond sable. */
.apr-sand { background: var(--sand); }


/* -------------------------------------------------------------------------
 * 2. Typographie de la page
 * On force les polices du thème pour les titres, au cas où le « kit »
 * Elementor imposerait les siennes.
 * ---------------------------------------------------------------------- */
.apr-hero h1,
.apr-sec h2, .apr-sec h3,
.apr-cta h2 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.012em;
}


/* -------------------------------------------------------------------------
 * 3. Éléments communs : sur-titre et en-tête de section
 * ---------------------------------------------------------------------- */
.apr-eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: .76rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--volcan-light); margin-bottom: 18px;
}
.apr-eyebrow::before {
  content: ''; width: 30px; height: 1px; background: var(--gold);
}

/* En-tête centré d'une section (sur-titre + titre). */
.apr-head { max-width: 640px; margin: 0 auto 60px; text-align: center; }
.apr-head .apr-eyebrow { justify-content: center; }
.apr-head h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); color: var(--volcan-deep); }


/* -------------------------------------------------------------------------
 * 4. Section « Hero » (bandeau d'introduction)
 * Structure Elementor : une colonne contenant un widget Image (la photo de
 * fond) et un widget HTML (le texte).
 * ---------------------------------------------------------------------- */
.apr-hero {
  position: relative; overflow: hidden;
  background: var(--volcan-deep); color: var(--cream);
  padding: 124px 0 92px;
}

/* Le widget Image occupe tout le fond de la section. */
.apr-hero-img {
  position: absolute; inset: 0; z-index: 0; margin: 0;
}
.apr-hero-img .elementor-widget-container,
.apr-hero-img img { width: 100%; height: 100%; }
.apr-hero-img img { object-fit: cover; opacity: .34; }

/* Voile dégradé pour la lisibilité du texte. */
.apr-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(18,38,32,.55), rgba(18,38,32,.88));
}

/* Le texte passe au-dessus de la photo et du voile. */
.apr-hero > .elementor-container { position: relative; z-index: 2; }

.apr-hero-text .apr-crumb {
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 18px;
}
.apr-hero-text .apr-crumb a { color: var(--gold-soft); }
.apr-hero-text h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem); max-width: 18ch; color: var(--cream);
}
.apr-hero-text p {
  margin-top: 18px; max-width: 56ch;
  color: rgba(255,255,255,.8); font-weight: 300; font-size: 1.08rem;
}


/* -------------------------------------------------------------------------
 * 5. Section « Notre histoire » (intro)
 * Structure Elementor : 2 colonnes. À gauche : widget Image + widget HTML
 * (le badge). À droite : widget HTML (le texte).
 * ---------------------------------------------------------------------- */
.apr-intro .elementor-container { align-items: center; }
.apr-intro .elementor-column:first-child { padding-right: 38px; }
.apr-intro .elementor-column:last-child  { padding-left: 38px; }

/* La colonne photo sert de repère de position pour le badge. */
.apr-photo-col .elementor-widget-wrap { position: relative; }

/* La photo (widget Image natif : remplaçable dans Elementor). */
.apr-intro-photo { margin: 0; }
.apr-intro-photo img {
  width: 100%; border-radius: var(--r-lg);
  aspect-ratio: 4 / 5; object-fit: cover;
}

/* Le badge « 100 % », posé en bas à gauche de la photo. */
.apr-badge-w {
  position: absolute; bottom: -28px; left: -28px; z-index: 3;
  margin: 0; max-width: 240px;
}
.apr-badge {
  background: var(--volcan); color: var(--cream);
  border-radius: var(--r-lg); padding: 26px 30px;
}
.apr-badge-big {
  font-family: 'Fraunces', serif; font-size: 2.6rem;
  color: var(--gold-soft); line-height: 1;
}
.apr-badge-small {
  font-size: .86rem; color: rgba(255,255,255,.75); margin-top: 6px;
}

/* Le texte de l'intro. */
.apr-intro-text h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem); color: var(--volcan-deep);
}
.apr-intro-text p { color: var(--muted); margin-top: 16px; }


/* -------------------------------------------------------------------------
 * 6. Section « Nos valeurs »
 * Structure Elementor : une colonne, un widget HTML contenant l'en-tête
 * et les 3 cartes.
 * ---------------------------------------------------------------------- */
.apr-values {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.apr-value {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 38px 32px;
  transition: transform .4s, border-color .4s;
}
.apr-value:hover { transform: translateY(-7px); border-color: var(--volcan-light); }
.apr-v-ico {
  width: 56px; height: 56px; border-radius: var(--r);
  background: var(--volcan); color: var(--gold-soft);
  display: grid; place-items: center; margin-bottom: 22px;
}
.apr-value h3 { font-size: 1.3rem; color: var(--volcan-deep); margin-bottom: 9px; }
.apr-value p  { font-size: .96rem; color: var(--muted); }


/* -------------------------------------------------------------------------
 * 7. Section « Notre parcours » (frise chronologique)
 * ---------------------------------------------------------------------- */
.apr-timeline { max-width: 760px; margin: 0 auto; }
.apr-tl-item {
  display: grid; grid-template-columns: 120px 1fr; gap: 36px;
  padding: 32px 0; border-bottom: 1px solid var(--line);
}
.apr-tl-item:last-child { border-bottom: none; }
.apr-tl-year { font-family: 'Fraunces', serif; font-size: 1.8rem; color: var(--volcan); }
.apr-tl-body h3 { font-size: 1.22rem; color: var(--volcan-deep); margin-bottom: 6px; }
.apr-tl-body p  { color: var(--muted); font-size: .96rem; }


/* -------------------------------------------------------------------------
 * 8. Section « La fondatrice »
 * Deux sections Elementor sur fond sable : l'en-tête, puis le bloc à
 * 2 colonnes (photo + texte). On colle les deux pour qu'elles forment un
 * seul bloc visuel.
 * ---------------------------------------------------------------------- */
.apr-founder-head { padding-bottom: 0; }
.apr-founder-body { padding-top: 0; }

.apr-founder-body .elementor-container { align-items: center; }
.apr-founder-body .elementor-column:first-child { padding-right: 30px; }
.apr-founder-body .elementor-column:last-child  { padding-left: 30px; }

/* La photo de la fondatrice (widget Image natif). */
.apr-founder-photo { margin: 0; }
.apr-founder-photo img {
  width: 100%; border-radius: var(--r-lg);
  aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--shadow);
}

/* L'étiquette nom/fonction posée sur la photo. */
.apr-fp-tag-w {
  position: absolute; bottom: -22px; left: -22px; z-index: 3; margin: 0;
}
.apr-fp-tag {
  background: var(--volcan); color: var(--cream);
  border-radius: var(--r-lg); padding: 20px 26px;
}
.apr-fp-name {
  font-family: 'Fraunces', serif; font-size: 1.4rem;
  color: var(--gold-soft); line-height: 1.1;
}
.apr-fp-role { font-size: .82rem; color: rgba(255,255,255,.78); margin-top: 4px; }

/* Le texte de présentation. */
.apr-founder-text h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.3rem); color: var(--volcan-deep);
  line-height: 1.25;
}
.apr-founder-text .apr-lead {
  font-size: 1.16rem; line-height: 1.65; color: var(--volcan-deep); margin-top: 18px;
}
.apr-founder-text p { color: var(--ink); margin-top: 14px; line-height: 1.75; }

/* Les arguments « Pourquoi me confier votre projet ». */
.apr-founder-why { margin-top: 26px; }
.apr-founder-why h3 {
  font-family: 'Outfit', sans-serif;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
}
.apr-founder-arg {
  display: flex; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.apr-founder-arg:last-of-type { border-bottom: none; }
.apr-fa-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--r);
  background: var(--paper); color: var(--volcan);
  display: grid; place-items: center;
}
.apr-fa-text strong {
  display: block; color: var(--volcan-deep); font-size: 1rem; margin-bottom: 2px;
}
.apr-fa-text span { font-size: .92rem; color: var(--muted); line-height: 1.55; }

/* Les boutons d'appel à l'action. */
.apr-founder-cta { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }


/* -------------------------------------------------------------------------
 * 9. Section « Appel à l'action » finale
 * Structure Elementor : une colonne dont l'enrobage devient une carte
 * arrondie. À l'intérieur : widget Image (fond) + widget HTML (texte).
 * ---------------------------------------------------------------------- */
.apr-cta { padding: 110px 0; }

.apr-cta-card .elementor-widget-wrap {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); padding: 88px 64px;
}
.apr-cta-img { position: absolute; inset: 0; z-index: 0; margin: 0; }
.apr-cta-img .elementor-widget-container,
.apr-cta-img img { width: 100%; height: 100%; }
.apr-cta-img img { object-fit: cover; }

/* Voile sombre par-dessus la photo. */
.apr-cta-card .elementor-widget-wrap::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, rgba(29,58,50,.92), rgba(18,22,20,.92));
}

.apr-cta-text {
  position: relative; z-index: 2; text-align: center; color: var(--cream);
}
.apr-cta-text h2 {
  font-size: clamp(1.9rem, 3.5vw, 3rem); color: var(--cream);
  max-width: 20ch; margin: 0 auto;
}
.apr-cta-text p {
  margin: 16px auto 30px; max-width: 50ch;
  color: rgba(255,255,255,.84); font-weight: 300;
}


/* -------------------------------------------------------------------------
 * 10. Adaptation aux écrans (responsive)
 * ---------------------------------------------------------------------- */

/* Tablette : les blocs à 2 colonnes passent sur une seule colonne. */
@media (max-width: 980px) {
  .apr-intro > .elementor-container > .elementor-column,
  .apr-founder-body > .elementor-container > .elementor-column {
    width: 100%;
  }
  .apr-intro .elementor-column:first-child,
  .apr-intro .elementor-column:last-child,
  .apr-founder-body .elementor-column:first-child,
  .apr-founder-body .elementor-column:last-child {
    padding-left: 0; padding-right: 0;
  }
  /* On laisse de la place sous la photo pour le badge qui dépasse. */
  .apr-intro-text, .apr-founder-text { margin-top: 56px; }
  .apr-badge-w, .apr-fp-tag-w { left: 0; }

  .apr-values { grid-template-columns: 1fr; }
}

/* Mobile : on resserre les espacements. */
@media (max-width: 680px) {
  .apr-sec  { padding: 70px 0; }
  .apr-hero { padding: 96px 0 66px; }
  .apr-cta  { padding: 70px 0; }
  .apr-cta-card .elementor-widget-wrap { padding: 56px 24px; }
  .apr-hero > .elementor-container,
  .apr-sec  > .elementor-container,
  .apr-cta  > .elementor-container {
    padding-left: 20px; padding-right: 20px;
  }
  .apr-tl-item { grid-template-columns: 1fr; gap: 8px; }
}

/* Respect de la préférence « animations réduites ». */
@media (prefers-reduced-motion: reduce) {
  .apr-value { transition: none; }
}