/* La page Compétences sert d'index de situations, distinct du carrousel d'accueil. */

.comp-section-heading { max-width:800px; margin-bottom:36px; }
.comp-section-heading h2 { margin:0; }
.comp-section-heading > p:last-child:not(.comp-eyebrow) { margin:17px 0 0; max-width:69ch; color:var(--muted); line-height:1.6; }

.comp-start { background:var(--paper-2); }
.comp-situations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 54px; border-top:1px solid var(--rule-strong); }
.comp-situations a { display:flex; align-items:center; min-height:87px; padding:16px 0; border-bottom:1px solid var(--rule-strong); color:var(--ink); font:var(--fs-h4)/1.25 var(--font-serif); }
.comp-situations span,.comp-index__name { color:var(--teal-deep); }
.comp-situations a:hover,.comp-index a:hover .comp-index__name { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.comp-situations a:focus-visible,.comp-feature a:focus-visible,.comp-index a:focus-visible,.comp-start__help a:focus-visible { outline:3px solid var(--teal); outline-offset:4px; }
.comp-start__help { margin:27px 0 0; line-height:1.6; }
.comp-start__help a { color:var(--teal-deep); text-decoration:underline; text-underline-offset:4px; }

.comp-specialties { background:var(--paper-3); }
.comp-feature { display:grid; grid-template-columns:minmax(0,1fr) 225px; gap:22px; align-items:start; border-top:1px solid var(--rule-strong); padding:31px 0 34px; }
.comp-feature:last-child { border-bottom:1px solid var(--rule-strong); }
.comp-feature h3 { margin:0 0 9px; max-width:19ch; font-size:var(--fs-h3); line-height:1.18; }
.comp-feature__content > p { margin:0; max-width:53ch; line-height:1.6; }
.comp-feature__content .comp-feature__examples { margin-top:18px; color:var(--muted); font-size:var(--fs-label); line-height:1.6; }
.comp-feature > a { justify-self:end; display:inline-flex; align-items:center; min-height:48px; color:var(--teal-deep); line-height:1.35; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.comp-feature > a:hover { color:var(--ink); }

.comp-directory { background:var(--paper-2); scroll-margin-top:100px; }
.comp-group { display:grid; grid-template-columns:minmax(210px,.36fr) minmax(0,1fr); gap:45px; padding:31px 0 41px; border-top:1px solid var(--rule-strong); }
.comp-group__heading h3 { margin:0; max-width:13ch; font-size:var(--fs-h3); line-height:1.17; }
.comp-index { list-style:none; margin:0; padding:0; }
.comp-index li + li { border-top:1px solid var(--rule); }
.comp-index li:first-child a { padding-top:6px; }
.comp-index a { display:grid; grid-template-columns:minmax(180px,.48fr) minmax(0,1fr); gap:18px; align-items:baseline; min-height:0; padding:16px 0; color:var(--ink); }
.comp-index__name { font:var(--fs-h4)/1.25 var(--font-serif); }
.comp-index__summary { color:var(--muted); font-size:var(--fs-label); line-height:1.5; }

.comp-contact { border-top:1px solid var(--rule); }
.comp-contact .wrap { display:flex; align-items:center; justify-content:space-between; gap:55px; }
.comp-contact h2 { margin:0; }
.comp-contact p:last-child { margin:16px 0 0; color:var(--muted); }
.comp-contact__actions { flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:15px; }
.comp-contact__actions .btn { display:inline-flex; align-items:center; min-height:52px; padding-inline:23px; }
.comp-contact__actions > a:last-child { color:var(--ink); font-size:var(--fs-read); text-decoration:underline; text-underline-offset:4px; }

@media (max-width:850px) {
  .comp-feature { grid-template-columns:minmax(0,1fr); gap:12px 18px; }
  .comp-feature > a { justify-self:start; }
  .comp-group { grid-template-columns:1fr; gap:18px; }
  .comp-group__heading h3 { max-width:none; }
}
@media (max-width:650px) {
  .comp-section-heading { margin-bottom:26px; }
  .comp-situations { grid-template-columns:1fr; gap:0; }
  .comp-situations a { min-height:70px; }
  .comp-feature { padding-block:27px; }
  .comp-group { padding:27px 0 35px; }
  .comp-index a { grid-template-columns:minmax(0,1fr); gap:5px; padding:16px 0; }
  .comp-contact .wrap { flex-direction:column; align-items:flex-start; gap:24px; }
}