/* ==========================================================================
   WebHopper · apropos.css
   Sections propres a la page À propos. Depend de tokens.css et base.css.
   ========================================================================== */

/* ---- En-tete avec portrait ---- */
.intro{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.intro-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media(min-width:900px){.intro-grid{grid-template-columns:1.1fr .9fr}}
.intro h1{font-family:var(--font-display);font-weight:900;font-size:clamp(2.1rem,5vw,3.7rem);
  letter-spacing:-.03em;line-height:1.05;color:var(--charbon);max-width:16ch;margin:1.5rem 0}
.intro-lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--ink);max-width:54ch;line-height:1.7}
.intro-sign{margin-top:2rem;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;
  text-transform:uppercase;color:var(--pierre)}

/* Photo rectangulaire posee sur un cadre ambre decale. Le decalage est absorbe
   par le padding du conteneur, la figure ne deborde donc jamais de sa colonne. */
.portrait{position:relative;justify-self:center;width:100%;max-width:400px;padding:0 16px 16px 0}
.portrait img{width:100%;height:auto;display:block;position:relative;z-index:1;
  border-radius:var(--r-section);border:1px solid var(--border-clair)}
.portrait::before{content:"";position:absolute;left:16px;top:16px;right:0;bottom:0;z-index:0;
  border:1.5px solid var(--ambre);border-radius:var(--r-section)}

/* ---- Chiffres ---- */
.figures{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(1.8rem,5vw,4rem);
  justify-content:start;margin-top:2.6rem;padding-top:2.2rem;border-top:1px solid var(--border-clair)}
.figure .fv{font-family:var(--font-display);font-weight:900;font-size:clamp(1.8rem,3.2vw,2.6rem);
  letter-spacing:-.03em;line-height:1;color:var(--ambre);display:block;font-variant-numeric:tabular-nums}
.figure .fl{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--pierre);margin-top:.7rem;display:block;line-height:1.3}
@media(max-width:520px){.figures{grid-template-columns:1fr;gap:1.5rem}}

/* ---- Le recit ---- */
.story{background:var(--blanc)}
.story-text p{color:var(--ink);font-size:clamp(1.04rem,1.4vw,1.18rem);line-height:1.8;max-width:62ch}
.story-text p + p{margin-top:1.4rem}
.story-text strong{color:var(--charbon);font-weight:700}

/* ---- Jalons du parcours ---- */
.miles{list-style:none;margin:clamp(2.2rem,4.5vw,3.2rem) 0 0;padding:0;display:grid;gap:0;max-width:76ch}
/* Each li is its own grid, so an "auto" label column is sized per row and the
   titles never line up: "AUJOURD'HUI" is nearly twice as wide as "MASTER".
   The track is therefore fixed, wide enough for the longest label. */
.miles li{display:grid;grid-template-columns:7rem 1fr;gap:1.4rem;align-items:start;
  padding:1.6rem 0;border-bottom:1px solid var(--border-clair)}
.miles li:first-child{padding-top:0}
.miles li:last-child{border-bottom:0;padding-bottom:0}
.miles .my{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--ambre);padding-top:.35rem;line-height:1.3}
/* Below this width a 7rem column would squeeze the text to about 200px, so the
   label moves above the title. Same breakpoint as .figures above. */
@media(max-width:520px){
  .miles li{grid-template-columns:1fr;gap:.55rem}
  .miles .my{padding-top:0}
}
.miles h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.1rem,1.8vw,1.32rem);
  letter-spacing:-.015em;line-height:1.25;color:var(--charbon);margin-bottom:.45rem}
.miles p{color:var(--ink);font-size:.99rem;line-height:1.65;max-width:56ch}

/* ---- Mes convictions ---- */
.creed{display:grid;gap:1.3rem;margin-top:clamp(2.2rem,4.5vw,3.4rem)}
@media(min-width:820px){.creed{grid-template-columns:repeat(3,1fr)}}
.cbox{background:var(--blanc);border:1px solid var(--border-clair);border-radius:var(--r-card);
  padding:clamp(1.5rem,2.8vw,2rem);transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease}
.cbox:hover{transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(26,25,24,.24);border-color:var(--pierre)}
.cbox-n{font-family:var(--font-display);font-weight:900;font-size:2.4rem;letter-spacing:-.04em;
  line-height:1;color:var(--ambre);display:block;margin-bottom:1rem}
.cbox h3{font-family:var(--font-display);font-weight:800;font-size:1.2rem;letter-spacing:-.015em;
  line-height:1.2;color:var(--charbon);margin-bottom:.7rem}
.cbox p{color:var(--ink);font-size:.98rem;line-height:1.65}

/* ---- Zone d'intervention ---- */
.zone{background:var(--ivoire);border-top:1px solid var(--border-clair);
  border-bottom:1px solid var(--border-clair)}
.zone .wrap{padding:clamp(2.2rem,4.5vw,3.2rem) 0;display:flex;gap:1.1rem;align-items:flex-start}
.zone svg{width:24px;height:24px;color:var(--ambre);flex-shrink:0;margin-top:3px}
.zone h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.2rem,2.2vw,1.5rem);
  letter-spacing:-.02em;color:var(--charbon);margin-bottom:.6rem;line-height:1.2}
.zone p{color:var(--ink);font-size:clamp(1rem,1.3vw,1.08rem);line-height:1.7;max-width:70ch}

/* ---- Grille des quatre services ---- */
/* The shared .related grid in base.css is three columns, which would leave the
   fourth card alone on a second row. Overridden here only, since the eight
   other pages using .related have two or three cards. Progression is
   1 column, then 2x2, then 4 across: no orphan card at any width. */
.related-4{grid-template-columns:1fr}
@media(min-width:620px){.related-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.related-4{grid-template-columns:repeat(4,1fr)}}