/* PunchNote — charte du site.
   Grammaire reprise de PunchLink : page claire, titres marine, accent cyan #00B4E6,
   surtitres en petites capitales espacées, tableaux à deux colonnes.
   Une seule exception assumée : le bandeau d'en-tête est sombre, parce que le logo
   PunchNote n'existe qu'en version fond nuit, sans transparence — constaté dans
   marque/LISEZ-MOI.txt. Poser ce logo sur du blanc l'abîmerait. */

:root{
  --marine:#0B2942;
  --marine-fonce:#02050A;
  --accent:#00B4E6;
  --accent-fonce:#0089B3;
  --texte:#16202A;
  --doux:#5A6B78;
  --pale:#8A98A3;
  --fond:#FFFFFF;
  --fond-tinte:#F4FAFD;
  --trait:#E2EAEF;
  --vert:#0E7A5F;
  --rouge:#B3261E;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fond); color:var(--texte);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--accent-fonce)}
.enveloppe{max-width:var(--max); margin:0 auto; padding-inline:22px}

/* ---- en-tête sombre ---- */
.entete{background:var(--marine-fonce); position:sticky; top:0; z-index:20}
.barre{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:10px}
.marque{display:block; flex-shrink:0}
.marque img{height:62px; width:auto; border-radius:5px}
.nav{display:flex; gap:22px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.nav a{color:#C7D6E0; text-decoration:none; font-size:15px}
.nav a:hover{color:#fff}
.nav a.cta{
  background:var(--accent); color:#04222B; font-weight:700;
  padding:9px 16px; border-radius:8px;
}
.nav a.cta:hover{color:#04222B; filter:brightness(1.08)}
@media(max-width:860px){ .nav .masquable{display:none} .marque img{height:46px} }

/* ---- blocs ---- */
.surtitre{
  color:var(--accent-fonce); font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px;
}
.surtitre::before{content:"— "; color:var(--accent)}
h1{font-size:clamp(32px,5vw,52px); line-height:1.08; margin:0 0 20px; color:var(--marine); letter-spacing:-.02em; font-weight:800}
h1 .bleu{color:var(--accent-fonce)}
h2{font-size:clamp(25px,3.4vw,36px); line-height:1.15; margin:0 0 14px; color:var(--marine); letter-spacing:-.015em; font-weight:800}
h3{font-size:19px; margin:0 0 8px; color:var(--marine); font-weight:700}
.chapo{color:var(--doux); margin:0 0 34px; max-width:64ch; font-size:17.5px}

section{padding-block:60px; border-top:1px solid var(--trait)}
section.tinte{background:var(--fond-tinte)}

.bouton{
  display:inline-block; background:var(--accent); color:#04222B; border:0; border-radius:9px;
  padding:15px 26px; font-size:17px; font-weight:700; text-decoration:none; cursor:pointer; text-align:center;
  font-family:inherit;
}
.bouton:hover{filter:brightness(1.07); color:#04222B}
.bouton.second{background:#fff; color:var(--marine); border:1px solid var(--trait); font-weight:600}

/* ---- héros ---- */
.heros{padding-block:64px 52px}
.heros-grille{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start}
@media(max-width:900px){ .heros-grille{grid-template-columns:1fr; gap:32px} }
.accroche{font-size:19px; color:var(--doux); margin:0 0 28px; max-width:46ch}
.actions{display:flex; flex-wrap:wrap; gap:12px}
.gages{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:8px}
.gages li{font-size:15px; color:var(--doux); padding-left:24px; position:relative}
.gages li::before{content:"✓"; position:absolute; left:0; color:var(--vert); font-weight:700}

/* ---- preuves ---- */
.preuves{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--trait); border:1px solid var(--trait); border-radius:14px; overflow:hidden; margin-top:44px}
.preuve{background:#fff; padding:22px}
.preuve b{display:block; font-size:28px; color:var(--marine); font-variant-numeric:tabular-nums; margin-bottom:4px; letter-spacing:-.02em}
.preuve span{font-size:14.5px; color:var(--doux); line-height:1.55}

/* ---- tableau « ce que vous vivez » ---- */
.duo{width:100%; border-collapse:collapse; font-size:16px}
.duo th{text-align:left; color:var(--pale); font-size:12px; text-transform:uppercase; letter-spacing:.09em; font-weight:700; padding:0 16px 10px 0; border-bottom:1px solid var(--trait)}
.duo td{padding:15px 16px 15px 0; border-bottom:1px solid var(--trait); vertical-align:top; line-height:1.5}
.duo td.avant{color:var(--doux); width:46%}
.duo td.apres{color:var(--marine); font-weight:600}

/* ---- cartes ---- */
.grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px}
.carte{background:#fff; border:1px solid var(--trait); border-radius:14px; padding:24px}
.carte p{margin:0; color:var(--doux); font-size:15.5px; line-height:1.6}
.carte .etiquette{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-fonce); background:#E6F6FC; padding:4px 9px; border-radius:999px; margin-bottom:12px}

/* ---- étapes ---- */
.etapes{counter-reset:pas; display:grid; gap:14px; margin:0; padding:0; list-style:none}
.etapes li{background:#fff; border:1px solid var(--trait); border-radius:12px; padding:20px 22px 20px 64px; position:relative}
.etapes li::before{
  counter-increment:pas; content:counter(pas,decimal-leading-zero);
  position:absolute; left:20px; top:19px; color:var(--accent); font-weight:800; font-size:16px; font-variant-numeric:tabular-nums;
}
.etapes strong{display:block; margin-bottom:3px; color:var(--marine)}
.etapes span{color:var(--doux); font-size:15.5px}

/* ---- exemple ---- */
.exemple{background:#fff; border:1px solid var(--trait); border-radius:14px; padding:24px; box-shadow:0 1px 3px rgba(11,41,66,.06)}
.exemple table{width:100%; border-collapse:collapse; font-size:15.5px}
.exemple th{text-align:left; color:var(--pale); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; padding:0 12px 9px 0; font-weight:700}
.exemple td{padding:11px 12px 11px 0; border-top:1px solid var(--trait); vertical-align:top}
.exemple td.qui{color:var(--doux); white-space:nowrap}
.fanion{display:inline-block; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px}
.fanion.ferme{background:#E6F4EF; color:var(--vert)}
.fanion.flou{background:#FDECEA; color:var(--rouge)}
.legende{color:var(--pale); font-size:13.5px; margin-top:14px}
.rouleau{overflow-x:auto}

/* ---- listes ---- */
.liste-nue{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.liste-nue li{padding-left:28px; position:relative; color:var(--doux); font-size:16.5px; line-height:1.6}
.liste-nue li::before{content:"■"; position:absolute; left:0; color:var(--accent); font-size:11px; top:6px}
.liste-nue b{color:var(--marine); font-weight:700}

/* ---- FAQ ---- */
.faq details{background:#fff; border:1px solid var(--trait); border-radius:12px; padding:18px 22px; margin-bottom:10px}
.faq summary{cursor:pointer; font-weight:700; font-size:17px; color:var(--marine); list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--accent); font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--doux); margin:12px 0 0; font-size:15.5px; line-height:1.6}

/* ---- formulaire ---- */
.demande{background:#fff; border:1px solid var(--trait); border-radius:16px; padding:28px; box-shadow:0 1px 3px rgba(11,41,66,.06)}
.demande label{display:block; color:var(--doux); font-size:13.5px; font-weight:600; margin:14px 0 5px}
.demande input,.demande textarea{
  width:100%; background:#fff; color:var(--texte); border:1px solid var(--trait);
  border-radius:9px; padding:13px 14px; font-size:16px; font-family:inherit;
}
.demande input:focus,.demande textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.demande textarea{min-height:92px; resize:vertical}
.demande .bouton{width:100%; margin-top:20px}
.pot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.retour{margin-top:16px; font-size:15.5px; line-height:1.6}
.retour.ok{color:var(--vert); font-weight:600}
.retour.ko{color:var(--rouge); font-weight:600}

/* ---- pied ---- */
.pied{background:var(--marine-fonce); color:#8FA3B2; padding-block:40px 44px; font-size:14.5px; line-height:1.7}
.pied a{color:#C7D6E0; text-decoration:none}
.pied a:hover{color:#fff; text-decoration:underline}
.pied-grille{display:grid; grid-template-columns:190px 1fr; gap:28px 48px; align-items:start}
@media(max-width:700px){ .pied-grille{grid-template-columns:1fr} }
.pied-liens{display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:16px}
.pied-bas{border-top:1px solid #16222C; margin-top:24px; padding-top:18px; font-size:13.5px; color:#6C808E}
.pied img{width:190px; height:auto; border-radius:6px}

/* ---- pages de texte (mentions, RGPD, confidentialité) ---- */
.texte{max-width:780px; padding-block:56px 80px}
.texte h1{font-size:clamp(28px,4vw,40px); margin-bottom:8px}
.texte .date{color:var(--pale); font-size:14.5px; margin:0 0 36px}
.texte h2{font-size:22px; margin:40px 0 12px; padding-top:28px; border-top:1px solid var(--trait)}
.texte h2:first-of-type{border-top:0; padding-top:0}
.texte p,.texte li{color:var(--texte); font-size:16.5px}
.texte ul{padding-left:22px}
.texte table{width:100%; border-collapse:collapse; font-size:15.5px; margin:18px 0}
.texte th{text-align:left; color:var(--pale); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; padding:0 12px 9px 0; font-weight:700}
.texte td{padding:11px 12px; border-top:1px solid var(--trait); vertical-align:top}
.encadre{background:var(--fond-tinte); border:1px solid var(--trait); border-left:3px solid var(--accent); border-radius:10px; padding:18px 20px; margin:22px 0}
.encadre p{margin:0 0 10px}
.encadre p:last-child{margin:0}
code{background:var(--fond-tinte); padding:1px 6px; border-radius:4px; font-size:14.5px}

/* ---- lot marketing 03/10/2026 : tarifs, cases, liens d'usage ---- */
.grille-offres{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.offre .prix{margin:4px 0 14px; color:var(--marine)}
.offre .prix b{font-size:32px; font-weight:800; letter-spacing:-.02em}
.offre .prix span{color:var(--doux); font-size:14.5px}
.offre .liste-nue li{font-size:15px}
.demande .case{display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:15px; color:var(--doux); margin:6px 0 16px}
.demande .case input{width:auto; margin-top:4px; flex-shrink:0}
.liens-usages a{margin-right:4px}
/* correctif : sur téléphone la grille du héros débordait (473 px pour 390 px d'écran), constaté sur le site en ligne */
.heros-grille > *{min-width:0}
.heros h1{overflow-wrap:break-word}