/* ============================================================================
   KAIROS PROJETS — V11.4
   pages.css : composants propres aux pages intérieures
   Prolonge la direction visuelle de la V10.3 : mêmes dégradés, mêmes rythmes,
   mêmes graisses. Aucun encart rigide superflu, hiérarchie éditoriale d'abord.
   ========================================================================= */

/* --------------------------------------------------- Bandeau de tête de page */
.phero{position:relative;overflow:hidden;color:var(--on-dark);padding-top:var(--nav-h);
  background:
    radial-gradient(70% 66% at 78% 6%,rgba(49,100,243,.36) 0%,rgba(49,100,243,0) 62%),
    linear-gradient(158deg,#12299C 0%,var(--deep) 30%,var(--deep-mid) 70%,var(--night) 100%)}
.phero__k{top:50%;right:2%;transform:translateY(-50%);width:min(42%,520px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%)}
.phero__k .k-fill{opacity:.07}
.phero__k .k-line{opacity:.24}
.phero__inner{position:relative;padding-block:clamp(52px,6vw,92px)}
.phero h1{margin-top:22px;font-size:clamp(31px,4.1vw,55px);line-height:1.08;font-weight:700;
  letter-spacing:-.026em;color:var(--white);max-width:19ch;text-wrap:balance}
.phero h1 .accent{color:var(--sky)}
.phero__text{margin-top:26px;font-size:17.5px;line-height:1.72;color:rgba(245,252,255,.9);
  max-width:62ch}
.phero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---------------------------------------------------------- Sections neutres */
.sect{position:relative;padding-block:var(--block)}
.sect--white{background:var(--white)}
.sect--paper{background:var(--paper)}
.sect--dark{overflow:hidden;color:var(--on-dark);
  background:
    radial-gradient(64% 58% at 14% 8%,rgba(49,100,243,.3) 0%,rgba(49,100,243,0) 60%),
    linear-gradient(200deg,var(--deep) 0%,var(--deep-mid) 54%,var(--night) 100%)}
.sect--dark .sect__k{top:52%;left:-14%;transform:translateY(-50%);width:min(50%,600px);
  -webkit-mask-image:linear-gradient(270deg,transparent 0,#000 38%,#000 100%);
  mask-image:linear-gradient(270deg,transparent 0,#000 38%,#000 100%)}
.sect--dark .sect__k .k-fill{opacity:.06}
.sect--dark .sect__k .k-line{opacity:.2}
.sect__head{position:relative;margin-bottom:clamp(34px,3.4vw,52px)}
.sect__head h2{margin-top:20px}
.sect__lead{margin-top:18px;max-width:66ch;font-size:17px;line-height:1.72;color:var(--ink)}
.on-dark .sect__lead{color:rgba(245,252,255,.9)}
.sect__body{position:relative}

/* Intro en deux colonnes (titre à gauche, texte à droite) */
.split{display:grid;grid-template-columns:minmax(0,5.6fr) minmax(0,6fr);
  gap:clamp(32px,5vw,88px);align-items:start}
.split h2{margin-top:20px}
.split__body{display:flex;flex-direction:column;gap:22px;padding-top:4px}
.split__body p{font-size:17px;line-height:1.75;color:var(--ink)}
.on-dark .split__body p{color:rgba(245,252,255,.9)}

/* ------------------------------------------------------- Listes qualifiantes */
.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(32px,4.4vw,72px);row-gap:clamp(26px,2.6vw,36px);margin-top:6px}
.points--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.point{padding-top:22px;border-top:1px solid var(--line)}
.on-dark .point{border-top-color:rgba(255,255,255,.18)}
.point h3{font-size:clamp(18px,1.5vw,21px);line-height:1.28;font-weight:600;
  letter-spacing:-.01em;color:var(--deep)}
.on-dark .point h3{color:var(--white)}
.point p{margin-top:12px;font-size:16px;line-height:1.72;color:var(--ink);max-width:50ch}
.on-dark .point p{color:rgba(245,252,255,.88)}

/* Liste à filets — énumérations courtes */
.rows{margin-top:8px;border-top:1px solid var(--line)}
.on-dark .rows{border-top-color:rgba(255,255,255,.18)}
.rows li{display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);gap:6px 28px;
  align-items:baseline;
  padding-block:18px;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.7}
.on-dark .rows li{border-bottom-color:rgba(255,255,255,.18)}
.rows strong{font-weight:600;color:var(--deep)}
.on-dark .rows strong{color:var(--white)}
.rows span{color:var(--ink);max-width:60ch}
.on-dark .rows span{color:rgba(245,252,255,.88)}

/* ------------------------------------------------------------ Bloc fondateur */
.profil{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7fr);
  gap:clamp(30px,4.4vw,72px);align-items:start}
.profil__id{padding-top:26px;border-top:2px solid var(--elec)}
.profil__id .nom{font-size:clamp(21px,1.9vw,26px);line-height:1.2;font-weight:700;
  letter-spacing:-.015em;color:var(--deep)}
.profil__id .role{margin-top:8px;font-size:15px;font-weight:600;color:var(--elec)}
.profil__body{display:flex;flex-direction:column;gap:20px}
.profil__body p{font-size:17px;line-height:1.75;color:var(--ink)}
.cit{margin-top:6px;padding-left:24px;border-left:2px solid var(--elec-2);
  font-size:clamp(18px,1.6vw,21px);line-height:1.55;font-weight:500;color:var(--deep)}

/* --------------------------------------------------------------- Convictions */
.convictions{counter-reset:cv;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(32px,4.4vw,80px);row-gap:clamp(30px,3vw,44px)}
.conviction{counter-increment:cv;padding-top:24px;border-top:1px solid var(--line)}
.conviction::before{content:"0" counter(cv);display:block;margin-bottom:12px;
  font-size:14px;font-weight:600;color:var(--elec)}
.conviction h3{font-size:clamp(19px,1.6vw,23px);line-height:1.26;font-weight:600;
  letter-spacing:-.012em;color:var(--deep)}
.conviction h3 em{font-style:normal;color:var(--elec)}
.conviction p{margin-top:12px;font-size:16px;line-height:1.72;color:var(--ink);max-width:48ch}

/* -------------------------------------------------------------- Formulaire */
.form-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,4.6vw,76px);align-items:start}
.coords{display:flex;flex-direction:column;gap:2px;margin-top:8px;
  border-top:1px solid var(--line)}
.coord{display:flex;flex-direction:column;gap:4px;padding-block:20px;
  border-bottom:1px solid var(--line);text-decoration:none}
.coord__label{font-size:13px;font-weight:600;color:var(--elec)}
.coord__value{font-size:17.5px;font-weight:600;color:var(--deep);overflow-wrap:anywhere;
  transition:color .18s var(--ease)}
a.coord:hover .coord__value{color:var(--elec)}
.coord__note{font-size:15px;color:var(--ink)}

.form{margin-top:8px}
.form__profil{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;
  padding:0;border:0;min-inline-size:0}
.form__profil input{position:absolute;opacity:0;width:1px;height:1px}
.form__profil label{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;
  border:1px solid rgba(15,37,146,.3);border-radius:var(--r-btn);background:var(--white);
  font-size:14.5px;font-weight:600;color:var(--deep);cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.form__profil label:hover{border-color:var(--deep);background:var(--paper)}
.form__profil input:checked + label{background:var(--elec);border-color:var(--elec);color:var(--white)}
.form__profil input:focus-visible + label{outline:2px solid var(--elec);outline-offset:3px}

.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field--half{margin-bottom:0}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;margin-bottom:18px}
.field label{font-size:14px;font-weight:600;color:var(--deep)}
.field .opt{font-weight:400;color:var(--ink)}
.field input,.field textarea{width:100%;padding:14px 16px;min-height:52px;
  border:1px solid rgba(15,37,146,.24);border-radius:var(--r-btn);background:var(--white);
  font-family:var(--font);font-size:16px;line-height:1.6;color:var(--ink);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(38,54,128,.5)}
.field input:hover,.field textarea:hover{border-color:rgba(15,37,146,.42)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--elec);
  box-shadow:0 0 0 3px rgba(0,73,241,.14)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#B4232E;
  box-shadow:0 0 0 3px rgba(180,35,46,.12)}
.field__err{display:none;font-size:14px;font-weight:500;color:#B4232E}
.field input:user-invalid ~ .field__err,
.field textarea:user-invalid ~ .field__err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__rgpd{margin-top:6px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.65;color:var(--ink)}
.form__rgpd a{color:var(--elec);font-weight:600;text-underline-offset:3px;
  display:inline-block}
.form__submit{margin-top:22px}
.form__submit .btn{min-width:230px}
.form__status{display:none;margin-top:20px;padding:18px 20px;border-radius:var(--r-card);
  font-size:16px;line-height:1.6}
.form__status.is-on{display:block}
.form__status--ok{background:rgba(0,73,241,.07);border-left:3px solid var(--elec);color:var(--deep)}
.form__status--ko{background:rgba(180,35,46,.07);border-left:3px solid #B4232E;color:#7E1720}

/* ------------------------------------------------------------ Pages légales */
.prose{max-width:74ch}
.prose h2{margin-top:clamp(38px,3.4vw,52px);font-size:clamp(21px,2vw,27px);line-height:1.24;
  font-weight:700;letter-spacing:-.015em;color:var(--deep)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:28px;font-size:clamp(17px,1.4vw,19px);line-height:1.3;font-weight:600;
  color:var(--deep)}
.prose p{margin-top:16px;font-size:16.5px;line-height:1.78;color:var(--ink)}
.prose ul{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.prose ul li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.72;color:var(--ink)}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;
  background:var(--elec-2)}
.prose dl{margin:16px 0 0;display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr);
  column-gap:28px;row-gap:0}
.prose dt{padding-block:11px;border-top:1px solid var(--line);font-size:16px;font-weight:600;
  color:var(--deep)}
.prose dd{margin:0;padding-block:11px;border-top:1px solid var(--line);font-size:16px;
  color:var(--ink);overflow-wrap:anywhere}
.prose a{color:var(--elec);font-weight:600;text-underline-offset:3px}
/* Zone de contact agrandie sur les liens en plein texte, sans décaler la ligne. */
.prose a,.form__rgpd a{padding-block:6px;margin-block:-6px}
.maj{display:inline-block;margin-top:14px;font-size:14.5px;color:var(--ink)}

/* Marqueur « à confirmer avant publication » — doit rester visible et gênant.
   Chaque occurrence est listée dans le compte rendu de livraison.
   À SUPPRIMER une fois les informations validées. */
.avf{display:inline-block;padding:2px 9px;border-radius:4px;background:#FFF3CD;
  border:1px solid #E0A800;color:#7A5B00;font-size:.92em;font-weight:600}
.avf::before{content:"⚠ à confirmer — ";font-weight:700}
.avis{margin-bottom:34px;padding:18px 22px;border-radius:var(--r-card);
  background:#FFF3CD;border-left:3px solid #E0A800;color:#7A5B00;
  font-size:15.5px;line-height:1.65}
.avis strong{color:#5C4400}

/* ------------------------------------------------------------------- 404 */
.e404{position:relative;overflow:hidden;color:var(--on-dark);
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--nav-h);padding-block:clamp(60px,8vw,110px);
  background:
    radial-gradient(72% 62% at 78% 6%,rgba(49,100,243,.36) 0%,rgba(49,100,243,0) 62%),
    linear-gradient(158deg,#12299C 0%,var(--deep) 30%,var(--deep-mid) 68%,var(--night) 100%)}
.e404__k{top:50%;right:-4%;transform:translateY(-50%);width:min(52%,620px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 32%,#000 100%)}
.e404__code{font-size:14px;font-weight:600;color:var(--sky);letter-spacing:.08em}
.e404 h1{margin-top:20px;font-size:clamp(30px,4.4vw,54px);line-height:1.08;font-weight:700;
  letter-spacing:-.026em;color:var(--white);max-width:17ch;text-wrap:balance}
.e404__text{margin-top:24px;font-size:17.5px;line-height:1.72;color:rgba(245,252,255,.9);
  max-width:56ch}
.e404__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.e404__links{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:42px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16)}
.e404__links a{padding:8px 0;font-size:15px;font-weight:600;color:rgba(245,252,255,.86);
  text-decoration:none;transition:color .18s var(--ease)}
.e404__links a:hover{color:var(--white)}

/* --------------------------------- Bande de liaison entre pages — V11.4
   Renvoi compact d'une page vers une autre, sans mobiliser une section pleine
   hauteur pour une seule phrase. Utilisée sur /expertises (vers les secteurs
   présentés sur l'accueil) et sur /apropos (vers /notre-modele). */
/* V11.5 — lien LinkedIn secondaire (page Le cabinet).
   Lien texte souligné, jamais un bouton : il ne doit pas concurrencer les deux
   appels à l'action de fin de page. Reprend le traitement des liens de contact
   du pied de page, déjà employé sur fond sombre. */
.suivre{margin-top:clamp(24px,2.6vw,36px)}
.lien-li{display:inline-flex;align-items:center;gap:10px;padding-bottom:3px;
  font-size:16px;font-weight:600;color:var(--white);text-decoration:none;
  border-bottom:1px solid rgba(157,184,255,.5);
  transition:color .18s var(--ease),border-color .18s var(--ease)}
.lien-li:hover{color:var(--sky);border-color:var(--sky)}
.lien-li .ico-li{flex:none}

.liaison{position:relative;padding-block:clamp(34px,3.4vw,52px);background:var(--paper);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.liaison__inner{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:18px 40px}
.liaison p{font-size:17px;line-height:1.72;color:var(--ink);max-width:64ch}
.liaison .btn{flex:none}

/* ---------------------------- Familles de compétences — /expertises V11.4
   Intitulé discret suivi d'une liste à filets .rows déjà utilisée ailleurs :
   même densité que le reste du site, aucun encart supplémentaire. */
.famille + .famille{margin-top:clamp(30px,3vw,44px)}
.famille__titre{padding-top:16px;border-top:2px solid var(--elec);
  font-size:clamp(16px,1.3vw,18px);line-height:1.32;font-weight:600;
  letter-spacing:-.008em;color:var(--deep)}

/* -------------------------------------------------------------- Responsive */
@media (max-width:1180px){
  .split{grid-template-columns:minmax(0,1fr);gap:28px}
  .profil{grid-template-columns:minmax(0,1fr);gap:26px}
  .form-grid{grid-template-columns:minmax(0,1fr);gap:38px}
  .phero__k{width:56%;right:-2%}
}
@media (max-width:900px){
  .points,.points--3{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .convictions{grid-template-columns:minmax(0,1fr);row-gap:26px}
  .rows li{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (max-width:640px){
  .phero__k{width:100%;right:-24%}
  .phero__k .k-line{opacity:.16}
  .phero h1{font-size:clamp(28px,7.8vw,38px);max-width:none}
  .phero__text{margin-top:20px;font-size:16.5px;line-height:1.62;max-width:none}
  .phero__cta{gap:10px;margin-top:28px}
  .phero__cta .btn{width:100%}
  .sect__lead{margin-top:14px;font-size:16.5px;line-height:1.62;max-width:none}
  .split__body p,.profil__body p{font-size:16.5px;line-height:1.62}
  .point p,.conviction p{max-width:none}
  .field-row{grid-template-columns:minmax(0,1fr);gap:0}
  .field--half{margin-bottom:18px}
  .form__profil label{flex:1;justify-content:center;padding:12px 16px}
  .form__submit .btn{width:100%}
  .prose dl{grid-template-columns:minmax(0,1fr);gap:0}
  .prose dt{padding-bottom:0;border-top:1px solid var(--line)}
  .prose dd{padding-top:2px;border-top:0}
  .prose p,.prose ul li{font-size:16px;line-height:1.68}
  .famille__titre{font-size:16px;padding-top:14px}
  .liaison p{font-size:16.5px;line-height:1.62}
  .liaison .btn{flex:auto;width:100%}
  .e404__k{width:104%;right:-26%}
  .e404 h1{font-size:clamp(28px,8.4vw,38px);max-width:none}
  .e404__text{font-size:16.5px;line-height:1.62}
  .e404__cta .btn{width:100%}
  .e404__links{gap:4px 24px}
}
