/* ===========================================================
   KAYLAR EXPERTS — Page styles
   =========================================================== */

.main-fade{ animation:pagefade .45s ease; }
@keyframes pagefade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

/* =================== HERO =================== */
.hero{ position:relative; overflow:hidden; background:
  radial-gradient(1100px 500px at 88% -8%, rgba(67,198,184,.10), transparent 60%),
  linear-gradient(180deg, var(--paper-2), var(--paper)); }
.hero__grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(36px,5vw,72px); align-items:center;
  padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,108px); }
.hero__title{ margin:18px 0 0; }
.hero__lead{ margin:22px 0 0; max-width:54ch; }
.hero__cta{ margin-top:32px; gap:16px; }
.hero__trust{ display:flex; gap:30px; margin-top:44px; padding-top:26px; border-top:1px solid var(--line); flex-wrap:wrap; }
.hero__trustitem b{ display:block; font-family:var(--head); font-size:17px; color:var(--ink); font-weight:700; }
.hero__trustitem span{ display:block; font-size:13.5px; color:var(--muted); margin-top:2px; }
.hero__visual{ position:relative; }
.hero__photo{ position:relative; z-index:1; }
.hero__photo .ph{ box-shadow:var(--shadow-lg); }
.hero__badge{ position:absolute; left:-24px; bottom:34px; z-index:3; display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 18px; box-shadow:var(--shadow); }
.hero__badgeicon{ width:42px; height:42px; border-radius:10px; background:var(--mint-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; flex:none; }
.hero__badge b{ display:block; font-size:14.5px; color:var(--ink); font-weight:700; line-height:1.2; }
.hero__badge em{ display:block; font-style:normal; font-size:12.5px; color:var(--muted); }

/* =================== TRUST / LOGOS =================== */
.trust__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.trust__sub{ font-size:15px; color:var(--muted); max-width:60ch; margin:0; }
.trust__logos{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:32px; }
.trust__logo{ height:74px; border:1px dashed var(--line); border-radius:var(--r); display:flex; align-items:center; justify-content:center;
  color:var(--muted-2); font-size:12px; letter-spacing:.1em; text-transform:uppercase; background:var(--paper-2); }

/* =================== SPLIT =================== */
.split{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px,5vw,68px); align-items:center; }
.split__media{ position:relative; }
.split__img{ box-shadow:var(--shadow); }
.split__chip{ position:absolute; right:-16px; bottom:24px; display:flex; align-items:center; gap:10px; max-width:260px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; box-shadow:var(--shadow); font-size:13.5px; color:var(--ink-2); font-weight:550; }
.split__chip svg{ color:var(--brand); flex:none; }
.split__copy{ display:flex; flex-direction:column; gap:18px; }

/* =================== SERVICE CARDS (home) =================== */
.svc__grid{ grid-template-columns:repeat(4,1fr); }
.svc__card{ display:flex; flex-direction:column; gap:14px; height:100%; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px 26px; transition:.26s ease; }
.svc__card:hover{ border-color:#cfe0dd; box-shadow:var(--shadow); transform:translateY(-4px); }
.svc__icon{ width:54px; height:54px; border-radius:13px; background:var(--mint-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; transition:.26s; }
.svc__card:hover .svc__icon{ background:var(--brand); color:#fff; }
.svc__text{ font-size:14.5px; color:var(--muted); line-height:1.62; flex:1; margin:0; }

/* =================== INTERNATIONAL =================== */
.intl{ position:relative; overflow:hidden; background:
  radial-gradient(900px 500px at 100% 0%, rgba(26,196,231,.12), transparent 55%), var(--brand-deep);
  color:#fff; padding:clamp(64px,8vw,112px) 0; }
.intl__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,80px); align-items:center; }
.intl__lead{ font-size:17.5px; line-height:1.7; color:rgba(255,255,255,.8); margin:18px 0 24px; max-width:54ch; }
.intl__list{ list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:14px; }
.intl__list li{ display:flex; align-items:flex-start; gap:12px; font-size:15.5px; color:rgba(255,255,255,.9); }
.intl__list svg{ color:var(--mint); flex:none; margin-top:1px; }
.intl__visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:300px; }
.intl__visual .worldarc{ filter:drop-shadow(0 16px 40px rgba(0,0,0,.3)); }
.intl__tag{ position:absolute; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(4px);
  color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.04em; padding:7px 13px; border-radius:100px; }
.intl__tag--fr{ top:20%; left:14%; }
.intl__tag--mg{ bottom:18%; right:16%; color:var(--mint); }

/* =================== TESTIMONIALS =================== */
.tmo__grid{ grid-template-columns:repeat(3,1fr); }
.tmo{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px 26px; margin:0; height:100%; display:flex; flex-direction:column; transition:.26s; }
.tmo:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.tmo__q{ color:var(--mint); margin-bottom:14px; }
.tmo blockquote{ margin:0 0 22px; font-size:16px; line-height:1.62; color:var(--ink-2); flex:1; }
.tmo figcaption{ display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--line); }
.tmo__av{ width:38px; height:38px; border-radius:50%; background:var(--mint-soft); display:flex; align-items:center; justify-content:center; flex:none; }
.tmo figcaption b{ display:block; font-size:14px; color:var(--ink); font-weight:600; }
.tmo figcaption em{ display:block; font-style:normal; font-size:12.5px; color:var(--muted); }

/* =================== CTA BANNER =================== */
.cta{ position:relative; overflow:hidden; background:linear-gradient(120deg, var(--brand-700), var(--brand)); color:#fff; }
.cta__inner{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  padding:clamp(48px,6vw,76px) 0; position:relative; z-index:1; }
.cta__title{ color:#fff; white-space:pre-line; margin-top:12px; max-width:20ch; }
.cta__intro{ color:rgba(255,255,255,.82); margin-top:14px; max-width:48ch; }
.cta__act{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.cta__phone{ display:inline-flex; align-items:center; gap:9px; color:#fff; font-weight:600; font-size:16px; white-space:nowrap; }
.cta__phone svg{ color:var(--mint); }
.cta__phone:hover{ color:var(--mint); }

/* =================== PAGE HERO (interior) =================== */
.phero{ position:relative; overflow:hidden; background:
  radial-gradient(900px 420px at 92% -20%, rgba(67,198,184,.10), transparent 60%),
  linear-gradient(180deg, var(--paper-2), var(--paper)); }
.phero__inner{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:clamp(52px,7vw,92px) 0 clamp(40px,5vw,64px); max-width:920px; }
.phero__title{ margin:0; max-width:18ch; }
.phero__intro{ margin:0; }
.phero__badge{ width:64px; height:64px; border-radius:16px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); margin-bottom:4px; }
.phero--svc .phero__title{ max-width:20ch; }

/* =================== ABOUT — associés =================== */
.assoc__grid{ grid-template-columns:repeat(3,1fr); }
.assoc{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; height:100%; transition:.26s; }
.assoc:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.assoc__photo{ border:0; border-radius:0; }
.assoc__body{ padding:24px 24px 28px; }
.assoc__name{ font-size:19px; color:var(--ink); font-weight:700; margin:0; }
.assoc__role{ display:block; font-size:13px; color:var(--brand); font-weight:600; margin:6px 0 14px; letter-spacing:.01em; }
.assoc__bio{ font-size:14.5px; color:var(--muted); line-height:1.62; margin:0; }

/* valeurs */
.val__grid{ grid-template-columns:repeat(2,1fr); gap:28px; }
.val{ display:flex; flex-direction:column; gap:12px; padding:30px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); height:100%; transition:.24s; }
.val:hover{ border-color:#cfe0dd; box-shadow:var(--shadow-sm); }
.val__icon{ width:50px; height:50px; border-radius:12px; background:var(--mint-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.val__d{ font-size:15px; color:var(--muted); line-height:1.64; margin:0; }

/* prestations */
.prest__grid{ grid-template-columns:repeat(3,1fr); gap:24px 32px; }
.prest{ display:flex; gap:16px; align-items:flex-start; }
.prest__icon{ width:46px; height:46px; border-radius:11px; background:var(--paper-2); border:1px solid var(--line); color:var(--brand); display:flex; align-items:center; justify-content:center; flex:none; }
.prest__t{ font-size:16.5px; color:var(--ink); font-weight:600; margin:2px 0 6px; }
.prest__d{ font-size:14px; color:var(--muted); line-height:1.6; margin:0; }

/* secteurs */
.sect__grid{ grid-template-columns:repeat(2,1fr); gap:26px; }
.sect{ display:flex; gap:18px; align-items:flex-start; padding:26px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); transition:.24s; }
.sect:hover{ box-shadow:var(--shadow-sm); border-color:#cfe0dd; }
.sect__icon{ width:52px; height:52px; border-radius:12px; background:var(--mint-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; flex:none; }
.sect__d{ font-size:14.5px; color:var(--muted); line-height:1.62; margin:8px 0 0; }

/* pourquoi */
.why__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(36px,5vw,68px); align-items:start; }
.why__list{ display:grid; grid-template-columns:1fr 1fr; gap:2px 0; }
.why__item{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.why__num{ font-family:var(--head); font-size:13px; font-weight:700; color:var(--mint); flex:none; padding-top:1px; }

/* =================== SERVICE PAGE =================== */
.svcnav{ position:sticky; top:74px; z-index:30; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.hdr--scrolled ~ main .svcnav{ top:66px; }
.svcnav__inner{ display:flex; gap:6px; overflow-x:auto; padding:10px 0; scrollbar-width:none; }
.svcnav__inner::-webkit-scrollbar{ display:none; }
.svcnav__link{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:100px; font-size:14px; font-weight:550; color:var(--muted); white-space:nowrap; transition:.18s; }
.svcnav__link svg{ opacity:.7; }
.svcnav__link:hover{ color:var(--brand); background:var(--paper-2); }
.svcnav__link.is-active{ background:var(--brand); color:#fff; }
.svcnav__link.is-active svg{ opacity:1; }

.offer__grid{ grid-template-columns:repeat(3,1fr); gap:26px; }
.offer{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px; height:100%; transition:.24s; }
.offer:hover{ box-shadow:var(--shadow); border-color:#cfe0dd; transform:translateY(-3px); }
.offer__icon{ width:50px; height:50px; border-radius:12px; background:var(--mint-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.offer__t{ font-size:17.5px; color:var(--ink); font-weight:600; margin:0 0 9px; }
.offer__d{ font-size:14px; color:var(--muted); line-height:1.62; margin:0; }

.sect2__grid{ grid-template-columns:repeat(2,1fr); gap:22px; }
.sect2{ background:#fff; border:1px solid var(--line); border-left:3px solid var(--mint); border-radius:var(--r); padding:24px 26px; }
.sect2__t{ font-size:16.5px; color:var(--ink); font-weight:600; margin:0 0 7px; }
.sect2__d{ font-size:14px; color:var(--muted); line-height:1.6; margin:0; }

.appr__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,64px); align-items:start; }
.appr__close{ margin-top:34px; padding-top:30px; border-top:1px solid var(--line); }
.appr__close .h3{ margin-bottom:10px; }
.appr__btn{ margin-top:20px; }
.appr__points{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 28px; }
.appr__pt{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); font-size:15.5px; color:var(--ink-2); line-height:1.5; }
.appr__pt:last-child{ border-bottom:0; }
.appr__check{ width:30px; height:30px; border-radius:50%; background:var(--mint-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; flex:none; }

.others__head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.others__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.others__card{ display:flex; align-items:center; gap:14px; padding:20px 22px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); transition:.22s; }
.others__card:hover{ border-color:var(--brand); box-shadow:var(--shadow-sm); }
.others__icon{ width:42px; height:42px; border-radius:10px; background:var(--mint-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; flex:none; }
.others__card b{ font-size:16px; color:var(--ink); font-weight:600; }
.others__arr{ margin-left:auto; color:var(--muted-2); transition:.22s; }
.others__card:hover .others__arr{ color:var(--brand); transform:translateX(3px); }

/* =================== RESOURCES =================== */
.res__grid{ grid-template-columns:repeat(2,1fr); gap:24px; }
.rescat{ display:flex; gap:18px; align-items:flex-start; padding:30px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); transition:.24s; }
.rescat:hover{ box-shadow:var(--shadow-sm); border-color:#cfe0dd; }
.rescat__icon{ width:54px; height:54px; border-radius:13px; background:var(--mint-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; flex:none; }
.rescat__d{ font-size:14.5px; color:var(--muted); line-height:1.62; margin:8px 0 12px; }
.rescat .link-arrow{ color:var(--muted-2); font-size:13px; cursor:default; }

.art__grid{ grid-template-columns:repeat(3,1fr); }
.art{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; height:100%; transition:.26s; cursor:pointer; }
.art:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.art__img{ border:0; border-radius:0; }
.art__body{ padding:22px 24px 26px; }
.art__tag{ display:inline-block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--brand); background:var(--mint-soft); padding:4px 10px; border-radius:100px; margin-bottom:12px; }
.art__t{ font-size:17px; color:var(--ink); font-weight:600; line-height:1.34; margin:0 0 12px; }
.art__date{ font-size:12.5px; color:var(--muted-2); }

.news{ position:relative; overflow:hidden; background:linear-gradient(120deg, var(--brand-deep), var(--brand-700)); border-radius:var(--r-lg);
  padding:clamp(36px,5vw,56px); display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; color:#fff; }
.news__sub{ color:rgba(255,255,255,.78); font-size:15.5px; margin:14px 0 0; max-width:46ch; }
.news__form{ display:flex; gap:12px; flex-wrap:wrap; }
.news__input{ flex:1; min-width:220px; height:52px; border-radius:var(--r); border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; padding:0 18px; font-family:inherit; font-size:15px; }
.news__input::placeholder{ color:rgba(255,255,255,.6); }
.news__input:focus{ outline:none; border-color:var(--mint); background:rgba(255,255,255,.16); }
.news__ok{ display:flex; align-items:center; gap:10px; font-weight:600; color:#fff; }
.news__ok svg{ color:var(--mint); }

/* =================== CONTACT =================== */
.contact__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,4vw,56px); align-items:start; }
.contact__side{ display:flex; flex-direction:column; gap:16px; }
.office{ display:flex; gap:16px; align-items:flex-start; padding:22px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); }
.office--intl{ background:var(--brand-deep); border-color:var(--brand-deep); }
.office--intl .office__name, .office--intl .office__line{ color:#fff; }
.office--intl .office__line{ color:rgba(255,255,255,.75); }
.office--intl .office__pin{ background:rgba(255,255,255,.12); color:var(--mint); }
.office__pin{ width:44px; height:44px; border-radius:11px; background:var(--mint-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; flex:none; }
.office__city{ display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); font-weight:600; margin-bottom:4px; }
.office__name{ display:block; font-size:16px; color:var(--ink); font-weight:700; margin-bottom:7px; }
.office__line{ display:block; font-size:14px; color:var(--muted); line-height:1.55; }
.office__tel{ display:inline-flex; align-items:center; gap:7px; font-size:14.5px; color:var(--brand); font-weight:600; margin-top:8px; white-space:nowrap; }
.office__rcs{ display:block; font-size:11.5px; color:var(--muted-2); margin-top:10px; }

.contact__formwrap{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3vw,40px); box-shadow:var(--shadow); }
.cform__title{ font-size:19px; color:var(--ink); font-weight:700; margin:0 0 22px; }
.cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fld{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.fld__l{ font-size:13px; font-weight:600; color:var(--ink-2); }
.inp{ height:48px; border-radius:var(--r); border:1px solid var(--line); background:var(--paper-2); padding:0 15px; font-family:inherit; font-size:15px; color:var(--ink); transition:.18s; width:100%; }
.inp--ta{ height:auto; padding:13px 15px; resize:vertical; line-height:1.55; }
.inp:focus{ outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px rgba(14,110,112,.1); }
.fld--err .inp{ border-color:#d9534f; background:#fdf3f2; }
.fld__e{ font-style:normal; font-size:12px; color:#c64540; }
.rgpd{ display:flex; gap:11px; align-items:flex-start; margin:6px 0 22px; font-size:13.5px; color:var(--muted); line-height:1.5; }
.rgpd input{ margin-top:3px; width:17px; height:17px; accent-color:var(--brand); flex:none; }
.rgpd a{ color:var(--brand); font-weight:600; text-decoration:underline; }
.rgpd--err{ color:#c64540; }
.cform__submit{ width:100%; }
.formdone{ text-align:center; padding:36px 20px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.formdone__ic{ width:64px; height:64px; border-radius:50%; background:var(--mint-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:6px; }

/* =================== LEGAL =================== */
.legal{ padding:clamp(48px,6vw,84px) 0 clamp(56px,7vw,96px); }
.legal__wrap{ max-width:760px; }
.legal__title{ margin:16px 0 18px; }
.legal__intro{ color:var(--ink-2); margin-bottom:36px; }
.legal__blocks{ display:flex; flex-direction:column; gap:14px; }
.legal__block{ padding:26px 28px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); }
.legal__block .h3{ margin-bottom:12px; }
.legal__block p{ font-size:14.5px; line-height:1.62; margin:0 0 8px; }
.legal__block--note{ background:#FFFBF0; border-color:#F2E6C2; }
.legal__tag{ display:inline-block; margin-top:10px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:#9a7b1e; background:#F7EFD3; padding:5px 11px; border-radius:100px; }
.legal__back{ margin-top:32px; }

/* =================== RESPONSIVE =================== */
@media (max-width:1080px){
  .svc__grid{ grid-template-columns:repeat(2,1fr); }
  .tmo__grid{ grid-template-columns:1fr; }
  .assoc__grid{ grid-template-columns:1fr; max-width:560px; }
  .prest__grid{ grid-template-columns:repeat(2,1fr); }
  .offer__grid{ grid-template-columns:repeat(2,1fr); }
  .art__grid{ grid-template-columns:1fr; max-width:560px; }
  .others__grid{ grid-template-columns:1fr; }
  .svcnav{ top:0; }
}
@media (max-width:920px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ max-width:520px; }
  .split{ grid-template-columns:1fr; }
  .split__chip{ right:16px; }
  .intl__grid{ grid-template-columns:1fr; }
  .intl__visual{ min-height:240px; order:-1; }
  .why__grid{ grid-template-columns:1fr; }
  .appr__grid{ grid-template-columns:1fr; }
  .contact__grid{ grid-template-columns:1fr; }
  .news{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .trust__logos{ grid-template-columns:repeat(2,1fr); }
  .svc__grid{ grid-template-columns:1fr; }
  .val__grid{ grid-template-columns:1fr; }
  .prest__grid{ grid-template-columns:1fr; }
  .offer__grid{ grid-template-columns:1fr; }
  .sect__grid{ grid-template-columns:1fr; }
  .sect2__grid{ grid-template-columns:1fr; }
  .res__grid{ grid-template-columns:1fr; }
  .why__list{ grid-template-columns:1fr; }
  .cform__row{ grid-template-columns:1fr; }
  .cta__inner{ flex-direction:column; align-items:flex-start; }
}