/* Page de presentation publique. Reprend la charte de l'application,
   avec une mise en page plus large et plus aeree. */

.pub{background:var(--papier);color:var(--encre)}
.bande{max-width:1120px;margin:0 auto;padding:0 24px}

/* --- en-tete --- */
.pub-tete{background:var(--encre);color:#fff;position:sticky;top:0;z-index:20}
.pub-tete .bande{display:flex;align-items:center;gap:18px;height:62px}
.pub-tete .logo{font-family:'Barlow Condensed';font-size:25px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;text-decoration:none}
.pub-tete nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.pub-tete nav a{color:#C3D2CD;text-decoration:none;font-size:14.5px}
.pub-tete nav a:hover{color:#fff}
.pub-tete .btn{padding:7px 16px}

/* --- banniere --- */
.hero{padding:76px 0 64px;border-bottom:1px solid var(--trait);background:
  linear-gradient(180deg,#fff 0%,var(--papier) 100%)}
.hero h1{font-size:50px;line-height:1.04;max-width:16ch;text-transform:none;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--ocre)}
.hero p.chapo{font-size:19px;line-height:1.55;max-width:56ch;color:var(--gris);margin:20px 0 28px}
.hero .actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero .mention{font-size:13.5px;color:var(--gris);margin-top:14px}
.hero-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}

/* apercu stylise */
.apercu-app{background:#fff;border:1px solid var(--trait);border-radius:6px;overflow:hidden;box-shadow:0 18px 44px rgba(18,49,46,.13)}
.apercu-app .barre-faux{background:var(--encre);height:34px;display:flex;align-items:center;padding:0 12px;gap:6px}
.apercu-app .barre-faux i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.26);display:block}
.apercu-app .corps-faux{padding:16px}
.ligne-faux{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--trait)}
.ligne-faux:last-child{border-bottom:0}
.ligne-faux .sc{font-family:'Barlow Condensed';font-size:19px;font-weight:700;width:34px;text-align:center}
.ligne-faux .tx{flex:1;min-width:0}
.ligne-faux .tx b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ligne-faux .tx span{font-size:12px;color:var(--gris)}

/* --- sections --- */
.sec{padding:66px 0;border-bottom:1px solid var(--trait)}
.sec.clair{background:#fff}
.sec h2{font-size:31px;text-transform:none;letter-spacing:0;margin-bottom:10px}
.sec .intro{color:var(--gris);font-size:16.5px;max-width:62ch;margin-bottom:34px;line-height:1.55}
.cols{display:grid;gap:22px}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}

.bloc{background:#fff;border:1px solid var(--trait);border-radius:5px;padding:22px}
.sec.clair .bloc{background:var(--papier)}
.bloc h3{font-size:18px;margin-bottom:7px}
.bloc p{margin:0;font-size:14.5px;line-height:1.55;color:var(--gris)}
.bloc .num{font-family:'Barlow Condensed';font-size:13px;font-weight:700;color:var(--ocre);letter-spacing:.14em;display:block;margin-bottom:8px}

.constat{border-left:3px solid var(--brique);padding:4px 0 4px 18px;margin-bottom:26px}
.constat b{display:block;font-family:'Barlow Condensed';font-size:21px;font-weight:600}
.constat span{color:var(--gris);font-size:14.5px}

.source{display:flex;gap:13px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--trait)}
.source:last-child{border-bottom:0}
.source .sg{font-family:'IBM Plex Mono';font-size:11px;background:var(--ocre-clair);color:var(--ocre);
  border:1px solid #EBD9BA;border-radius:3px;padding:3px 8px;white-space:nowrap;flex:none;margin-top:2px}
.source div b{display:block;font-size:15px}
.source div span{font-size:14px;color:var(--gris);line-height:1.5}

/* --- tarifs --- */
.prix{background:#fff;border:1px solid var(--trait);border-radius:5px;padding:24px;display:flex;flex-direction:column}
.prix.phare{border-color:var(--ocre);border-width:2px;box-shadow:0 10px 30px rgba(181,130,42,.14)}
.prix .et-phare{background:var(--ocre);color:#fff;font-family:'Barlow Condensed';font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;padding:3px 9px;border-radius:2px;align-self:flex-start;margin-bottom:10px}
.prix h3{font-size:20px}
.prix .mnt{font-family:'Barlow Condensed';font-size:40px;font-weight:700;line-height:1;margin:10px 0 2px}
.prix .mnt small{font-size:15px;font-weight:500;color:var(--gris)}
.prix .pub-cible{font-size:13px;color:var(--gris);text-transform:uppercase;letter-spacing:.08em}
.prix ul{list-style:none;padding:0;margin:18px 0 22px;font-size:14.5px}
.prix li{padding:6px 0;border-bottom:1px dashed var(--trait);display:flex;gap:9px;line-height:1.45}
.prix li:last-child{border-bottom:0}
.prix li:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ocre);flex:none;margin-top:7px}
.prix .btn{margin-top:auto}

/* --- questions --- */
.question{border-bottom:1px solid var(--trait);padding:19px 0}
.question:last-child{border-bottom:0}
.question b{display:block;font-size:16.5px;margin-bottom:6px}
.question p{margin:0;color:var(--gris);font-size:14.5px;line-height:1.6}

/* --- appel final --- */
.final{background:var(--encre);color:#fff;padding:66px 0;text-align:center}
.final h2{color:#fff;font-size:33px;text-transform:none;letter-spacing:0}
.final p{color:#A9BDB7;font-size:16.5px;max-width:56ch;margin:14px auto 26px;line-height:1.55}
.final .btn.or{padding:12px 30px;font-size:15.5px}
.final .ss{color:#7E948E;font-size:13px;margin-top:14px}

/* --- pied --- */
.pied-pub{background:#0D2825;color:#7E948E;padding:34px 0;font-size:13.5px}
.pied-pub .bande{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.pied-pub a{color:#A9BDB7;text-decoration:none}
.pied-pub a:hover{color:#fff}

@media (max-width:900px){
  .hero-grille,.c2,.c3,.c4{grid-template-columns:1fr}
  .hero h1{font-size:35px}
  .hero{padding:48px 0 40px}
  .sec{padding:46px 0}
  .sec h2{font-size:26px}
  .pub-tete nav a:not(.btn){display:none}
}