/* =========================================================
   POLYANCE — Page "a-propos.html"
   Styles propres a cette page uniquement (chargee seulement ici).
   Direction editoriale : typographie, lignes, espace maitrise.
   Reutilise .portrait-blob / .portrait-frame (definis dans home.css,
   memes classes que le portrait du Hero de la Home) pour la
   composition du portrait, afin de garder une seule et meme
   grammaire visuelle "photo + forme organique" sur tout le site.
   ========================================================= */

:root{
  --ap-max-mid: 1080px;
}

/* ---------- HERO : plein ecran, 2 colonnes ---------- */
.about-hero{
  background:var(--blue-tint);
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center;
  padding-top:clamp(96px, 10vh, 118px); padding-bottom:clamp(24px, 4vh, 48px);
  position:relative; overflow:hidden;
}
.about-hero .container{ width:100%; }
.about-hero-grid{
  display:grid; grid-template-columns:.95fr 1.15fr;
  gap:56px; align-items:center;
  position:relative; z-index:1;
}
.about-hero-copy{ max-width:540px; }
.about-hero-copy .eyebrow{ margin-bottom:20px; }
.about-hero-copy h1{ font-size:clamp(32px, 4.4vw, 50px); margin-bottom:22px; }
.about-hero-copy .lede{ margin-bottom:18px; }
.about-signature{
  display:block; margin-top:22px; padding-top:22px; border-top:1px solid rgba(5,61,140,.14);
  font-family:var(--font-display); font-weight:400; font-style:italic; font-size:16.5px;
  color:var(--blue); line-height:1.5; max-width:46ch;
}

@media (max-width:900px){
  .about-hero{ min-height:auto; padding-top:clamp(120px, 16vw, 150px); padding-bottom:56px; }
  .about-hero-grid{ grid-template-columns:1fr; gap:48px; }
  .about-hero-copy{ max-width:none; }
}

/* ---- portrait : reutilise le blob + le cadre du Hero de la Home ---- */
.about-portrait{ position:relative; width:100%; max-width:540px; margin-inline:auto; }
.about-portrait .portrait-blob{ opacity:.9; }
.about-portrait-frame{
  position:relative; z-index:1;
  aspect-ratio:4/5; border-radius:var(--radius-l); overflow:hidden;
  background:var(--grey-tint);
  display:flex; align-items:center; justify-content:center;
}
.about-portrait-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-portrait-mark{
  position:absolute; top:-6%; right:2%; width:68px; height:68px; z-index:2;
  opacity:.5; pointer-events:none;
}
.about-portrait-caption{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:9px;
  margin-top:24px; padding-left:2px;
  font-family:var(--font-body); font-size:14.5px; color:var(--navy);
}
.about-portrait-caption .dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--orange); }
.about-portrait-caption strong{ color:var(--navy); font-weight:700; }

@media (max-width:900px){
  .about-portrait{ max-width:340px; }
}

/* =========================================================
   LE POINT DE DEPART : statement + composition typographique
   ========================================================= */
.starting-point{ max-width:var(--ap-max-mid); margin:0 auto; }
.starting-point .section-head{ max-width:720px; margin-bottom:56px; }

.starting-grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start;
  margin-bottom:64px;
}
.starting-context{ font-size:16.5px; color:var(--ink-soft); line-height:1.65; }

.polyvalence-words{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 22px;
}
.polyvalence-words li{ font-family:var(--font-display); font-weight:400; line-height:1.15; color:var(--navy); }
.polyvalence-words li.size-lg{ font-size:clamp(24px,2.6vw,34px); }
.polyvalence-words li.size-md{ font-size:clamp(19px,2vw,25px); color:var(--ink-soft); }
.polyvalence-words li.size-sm{ font-size:clamp(15px,1.5vw,18px); color:var(--ink-soft); }
.polyvalence-words li.accent-blue{ color:var(--blue); }
.polyvalence-words li.accent-orange{ color:var(--orange-deep); font-style:italic; }

.starting-conclusion{
  font-family:var(--font-display); font-weight:400; font-size:clamp(21px,2.4vw,27px);
  color:var(--navy); line-height:1.45; max-width:70ch;
  padding-top:40px; border-top:1px solid var(--line);
}
.starting-conclusion strong{ color:var(--blue); font-weight:700; }

@media (max-width:860px){
  .starting-grid{ grid-template-columns:1fr; gap:32px; margin-bottom:48px; }
}

/* =========================================================
   COMMENT J'EN SUIS ARRIVE LA : parcours vertical
   ========================================================= */
.journey-section{ padding-top:clamp(56px, 8vw, 100px); padding-bottom:clamp(56px, 8vw, 100px); }
.journey-section .section-head{ margin-bottom:56px; }

.journey{ position:relative; max-width:var(--ap-max-mid); margin:0 auto; }
.journey-step{
  position:relative;
  display:grid; grid-template-columns:200px 1fr; gap:40px;
  padding:36px 0; align-items:center;
}
.journey-step:first-child{ padding-top:4px; }
.journey-step:last-child{ padding-bottom:4px; }
.journey-step:not(:last-child){ border-bottom:1px solid rgba(5,61,140,.08); }

.journey-num{
  font-family:var(--font-body); font-weight:700; font-size:clamp(72px,8vw,108px); line-height:1;
  color:rgba(5,61,140,.14);
}
.journey-body{ max-width:56ch; }
.journey-key{
  display:block; font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--orange-deep); margin-bottom:10px;
}
.journey-step h3{ font-size:24px; color:var(--navy); margin-bottom:9px; }
.journey-step p{ font-size:15.5px; color:var(--ink-soft); line-height:1.6; }

@media (max-width:760px){
  .journey-step{ grid-template-columns:64px 1fr; gap:20px; padding:30px 0; align-items:start; }
  .journey-num{ font-size:40px; }
}

/* =========================================================
   CE QUE VOUS POUVEZ ATTENDRE DE MOI : 3 colonnes, sans carte
   ========================================================= */
.values-section{ padding-bottom:clamp(56px, 8vw, 100px); }
.values-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  max-width:var(--ap-max-mid); margin:0 auto;
}
.values-col{
  padding:0 40px; transition:transform .25s var(--ease);
}
.values-col:first-child{ padding-left:0; }
.values-col:last-child{ padding-right:0; }
.values-col:not(:first-child){ border-left:1px solid var(--line); }
.values-col:hover{ transform:translateY(-4px); }

.values-num{ font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--orange-deep); margin-bottom:16px; display:block; }
.values-col h3{ font-size:24px; font-weight:700; color:var(--navy); margin-bottom:14px; }
.values-accent{ display:block; width:26px; height:2px; background:var(--blue); margin-bottom:16px; transition:width .25s var(--ease); }
.values-col:hover .values-accent{ width:42px; }
.values-col p{ font-size:15px; color:var(--ink-soft); line-height:1.6; }

@media (max-width:860px){
  .values-grid{ grid-template-columns:1fr; gap:40px; }
  .values-grid .values-col{ padding:0; }
  .values-grid .values-col:not(:first-child){ border-left:none; }
  .values-col:hover{ transform:none; }
}