/* Composer mon projet : panneau, compteur et barre du téléphone (projet.js).
   Couleurs : uniquement les jetons de bleu-tokens.css et versions.css.
   Version A et anciennes pages : fond blanc. Version B (body.vb) : nuit bleue. */

/* ---------- jetons du module, réglés une fois par version ---------- */
.projet-panneau,
.projet-barre {
  --projet-fond: var(--color-blanc);
  --projet-fond-2: var(--color-blanc-casse);
  --projet-texte: var(--color-encre-v);
  --projet-texte-2: var(--color-texte-v2);
  --projet-filet: var(--color-filet-v);
  --projet-filet-fort: var(--color-filet-v-fort);
  --projet-accent: var(--color-bleu);
  --projet-sur-accent: var(--color-blanc);
  --projet-remplissage: var(--color-encre-v);
  --projet-sur-remplissage: var(--color-blanc);
  --projet-verre: var(--color-verre-blanc);
  --projet-voile: var(--color-voile-contact);
  --projet-ombre: var(--color-ombre-menu);
}
.vb .projet-panneau,
.vb .projet-barre {
  --projet-fond: var(--color-nuit-bleue-2);
  --projet-fond-2: var(--color-nuit-bleue);
  --projet-texte: var(--color-blanc);
  --projet-texte-2: var(--color-texte-nuit-v2);
  --projet-filet: var(--color-filet-nuit-v);
  --projet-filet-fort: var(--color-filet-nuit-v-fort);
  --projet-accent: var(--color-bleu-sur-nuit);
  --projet-remplissage: var(--color-blanc);
  --projet-sur-remplissage: var(--color-bleu-profond);
  --projet-verre: var(--color-verre-nuit);
  color-scheme: dark;
}

/* ---------- compteur posé dans un bouton ---------- */
[data-projet-compteur] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; margin-left: 8px; padding: 0 6px; border-radius: 999px;
  font: 600 13px/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0;
  color: var(--color-blanc); background: var(--color-bleu);
}
[data-projet-compteur][hidden], .projet-sous[hidden] { display: none; }
.vb [data-projet-compteur] { color: var(--color-nuit-bleue); background: var(--color-bleu-sur-nuit); }
.va-pilule:not(.va-pilule--contour) [data-projet-compteur],
.projet-barre__ouvrir [data-projet-compteur] { color: var(--color-bleu); background: var(--color-blanc); }

/* ---------- le panneau : un voile plein écran qui porte la feuille ---------- */
html.projet-ouvert { overflow: hidden; }

.projet-panneau {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  color: var(--projet-texte); background: var(--projet-voile);
  font-family: var(--font-body);
}
.projet-panneau::backdrop { background: transparent; }
.projet-panneau--repli { z-index: 1000; }
.projet-panneau--repli:not([open]) { display: none; }
.projet-panneau--repli[open] { display: block; }

.projet-feuille {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  width: 440px; max-width: 100%;
  color: var(--projet-texte); background: var(--projet-fond);
  box-shadow: 0 0 48px var(--projet-ombre);
}

.projet-entete {
  flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 24px 24px 20px; border-bottom: 1px solid var(--projet-filet);
}
.projet-titre {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-stretch: 112.5%;
  font-size: 28px; line-height: 1.05; letter-spacing: -0.02em;
}
.projet-phrase { margin: 8px 0 0; font-size: 15px; line-height: 1.4; color: var(--projet-texte-2); }
.projet-fermer {
  flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  font: 500 15px/1 var(--font-body); color: var(--projet-texte); background: transparent;
  box-shadow: inset 0 0 0 1px var(--projet-filet-fort); cursor: pointer;
  transition: background-color 200ms var(--ease-cub);
}
.projet-fermer:hover { background: var(--projet-fond-2); }

.projet-corps {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px;
}
.projet-attente, .projet-erreur { margin: 24px 0 0; font-size: 16px; line-height: 1.5; }
.projet-erreur a { color: var(--projet-accent); font-weight: 600; }

/* ---------- lignes et options ---------- */
.projet-form { margin: 0; }
.projet-ligne { padding: 14px 0; border-bottom: 1px solid var(--projet-filet); }
.projet-sous, .projet-groupe { min-width: 0; margin: 0; padding: 0; border: 0; }
.projet-sous { margin: 6px 0 4px 32px; padding-left: 14px; border-left: 1px solid var(--projet-filet-fort); }
.projet-sous__titre, .projet-groupe__titre { padding: 0; }
.projet-sous__titre {
  margin: 4px 0 2px; font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--projet-texte-2);
}
.projet-groupe__titre { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.projet-groupe > .projet-option__note { margin: 2px 0 6px; }

.projet-option {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  min-height: 44px; padding: 4px 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.projet-option__case {
  width: 20px; height: 20px; margin: 0; cursor: pointer; accent-color: var(--projet-accent);
}
.projet-option__case:focus-visible { outline: 2px solid var(--projet-accent); outline-offset: 3px; }
.projet-option__nom { font-size: 17px; font-weight: 600; line-height: 1.3; }
.projet-sous .projet-option__nom { font-size: 16px; font-weight: 500; }
.projet-option__note { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; line-height: 1.35; color: var(--projet-texte-2); }
.projet-option__prix {
  max-width: 11em; font-size: 15px; line-height: 1.3; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--projet-texte-2);
}

/* ---------- pack Instagram : deux compteurs ---------- */
.projet-pas {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 4px 0;
}
.projet-pas__nom { font-size: 16px; font-weight: 500; line-height: 1.3; }
.projet-pas__reglage { display: flex; align-items: center; gap: 4px; }
.projet-pas__bouton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px;
  font: 500 22px/1 var(--font-body); color: var(--projet-texte); background: transparent;
  box-shadow: inset 0 0 0 1px var(--projet-filet-fort); cursor: pointer;
  transition: background-color 200ms var(--ease-cub), opacity 200ms var(--ease-cub);
}
.projet-pas__bouton:hover { background: var(--projet-fond-2); }
.projet-pas__bouton:focus-visible { outline: 2px solid var(--projet-accent); outline-offset: 2px; }
.projet-pas__bouton[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; background: transparent; }
.projet-pas__valeur {
  min-width: 2.2em; font-size: 18px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums;
}

/* ---------- totaux, collés au bas du défilement ---------- */
.projet-totaux {
  position: -webkit-sticky; position: sticky; bottom: 0; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 20px -24px 0; padding: 16px 24px;
  background: var(--projet-fond-2); border-top: 1px solid var(--projet-filet);
}
.projet-total { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.projet-total__nom {
  font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--projet-texte-2);
}
.projet-total__valeur {
  font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.1;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}

/* ---------- message et envoi ---------- */
.projet-message { margin-top: 20px; }
.projet-message__titre {
  margin: 0 0 8px; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--projet-texte-2);
}
.projet-message__texte {
  margin: 0; padding: 14px 16px; border-radius: 12px;
  font-size: 15px; line-height: 1.5; color: var(--projet-texte);
  background: var(--projet-fond-2); box-shadow: inset 0 0 0 1px var(--projet-filet);
}

.projet-envois { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

/* reprend la pilule de la version A : 52 px, rayon plein, remplissage au survol */
.projet-bouton {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  font: 500 17px/1 var(--font-body); white-space: nowrap; text-decoration: none;
  color: var(--color-blanc); background: var(--color-bleu); cursor: pointer;
}
.projet-bouton::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 140%; padding-top: 140%; border-radius: 50%;
  background: var(--projet-remplissage); transform: translate(-50%, 0) scale(0); transition: transform 600ms var(--ease-cub);
}
.projet-bouton:not(:disabled):hover::before,
.projet-bouton:not(:disabled):focus-visible::before { transform: translate(-50%, -60%) scale(1); }
.projet-bouton:not(:disabled):hover,
.projet-bouton:not(:disabled):focus-visible { color: var(--projet-sur-remplissage); }
.projet-bouton:not(:disabled):active { transform: scale(0.98); }
.projet-bouton:focus-visible { outline: 2px solid var(--projet-accent); outline-offset: 3px; }
.projet-bouton span { position: relative; }
.projet-bouton--contour { color: var(--projet-texte); background: transparent; box-shadow: inset 0 0 0 1px var(--projet-filet-fort); }
.projet-bouton:disabled { opacity: 0.4; cursor: not-allowed; }

.projet-vider-ligne { margin: 18px 0 0; padding-bottom: 20px; text-align: center; }
.projet-insecable { white-space: nowrap; }
.projet-vider {
  min-height: 44px; padding: 0 8px; border: 0; background: transparent; cursor: pointer;
  font: 400 15px/1 var(--font-body); color: var(--projet-texte-2);
  text-decoration: underline; text-decoration-color: var(--projet-filet-fort); text-underline-offset: 4px;
}
.projet-vider:hover { color: var(--projet-texte); text-decoration-color: currentColor; }

/* ---------- mouvement : glisse depuis la droite, monte depuis le bas sur téléphone ---------- */
@keyframes projet-voile-entree { from { background-color: transparent; } }
@keyframes projet-voile-sortie { to { background-color: transparent; } }
@keyframes projet-depuis-droite { from { transform: translateX(100%); } }
@keyframes projet-vers-droite { to { transform: translateX(100%); } }
@keyframes projet-depuis-bas { from { transform: translateY(100%); } }
@keyframes projet-vers-bas { to { transform: translateY(100%); } }

.projet-panneau[open] { animation: projet-voile-entree 400ms var(--ease-sortie); }
.projet-panneau[open] .projet-feuille { animation: projet-depuis-droite 520ms var(--ease-sortie); }
.projet-panneau.est-sortant { animation: projet-voile-sortie 280ms var(--ease-cub) forwards; }
.projet-panneau.est-sortant .projet-feuille { animation: projet-vers-droite 280ms var(--ease-cub) forwards; }

/* ---------- téléphone : feuille du bas et barre fixe ---------- */
.projet-barre { display: none; }

@media (max-width: 767px) {
  .projet-feuille {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-height: 90%;
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .projet-entete { padding: 20px 20px 16px; }
  .projet-titre { font-size: 24px; }
  .projet-corps { padding: 0 20px; }
  .projet-pied { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .projet-sous { margin-left: 10px; }
  .projet-panneau[open] .projet-feuille { animation-name: projet-depuis-bas; }
  .projet-panneau.est-sortant .projet-feuille { animation-name: projet-vers-bas; }

  .projet-barre {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--projet-verre); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--projet-filet);
  }
  .projet-barre__whatsapp,
  .projet-barre__ouvrir {
    display: inline-flex; align-items: center; justify-content: center; min-width: 0;
    height: 48px; padding: 0 10px; border: 0; border-radius: 999px;
    font: 500 14px/1.1 var(--font-body); text-align: center; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .projet-barre__whatsapp { flex: 0 1 auto; color: var(--projet-texte); background: transparent; box-shadow: inset 0 0 0 1px var(--projet-filet-fort); }
  .projet-barre__ouvrir { flex: 1 1 auto; color: var(--color-blanc); background: var(--color-bleu); }
  .projet-barre__ouvrir:active, .projet-barre__whatsapp:active { transform: scale(0.98); }
  .projet-barre__whatsapp:focus-visible, .projet-barre__ouvrir:focus-visible { outline: 2px solid var(--projet-accent); outline-offset: 2px; }
  .projet-barre [data-projet-compteur] { margin-left: 6px; }

  /* la fin de la page reste lisible au-dessus de la barre */
  html body.projet-a-barre .vp-pied { padding-bottom: calc(28px + 72px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .projet-panneau[open],
  .projet-panneau[open] .projet-feuille,
  .projet-panneau.est-sortant,
  .projet-panneau.est-sortant .projet-feuille { animation: none; }
  .projet-bouton::before { transition: none; }
}

/* ================= intégration dans les pages (en-têtes, cartes) ================= */
/* en-tête des pages A et de la version A : la pilule reprend celle de l'en-tête, en contour */
.va-entete__projet { height: 48px; padding: 0 20px; font-size: 16px; gap: 8px; }
.va-entete__projet [data-projet-compteur] { position: relative; }
/* version B : même allure que « Parler de mon cabinet », en contour */
.vb-entete__projet { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: transparent !important; box-shadow: inset 0 0 0 1px var(--color-filet-nuit-v-fort); }
/* anciennes pages : le bouton se range à côté de WhatsApp */
.nav__projet { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; }
/* sur téléphone, le bouton passe dans la barre du bas */
@media (max-width: 767px) {
  .va-entete__projet, .vb-entete__projet, .nav__projet { display: none !important; }
}
/* le bouton rond « + » des cartes d'offre */
.va-offre__actions, .vb-offre__actions { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; }
.h-rond--carte, .vb-plus { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: currentColor; box-shadow: inset 0 0 0 1px currentColor; opacity: 0.85; transition: background-color 300ms var(--ease-sortie), color 300ms var(--ease-sortie), opacity 300ms var(--ease-sortie); }
.h-rond--carte svg, .vb-plus svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) {
  .h-rond--carte:hover, .vb-plus:hover { opacity: 1; color: var(--color-blanc); background: var(--color-bleu); box-shadow: none; }
}

/* ---------- le pied collé en bas : totaux, prix TTC, les deux boutons d'envoi ---------- */
.projet-pied {
  position: -webkit-sticky; position: sticky; bottom: 0; z-index: 1;
  margin: 20px -24px 0; padding: 14px 24px 16px;
  background: var(--projet-fond-2); border-top: 1px solid var(--projet-filet);
}
.projet-pied .projet-totaux { position: static; margin: 0; padding: 0; background: none; border: 0; }
.projet-pied__note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--projet-texte-2); }
.projet-pied .projet-envois { flex-direction: row; gap: 8px; margin-top: 12px; }
.projet-pied .projet-bouton { flex: 1 1 0; height: 46px; padding: 0 14px; font-size: 15px; }
.projet-pied__aide { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--projet-texte-2); }
@media (max-width: 419px) {
  .projet-pied .projet-envois { flex-direction: column; }
  .projet-pied .projet-bouton { flex: none; }
}
/* écran bas (petit téléphone) : la phrase d'aide laisse la place aux options */
@media (max-width: 419px) and (max-height: 700px) { .projet-pied__aide { display: none; } }