/* site/styles.css — La feuille de style du site public.
   Une seule, partagée par la page d'accueil et les pages légales. */

:root{
  --violet:#7B61FF; --violet-d:#5B3FD9; --violet-l:#9B85FF; --violet-p:#EDE9FF;
  --fond:#F7F5FF; --blanc:#FFFFFF;
  --encre:#1A0A3D; --doux:#6B5EA8; --gris:#A398C8; --trait:#E7E2F4;
  --or:#E8C87A; --or-p:#FBF3E2; --or-b:#E9D2A0; --or-e:#8A6420;
  --succes:#22C55E;
  --ombre:0 8px 30px rgba(91,63,217,.10);
  --ombre-forte:0 14px 40px rgba(91,63,217,.18);
  --large:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font:400 17px/1.65 "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} }

img{max-width:100%}
a{color:var(--violet-d)}

.large{max-width:var(--large); margin:0 auto; padding:0 22px}

/* ── Barre du haut ─────────────────────────────────────────────── */
.barre{position:sticky; top:0; z-index:20; background:rgba(247,245,255,.86);
  backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--trait)}
.barre .large{display:flex; align-items:center; gap:16px; height:66px}
.marque{display:flex; align-items:center; text-decoration:none}
.marque img{height:34px; width:auto; display:block}
.barre nav{margin-left:auto; display:flex; align-items:center; gap:22px}
.barre nav a{color:var(--doux); text-decoration:none; font-size:15px; font-weight:600}
.barre nav a:hover{color:var(--encre)}
@media (max-width:720px){ .barre nav a.masq{display:none} }

.bouton{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--violet),var(--violet-d));
  color:#fff !important; text-decoration:none; border:0; border-radius:14px; padding:13px 20px;
  font:800 15px/1 "Public Sans",sans-serif; cursor:pointer; box-shadow:var(--ombre);
  transition:transform .15s ease, box-shadow .15s ease}
.bouton:hover{transform:translateY(-1px); box-shadow:var(--ombre-forte)}
.bouton.petit{padding:10px 16px; font-size:14px; border-radius:11px}
.bouton.clair{background:var(--violet-p); color:var(--violet-d) !important; box-shadow:none}

/* ── Titres ────────────────────────────────────────────────────── */
h1,h2,h3{font-family:"Bricolage Grotesque", "Public Sans", sans-serif; letter-spacing:-.03em; text-wrap:balance; margin:0}
h1{font-weight:800; font-size:clamp(36px,6.2vw,62px); line-height:1.03}
h2{font-weight:700; font-size:clamp(26px,3.6vw,38px); line-height:1.1}
h3{font-weight:700; font-size:19px; letter-spacing:-.02em}
.sur{font:800 11px/1 "Public Sans",sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--gris)}

section{padding:88px 0}
.intro{color:var(--doux); font-size:19px; max-width:62ch; margin:16px 0 0}

/* ── Héros ─────────────────────────────────────────────────────── */
.heros{padding:76px 0 64px; position:relative; overflow:hidden}
.heros::before{content:""; position:absolute; top:-220px; right:-160px; width:560px; height:560px;
  border-radius:50%; background:radial-gradient(circle, rgba(123,97,255,.16), transparent 68%)}
.heros .large{position:relative}
.heros h1{max-width:16ch}
.heros .intro{font-size:20px}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; align-items:center}
.note{color:var(--gris); font-size:14px}

.compteur{display:inline-flex; align-items:center; gap:10px; background:var(--or-p); border:1px solid var(--or-b);
  border-radius:999px; padding:8px 16px; color:var(--or-e); font:700 14px/1 "Public Sans",sans-serif; margin-bottom:24px}
.compteur b{font-weight:800; font-variant-numeric:tabular-nums}
.compteur .pt{width:7px; height:7px; border-radius:50%; background:var(--or-e)}

/* ── Grilles ───────────────────────────────────────────────────── */
.grille{display:grid; gap:18px; margin-top:44px}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.carte{background:var(--blanc); border:1px solid var(--trait); border-radius:22px; padding:26px; box-shadow:var(--ombre)}
.carte .num{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:11px;
  background:var(--violet-p); color:var(--violet-d); font:800 15px/1 "Public Sans",sans-serif; margin-bottom:16px}
.carte h3{margin-bottom:8px}
.carte p{color:var(--doux); font-size:15.5px; line-height:1.6; margin:0}

/* ── Le constat (bande sombre) ─────────────────────────────────── */
.sombre{background:linear-gradient(140deg,#2E1F57,#160933); color:#EFEAFF}
.sombre h2{color:#fff}
.sombre .intro{color:#B0A4D8}
.sombre .sur{color:rgba(232,200,122,.75)}
.sombre .carte{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); box-shadow:none}
.sombre .carte h3{color:#F5E3B8}
.sombre .carte p{color:#B7ABDD}

/* ── L'offre fondatrice ────────────────────────────────────────── */
.fond-offre{background:linear-gradient(140deg,#2E1F57,#160933); color:#EFEAFF; border-radius:30px;
  padding:46px 40px; position:relative; overflow:hidden; box-shadow:var(--ombre-forte)}
.fond-offre::before{content:""; position:absolute; left:-90px; top:-120px; width:340px; height:340px;
  border-radius:50%; background:rgba(232,200,122,.14)}
.fond-offre > *{position:relative}
.fond-offre h2{color:#F5E3B8}
.fond-offre .prix{display:flex; align-items:baseline; gap:10px; margin:22px 0 4px}
.fond-offre .prix b{font:800 46px/1 "Bricolage Grotesque",sans-serif; color:#fff; letter-spacing:-.03em}
.fond-offre .prix span{color:#B0A4D8; font-size:16px}
.fond-offre ul{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px}
.fond-offre li{display:flex; gap:12px; color:#DCD4F5; font-size:15.5px; line-height:1.5}
.fond-offre li::before{content:"✓"; color:var(--or); font-weight:800; flex:none}
.fond-offre .petit-texte{color:#8F82BC; font-size:13px; margin-top:26px; line-height:1.55}

/* ── Formulaire ────────────────────────────────────────────────── */
.form{background:var(--blanc); border:1px solid var(--trait); border-radius:26px; padding:30px; box-shadow:var(--ombre)}
.champs{display:grid; gap:14px; grid-template-columns:1fr 1fr}
.champ{display:flex; flex-direction:column; gap:6px}
.champ.plein{grid-column:1 / -1}
label{font:700 12.5px/1 "Public Sans",sans-serif; color:var(--doux); letter-spacing:.03em}
input,textarea{font:400 16px/1.5 "Public Sans",sans-serif; color:var(--encre); background:var(--fond);
  border:1px solid var(--trait); border-radius:13px; padding:13px 14px; width:100%}
input:focus,textarea:focus{outline:2px solid var(--violet-l); outline-offset:1px; border-color:transparent}
textarea{min-height:120px; resize:vertical}
.piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form .bouton{width:100%; justify-content:center; margin-top:20px; padding:16px}
.form-etat{margin-top:14px; font-size:14.5px; min-height:22px}
.form-etat.ok{color:var(--succes); font-weight:700}
.form-etat.ko{color:#DC2626; font-weight:700}
@media (max-width:640px){ .champs{grid-template-columns:1fr} }

/* ── Pied ──────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--trait); padding:44px 0; color:var(--gris); font-size:14.5px}
footer .large{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center}
footer a{color:var(--doux); text-decoration:none}
footer a:hover{color:var(--encre); text-decoration:underline}
footer .droite{margin-left:auto}

/* ── Pages légales ─────────────────────────────────────────────── */
.doc{max-width:760px; margin:0 auto; padding:60px 22px 90px}
.doc h1{font-size:clamp(30px,5vw,42px); margin-bottom:10px}
.doc .maj{color:var(--gris); font-size:14px; margin:0 0 40px}
.doc h2{font-size:21px; margin:38px 0 10px}
.doc p{color:var(--doux); font-size:16.5px; line-height:1.7; margin:0 0 14px}
.doc .retour{display:inline-block; margin-bottom:26px; color:var(--doux); text-decoration:none; font-weight:700; font-size:14.5px}
.doc .aremplir{background:var(--or-p); border:1px solid var(--or-b); border-radius:14px; padding:16px 18px; color:var(--or-e); font-size:15px}

/* ── Page « Entreprise fondatrice » ─────────────────────────────── */
/* Elle emprunte le registre du sceau de l'application : encre profonde et or. C'est la
   seule page du site qui sorte du violet, et c'est voulu — on ne vend pas trente places
   uniques dans la même mise en page que le reste. */
.or-heros{background:linear-gradient(140deg,#2E1F57,#160933); color:#EFEAFF; padding:76px 0 70px;
  position:relative; overflow:hidden}
.or-heros::before{content:""; position:absolute; left:-120px; top:-160px; width:460px; height:460px;
  border-radius:50%; background:rgba(232,200,122,.13)}
.or-heros .large{position:relative}
.or-heros h1{color:#fff; max-width:14ch}
.or-heros .intro{color:#B0A4D8}
.or-heros .sur{color:rgba(232,200,122,.72)}
.or-compteur{display:inline-flex; align-items:center; gap:10px; background:rgba(232,200,122,.14);
  border:1px solid rgba(232,200,122,.4); border-radius:999px; padding:8px 16px; color:#F5E3B8;
  font:700 14px/1 "Public Sans",sans-serif; margin-bottom:24px}
.or-compteur b{font-weight:800; font-variant-numeric:tabular-nums}
.or-prix{display:flex; align-items:baseline; gap:12px; margin-top:30px}
.or-prix b{font:800 54px/1 "Bricolage Grotesque",sans-serif; color:#F5E3B8; letter-spacing:-.04em}
.or-prix span{color:#B0A4D8; font-size:16px}
.or-bouton{display:inline-flex; align-items:center; gap:8px; background:#F5E3B8; color:#160933 !important;
  text-decoration:none; border-radius:14px; padding:14px 22px; font:800 15px/1 "Public Sans",sans-serif;
  margin-top:28px; transition:transform .15s ease}
.or-bouton:hover{transform:translateY(-1px)}

.avantage{display:flex; gap:14px; background:var(--blanc); border:1px solid var(--trait);
  border-radius:18px; padding:20px; box-shadow:var(--ombre)}
.avantage .coche{flex:none; width:28px; height:28px; border-radius:50%; background:var(--or-p);
  border:1px solid var(--or-b); display:grid; place-items:center; color:var(--or-e); font-weight:800; font-size:14px}
.avantage h3{margin-bottom:6px}
.avantage p{color:var(--doux); font-size:15px; line-height:1.6; margin:0}

.reserve{background:var(--violet-p); border-radius:20px; padding:26px; margin-top:40px}
.reserve h3{color:var(--violet-d); margin-bottom:12px}
.reserve p{color:var(--violet-d); font-size:15px; line-height:1.6; margin:0 0 10px; opacity:.92}
.reserve p:last-child{margin-bottom:0}

/* ── Bandeau « merci » des entreprises fondatrices ──────────────── */
/* Sur l'accueil : ce n'est pas un argument de rareté mais un remerciement. D'où le registre
   du sceau — encre et or — et un nombre qui dit ce qui a été donné, pas ce qui reste. */
.merci{background:linear-gradient(140deg,#2E1F57,#160933); border-radius:30px; padding:44px 40px;
  color:#EFEAFF; position:relative; overflow:hidden; box-shadow:var(--ombre-forte)}
.merci::before{content:""; position:absolute; right:-110px; top:-140px; width:400px; height:400px;
  border-radius:50%; background:rgba(232,200,122,.13)}
.merci > *{position:relative}
.merci .sur{color:rgba(232,200,122,.72)}
.merci-corps{display:flex; flex-wrap:wrap; align-items:center; gap:34px; margin-top:20px}
.merci-nb{flex:none; text-align:center; min-width:150px}
.merci-nb b{display:block; font:800 68px/1 "Bricolage Grotesque",sans-serif; color:#F5E3B8;
  letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.merci-nb span{display:block; color:#B0A4D8; font-size:13.5px; margin-top:8px; line-height:1.4}
.merci-txt{flex:1; min-width:260px}
.merci-txt h2{color:#fff; font-size:clamp(22px,3vw,30px)}
.merci-txt p{color:#B0A4D8; font-size:16px; line-height:1.6; margin:12px 0 0}
.merci-jauge{margin-top:22px}
.merci-rail{height:8px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden}
.merci-rail i{display:block; height:8px; border-radius:4px;
  background:linear-gradient(90deg,#E8C87A,#F5E3B8); transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.merci-legende{display:flex; justify-content:space-between; color:#8F82BC; font-size:12.5px; margin-top:8px;
  font-variant-numeric:tabular-nums}
.merci .or-bouton{margin-top:26px}
@media (max-width:640px){ .merci{padding:32px 24px} .merci-corps{gap:22px} }

/* ── Page de téléchargement (discrète, derrière un code) ────────── */
.tele{max-width:520px; margin:0 auto; padding:70px 22px 100px}
.tele h1{font-size:clamp(28px,4.6vw,38px); margin-bottom:10px}
.tele .intro{font-size:16.5px; margin-bottom:30px}
.tele .carte{background:var(--blanc); border:1px solid var(--trait); border-radius:22px;
  padding:26px; box-shadow:var(--ombre)}
.tele input{font:600 22px/1 "Public Sans",sans-serif; letter-spacing:5px; text-align:center;
  padding:16px 14px}
.tele .bouton{width:100%; justify-content:center; margin-top:16px; padding:16px}
.tele-ok{text-align:center}
.tele-ok .v{width:56px; height:56px; border-radius:50%; background:#DCFCE7; color:#15803D;
  display:grid; place-items:center; font-size:26px; margin:0 auto 16px}
.tele-ok .version{color:var(--doux); font-size:14px; margin:8px 0 0}
.tele-ok .notes{color:var(--gris); font-size:13.5px; margin-top:6px; line-height:1.5}
.tele-etapes{margin-top:26px; text-align:left; border-top:1px solid var(--trait); padding-top:20px}
.tele-etapes h3{font-size:15px; margin-bottom:10px}
.tele-etapes ol{margin:0; padding-left:20px; color:var(--doux); font-size:14.5px; line-height:1.7}

/* ══ Page d'accueil, version démonstrative ═════════════════════════════════════
   Le principe : montrer le produit plutôt que le décrire. Toutes les vignettes sont
   dessinées en CSS — aucune image. Sur un hébergement de 100 Mo et pour des visiteurs
   souvent en 4G, une capture PNG par section coûterait plus cher que tout le reste du
   site réuni, et vieillirait à la première évolution de l'app. */

.vign{background:var(--blanc);border:1px solid var(--trait);border-radius:18px;padding:14px;
  box-shadow:var(--ombre)}
.vign .et{font:800 9.5px/1 "Public Sans",sans-serif;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gris)}
.vign .gd{font:800 17px/1.2 "Public Sans",sans-serif;color:var(--encre);margin-top:7px}
.vign .pt{color:var(--doux);font-size:12.5px;margin-top:5px}

/* — Héros : le chantier d'un côté, l'agent de l'autre — */
.demo{display:grid;grid-template-columns:1fr 1.05fr;gap:34px;align-items:center}
@media (max-width:900px){.demo{grid-template-columns:1fr;gap:26px}}
/* Les deux vignettes de droite s'EMPILENT — elles ne se partagent pas la colonne. */
.demo-cartes{display:grid;gap:12px}
.creneau{background:var(--fond);border-radius:12px;padding:10px 12px;margin-top:10px}
.creneau b{display:block;font:800 19px/1.2 "Public Sans",sans-serif;color:var(--encre);
  font-variant-numeric:tabular-nums}
.creneau span{color:var(--gris);font-size:11.5px}
.agent{border:2px solid var(--violet);box-shadow:0 10px 30px rgba(123,97,255,.18)}
.agTete{display:flex;align-items:center;gap:10px}
.pastilleN{width:38px;height:38px;border-radius:50%;background:var(--violet-p);color:var(--violet-d);
  display:grid;place-items:center;font:800 14px/1 "Public Sans",sans-serif;flex:none}
.frac{display:flex;align-items:baseline;gap:4px;margin-top:12px}
.frac b{font:800 40px/1 "Bricolage Grotesque",sans-serif;color:var(--violet-d);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.frac i{font:800 20px/1 "Bricolage Grotesque",sans-serif;color:var(--gris);font-style:normal}
.frac em{margin-left:6px;font:800 14px/1.25 "Public Sans",sans-serif;color:var(--encre);font-style:normal}
.jrs{display:flex;gap:4px;margin-top:10px}
.jrs span{flex:1;text-align:center;border-radius:6px;padding:5px 0;
  font:800 10px/1 "Public Sans",sans-serif;background:var(--trait);color:var(--gris)}
.jrs span.ok{background:var(--violet);color:#fff}

/* — Le problème : trois agents comparés au même créneau — */
.compare{display:grid;gap:9px;margin-top:26px}
.cand{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:12px 14px}
.cand .ini{width:34px;height:34px;border-radius:50%;background:rgba(232,200,122,.16);color:#F5E3B8;
  display:grid;place-items:center;font:800 12px/1 "Public Sans",sans-serif;flex:none}
.cand .qui{flex:1;min-width:0}
.cand .qui b{display:block;color:#fff;font:700 14px/1.2 "Public Sans",sans-serif}
.cand .qui span{color:#9E92C9;font-size:12px}
.cand .verdict{font:800 13px/1 "Public Sans",sans-serif;white-space:nowrap;border-radius:999px;
  padding:6px 11px}
.cand .verdict.oui{background:rgba(123,97,255,.28);color:#D6CCFF}
.cand .verdict.non{background:rgba(255,255,255,.07);color:#8F82BC}
.regle{display:flex;align-items:center;gap:10px;margin-top:22px;color:#B0A4D8;font-size:14.5px}
.regle::before{content:"";flex:1;height:1px;background:rgba(255,255,255,.14)}
.regle::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14)}

/* — Comment ça marche : trois lignes alternées — */
.etape{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;
  background:var(--blanc);border:1px solid var(--trait);border-radius:24px;padding:24px;
  margin-bottom:16px;box-shadow:var(--ombre)}
@media (max-width:820px){.etape{grid-template-columns:1fr;gap:18px}.etape .vis{order:2}}
.etape .num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--violet-p);color:var(--violet-d);font:800 13px/1 "Public Sans",sans-serif;margin-bottom:12px}
.etape h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:21px;
  letter-spacing:-.02em;margin:0 0 8px}
.etape p{color:var(--doux);font-size:15px;line-height:1.6;margin:0}

/* Mini-agenda dessiné.
   ⚠️ NE PAS l'appeler « grille » : cette classe sert déjà aux grilles de cartes plus haut,
      et une seconde définition du même nom écrase la première — les cartes se retrouvaient
      en colonnes de 26 px, texte par-dessus texte. */
.agdm{display:grid;grid-template-columns:30px repeat(5,1fr);gap:4px;font:700 10px/1 "Public Sans",sans-serif}
.agdm .h{color:var(--gris);text-align:right;padding-right:5px;align-self:center}
.agdm .t{color:var(--gris);text-align:center;padding-bottom:4px;letter-spacing:.06em}
.cell{height:22px;border-radius:5px;background:var(--fond)}
.cell.d{background:#C9BCFF}
.cell.t2{background:var(--violet)}
.leg{display:flex;gap:14px;margin-top:10px;color:var(--gris);font-size:11px}
.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* Liste de résultats */
.res{display:grid;gap:7px}
.res .l{display:flex;align-items:center;gap:10px;background:var(--fond);border-radius:11px;padding:9px 11px}
.res .l b{flex:1;min-width:0;font:700 13.5px/1.2 "Public Sans",sans-serif;color:var(--encre)}
.res .l .f{font:800 13px/1 "Public Sans",sans-serif;color:var(--violet-d);font-variant-numeric:tabular-nums}

/* Carte des secteurs, en SVG */
.mini{width:100%;height:auto;display:block;border-radius:14px;background:var(--fond)}

/* — Comparatif — */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch;margin-top:26px}
@media (max-width:760px){.vs{grid-template-columns:1fr}.vs .sep{display:none}}
.col-vs{background:var(--blanc);border:1px solid var(--trait);border-radius:20px;padding:22px;
  box-shadow:var(--ombre)}
.col-vs h4{font:800 12px/1 "Public Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);margin:0 0 16px}
.col-vs.on{border-color:var(--violet);box-shadow:0 10px 30px rgba(123,97,255,.15)}
.col-vs ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.col-vs li{color:var(--doux);font-size:14.5px;display:flex;gap:9px;align-items:flex-start}
.col-vs li::before{content:"↓";color:var(--gris);font-weight:800;flex:none}
.col-vs.on li::before{content:"✓";color:var(--violet)}
.chute{margin-top:16px;border-radius:12px;padding:12px;text-align:center;
  font:800 14px/1.3 "Public Sans",sans-serif}
.chute.pale{background:var(--fond);color:var(--doux)}
.chute.fort{background:var(--violet-p);color:var(--violet-d)}
.sep{display:grid;place-items:center;color:var(--gris);font:800 13px/1 "Public Sans",sans-serif}
.exemple{color:var(--gris);font-size:13px;margin-top:14px;text-align:center}

/* — Réassurance sous le formulaire — */
.rass{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:26px}
.rass div{background:var(--blanc);border:1px solid var(--trait);border-radius:16px;padding:16px}
.rass b{display:block;font:800 14px/1.3 "Public Sans",sans-serif;margin-bottom:5px}
.rass p{color:var(--doux);font-size:13px;line-height:1.55;margin:0}

/* ══ Page des tarifs ═══════════════════════════════════════════════════════════ */
.inclus{background:var(--blanc);border:1px solid var(--trait);border-radius:22px;padding:26px;
  box-shadow:var(--ombre);margin-top:26px}
.inclus h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:19px;
  letter-spacing:-.02em;margin:0 0 4px}
.inclus .ss{color:var(--doux);font-size:14.5px;margin:0 0 18px}
.inclus ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:11px 26px}
.inclus li{display:flex;gap:10px;color:var(--encre);font-size:15px;line-height:1.5}
.inclus li::before{content:"✓";color:var(--violet);font-weight:800;flex:none}

.paliers{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;margin-top:22px}
.pal{background:var(--blanc);border:1px solid var(--trait);border-radius:22px;padding:24px;
  display:flex;flex-direction:column;box-shadow:var(--ombre);position:relative}
.pal.top{border:2px solid var(--violet);box-shadow:0 12px 34px rgba(123,97,255,.16)}
.pal .ruban{position:absolute;top:-11px;left:24px;background:var(--violet);color:#fff;
  border-radius:999px;padding:5px 12px;font:800 10.5px/1 "Public Sans",sans-serif;letter-spacing:.08em;
  text-transform:uppercase}
.pal h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:22px;
  letter-spacing:-.02em;margin:0}
.pal .prom{color:var(--doux);font-size:14px;line-height:1.5;margin:7px 0 0;min-height:42px}
.pal .prix{display:flex;align-items:baseline;gap:5px;margin:18px 0 2px}
.pal .prix b{font:800 34px/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em}
.pal .prix span{color:var(--gris);font-size:14px}
.pal .mention{color:var(--gris);font-size:12px;line-height:1.45;margin:0 0 18px}
.pal ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px;flex:1}
.pal li{display:flex;gap:9px;color:var(--doux);font-size:14px;line-height:1.5}
.pal li::before{content:"·";color:var(--violet);font-weight:800;flex:none}
.pal .cta{display:block;text-align:center;border-radius:13px;padding:13px;text-decoration:none;
  font:800 14.5px/1 "Public Sans",sans-serif}
.pal .cta.plein{background:linear-gradient(135deg,#7B61FF,#5B3FD9);color:#fff}
.pal .cta.creux{background:var(--violet-p);color:var(--violet-d)}

.unite{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:22px}
.unite .u{background:var(--blanc);border:1px solid var(--trait);border-radius:20px;padding:22px;
  box-shadow:var(--ombre)}
.unite h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:18px;margin:0 0 6px}
.unite p{color:var(--doux);font-size:14.5px;line-height:1.55;margin:0 0 14px}
.tarifs2{display:flex;gap:20px}
.tarifs2 div b{display:block;font:800 26px/1 "Bricolage Grotesque",sans-serif;color:var(--violet-d);
  letter-spacing:-.03em}
.tarifs2 div span{color:var(--gris);font-size:12.5px}

.precisions{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.precisions dt{font:800 15px/1.4 "Public Sans",sans-serif;color:var(--encre);margin-bottom:5px}
.precisions dd{margin:0 0 18px;color:var(--doux);font-size:14.5px;line-height:1.6}