/* Tampon-BCP.fr — habillage du site et de l'application.
 * Esprit : bandeau d'accueil coloré, typographie géométrique grasse, bouton d'action corail,
 * grands numéros d'étapes, traits de pinceau jaunes, beaucoup de blanc. */
:root {
  --marque: #023884;          /* bleu du logo */
  --vif: #1747c4;             /* bandeaux (accueil, fin de page) */
  --vif-2: #0f37a6;
  --marine: #0a1f44;          /* texte principal */
  --doux: #5e6c84;            /* texte secondaire */
  --corail: #ff5a4f;          /* boutons d'action */
  --corail-2: #f0443a;
  --jaune: #ffcd3c;           /* accents (pinceau, essai) */
  --lavande: #e9eefc;         /* fonds d'icônes */
  --gris: #f5f6f8;            /* bandes grises, champs */
  --gris-num: #eceef2;        /* grands numéros */
  --trait: #dfe1e6;
  --trait-fort: #c1c7d0;
  --blanc: #ffffff;
  --ok: #1e8a4c; --erreur: #d0342c;
  --ombre: 0 2px 4px rgba(10, 31, 68, .06), 0 16px 40px -20px rgba(10, 31, 68, .28);
  --ombre-forte: 0 24px 60px -24px rgba(10, 31, 68, .45);
  --rayon: 12px;
  --police: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Anciens noms, encore utilisés par les aperçus du tampon */
  --encre: var(--marque);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--blanc); color: var(--marine); font: 16px/1.6 var(--police); -webkit-font-smoothing: antialiased; }
a { color: var(--vif); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--vif); outline-offset: 2px; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.conteneur { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .conteneur { padding: 0 18px; } }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 15px;
  padding: 10px 18px; border-radius: 8px; border: 1.5px solid transparent; background: var(--blanc); color: var(--marine);
  cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn.corail { background: var(--corail); color: #fff; box-shadow: 0 8px 20px -10px var(--corail); }
.btn.corail:hover { background: var(--corail-2); }
.btn.contour { border-color: var(--marine); background: var(--blanc); }
.btn.contour:hover { background: var(--gris); }
.btn.grand { padding: 14px 24px; font-size: 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Menu ---------- */
.nav { position: sticky; top: 0; z-index: 30; background: var(--blanc); box-shadow: 0 1px 0 var(--trait); transition: background .25s, box-shadow .25s; }
.nav-inner { max-width: 1140px; margin: 0 auto; padding: 0 28px; height: 72px; display: flex; align-items: center; gap: 24px; }
.nav .btn, .nav-liens a, .lien-connexion { white-space: nowrap; }
@media (max-width: 1180px) { .nav-inner { gap: 14px; } .nav-liens a { padding: 8px 8px; } .nav-compte { gap: 12px; } }
.marque { white-space: nowrap; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--marque); font-weight: 700; font-size: 21px; letter-spacing: -.02em; }
.marque img { height: 44px; width: auto; display: block; }
.marque .logo-blanc { display: none; }
.nav-liens { display: flex; gap: 2px; }
.nav-liens a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--marine); font-weight: 700; font-size: 15px; padding: 8px 12px; border-radius: 8px; }
.nav-liens a:hover { background: var(--gris); }
.nav-liens a.actif { color: var(--vif); }
.nav-compte { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.lien-connexion { color: var(--marine); font-weight: 700; text-decoration: none; }
body:not(.verrouille) .nav-liens { margin-left: auto; }
body.accueil #bandeauConnexion { display: none; }
/* Accueil, haut de page : menu transparent sur le bandeau bleu. */
body.accueil-haut .nav { background: transparent; box-shadow: none; }
body.accueil-haut .nav .marque, body.accueil-haut .nav-liens a, body.accueil-haut .lien-connexion { color: #fff; }
body.accueil-haut .nav-liens a:hover { background: rgba(255, 255, 255, .12); }
body.accueil-haut .marque .logo-blanc { display: block; }
body.accueil-haut .marque .logo-couleur { display: none; }
body.accueil-haut .nav .icone-tampon { color: #fff; }
body.accueil-haut .nav .cadenas { color: #ffd0cc; }
@media (max-width: 1060px) {
  .nav-inner { height: auto; padding: 10px 18px; flex-wrap: wrap; gap: 8px 14px; }
  .nav-liens { order: 3; width: 100%; justify-content: space-between; margin-left: 0 !important; }
  .nav-liens a { padding: 6px 8px; font-size: 14px; }
  .nav-compte .btn { padding: 8px 12px; font-size: 14px; }
}

/* ---------- Vues ---------- */
.vue { display: none; }
.vue.active { display: block; animation: apparaitre .3s ease both; }
@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }
/* L'accueil remonte sous le menu transparent. */
#vue-fonctionnalites.active { margin-top: -72px; }
@media (max-width: 1060px) { #vue-fonctionnalites.active { margin-top: 0; } }

/* ---------- Accueil : bandeau ---------- */
.hero {
  background: var(--vif); color: #fff; padding: 140px 0 90px; position: relative; overflow: hidden;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(135deg, var(--vif) 0%, var(--vif-2) 100%);
  background-size: 64px 64px, 64px 64px, auto;
}
.hero-grille { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(32px, 3.8vw, 44px); margin: 0 0 22px; }
.hero-sous-titre { font-size: 19px; line-height: 1.6; margin: 0 0 32px; color: #fff; }
.hero h1 u { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: .12em; text-underline-offset: .12em; }
@media (max-width: 860px) { .hero { padding: 56px 0 64px; } .hero-grille { grid-template-columns: 1fr; } }

/* ---------- Carrousel du bandeau : 3 illustrations composées ---------- */
.hero-visuel { position: relative; padding: 12px 0 0 40px; }
.diapos { position: relative; height: 440px; }
.diapo {
  position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  opacity: 0; transform: translateX(36px); transition: opacity .6s ease, transform .6s ease; pointer-events: none;
}
.diapo.active { opacity: 1; transform: none; pointer-events: auto; }
.legende-pub { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 14px; font-weight: 700; }
.points { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.points button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .4); cursor: pointer; transition: width .3s, background .3s; }
.points button.actif { width: 28px; background: var(--jaune); }
@media (prefers-reduced-motion: reduce) { .diapo { transition: none; } }

/* 1. Tampon sur une page */
.feuille-pub {
  position: relative; width: min(100%, 400px); aspect-ratio: 210 / 240; background: var(--blanc); border-radius: 6px;
  box-shadow: var(--ombre-forte); padding: 30px 28px; display: grid; gap: 10px; align-content: start; overflow: hidden;
}
.feuille-pub > i { height: 8px; background: var(--gris-num); border-radius: 4px; }
.feuille-pub > i.court { width: 60%; }
.feuille-entete { display: grid; gap: 7px; margin-bottom: 215px; }
.feuille-entete b { width: 34%; height: 12px; background: var(--trait); border-radius: 3px; }
.feuille-entete i { width: 22%; height: 7px; background: var(--gris-num); border-radius: 3px; }
.feuille-pub .tampon-pub { position: absolute; top: 16px; right: 16px; width: 60%; transform: rotate(-8deg); }
.diapo.active .feuille-pub .tampon-pub { animation: poser .7s cubic-bezier(.2, .9, .3, 1.2) .15s both; }
@keyframes poser { from { transform: rotate(-8deg) scale(1.5); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }

/* 2. Bordereau (dossier et pièces fictifs) */
.bcp-pub {
  position: relative; width: min(100%, 420px); background: var(--blanc); color: var(--marine); border-radius: 6px;
  box-shadow: var(--ombre-forte); padding: 26px 26px 22px; font-size: 12px;
}
.bcp-docx { position: absolute; top: -14px; left: -14px; width: 42px; height: 42px; border-radius: 9px; display: grid; place-items: center; background: #2b579a; color: #fff; font-weight: 700; font-size: 20px; box-shadow: var(--ombre); }
.bcp-titre { margin: 0 0 12px; text-align: center; font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .06em; }
.bcp-affaire { margin: 0 0 6px; text-align: center; color: var(--doux); }
.bcp-affaire b { display: block; color: var(--marine); font-size: 14px; }
.bcp-avocat { margin: 0 0 12px; text-align: center; color: var(--doux); font-size: 11px; }
.bcp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bcp-table th, .bcp-table td { padding: 6px 8px; border: 1px solid var(--trait); text-align: left; position: static; }
.bcp-table tr:last-child td { border-bottom: 1px solid var(--trait); }
.bcp-table th { background: var(--lavande); color: var(--marine); font-size: 10.5px; }
.bcp-table td:first-child, .bcp-table td:last-child, .bcp-table th:first-child, .bcp-table th:last-child { text-align: center; width: 12%; }
.pastille-pub { position: absolute; right: -4px; bottom: 76px; padding: 8px 14px; border-radius: 999px; background: var(--jaune); color: var(--marine); font-weight: 700; font-size: 13px; box-shadow: var(--ombre-forte); transform: rotate(4deg); }

/* 3. Pièces renommées et classées */
.fenetre { width: min(100%, 440px); background: var(--blanc); border-radius: 10px; box-shadow: var(--ombre-forte); overflow: hidden; }
.fenetre-barre { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--gris); border-bottom: 1px solid var(--trait); }
.fenetre-barre span { width: 9px; height: 9px; border-radius: 50%; background: var(--trait-fort); }
.fenetre-barre i { margin-left: 12px; flex: 1; font-style: normal; font-size: 11px; color: var(--doux); background: var(--blanc); border-radius: 999px; padding: 3px 12px; }
.liste-pub { padding: 18px; display: grid; gap: 8px; background: #fbfbfc; }
.ligne-pub { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--marine); font-size: 13.5px; }
.ligne-pub b { color: var(--vif); min-width: 22px; }
.ligne-pub small { margin-left: auto; color: var(--doux); }
.poignee-pub { color: var(--trait-fort); }
.ligne-pub.deplacee { border-color: var(--vif); box-shadow: var(--ombre-forte); transform: translateX(14px) rotate(-1deg); }

/* Décor commun */
.badge-logo {
  position: absolute; left: 0; top: 30%; z-index: 2; width: 84px; height: 84px; border-radius: 18px; background: var(--corail);
  display: grid; place-items: center; transform: rotate(-12deg); box-shadow: 6px 6px 0 -1px var(--jaune), var(--ombre-forte);
}
.badge-logo img { height: 56px; width: auto; }
.etincelles { position: absolute; width: 38px; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.etincelles.e1 { left: 10px; top: 16%; transform: rotate(160deg); }
@media (max-width: 860px) { .hero-visuel { padding-left: 24px; } .diapos { height: 400px; } .badge-logo { width: 64px; height: 64px; } .badge-logo img { height: 42px; } }

/* ---------- Accueil : blocs ---------- */
.bloc { padding: 96px 0; }
.bloc.gris { background: var(--gris); padding: 72px 0; }
.titre-centre { text-align: center; font-size: clamp(30px, 4vw, 48px); max-width: 820px; margin: 0 auto 64px; }
.titre-centre.petit { font-size: clamp(24px, 3vw, 32px); margin-bottom: 40px; }

/* Avantages : icône ronde, titre en capitales, texte */
.avantages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 48px; }
.pastille-icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--lavande); margin-bottom: 18px; }
.pastille-icone svg { width: 22px; height: 22px; fill: none; stroke: var(--vif); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.avantage h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 14px; }
.avantage p { margin: 0; color: var(--marine); }
@media (max-width: 860px) { .avantages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .avantages { grid-template-columns: 1fr; } }

/* Comment ça marche : étapes en zigzag, grands numéros, traits de pinceau */
.etape { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.etape.inverse .etape-texte { order: 2; }
.grand-numero { display: block; font-size: 150px; font-weight: 700; line-height: .85; color: var(--gris-num); letter-spacing: -.04em; margin-bottom: 18px; }
.etape h3 { font-size: 32px; margin: 0 0 14px; }
.etape p { margin: 0 0 24px; max-width: 42ch; }
/* Captures en perspective, sans cadre : légère rotation vers le texte, ombre douce, halo de couleur
   derrière ; les documents (images déjà ombrées) se fondent dans la page par le bas. */
.illustration { position: relative; margin: 0; perspective: 1600px; }
.illustration::before {
  content: ""; position: absolute; inset: 8% 4% 4% 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--lavande), transparent); filter: blur(10px);
}
.illustration img { display: block; width: 100%; height: auto; transform: rotateY(-14deg) rotateX(6deg) rotateZ(1deg); transform-origin: 30% 50%; transition: transform .5s ease; }
.etape.inverse .illustration img { transform: rotateY(14deg) rotateX(6deg) rotateZ(-1deg); transform-origin: 70% 50%; }
.illustration:hover img { transform: none; }
.illustration.interface img { border-radius: 14px; box-shadow: 0 2px 4px rgba(10, 31, 68, .06), 0 40px 80px -30px rgba(10, 31, 68, .45); }
.illustration.document img, .illustration.fondu img {
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
/* Étape 04 : contenu du ZIP (liste du texte et fenêtre d'archive sur le bordereau) */
.f-pdf, .f-word, .f-zip {
  display: inline-grid; place-items: center; flex: none; min-width: 30px; height: 34px; padding: 0 4px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #fff; box-shadow: 0 2px 6px -2px rgba(10, 31, 68, .35);
}
.f-pdf { background: #e5252a; }
.f-word { background: #2b579a; font-size: 14px; }
.f-zip { background: var(--jaune); color: var(--marine); }
.contenu-zip { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; max-width: 46ch; }
.contenu-zip li { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; background: var(--gris); }
.contenu-zip strong { color: var(--marine); }
.pile-fichiers { display: flex; flex: none; width: 64px; }
.pile-fichiers b + b { margin-left: -16px; }
.pile-fichiers b:nth-child(1) { transform: rotate(-8deg); }
.pile-fichiers b:nth-child(2) { transform: translateY(-3px); z-index: 1; }
.pile-fichiers b:nth-child(3) { transform: rotate(8deg); z-index: 2; }
.pile-fichiers.duo b + b { margin-left: 4px; }
.pile-fichiers.duo b { transform: none; }
.note-modele { font-weight: 700; }
.note-modele u, .etape p u { text-decoration-color: var(--jaune); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.zip-compo { padding-bottom: 18%; }
.zip-compo img { width: 94%; }
.archive {
  position: absolute; right: -2%; bottom: 0; width: 60%; background: var(--blanc); border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(10, 31, 68, .08), 0 30px 60px -20px rgba(10, 31, 68, .45); transform: rotate(2deg);
}
.archive-tete { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--marine); color: #fff; font-size: 12.5px; font-weight: 700; }
.archive-tete .f-zip { height: 26px; min-width: 32px; }
.archive ul { list-style: none; margin: 0; padding: 6px 0; }
.archive li { display: flex; align-items: center; gap: 10px; padding: 5px 14px; font-size: 12px; color: var(--marine); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archive li .f-pdf, .archive li .f-word { height: 20px; min-width: 24px; font-size: 7.5px; box-shadow: none; }
.archive li .f-word { font-size: 10px; }
.archive li.bcp { background: #fff8e1; font-weight: 700; }
@media (max-width: 860px) { .archive { width: 86%; } .zip-compo { padding-bottom: 30%; } }
@media (prefers-reduced-motion: reduce) { .illustration img { transition: none; } }
.trait-pinceau { display: block; width: 340px; max-width: 60%; margin: 24px auto; fill: none; stroke: var(--jaune); stroke-width: 18; stroke-linecap: round; opacity: .9; }
.trait-pinceau.inverse { transform: scaleX(-1); }
@media (max-width: 860px) {
  .etape { grid-template-columns: 1fr; gap: 28px; }
  .etape.inverse .etape-texte { order: 0; }
  .grand-numero { font-size: 110px; }
}

/* Formats de fichiers (à la place des logos de presse) */
.formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.format {
  display: flex; align-items: center; gap: 12px; background: var(--blanc); border-radius: 10px; padding: 18px 24px; min-width: 150px;
  box-shadow: var(--ombre); font-weight: 700;
}
.format b { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 7px; background: var(--c); color: #fff; font-size: 13px; }

/* Secret professionnel */
.securite {
  background-image: linear-gradient(var(--gris) 1px, transparent 1px), linear-gradient(90deg, var(--gris) 1px, transparent 1px);
  background-size: 86px 86px; border-top: 1px solid var(--gris);
}
.securite-grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; max-width: 960px; }
.securite h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 0 0 32px; }
.securite h3 { font-size: 22px; margin: 0 0 10px; }
.securite p { margin: 0 0 28px; }
.securite-visuel svg { width: 100%; max-width: 320px; }
.securite-visuel .losange { fill: var(--gris-num); }
.securite-visuel .rond { fill: var(--vif); }
.securite-visuel .doc { fill: #fff; }
.securite-visuel .doc-pli { fill: var(--lavande); }
.securite-visuel .doc-ligne { stroke: var(--trait-fort); stroke-width: 7; stroke-linecap: round; }
.securite-visuel .cadenas-illu { fill: var(--corail); }
.securite-visuel .anse-illu { fill: none; stroke: var(--corail); stroke-width: 6; }
.securite-visuel .cle-illu { fill: none; stroke: var(--jaune); stroke-width: 6; }
.securite-visuel .cle-tige { fill: none; stroke: var(--jaune); stroke-width: 6; stroke-linecap: round; }
@media (max-width: 760px) { .securite-grille { grid-template-columns: 1fr; } .securite-visuel { max-width: 220px; } }

/* Bandeau final */
.bandeau-final { background: var(--vif); color: #fff; text-align: center; padding: 80px 0; }
.bandeau-final h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 28px; }

/* Nous contacter */
.contact .titre-centre { margin-bottom: 40px; }
.form-contact { max-width: 720px; margin: 0 auto; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 32px; box-shadow: var(--ombre); }
.form-contact textarea {
  width: 100%; padding: 11px 12px; font: inherit; color: inherit; resize: vertical;
  background: var(--gris); border: 1.5px solid var(--trait); border-radius: 8px;
}
.form-contact textarea:focus { outline: none; background: var(--blanc); border-color: var(--vif); box-shadow: 0 0 0 3px var(--lavande); }
.choix-objet { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.choix-objet legend { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; padding: 0; }
.choix-objet label { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 16px; border: 1.5px solid var(--trait); border-radius: 999px; background: var(--gris); cursor: pointer; font-weight: 700; }
.choix-objet label:has(input:checked) { border-color: var(--vif); background: var(--lavande); color: var(--vif); }
.choix-objet input { accent-color: var(--vif); margin: 0; }
.form-contact .btn { margin-top: 22px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.retour-contact { margin: 14px 0 0; min-height: 1.5em; font-weight: 700; }
.retour-contact.ok { color: var(--ok); }
.retour-contact.ko { color: var(--erreur); }
@media (max-width: 640px) { .form-contact { padding: 22px; } }

/* ---------- Pied de page (toutes les pages) ---------- */
.pied { border-top: 1px solid var(--trait); padding: 64px 0 28px; margin-top: 0; }
.pied-grille { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.pied .devise { font-size: 22px; font-weight: 700; margin: 14px 0 0; letter-spacing: -.01em; }
.pied-titre { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }
.pied-grille > div > a:not(.marque) { display: block; color: var(--doux); text-decoration: none; margin-bottom: 12px; }
.pied-grille > div > a:not(.marque):hover { color: var(--marine); }
.pied .droits { margin-top: 40px; font-size: 13px; color: var(--doux); }
@media (max-width: 640px) { .pied-grille { grid-template-columns: 1fr 1fr; } .pied-grille > div:first-child { grid-column: 1 / -1; } }

/* ---------- Page Prix : en-têtes colorés à bord biseauté ---------- */
.prix-page { padding: 64px 28px 96px; }
.prix-page .titre-centre { margin-bottom: 16px; }
.sous-titre { text-align: center; font-size: 19px; color: var(--marine); margin: 0 0 48px; }
.offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.offre { position: relative; display: flex; flex-direction: column; background: var(--blanc); border-radius: 10px; box-shadow: var(--ombre); overflow: hidden; }
.offre-tete {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 26px 20px 46px;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); background: var(--blanc); border-bottom: 1px solid var(--trait);
}
.offre.essai .offre-tete { background: var(--jaune); }
.offre.licence .offre-tete { background: var(--vif); color: #fff; }
.offre-gamme { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.offre-nom { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.offre-prix { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.offre-detail { font-size: 13px; opacity: .85; }
.offre-degressif { margin: 8px 0 0; padding: 6px 12px; border-radius: 8px; background: var(--jaune); color: var(--marine); font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.offre ul { list-style: none; margin: 0; padding: 26px 28px; display: grid; gap: 16px; align-content: start; flex: 1; }
.offre li { display: flex; gap: 12px; align-items: flex-start; }
.offre li::before { content: "★"; color: var(--jaune); flex: none; }
.offre li.non { color: var(--doux); }
.offre li.non::before { color: var(--trait-fort); }
.offre > .btn { margin: 0 28px 28px; }
.ruban { position: absolute; top: 12px; right: 12px; z-index: 1; background: var(--corail); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.note-offres { text-align: center; font-size: 14px; color: var(--doux); margin: 32px 0 0; }
/* Formule du visiteur connecté */
.etiquette-actuelle { display: none; }
.offre.actuelle { box-shadow: 0 0 0 3px var(--ok), var(--ombre); }
.actuelle > .cta { display: none; }
.actuelle > .etiquette-actuelle { display: inline-flex; cursor: default; border-color: var(--ok); color: var(--ok); background: #eaf6ef; }
.actuelle > .etiquette-actuelle::before { content: "✓"; }
body:not(.verrouille) [data-formule="gratuit"] > .cta { visibility: hidden; }
@media (max-width: 860px) { .offres { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

/* ---------- Tampon SVG (aperçus) ---------- */
.tampon-svg { width: 100%; height: auto; color: var(--marque); }
.tampon-svg text { font-family: var(--police); fill: currentColor; }
.tampon-svg .arc { font-size: 14px; font-weight: 500; letter-spacing: .04em; }
.tampon-svg .piece { font-size: 17px; }
.tampon-svg .numero { font-size: 32px; font-weight: 700; letter-spacing: -.01em; }
.tampon-svg .puce { font-size: 14px; }
.tampon-svg circle { fill: none; stroke: currentColor; }
.tampon-svg.carre rect { fill: none; stroke: currentColor; }
.tampon-svg.carre line { stroke: currentColor; stroke-width: .8; }
.tampon-svg.carre .ligne-haut, .tampon-svg.carre .ligne-bas { font-size: 14px; font-weight: 500; letter-spacing: .02em; }

/* ---------- Pages de l'application (Tamponner, Profil) ---------- */
.appli, .profil { max-width: 860px; margin: 0 auto; padding: 56px 28px 88px; }
.appli-entete { margin-bottom: 32px; }
.surtitre { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--corail); }
.appli-entete h1 { font-size: clamp(30px, 4vw, 40px); margin: 8px 0 0; }
.chapeau-appli { margin: 10px 0 0; color: var(--doux); }
#formBienvenue .principal { margin-top: 22px; }
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 26px; margin-bottom: 18px; box-shadow: var(--ombre); }
.carte h2 { font-size: 20px; margin: 0 0 18px; }
.facultatif { color: var(--doux); font-weight: 400; font-size: 14px; letter-spacing: 0; }
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.plein { grid-column: 1 / -1; }
label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
input[type=text], input[type=number], input[type=email], input[type=password], select {
  width: 100%; padding: 11px 12px; font: inherit; color: inherit;
  background: var(--gris); border: 1.5px solid var(--trait); border-radius: 8px; transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus { outline: none; background: var(--blanc); border-color: var(--vif); box-shadow: 0 0 0 3px var(--lavande); }
select { cursor: pointer; }
button { font: inherit; }
.carte button:not(.btn):not(.lien), #btnRetablir {
  font-weight: 700; border-radius: 8px; padding: 10px 16px; cursor: pointer;
  border: 1.5px solid var(--marine); background: var(--blanc); color: var(--marine);
}
.carte button:not(.btn):not(.lien):hover:not(:disabled) { background: var(--gris); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.principal {
  width: 100%; padding: 16px; font-size: 17px; font-weight: 700; border-radius: 10px; cursor: pointer;
  background: var(--corail); color: #fff; border: 0; box-shadow: 0 10px 24px -12px var(--corail); transition: background .15s, transform .15s;
}
button.principal:hover:not(:disabled) { background: var(--corail-2); transform: translateY(-1px); }
.apercu { color: var(--doux); font-size: 14px; }
.apercu b { color: var(--marine); }
.ligne-dossier { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#nomDossier { color: var(--doux); font-size: 14px; overflow-wrap: anywhere; }
#nomDossier.choisi { color: var(--marine); font-weight: 700; }
.champ-debut { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.champ-debut input { width: 84px; }
.aide { margin: 14px 0 0; font-size: 13.5px; color: var(--doux); }
.aide.avertissement { color: var(--erreur); overflow-wrap: anywhere; }
.table-cadre { margin-top: 16px; max-height: 440px; overflow: auto; border: 1px solid var(--trait); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--trait); }
th { position: sticky; top: 0; background: var(--gris); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); z-index: 1; }
tr:last-child td { border-bottom: 0; }
td.num { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.nom { width: 100%; }
.champ-titre { display: flex; align-items: center; gap: 6px; }
.champ-titre span { color: var(--doux); white-space: nowrap; font-variant-numeric: tabular-nums; }
.champ-titre input { flex: 1; min-width: 0; padding: 6px 9px; font-size: 14px; background: var(--blanc); }
.origine { margin-top: 3px; font-size: 12px; color: var(--doux); overflow-wrap: anywhere; }
.badge { display: inline-block; margin-right: 6px; padding: 0 7px; border: 1px solid var(--trait); border-radius: 999px; font-size: 11px; color: var(--vif); }
td.etat { white-space: nowrap; color: var(--doux); text-align: right; }
td.etat.ok { color: var(--ok); }
td.etat.ko { color: var(--erreur); }
td.retirer { padding-left: 0; }
.carte td.retirer button:not(.btn):not(.lien), .carte td.poignee button:not(.btn):not(.lien) { padding: 0; width: 28px; height: 28px; line-height: 1; font-size: 18px; font-weight: 400; color: var(--doux); border-radius: 999px; border: 1px solid transparent; background: none; cursor: pointer; }
.carte td.retirer button:not(.btn):not(.lien):hover:not(:disabled) { color: var(--erreur); border-color: var(--erreur); background: none; }
td.poignee { width: 1%; padding-right: 0; }
.carte td.poignee button:not(.btn):not(.lien) { cursor: grab; touch-action: none; }
.carte td.poignee button:not(.btn):not(.lien):hover:not(:disabled) { color: var(--marine); border-color: var(--trait); background: none; }
td.poignee button:disabled { cursor: not-allowed; }
body.glissement, body.glissement * { cursor: grabbing !important; user-select: none; }
tr.glisse td { background: var(--lavande); }
tr.glisse td.poignee button { color: var(--vif); }
button.lien { padding: 0; border: 0; background: none; color: var(--vif); font-weight: 700; font-size: inherit; text-decoration: underline; cursor: pointer; }
.detail-erreur { margin-top: 3px; font-size: 12.5px; color: var(--erreur); }
progress { width: 100%; height: 8px; margin-top: 14px; accent-color: var(--corail); }
#message { margin-top: 12px; font-size: 14.5px; min-height: 1.5em; }
#message.ok { color: var(--ok); font-weight: 700; }
#message.ko { color: var(--erreur); font-weight: 700; }
@media (max-width: 620px) { .grille { grid-template-columns: 1fr; } }

/* Badges d'étape et bloc « Votre tampon » */
.carte-etape h2 { display: flex; align-items: center; gap: 12px; }
.badge-etape { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--lavande); color: var(--vif); font-size: 17px; font-weight: 700; }
.bloc-tampon { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; }
.bloc-tampon .actions { margin-top: 12px; }
.lien-modifier { color: var(--vif); font-weight: 700; text-decoration: none; }
.lien-modifier:hover { text-decoration: underline; }
@media (max-width: 620px) { .bloc-tampon { grid-template-columns: 1fr; } .bloc-tampon > div:first-child { max-width: 180px; margin: 0 auto; } }

/* Profil */
.abonnement { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.abonnement h2 { margin-bottom: 4px; }
.abonnement p { margin: 0; }
.abonnement .btn { border-color: var(--marine); }
#abonnementEcheance { color: var(--doux); }
.choix-forme { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.carte .choix-forme button:not(.btn):not(.lien) {
  display: grid; justify-items: center; gap: 8px; padding: 16px 12px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--trait); background: var(--gris); color: var(--doux); font-weight: 700;
}
.choix-forme button svg { width: 60px; height: 60px; color: currentColor; }
.carte .choix-forme button.actif:not(.btn):not(.lien) { border-color: var(--vif); color: var(--vif); background: var(--lavande); }
.tampon-options { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.espace { margin-top: 16px; }
.feuille-mini {
  position: relative; width: 100%; max-width: 280px; aspect-ratio: 210 / 297; margin: 0 auto; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: 3px; box-shadow: var(--ombre); overflow: hidden;
}
/* Lignes de texte fictives à peu près à l'échelle (marges de 2 cm, corps 11 pt). */
.feuille-mini .ligne { position: absolute; left: 10%; right: 10%; height: 2px; border-radius: 1px; background: var(--trait); }
/* Tampon : largeur, left et top posés par site.js à partir des dimensions réelles. */
.feuille-mini .tampon-svg { position: absolute; transition: top .3s, left .3s, width .3s; }
.legende { text-align: center; font-size: 12.5px; color: var(--doux); margin: 8px 0 0; }
.modele-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.modele-ligne label.btn { cursor: pointer; margin: 0; border-color: var(--marine); }
#modeleNom { font-weight: 700; }
.balises { margin-top: 12px; font-size: 13px; color: var(--doux); }
.balises summary { cursor: pointer; font-weight: 700; color: var(--vif); }
.balises p { margin: 8px 0 0; }
.balises code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: var(--gris); padding: 1px 5px; border-radius: 4px; }
@media (max-width: 620px) { .tampon-options { grid-template-columns: 1fr; } }

/* Options Premium : bloc grisé en version gratuite */
/* Le message est centré, en hauteur et en largeur, par-dessus le contenu grisé. */
.option-premium.bloque { position: relative; background: var(--gris); border-radius: 10px; padding: 14px; }
.option-premium.bloque .contenu-premium { opacity: .3; filter: grayscale(1); user-select: none; }
.msg-premium { display: none; }
.option-premium.bloque .msg-premium { position: absolute; inset: 0; margin: 0; padding: 16px; display: flex; align-items: center; justify-content: center; text-align: center; }
.msg-premium a {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; background: var(--blanc);
  color: var(--marine); font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: var(--ombre-forte);
}
.msg-premium a:hover { color: var(--corail-2); }
.cadenas-premium { flex: none; color: var(--corail); }

/* Avertisseur des limites de la version gratuite (page Tamponner) */
.avertisseur {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: 10px;
  background: #fff1f0; border: 1.5px solid var(--corail); color: var(--marine); font-size: 14.5px;
}
.avertisseur > svg { flex: none; color: var(--corail); margin-top: 1px; }
.avertisseur p { margin: 0 0 6px; font-weight: 700; overflow-wrap: anywhere; }
.avertisseur a { color: var(--corail-2); font-weight: 700; }

/* ---------- Page Connexion ---------- */
.connexion { max-width: 440px; margin: 0 auto; padding: 64px 24px 96px; }
.connexion h1 { font-size: 34px; margin: 0 0 24px; text-align: center; }
.connexion .carte { padding: 30px; }
.onglets { display: flex; background: var(--gris); border-radius: 10px; padding: 4px; margin-bottom: 22px; }
.onglets button { flex: 1; border: 0; background: none; padding: 9px; border-radius: 8px; font-weight: 700; color: var(--doux); cursor: pointer; }
.onglets button.actif { background: var(--blanc); color: var(--marine); box-shadow: var(--ombre); }
.connexion form { display: grid; gap: 14px; }
.connexion form .btn { background: var(--corail); color: #fff; }
.btn-google { gap: 10px; border-color: var(--trait); }
.ou { display: flex; align-items: center; gap: 12px; color: var(--doux); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
.info-bientot { margin: 16px 0 0; padding: 12px 14px; border-radius: 8px; background: #fff8e1; border: 1px solid var(--jaune); font-size: 14px; }

/* ---------- Compte : cadenas, bandeau, verrouillage, bouton de test ---------- */
/* Non connecté : cadenas sur Tamponner et Profil. Connecté : icône de tampon sur Tamponner, rien sur Profil. */
.cadenas { color: var(--corail); flex: none; display: none; }
.icone-tampon { flex: none; color: var(--vif); }
body.verrouille .cadenas { display: block; }
body.verrouille .icone-tampon { display: none; }
.icone-profil { flex: none; }
.bandeau-connexion { background: var(--marine); color: #fff; text-align: center; font-size: 14px; padding: 10px 16px; }
.bandeau-connexion a { color: var(--jaune); font-weight: 700; }
body.verrouille #zoneTamponner, body.verrouille #zoneProfil { opacity: .55; filter: saturate(.6); }
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--corail); background: none; color: var(--corail); font: 700 11px/1.4 var(--police); letter-spacing: .04em; text-transform: uppercase;
}

/* ---------- Compte connecté (menu) et page Connexion ---------- */
.nom-utilisateur { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-compte .btn.contour { padding: 8px 14px; font-size: 14px; }
body.accueil-haut .nav-compte .btn.contour { border-color: #fff; color: #fff; background: transparent; }
.lien-discret { margin: 4px 0 0; text-align: center; font-size: 13.5px; }
.lien-discret a { color: var(--doux); }
.retour-connexion { margin: 16px 0 0; font-size: 14px; font-weight: 700; text-align: center; }
.retour-connexion.ok { color: var(--ok); }
.retour-connexion.ko { color: var(--erreur); }