/* =============================================================
   Page « CTO à temps partagé » — styles spécifiques
   Se charge APRÈS /style.css (réutilise ses tokens et ses classes).
   ============================================================= */

.def-hero{ padding:clamp(150px,22vh,260px) 0 clamp(24px,4vh,50px); }
.def-hero__alt{
  margin-top:18px; color:var(--ink-soft);
  font-size:clamp(15px,1.8vw,18px); line-height:1.5; max-width:60ch;
}
.def-hero__alt em{ font-style:italic; color:var(--ink); }

/* la définition « quotable » — l'élément citable par Google / les LLM */
.def-lead{
  margin-top:clamp(28px,5vh,46px);
  font-size:clamp(18px,2.3vw,24px); line-height:1.5; color:var(--ink-soft);
  max-width:62ch;
  padding-left:clamp(16px,2vw,24px); border-left:1px solid var(--line);
}
.def-lead strong{ color:var(--ink); font-weight:500; }
.def-lead em{ font-style:italic; }

/* listes à puces sobres */
.def-list{ margin-top:clamp(30px,5vh,48px); list-style:none; display:grid; gap:14px; max-width:66ch; }
.def-list li{ position:relative; padding-left:26px; color:var(--ink-soft); font-size:clamp(15px,1.8vw,17px); line-height:1.55; }
.def-list li::before{ content:""; position:absolute; left:3px; top:.62em; width:7px; height:7px; border:1px solid var(--ink-faint); border-radius:50%; }
.def-list strong{ color:var(--ink); font-weight:500; }
.def-list em{ font-style:italic; }

/* fil d'Ariane */
.crumb{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:24px; }
.crumb a{ color:var(--ink-soft); transition:color .3s var(--ease); }
.crumb a:hover{ color:var(--ink); }
.crumb span[aria-hidden]{ margin:0 8px; opacity:.5; }

/* paragraphe de corps (suite d'un lead) */
.def-body{ margin-top:clamp(18px,3vh,26px); color:var(--ink-soft); font-size:clamp(15px,1.9vw,18px); line-height:1.62; max-width:62ch; }
.def-body strong{ color:var(--ink); font-weight:500; }

/* encart « exemple type » */
.def-note{
  margin-top:clamp(26px,4vh,38px); padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--line); border-radius:4px; background:rgba(243,242,237,.02);
  color:var(--ink-soft); font-size:clamp(14.5px,1.7vw,16px); line-height:1.6; max-width:66ch;
}
.def-note strong{ color:var(--ink); font-weight:500; }

/* tableau comparatif */
.def-table{ margin-top:clamp(40px,7vh,80px); border-top:1px solid var(--line); }
.def-row{
  display:grid; grid-template-columns:1.2fr 1fr 1.4fr; gap:clamp(16px,3vw,40px);
  padding:clamp(18px,2.6vh,26px) 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.def-row--head{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.def-row [role="cell"]{ color:var(--ink-soft); font-size:clamp(14.5px,1.7vw,16px); line-height:1.5; }
.def-row strong{ color:var(--ink); font-weight:500; }

/* le pont vers Y */
.section--bridge{ background:var(--bg-2); }
.def-cta{ margin-top:clamp(30px,5vh,44px); display:flex; align-items:center; gap:clamp(18px,3vw,32px); flex-wrap:wrap; }
.def-inline-link{ color:var(--ink-soft); border-bottom:1px solid var(--line); transition:color .3s var(--ease); }
.def-inline-link:hover{ color:var(--ink); }

/* FAQ en accordéon (natif, sans JS) */
.faq{ margin-top:clamp(30px,5vh,48px); border-top:1px solid var(--line); max-width:72ch; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:clamp(18px,2.6vh,24px) 36px clamp(18px,2.6vh,24px) 0;
  font-size:clamp(16px,1.9vw,19px); font-weight:500; color:var(--ink); letter-spacing:-.01em;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-weight:300; font-size:22px; line-height:1;
}
.faq__item[open] summary::after{ content:"\2212"; }
.faq__item p{ color:var(--ink-soft); font-size:clamp(15px,1.7vw,17px); line-height:1.6; padding:0 0 clamp(20px,3vh,26px); max-width:66ch; }

/* nav (2 liens) : en ligne sur mobile, sans le menu déroulant (pas de script.js ici) */
@media (max-width:640px){
  .nav__links{
    display:flex; position:static; width:auto; margin:0; padding:0;
    flex-direction:row; gap:16px; background:none; border:0;
  }
  .def-row--head{ display:none; }
  .def-row{ grid-template-columns:1fr; gap:8px; padding:20px 0; }
  .def-row [role="cell"]{ display:grid; grid-template-columns:104px 1fr; gap:10px; align-items:baseline; }
  .def-row [role="cell"]::before{
    content:attr(data-k); font-family:var(--mono); font-size:10px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-faint); padding-top:2px;
  }
}