/* =========================================================
   POLYANCE — Page "polyance.html" (page concept / marque)
   Styles propres a cette page uniquement : ne touche a aucune
   classe partagee de pages.css (page-hero, timeline, etc.) pour
   ne rien casser sur expertises / a-propos / contact.
   Reutilise au maximum les classes globales deja validees sur la
   Home : .section, .section-grey, .eyebrow, .h2, .reveal, .btn,
   .cta-final, .method-flow (identique a la Home, meme JS dans
   main.js, aucune modif de mecanique necessaire).
   ========================================================= */

/* ---------- systeme d'espacement / largeurs propre a cette page ----------
   Complete les tokens globaux (--container) sans les modifier : n'existe
   que sur cette page (fichier charge uniquement par polyance.html). */
:root{
  --pc-max-mid: 980px;      /* comparaison, continuum : lecture centree, plus etroite que le container plein */
  --pc-max-text: 640px;     /* paragraphes / phrases isolees */
}

/* ---------- HERO CONCEPT ---------- */
.concept-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;
}
.concept-hero .container{ width:100%; }
@media (max-width:900px){
  .concept-hero{ min-height:auto; padding-top:clamp(120px, 16vw, 150px); padding-bottom:56px; }
}
.concept-hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:56px; align-items:center;
  position:relative; z-index:1;
}
.concept-hero-copy{ max-width:560px; }
.concept-hero-copy .eyebrow{ margin-bottom:20px; }
.concept-hero-copy h1{ margin-bottom:20px; font-size:clamp(32px,4.4vw,50px); }
.concept-hero-copy .lede{ max-width:46ch; margin-bottom:0; }
.concept-hero-more{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:28px; font-family:var(--font-body); font-weight:700; font-size:13.5px;
  letter-spacing:.04em; color:var(--blue);
}
.concept-hero-more svg{ transition:transform var(--dur-s) var(--ease); }
.concept-hero-more:hover svg{ transform:translateY(3px); }

/* ---- composition graphique : plusieurs besoins qui convergent vers Polyance ---- */
.concept-graphic{
  position:relative;
  width:100%; aspect-ratio:1/1; max-width:clamp(300px, 58vh, 480px); margin-inline:auto;
}
.concept-graphic svg.lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.concept-graphic svg.lines path{
  fill:none; stroke:var(--blue); stroke-width:1.4; stroke-linecap:round;
  opacity:.22;
}
/* etat par defaut = trait entierement visible (fallback sans JS / reduced-motion) ;
   le JS (quand le mouvement est autorise) fixe dasharray/dashoffset en inline pour
   animer le tracé depuis le badge Polyance vers chaque competence */
.concept-chip{
  position:absolute;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:9px 16px;
  font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.04em;
  color:var(--ink-soft);
  box-shadow:var(--shadow-s);
  white-space:nowrap;
  opacity:0; transform:translateY(6px) scale(.94);
  transition:opacity .45s var(--ease-soft), transform .45s var(--ease-soft);
}
.concept-chip.is-shown{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .concept-chip{ opacity:1; transform:none; transition:none; }
}
.concept-chip.c1{ top:38%; left:0%; }
.concept-chip.c2{ top:16%; left:2%; }
.concept-chip.c3{ top:-6%; left:50%; transform:translateX(-50%); }
.concept-chip.c3.is-shown{ transform:translateX(-50%); }
.concept-chip.c4{ top:16%; right:6%; left:auto; }
.concept-chip.c5{ top:38%; right:0%; left:auto; }

.concept-badge{
  position:absolute; left:50%; bottom:4%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  z-index:2;
}
.concept-badge-circle{
  width:76px; height:76px; border-radius:50%;
  background:var(--blue); box-shadow:0 20px 40px -18px rgba(5,61,140,.5);
  display:flex; align-items:center; justify-content:center;
}
.concept-badge-circle img{ width:34px; height:34px; }
.concept-badge span{
  font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--blue);
}

@media (max-width:900px){
  .concept-hero-grid{ grid-template-columns:1fr; gap:40px; text-align:center; }
  .concept-hero-copy{ max-width:none; margin-inline:auto; }
  .concept-hero-copy .lede{ margin-inline:auto; }
  .concept-graphic{ max-width:340px; }
}
@media (max-width:560px){
  /* la composition radiale ne passe pas bien en tres etroit : version
     lineaire simplifiee (5 puces -> badge), plus sure et plus lisible */
  .concept-graphic{ aspect-ratio:auto; max-width:320px; display:flex; flex-direction:column; align-items:center; gap:10px; }
  .concept-graphic svg.lines{ display:none; }
  .concept-chip{ position:static; opacity:1; transform:none; }
  .concept-chip.c3{ transform:none; }
  .concept-graphic-linear-arrow{ color:var(--ink-faint); margin:2px 0; }
  .concept-badge{ position:static; transform:none; margin-top:6px; }
}
@media (min-width:561px){ .concept-graphic-linear-arrow{ display:none; } }

/* =========================================================
   SIGNATURE : "Ce que ça change" — 3 modeles, une seule lecture
   ========================================================= */
.signature{ padding-top:clamp(64px, 8vw, 110px); padding-bottom:clamp(64px, 8vw, 110px); }

.model-grid{
  display:grid; grid-template-columns:1fr 1fr 1.05fr; gap:22px;
  align-items:stretch; max-width:var(--pc-max-mid); margin-inline:auto;
}
.model-card{
  display:flex; flex-direction:column;
  background:#FAFCFF; border:1px solid var(--line); border-radius:var(--radius-l);
  padding:36px 32px 30px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.model-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-m); }

.model-icon{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--blue-tint); color:var(--blue);
  margin-bottom:20px;
}
.model-label{
  font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:24px;
}

.model-steps{ display:flex; flex-direction:column; }
.model-step{ display:flex; align-items:baseline; gap:12px; }
.model-step-num{
  font-family:var(--font-body); font-weight:700; font-size:12px; color:var(--ink-faint);
  transition:color .2s var(--ease);
}
.model-step-text{
  font-family:var(--font-display); font-weight:400; font-size:19px; color:var(--navy);
}
.model-connector{
  width:1px; height:22px; margin:6px 0 6px 5.5px;
  background:var(--line);
  transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease-soft);
  transition-delay:.15s;
}
.reveal.is-visible .model-connector,
.reveal-scale.is-visible .model-connector{ transform:scaleY(1); }
@media (prefers-reduced-motion: reduce){
  .model-connector{ transform:scaleY(1); }
}

.model-quote{
  margin-top:auto; padding-top:22px;
  font-family:var(--font-display); font-style:italic; font-weight:400; font-size:14.5px;
  color:var(--ink-soft); border-top:1px solid var(--line);
}

.model-card.is-polyance{
  background:var(--blue); color:#fff; border-color:var(--blue);
  padding:40px 34px 32px; margin-top:-14px;
  box-shadow:var(--shadow-card);
}
.model-card.is-polyance .model-icon{ background:rgba(255,255,255,.14); color:#fff; }
.model-card.is-polyance .model-label{ color:#BFD6FF; }
.model-card.is-polyance .model-step-num{ color:var(--orange); }
.model-card.is-polyance .model-step-text{ color:#fff; font-weight:500; }
.model-card.is-polyance .model-connector{ background:rgba(255,255,255,.3); }
.model-card.is-polyance .model-quote{
  border-top-color:rgba(255,255,255,.22); color:#fff; font-weight:600; font-style:normal; font-size:16px; line-height:1.4;
}

.signature-conclusion{
  text-align:center; max-width:36ch; margin:52px auto 0;
  font-family:var(--font-display); font-weight:400; font-size:clamp(20px,2.2vw,25px);
  color:var(--navy); line-height:1.4;
}
.signature-conclusion em{ font-style:italic; color:var(--blue); font-weight:400; }

@media (max-width:900px){
  .model-grid{ grid-template-columns:1fr; gap:18px; max-width:440px; }
  .model-card.is-polyance{ margin-top:2px; }
}

/* =========================================================
   FLEXIBILITE : continuum mission ponctuelle <-> accompagnement continu
   ========================================================= */
.continuum-section .section-head{ margin-bottom:64px; }
.continuum{ max-width:var(--pc-max-mid); margin:0 auto; }
.continuum-ends{ display:flex; justify-content:space-between; margin-bottom:76px; }
.continuum-end{
  font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--blue);
}
.continuum-end.right{ color:var(--orange-deep); }

/* zone dediee : la piste occupe une bande haute pour laisser assez de place
   aux exemples au-dessus ET en-dessous sans jamais toucher les labels des
   extremites ni se chevaucher entre eux */
.continuum-track{
  position:relative; height:2px; background:var(--line); border-radius:2px;
  margin:0 6px;
}
.continuum-line{
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--blue) 0%, var(--blue) 35%, var(--orange) 100%);
  border-radius:2px;
}
.continuum-cursor{
  position:absolute; top:50%; left:0%; width:10px; height:10px; border-radius:50%;
  background:var(--white); border:2px solid var(--blue);
  transform:translate(-50%,-50%);
  transition:left 1.1s var(--ease-soft);
  box-shadow:0 2px 8px rgba(5,61,140,.3);
}
.continuum.is-visible .continuum-cursor{ left:38%; }
@media (prefers-reduced-motion: reduce){
  .continuum-cursor{ transition:none; left:38%; }
}

/* par defaut (sans classe) = au-dessus de l'axe ; .below = en-dessous.
   28px d'ecart avec l'axe + petite graduation de 12px = 40px de marge
   de securite avant de croiser la ligne des labels d'extremite. */
.continuum-point{
  position:absolute; left:var(--pos, 0%); bottom:28px; transform:translateX(-50%);
  font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--ink-soft);
  white-space:nowrap;
}
.continuum-point.below{ bottom:auto; top:28px; }
.continuum-point::before{
  content:""; position:absolute; left:50%; width:1px; background:var(--line);
  bottom:-16px; height:12px; transform:translateX(-50%);
}
.continuum-point.below::before{ bottom:auto; top:-16px; }

.continuum-note{
  text-align:center; max-width:56ch; margin:76px auto 0; color:var(--ink-soft); font-size:15px; line-height:1.6;
}
.continuum-note.strong{ margin-top:12px; font-weight:700; color:var(--navy); font-size:15.5px; }

@media (max-width:900px){
  .continuum{ max-width:380px; }
  .continuum-ends{ flex-direction:column; align-items:center; gap:8px; text-align:center; margin-bottom:32px; }
  /* axe vertical : liste naturelle en ordre DOM (deja trie ponctuel -> continu),
     la ligne degradee est portee par une bordure gauche plutot que par les
     memes elements que le mode horizontal (positions --pos ignorees ici) */
  .continuum-track{
    position:relative; height:auto; width:auto; background:none;
    display:flex; flex-direction:column; gap:20px;
    padding-left:22px; border-left:2px solid var(--line);
  }
  .continuum-line{ display:none; }
  .continuum-cursor{ display:none; }
  .continuum-point{
    position:static; left:auto; bottom:auto; top:auto; transform:none;
    text-align:left; white-space:normal;
  }
  .continuum-point::before{ display:none; }
}

/* =========================================================
   QUAND FAIRE APPEL A POLYANCE : grille de situations declencheuses
   ========================================================= */
.situations{
  background:var(--blue-tint);
  padding-top:clamp(56px, 8vw, 104px); padding-bottom:clamp(56px, 8vw, 104px);
}
.situations-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  max-width:var(--pc-max-mid); margin:8px auto 0;
}
.situation-card{
  position:relative;
  border-radius:var(--radius-m); background:var(--white);
  border:1px solid var(--line);
  padding:28px 30px;
  display:flex; flex-direction:column; gap:8px;
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.situation-card:hover{ transform:translateX(2px) translateY(-2px); border-color:var(--orange); }
.situation-num{ font-family:var(--font-body); font-weight:700; font-size:12px; color:var(--orange-deep); }
.situation-label{
  font-family:var(--font-body); font-weight:700; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:2px;
}
.situation-card p{
  font-family:var(--font-display); font-weight:400; font-size:clamp(17px,1.5vw,19px);
  line-height:1.38; color:var(--navy); margin:8px 0 0; max-width:42ch;
}
.situation-arrow{
  position:absolute; right:24px; bottom:22px;
  color:var(--orange); font-size:16px; opacity:0; transform:translateX(-4px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.situation-card:hover .situation-arrow{ opacity:1; transform:none; }

@media (max-width:700px){
  .situations-grid{ grid-template-columns:1fr; }
}