/* =========================================================================
   Page A propos, Mosaica Conseils
   Feuille dediee : chargee uniquement par a-propos.html.
   Reutilise les variables de styles.css (--navy, --gold, --sable, --gray1...).
   ========================================================================= */

/* Aucune couleur hors palette sur cette page.
   Tout provient des jetons de styles.css : --navy, --navy-deep, --gold,
   --gold-dark, --sable, --gray1, --gray2, --gray6. */

/* ---------- ossature commune ---------- */
.ab-sec{padding:clamp(4rem,9vh,7rem) 0}
.ab-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(1.25rem,5vw,64px);box-sizing:border-box}
.ab-eyebrow{
  display:block;font-family:'Space Grotesk',sans-serif;
  font-size:.68rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem;
}
.ab-h2{
  font-family:'Ibarra Real Nova',serif;font-weight:700;
  font-size:clamp(1.65rem,3.1vw,2.6rem);line-height:1.22;letter-spacing:-.01em;
  color:var(--navy);margin:0 0 1.1rem;
}
.ab-lead{font-size:1rem;line-height:1.85;color:var(--gray6);margin:0;max-width:46rem}
.ab-head{max-width:44rem;margin-bottom:clamp(2.5rem,5vh,3.8rem)}

/* etats de focus visibles sur toute la page */
.ab a:focus-visible,
.ab button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- HERO, moitie texte, moitie photo ---------- */
.ab-hero{display:grid;grid-template-columns:1.02fr .98fr;background:var(--navy-deep);margin-top:-64px}
.ab-hero-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(64px + 7vh) clamp(1.25rem,4.5vw,4.5rem) 7vh clamp(1.25rem,5vw,5.5rem);
  box-sizing:border-box;
}
.ab-hero h1{
  font-family:'Ibarra Real Nova',serif;font-weight:700;color:#fff;
  font-size:clamp(1.95rem,3.4vw,3.1rem);line-height:1.16;letter-spacing:-.015em;
  margin:0 0 1.5rem;max-width:22ch;
}
.ab-hero p{
  font-size:clamp(.97rem,1.15vw,1.08rem);line-height:1.85;
  color:rgba(255,255,255,.78);margin:0 0 2.2rem;max-width:38rem;
}
.ab-hero-rule{width:54px;height:2px;background:var(--gold);margin-bottom:1.7rem}
.ab-hero-media{position:relative;min-height:clamp(320px,58vh,620px)}
.ab-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* bouton texte souligne, reutilise sur la page */
.ab-link{
  display:inline-flex;align-items:center;gap:.65rem;align-self:flex-start;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;text-decoration:none;
  padding-bottom:6px;border-bottom:2px solid var(--gold);
  transition:gap .2s ease,color .2s ease;
}
.ab-link svg{width:17px;height:17px;flex-shrink:0}
.ab-link:hover{gap:1.05rem;color:var(--gold)}
.ab-link--dark{color:var(--navy)}
.ab-link--dark:hover{color:var(--gold-dark)}

/* ---------- bande de preuves, fond clair ---------- */
.ab-proof{background:var(--sable);padding:clamp(2.4rem,5vh,3.4rem) 0;border-bottom:1px solid rgba(201,164,92,.32)}
.ab-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2.6rem)}
.ab-proof-item{border-left:2px solid var(--gold);padding-left:1.15rem}
.ab-proof-key{
  display:block;font-family:'Ibarra Real Nova',serif;font-weight:700;
  font-size:clamp(1.35rem,2.3vw,1.95rem);line-height:1.15;color:var(--navy);margin-bottom:.35rem;
}
.ab-proof-desc{display:block;font-size:.83rem;line-height:1.6;color:var(--gray6)}

/* ---------- pourquoi Mosaica existe ---------- */
.ab-why{background:#fff}
.ab-why-grid{display:grid;grid-template-columns:.92fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.ab-why-body p{font-size:.99rem;line-height:1.92;color:var(--gray6);margin:0 0 1.15rem}
.ab-why-body p:last-child{margin-bottom:0}
.ab-claim{
  border-left:2px solid var(--gold);padding-left:1.35rem;margin-top:1.9rem;
  font-family:'Ibarra Real Nova',serif;font-size:1.12rem;line-height:1.62;color:var(--navy);
}

/* ---------- vision, grande declaration sur fond bleu ---------- */
.ab-vision{background:var(--navy);color:#fff}
.ab-vision-inner{max-width:52rem}
.ab-vision h2{
  font-family:'Ibarra Real Nova',serif;font-weight:700;color:#fff;
  font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.26;margin:0 0 1.3rem;
}
.ab-vision p{font-size:1.02rem;line-height:1.9;color:rgba(255,255,255,.76);margin:0;max-width:44rem}

/* ---------- methode en quatre mouvements ---------- */
.ab-method{background:var(--gray1)}
.ab-moves{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gray2);border-top:2px solid var(--navy)}
.ab-move{background:#fff;padding:2rem 1.6rem 2.1rem;display:flex;flex-direction:column}
.ab-move-num{
  font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.16em;color:var(--gold);margin-bottom:1.1rem;
}
.ab-move h3{font-family:'Ibarra Real Nova',serif;font-size:1.12rem;color:var(--navy);margin:0 0 .6rem;line-height:1.3}
.ab-move p{font-size:.87rem;line-height:1.75;color:var(--gray6);margin:0}

/* ---------- mandat structurant, texte gauche image droite ---------- */
.ab-case{background:#fff}
.ab-case-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.ab-case-body p{font-size:.97rem;line-height:1.9;color:var(--gray6);margin:0 0 1.1rem}
.ab-case-body p:last-of-type{margin-bottom:1.8rem}
.ab-case-media{position:relative}
.ab-case-media img{width:100%;height:clamp(300px,45vh,440px);object-fit:cover;object-position:center 30%;display:block}
.ab-case-media figcaption{
  margin-top:.8rem;font-family:'Space Grotesk',sans-serif;
  font-size:.74rem;line-height:1.6;color:var(--gray6);
}

/* ---------- equipe ---------- */
.ab-team{background:var(--gray1)}
.ab-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,1.8rem)}
.ab-person{background:#fff;display:flex;flex-direction:column}
.ab-person-photo{position:relative;overflow:hidden;background:var(--navy)}
.ab-person-photo img{
  width:100%;height:clamp(240px,28vh,300px);object-fit:cover;object-position:center 25%;
  display:block;transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.ab-person:hover .ab-person-photo img{transform:scale(1.04)}
.ab-person-body{padding:1.6rem 1.5rem 1.7rem;flex:1;display:flex;flex-direction:column}
.ab-person h3{font-family:'Ibarra Real Nova',serif;font-size:1.2rem;color:var(--navy);margin:0 0 .2rem}
.ab-person-role{
  font-family:'Space Grotesk',sans-serif;font-size:.69rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.95rem;
}
.ab-person p{font-size:.88rem;line-height:1.78;color:var(--gray6);margin:0 0 1.2rem}
.ab-person-li{
  margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;
  font-family:'Space Grotesk',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy);text-decoration:none;
  transition:color .2s ease;align-self:flex-start;
}
.ab-person-li svg{width:15px;height:15px}
.ab-person-li:hover{color:var(--gold-dark)}

/* ---------- chronologie courte ---------- */
.ab-time{background:#fff}
.ab-time-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.4rem);margin:0;padding:0;list-style:none}
.ab-time-item{border-top:2px solid var(--gold);padding-top:1.15rem}
.ab-time-year{
  display:block;font-family:'Space Grotesk',sans-serif;font-size:.76rem;font-weight:700;
  letter-spacing:.13em;color:var(--gold);margin-bottom:.5rem;
}
.ab-time-item h3{font-family:'Ibarra Real Nova',serif;font-size:1.05rem;color:var(--navy);margin:0 0 .5rem;line-height:1.32}
.ab-time-item p{font-size:.87rem;line-height:1.75;color:var(--gray6);margin:0}

/* ---------- valeurs, quatre tesselles ---------- */
.ab-values{background:var(--gray1)}
.ab-val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ab-val{position:relative;background:#fff;padding:2rem 1.5rem 1.9rem;overflow:hidden;transition:background .3s ease}
.ab-val:nth-child(2){transform:translateY(22px)}
.ab-val:nth-child(3){transform:translateY(-12px)}
.ab-val:nth-child(4){transform:translateY(10px)}
.ab-val svg{width:30px;height:25px;display:block;margin-bottom:1rem}
.ab-val h3{font-family:'Ibarra Real Nova',serif;font-size:1.08rem;color:var(--navy);margin:0 0 .55rem;transition:color .3s ease}
.ab-val p{font-size:.87rem;line-height:1.72;color:var(--gray6);margin:0;transition:color .3s ease}
.ab-val:hover{background:var(--navy)}
.ab-val:hover h3,.ab-val:hover p{color:#fff}

/* ---------- appel a l'action final ---------- */
.ab-cta{background:var(--navy-deep);color:#fff;text-align:center}
.ab-cta-inner{max-width:44rem;margin:0 auto}
.ab-cta h2{
  font-family:'Ibarra Real Nova',serif;font-weight:700;color:#fff;
  font-size:clamp(1.5rem,2.9vw,2.3rem);line-height:1.28;margin:0 0 1.1rem;
}
.ab-cta p{font-size:1rem;line-height:1.85;color:rgba(255,255,255,.76);margin:0 0 2rem}
.ab-btn{
  display:inline-block;background:var(--gold);color:var(--navy);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.84rem;
  letter-spacing:.05em;padding:14px 30px;text-decoration:none;
  transition:background .22s ease,transform .22s ease;
}
.ab-btn:hover{background:var(--gold-dark);transform:translateY(-2px)}

/* =========================== RESPONSIVE =========================== */
@media(max-width:1080px){
  .ab-proof-grid{grid-template-columns:1fr 1fr;gap:1.6rem}
  .ab-moves{grid-template-columns:1fr 1fr}
  .ab-val-grid{grid-template-columns:1fr 1fr}
  .ab-val:nth-child(n){transform:none}
  .ab-time-list{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .ab-hero{grid-template-columns:1fr}
  .ab-hero-copy{padding:calc(64px + 6vh) clamp(1.25rem,5vw,3rem) 5vh}
  .ab-hero-media{min-height:clamp(260px,38vh,380px)}
  .ab-why-grid,.ab-case-grid{grid-template-columns:1fr;gap:2rem}
  .ab-team-grid{grid-template-columns:1fr;max-width:620px;margin:0 auto}
  .ab-person{flex-direction:row}
  .ab-person-photo{flex:0 0 38%}
  .ab-person-photo img{height:100%;min-height:230px}
}
@media(max-width:640px){
  .ab-moves{grid-template-columns:1fr}
  .ab-val-grid{grid-template-columns:1fr}
  .ab-time-list{grid-template-columns:1fr}
  .ab-person{flex-direction:column}
  .ab-person-photo{flex:none}
  .ab-person-photo img{height:250px;min-height:0}
  /* plancher de lisibilite : rien sous 12px sur petit ecran */
  .ab-eyebrow,.ab-person-role,.ab-move-num,.ab-person-li{font-size:.75rem}
  .ab-case-media figcaption{font-size:.78rem}
}
/* styles.css impose section{padding:3rem 1.25rem !important} sous 520px.
   On le neutralise ici pour que la mise en page de la page tienne. */
@media(max-width:520px){
  .ab-sec,.ab-proof,.ab-hero{padding-left:0 !important;padding-right:0 !important}
  .ab-sec{padding-top:3.2rem !important;padding-bottom:3.2rem !important}
  .ab-proof{padding-top:2.2rem !important;padding-bottom:2.2rem !important}
  .ab-hero{margin-top:-60px;padding-top:0 !important;padding-bottom:0 !important}
  .ab-hero-copy{padding:calc(60px + 5vh) 1.25rem 4.5vh}
}
@media(prefers-reduced-motion:reduce){
  .ab-person-photo img,.ab-val,.ab-link,.ab-btn{transition:none}
  .ab-person:hover .ab-person-photo img{transform:none}
  .ab-btn:hover{transform:none}
}