
/* ======================= Bouton WhatsApp  (.kwa) ======================= */
/* ---------- Conteneur ----------
   z-index volontairement SOUS les barres collantes du site. */
.kwa{
  position:fixed; z-index:9990;
  right:16px; bottom:16px;
  display:flex; align-items:flex-end; gap:6px;
  /* Les deux actions s'empilent : appel au-dessus, WhatsApp en bas. */
  flex-direction:row;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  transition:bottom .26s cubic-bezier(.22,1,.36,1),
             opacity .22s ease,
             transform .26s cubic-bezier(.22,1,.36,1);
  /* Etat de depart : absente. Le script la fait entrer. */
  opacity:0; transform:translateY(14px); pointer-events:none;
}
.kwa.kwa-on{opacity:1; transform:translateY(0); pointer-events:auto;}
/* Effacee : uniquement quand le clavier est ouvert (saisie d'un
   champ de formulaire). Plus pendant le defilement — voir le JS. */
.kwa.kwa-mute{opacity:0; transform:translateY(14px); pointer-events:none;}

/* Sans cette ligne, les bordures de 1 px s'ajoutent aux dimensions :
   le « cercle » mesurait 54 px de large pour 52 de haut. */
.kwa, .kwa *{box-sizing:border-box;}

/* ---------- Bouton principal ---------- */
.kwa-btn{
  display:inline-flex; align-items:center; gap:10px;
  height:52px; padding:0 20px 0 16px;
  border-radius:26px;
  background:#3A4E3A; color:#fff !important;
  text-decoration:none !important;
  font-size:.95rem; font-weight:600; line-height:1;
  white-space:nowrap;
  border:1px solid #3A4E3A;
  box-shadow:0 6px 22px rgba(34,33,30,.22);
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, padding .24s cubic-bezier(.22,1,.36,1);
}
.kwa-btn:hover,.kwa-btn:focus-visible{background:#2C3C2C; color:#fff !important;}
.kwa-btn:focus-visible{outline:2px solid #C89B7B; outline-offset:3px;}
.kwa-btn svg{width:22px; height:22px; flex-shrink:0; fill:currentColor;}
.kwa-lbl{overflow:hidden; max-width:220px; transition:max-width .24s cubic-bezier(.22,1,.36,1), opacity .18s ease;}

/* ---------- Etat replie : le defaut sur mobile ----------
   Un cercle de 52 px au lieu d'une pastille de 245 px, soit cinq fois
   moins de surface couverte. Le libelle n'est montre que 3,2 s a la
   premiere apparition, le temps que le bouton soit identifie, puis il
   se retire. On reste aussi replie si un lien se trouve dessous. */
.kwa.kwa-mini .kwa-btn{
  padding:0; width:52px; height:52px;
  border-radius:50%;
  justify-content:center;
  /* gap:0 est indispensable : sinon l'espace de 10 px reserve au
     libelle subsiste et decale l'icone vers la gauche du cercle. */
  gap:0;
}
.kwa.kwa-mini .kwa-lbl{display:none;}

/* ---------- Pile des actions ---------- */
.kwa-pile{display:flex; flex-direction:column; align-items:flex-end; gap:10px;}

/* ---------- Bouton Appeler ----------
   Meme gabarit que le bouton WhatsApp, couleur secondaire de la charte
   pour qu'on distingue les deux d'un coup d'oeil. */
.kwa-tel{
  display:none;                       /* active par KWA_TEL */
  align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:#8C5A4F; color:#fff !important;
  text-decoration:none !important;
  border:1px solid #8C5A4F;
  box-shadow:0 6px 22px rgba(34,33,30,.22);
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease;
}
.kwa.kwa-tel-on .kwa-tel{display:inline-flex;}
/* Un numero de telephone est deja propose ailleurs a l'ecran (barre
   collante d'accueil, bandeau du theme) : on retire notre bouton
   Appeler plutot que d'afficher deux fois la meme action a 60 px
   d'ecart. Le widget passe de 114 px de haut a 52. */
.kwa.kwa-tel-ailleurs .kwa-tel{display:none;}
.kwa-tel:hover,.kwa-tel:focus-visible{background:#75463d; color:#fff !important;}
.kwa-tel:focus-visible{outline:2px solid #C89B7B; outline-offset:3px;}
.kwa-tel svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;}

/* ---------- Croix de fermeture ---------- */
.kwa-x{
  width:26px; height:26px; flex-shrink:0;
  border-radius:50%; border:1px solid rgba(34,33,30,.16);
  background:#fff; color:#5A544F;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
  box-shadow:0 2px 8px rgba(34,33,30,.14);
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.kwa-x:hover,.kwa-x:focus-visible{color:#8C5A4F; border-color:#8C5A4F; transform:scale(1.08);}
.kwa-x:focus-visible{outline:2px solid #C89B7B; outline-offset:2px;}
.kwa-x svg{width:11px; height:11px; stroke:currentColor; stroke-width:2.4; fill:none;}

/* ---------- Grand ecran : onglet contre le bord droit ----------
   A mi-hauteur, donc jamais dans la zone des barres du bas,
   et dans la marge laissee par le contenu (max 1240 px). */
@media (min-width:1100px){
  /* Le glissement d'entree se fait sur « right », pas sur transform :
     transform sert deja au centrage vertical (translateY(-50%)), et les
     deux se marchaient dessus — l'onglet restait decale de 10 px et se
     retrouvait rogne par le bord droit de l'ecran. */
  .kwa{
    right:-12px; bottom:auto; top:50%;
    transform:translateY(-50%);
    align-items:center; gap:0;
    transition:right .26s cubic-bezier(.22,1,.36,1), opacity .22s ease;
  }
  .kwa.kwa-on{right:0; transform:translateY(-50%);}
  .kwa.kwa-mute{right:-12px; transform:translateY(-50%);}
  .kwa-btn{
    height:auto; padding:16px 12px; border-radius:6px 0 0 6px;
    flex-direction:column; gap:9px;
    box-shadow:-4px 4px 20px rgba(34,33,30,.18);
  }
  /* Le libelle passe a la verticale : l'onglet ne fait que 46 px de large. */
  .kwa-lbl{
    writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg);
    font-size:.8rem; letter-spacing:.06em; max-width:none;
  }
  .kwa-pile{gap:6px; align-items:stretch;}
  .kwa-tel{width:auto; height:auto; padding:14px 12px; border-radius:6px 0 0 6px;}
  .kwa.kwa-mini .kwa-btn{padding:16px 12px; width:auto;}
  .kwa.kwa-mini .kwa-lbl{max-width:none; opacity:1;}
  /* La croix se place au-dessus de l'onglet. */
  .kwa-x{position:absolute; top:-11px; right:9px;}
}

/* ---------- Ecrans tres etroits ---------- */
@media (max-width:400px){
  .kwa{right:12px;}
  .kwa-btn{height:48px; font-size:.9rem;}
}

@media (prefers-reduced-motion:reduce){
  .kwa,.kwa-btn,.kwa-lbl,.kwa-x{transition:none !important;}
}

/* ---------- Neutralisation de l'ancien bouton ----------
   Supprimez ces deux lignes si vous avez desinstalle l'ancien
   widget par ailleurs (plugin ou code). */
.koad-whatsapp-float{display:none !important;}
body.kbar-visible .koad-whatsapp-float{display:none !important;}

/* ======================= Encart d’article  (.kpa) ======================= */
/* ---------- Bloc article. Prefixe .kpa ---------- */
.kpa.kpa{
  --p:#3A4E3A; --pd:#2C3C2C; --s:#8C5A4F; --cu:#C89B7B; --cui:#7E4C2B;
  --ink:#22211E; --sand:#F4F1EA; --bd:#EAE6DF; --tx:#2C2825; --tl:#5A544F;
  --gr:#5A544F; --w:#fff; --e:cubic-bezier(.16,1,.3,1);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--sand); border:1px solid var(--bd); border-left:3px solid var(--cu);
  border-radius:2px; padding:26px 28px; margin:38px 0; color:var(--tx);
  font-size:16px; line-height:1.65; box-sizing:border-box;
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--e),transform .5s var(--e);
}
.kpa.kpa.kpa-on{opacity:1; transform:none;}
.kpa.kpa *{box-sizing:border-box;}
.kpa .kpa-eb{display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--cui); margin:0 0 9px;}
.kpa.kpa h3{font-family:'Playfair Display',Georgia,serif; font-weight:600; color:var(--ink);
  font-size:23px; line-height:1.25; margin:0 0 8px;}
.kpa.kpa>p{margin:0 0 18px; color:var(--tl); font-size:15.5px; max-width:56ch;}
.kpa .kpa-f{display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; align-items:end;}
.kpa .kpa-ch{min-width:0;}
.kpa .kpa-ch label{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--gr); margin:0 0 5px;}
.kpa .kpa-ch input{width:100%; font-family:inherit; font-size:15px; color:var(--tx);
  background:var(--w); border:1px solid var(--bd); border-radius:2px; padding:11px 12px;
  transition:border-color .25s var(--e);}
.kpa .kpa-ch input:focus{outline:none; border-color:var(--cu);}
.kpa .kpa-b{font-family:inherit; font-size:14px; font-weight:600; color:var(--w);
  background:var(--p); border:1px solid var(--p); border-radius:2px; padding:12px 22px;
  cursor:pointer; white-space:nowrap; transition:background .25s var(--e);}
.kpa .kpa-b:hover{background:var(--pd);}
.kpa .kpa-b:disabled{opacity:.6; cursor:default;}
.kpa .kpa-rgpd{display:flex; gap:9px; align-items:flex-start; margin:14px 0 0;
  font-size:13px; color:var(--gr); line-height:1.5;}
.kpa .kpa-rgpd input{margin:3px 0 0; flex-shrink:0; accent-color:var(--p);}
.kpa .kpa-rgpd a{color:var(--cui); text-decoration:underline;}
.kpa .kpa-msg{margin:12px 0 0; font-size:14.5px; line-height:1.55; display:none;}
.kpa .kpa-msg.on{display:block;}
.kpa .kpa-msg.ko{color:#7A2E22;}
.kpa .kpa-msg.ok{color:#2F4030; font-weight:600;}
.kpa .kpa-msg a{color:inherit; text-decoration:underline;}
/* Parcours investisseur : quatre champs, donc deux rangees. Cinq colonnes
   ne tiendraient pas dans la colonne de texte d'un article. */
.kpa .kpa-f.kpa-inv{grid-template-columns:1fr 1fr;}
.kpa .kpa-f.kpa-inv .kpa-b{grid-column:1 / -1; width:100%;}
.kpa .kpa-ch select{width:100%; font-family:inherit; font-size:15px; color:var(--tx);
  background:var(--w); border:1px solid var(--bd); border-radius:2px; padding:11px 12px;
  transition:border-color .25s var(--e); -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gr) 50%),
    linear-gradient(135deg,var(--gr) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px;}
.kpa .kpa-ch select:focus{outline:none; border-color:var(--cu);}
/* Mode repli : aucun formulaire dans la page */
.kpa .kpa-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.kpa .kpa-cta .kpa-b{text-decoration:none; display:inline-flex; align-items:center;}
.kpa .kpa-tel{font-size:14.5px; color:var(--tl);}
.kpa .kpa-tel a{color:var(--cui); font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(150,96,59,.35);}
.kpa .kpa-x{position:absolute; top:10px; right:12px; background:none; border:0; cursor:pointer;
  font-size:20px; line-height:1; color:var(--gr); padding:4px 8px; font-family:inherit;}
.kpa .kpa-x:hover{color:var(--ink);}
.kpa.kpa{position:relative;}
@media (max-width:760px){
.kpa.kpa{padding:22px 20px; margin:30px 0;}
.kpa .kpa-f{grid-template-columns:1fr 1fr; }
.kpa .kpa-b{grid-column:1 / -1; width:100%;}
}
@media (max-width:460px){
  /* .kpa-f.kpa-inv vaut 0-2-0 en specificite et battait « .kpa-f » seul :
     la variante investisseur restait sur deux colonnes de 152 px, ou le
     libelle « Domaine ou lieu de reception » ne tient pas. Releve au test. */
.kpa .kpa-f,.kpa .kpa-f.kpa-inv{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
.kpa.kpa{transition:none; opacity:1; transform:none;}
}
@media print{ .kpa{display:none;} }

/* ======================= Panneau de sortie  (.kps2) ======================= */
/* ---------- Panneau de sortie. Prefixe .kps2 ---------- */
.kps2-fond{
  position:fixed; inset:0; z-index:99998; background:rgba(34,33,30,.62);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden;
  /* visibility bascule a la FIN du fondu a la fermeture, mais IMMEDIATEMENT
     a l'ouverture : sans ce decoupage, focus() est appele sur un element
     encore invisible et ne fait rien — le lecteur d'ecran reste alors dans
     la page du dessous. Constate au test, puis corrige. */
  transition:opacity .35s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s;
}
.kps2-fond.on{
  opacity:1; visibility:visible;
  transition:opacity .35s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.kps2{
  --p:#3A4E3A; --pd:#2C3C2C; --cu:#C89B7B; --cui:#7E4C2B; --ink:#22211E;
  --bg:#FDFBF7; --sand:#F4F1EA; --bd:#EAE6DF; --tx:#2C2825; --tl:#5A544F; --gr:#5A544F; --w:#fff;
  --e:cubic-bezier(.16,1,.3,1);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--tx); border-radius:2px; width:100%; max-width:520px;
  padding:38px 40px 32px; position:relative; box-sizing:border-box; font-size:16px;
  line-height:1.62; box-shadow:0 30px 80px rgba(34,33,30,.30);
  transform:translateY(14px) scale(.985); transition:transform .4s var(--e);
  max-height:calc(100vh - 48px); overflow-y:auto;
}
.kps2-fond.on .kps2{transform:none;}
.kps2 *{box-sizing:border-box;}
.kps2-eb{display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--cui); margin:0 0 10px;}
.kps2 h2{font-family:'Playfair Display',Georgia,serif; font-weight:600; color:var(--ink);
  font-size:27px; line-height:1.2; margin:0 0 10px;}
.kps2>p{margin:0 0 20px; color:var(--tl); font-size:15.5px;}
.kps2-x{position:absolute; top:12px; right:14px; background:none; border:0; cursor:pointer;
  font-size:24px; line-height:1; color:var(--gr); padding:4px 9px; font-family:inherit;
  border-radius:2px;}
.kps2-x:hover{color:var(--ink); background:var(--sand);}
.kps2-ch{margin:0 0 12px;}
.kps2-ch label{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--gr); margin:0 0 5px;}
.kps2-ch input{width:100%; font-family:inherit; font-size:15px; color:var(--tx);
  background:var(--w); border:1px solid var(--bd); border-radius:2px; padding:12px 13px;
  transition:border-color .25s var(--e);}
.kps2-ch input:focus{outline:none; border-color:var(--cu);}
.kps2-duo{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.kps2-b{width:100%; font-family:inherit; font-size:15px; font-weight:600; color:var(--w);
  background:var(--p); border:1px solid var(--p); border-radius:2px; padding:14px 22px;
  cursor:pointer; margin-top:6px; transition:background .25s var(--e);
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
.kps2-b:hover{background:var(--pd); color:var(--w);}
.kps2-b:disabled{opacity:.6; cursor:default;}
.kps2-rgpd{display:flex; gap:9px; align-items:flex-start; margin:14px 0 0;
  font-size:13px; color:var(--gr); line-height:1.5;}
.kps2-rgpd input{margin:3px 0 0; flex-shrink:0; accent-color:var(--p);}
.kps2-rgpd a{color:var(--cui); text-decoration:underline;}
.kps2-msg{margin:12px 0 0; font-size:14.5px; line-height:1.55; display:none;}
.kps2-msg.on{display:block;}
.kps2-msg.ko{color:#7A2E22;}
.kps2-msg.ok{color:#2F4030; font-weight:600;}
.kps2-msg a{color:inherit; text-decoration:underline;}
.kps2-ch select{width:100%; font-family:inherit; font-size:15px; color:var(--tx);
  background:var(--w); border:1px solid var(--bd); border-radius:2px; padding:12px 13px;
  -webkit-appearance:none; appearance:none; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gr) 50%),
    linear-gradient(135deg,var(--gr) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  transition:border-color .25s var(--e);}
.kps2-ch select:focus{outline:none; border-color:var(--cu);}
.kps2-tel{margin:16px 0 0; font-size:14px; color:var(--gr); text-align:center;}
.kps2-tel a{color:var(--cui); font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(150,96,59,.35);}
.kps2 :focus-visible{outline:2px solid var(--cui); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  .kps2-fond,.kps2{transition:none;}
}
@media print{ .kps2-fond{display:none!important;} }

/* ======================= Bandeau de reprise  (.kpr) ======================= */
/* ---------- Bandeau de reprise. Prefixe .kpr ---------- */
.kpr{
  --p:#3A4E3A; --pd:#2C3C2C; --cu:#C89B7B; --cui:#7E4C2B; --ink:#22211E;
  --sand:#F4F1EA; --bd:#EAE6DF; --tx:#2C2825; --tl:#5A544F; --gr:#5A544F; --w:#fff;
  --e:cubic-bezier(.16,1,.3,1);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--sand); border:1px solid var(--bd); border-left:3px solid var(--p);
  border-radius:2px; padding:18px 22px; margin:0 0 22px; color:var(--tx);
  font-size:15px; line-height:1.6; box-sizing:border-box;
  display:flex; gap:16px 20px; align-items:center; flex-wrap:wrap;
}
.kpr *{box-sizing:border-box;}
.kpr-t{flex:1 1 260px; min-width:0;}
.kpr-t b{display:block; color:var(--ink); font-weight:600; margin-bottom:2px;}
.kpr-t span{color:var(--tl); font-size:14px;}
.kpr-a{display:flex; gap:10px; flex-wrap:wrap;}
.kpr-b{font-family:inherit; font-size:14px; font-weight:600; border-radius:2px;
  padding:11px 20px; cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition:background .25s var(--e),border-color .25s var(--e);}
.kpr-b1{background:var(--p); color:var(--w); border-color:var(--p);}
.kpr-b1:hover{background:var(--pd);}
.kpr-b2{background:transparent; color:var(--tl); border-color:var(--bd);}
.kpr-b2:hover{border-color:var(--cu); color:var(--ink);}
.kpr :focus-visible{outline:2px solid var(--cui); outline-offset:2px;}
@media (max-width:560px){
  .kpr{padding:16px 18px;}
  .kpr-a{width:100%;}
  .kpr-b{flex:1 1 auto; text-align:center;}
}
@media print{ .kpr{display:none;} }
