/* ============================================================
   PAPREC VAR — Système graphique "carnet dessiné"
   D'après le brief de style fourni.
   ============================================================ */

:root{
  --navy: #1B3661;      /* bleu carnet */
  --green: #6CA62E;     /* vert valorisation */
  --green-paper: #E8F0DA;
  --blue-paper: #E6EBF3;
  --paper: #FBFBF8;
  --ink: #3D5578;
  --ink-soft: #7A8BA6;
  --line-dot: #B9C4D6;
  --white: #FFFFFF;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Nunito Sans', -apple-system, sans-serif;
  font-size:16px;
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
svg{ display:block; }
strong{ color:var(--navy); font-weight:800; }

/* ---------- Typography ---------- */
.title-sketch{
  font-family:'Cabin Sketch', cursive;
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(32px, 4vw, 66px);
  line-height:0.98;
  color:var(--navy);
}
.title-sketch .accent{ color:var(--green); }

.label-hand{
  font-family:'Patrick Hand', cursive;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size:20px;
  color:var(--navy);
}

.note-hand{
  font-family:'Caveat', cursive;
  font-weight:600;
  font-size:28px;
  color:var(--navy);
  transform:rotate(-1deg);
  display:inline-block;
}
.note-hand.green{ color:var(--green); }

h2.section-title{
  font-family:'Cabin Sketch', cursive;
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.05;
  color:var(--navy);
}
h3{ font-family:'Nunito Sans', sans-serif; font-weight:800; color:var(--navy); }
h4{ font-family:'Nunito Sans', sans-serif; font-weight:800; color:var(--navy); font-size:17px; }

.underline-felt{
  width:120px; height:10px;
  background:var(--green);
  border-radius:120px 14px 130px 12px / 12px 120px 14px 130px;
  transform:rotate(-0.8deg);
  margin-top:8px;
}

.sep-dotted{ border-top:2px dotted var(--line-dot); }

/* ---------- Layout ---------- */
.wrap{ max-width:1140px; margin:0 auto; padding:0 28px; }
section{ padding:90px 0; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head p{ color:var(--ink-soft); font-size:16.5px; margin-top:14px; max-width:540px; }

/* ---------- Sketch frame (hand-made effect) ---------- */
.sketch-a{
  border-radius:120px 14px 130px 12px / 12px 120px 14px 130px;
  border:2px solid var(--navy);
  box-shadow:3px 4px 0 rgba(27,54,97,.07);
}
.sketch-b{
  border-radius:14px 130px 12px 120px / 120px 14px 130px 12px;
  border:2px solid var(--navy);
  box-shadow:3px 4px 0 rgba(27,54,97,.07);
}
.sketch-a.tight, .sketch-b.tight{
  border-radius:22px 34px 24px 30px / 30px 22px 34px 24px;
}
.sketch-b.tight{
  border-radius:34px 22px 30px 24px / 24px 34px 22px 30px;
}
.rot-l{ transform:rotate(-0.9deg); }
.rot-r{ transform:rotate(0.9deg); }

/* ---------- Section label (chip) ---------- */
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--navy);
  color:var(--white);
  font-family:'Patrick Hand', cursive;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-size:17px;
  padding:7px 20px 8px 16px;
  border-radius:4px 16px 4px 16px;
  transform:rotate(-1deg);
  margin-bottom:22px;
}
.chip .num{
  background:var(--green);
  color:var(--white);
  width:21px; height:21px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Nunito Sans', sans-serif;
  font-weight:800;
  font-size:11.5px;
  flex-shrink:0;
}

/* ---------- Numbered badge ---------- */
.badge{
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Nunito Sans', sans-serif;
  font-weight:800;
  font-size:16px;
  flex-shrink:0;
}
.badge.b-green{ background:var(--green); color:var(--white); }
.badge.b-navy{ background:var(--navy); color:var(--white); }
.badge.b-outline{ background:var(--white); color:var(--green); border:2px solid var(--green); }

/* ---------- Icon pictogram (simple, single navy line) ---------- */
.pic{ width:52px; height:52px; }
.pic svg{ width:100%; height:100%; fill:none; stroke:var(--navy); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pic.sm{ width:34px; height:34px; }
.pic svg.accent-stroke{ stroke:var(--green); }

/* ---------- Sketch card ---------- */
.card-sketch{
  position:relative;
  background:var(--white);
  padding:30px 26px 26px;
}
.card-sketch .badge{ position:absolute; top:-19px; left:22px; }
.card-sketch h4.card-title{
  font-family:'Patrick Hand', cursive;
  color:var(--green);
  text-transform:uppercase;
  letter-spacing:0.03em;
  font-size:19px;
  margin:14px 0 8px;
}
.card-sketch p{ font-size:14.5px; color:var(--ink); }

/* ---------- Bubble (speech) ---------- */
.bubble{
  position:relative;
  background:var(--white);
  border:2px solid var(--navy);
  border-radius:26px 16px 26px 16px / 16px 26px 16px 26px;
  padding:18px 20px;
}
.bubble::after{
  content:"";
  position:absolute; bottom:-9px; left:36px;
  width:16px; height:16px;
  background:var(--white);
  border-right:2px solid var(--navy);
  border-bottom:2px solid var(--navy);
  transform:rotate(50deg);
}
.bubble.right::after{ left:auto; right:36px; }
.bubble p.note-hand{ font-size:22px; margin-bottom:4px; }
.bubble p.body-sm{ font-family:'Nunito Sans',sans-serif; font-size:14px; color:var(--ink); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 30px;
  border-radius:100px 14px 100px 14px / 14px 100px 14px 100px;
  font-family:'Patrick Hand', cursive;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:17px;
  border:2px solid var(--navy);
  transition:transform .15s ease;
}
.btn-primary{
  background:var(--green); color:var(--white); border-color:var(--navy);
  box-shadow:3px 4px 0 var(--navy);
}
.btn-primary:hover{ transform:translate(-1px,-1px); }
.btn-secondary{
  background:var(--white); color:var(--navy);
  box-shadow:3px 4px 0 rgba(27,54,97,.15);
}
.btn-secondary:hover{ transform:translate(-1px,-1px); }
.btn svg{ width:18px; height:18px; }

/* ---------- Inline link ---------- */
.link-hand{
  font-family:'Caveat', cursive;
  font-weight:700;
  font-size:19px;
  color:var(--navy);
  border-bottom:2px dashed var(--green);
  padding-bottom:1px;
}
.link-hand:hover{ color:var(--green); }

/* ---------- Form field ---------- */
.field{ display:flex; align-items:baseline; gap:14px; padding:14px 0; border-top:2px dotted var(--line-dot); }
.field:first-child{ border-top:none; }
.field label{
  font-family:'Patrick Hand', cursive;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:15px;
  color:var(--navy);
  min-width:110px;
  flex-shrink:0;
}
.field .val{
  font-family:'Caveat', cursive;
  font-size:19px;
  color:var(--ink);
  border-bottom:2px dotted var(--line-dot);
  flex:1;
  padding-bottom:4px;
}
.field a.val:hover{ color:var(--green); }

/* ---------- Checklist ---------- */
.checklist li{ display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-top:2px dotted var(--line-dot); }
.checklist li:first-child{ border-top:none; }
.check-dot{
  width:22px; height:22px; border-radius:50%;
  background:var(--green-paper);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px;
}
.check-dot svg{ width:12px; height:12px; stroke:var(--green); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.checklist strong{ font-size:14.5px; }
.checklist span{ font-size:13.5px; color:var(--ink-soft); display:block; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--green-paper);
  border-radius:40px 120px 40px 120px / 120px 40px 120px 40px;
  padding:56px 40px;
  text-align:center;
}
.cta-banner p.label-hand{ color:var(--green); margin-bottom:10px; }
.cta-banner h3{ font-family:'Patrick Hand',cursive; text-transform:uppercase; letter-spacing:0.03em; font-size:26px; color:var(--navy); }

/* ---------- Header / nav ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,251,248,0.92);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--navy);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:1140px; margin:0 auto; }
.logo{ display:flex; align-items:center; gap:9px; font-family:'Cabin Sketch',cursive; font-weight:700; color:var(--navy); font-size:20px; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
.logo .dot{ width:12px; height:12px; border-radius:50%; background:var(--green); }
.nav-links{ display:flex; gap:2px; font-family:'Patrick Hand',cursive; text-transform:uppercase; letter-spacing:0.02em; font-size:14.5px; }
.nav-links a{ padding:8px 11px; border-radius:100px; color:var(--navy); opacity:0.72; white-space:nowrap; }
.nav-links a:hover{ opacity:1; background:var(--blue-paper); }
.nav-links a.active{ opacity:1; background:var(--navy); color:var(--white); }
@media (max-width:1080px){ .nav-links{ display:none; } }

/* ---------- Footer ---------- */
footer{ background:var(--navy); padding:60px 0 30px; margin-top:0; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-logo{ display:flex; align-items:center; gap:10px; font-family:'Cabin Sketch',cursive; font-weight:700; color:var(--white); font-size:22px; text-transform:uppercase; margin-bottom:14px; }
.footer-logo .dot{ width:11px; height:11px; border-radius:50%; background:var(--green); }
.footer-grid p{ color:rgba(255,255,255,0.6); font-size:14px; max-width:280px; }
.footer-col h5{ font-family:'Patrick Hand',cursive; text-transform:uppercase; letter-spacing:0.05em; font-size:15px; color:#B7CDE8; margin-bottom:14px; }
.footer-col a, .footer-col span{ display:block; font-size:14px; color:rgba(255,255,255,0.68); margin-bottom:9px; }
.footer-col a:hover{ color:var(--green); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; border-top:1px solid rgba(255,255,255,0.15); font-size:13px; color:rgba(255,255,255,0.55); flex-wrap:wrap; gap:10px; }
.footer-signature{ font-family:'Caveat',cursive; font-weight:700; font-size:20px; color:#B7E06B; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- reveal ---------- */
/* Reveal : visible par défaut, animé quand JS ajoute la classe */
.reveal{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease; }
html.js .reveal.below-fold{ opacity:0; transform:translateY(16px); }
html.js .reveal.below-fold.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }

/* ============================================================
   ILLUSTRATIONS (dessins au trait bleu marine)
   ============================================================ */
.illu{ width:100%; display:block; }
.illu-box{
  background:var(--white);
  border:2px solid var(--navy);
  border-radius:34px 22px 30px 24px / 24px 34px 22px 30px;
  overflow:hidden;
  box-shadow:3px 4px 0 rgba(27,54,97,.07);
}
.illu-box.alt{ border-radius:22px 34px 24px 30px / 30px 22px 34px 24px; }
.illu-plain{ background:transparent; border:none; box-shadow:none; }
.illu-soft{
  background:var(--blue-paper);
  border-radius:40px 120px 40px 120px / 120px 40px 120px 40px;
  padding:22px;
}
.illu-soft.green{ background:var(--green-paper); }
.illu-round{ border-radius:50%; overflow:hidden; border:2px solid var(--navy); }

/* Card with illustration on top */
.card-illu{
  background:var(--white);
  border:2px solid var(--navy);
  border-radius:34px 22px 30px 24px / 24px 34px 22px 30px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:3px 4px 0 rgba(27,54,97,.07);
}
.card-illu.alt{ border-radius:22px 34px 24px 30px / 30px 22px 34px 24px; }
.card-illu .ci-img{ background:var(--white); border-bottom:2px solid var(--navy); }
.card-illu .ci-img img{ width:100%; display:block; }
.card-illu .ci-body{ padding:22px 24px 24px; flex:1; display:flex; flex-direction:column; }
.card-illu .ci-tag{
  font-family:'Patrick Hand',cursive; text-transform:uppercase; letter-spacing:0.04em;
  font-size:13.5px; color:var(--green); margin-bottom:6px;
}
.card-illu h4{ font-size:17.5px; margin-bottom:8px; }
.card-illu p{ font-size:14.5px; color:var(--ink); }
.card-illu .ci-foot{ margin-top:auto; padding-top:16px; }

/* Grids */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:980px){ .grid-4{ grid-template-columns:1fr 1fr; } .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .grid-2{ grid-template-columns:1fr; } .grid-3{ grid-template-columns:1fr; } }
@media (max-width:560px){ .grid-4{ grid-template-columns:1fr; } }

/* Split: text + illustration */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.split.wide-left{ grid-template-columns:1.15fr 0.85fr; }
.split.wide-right{ grid-template-columns:0.85fr 1.15fr; }
@media (max-width:900px){ .split, .split.wide-left, .split.wide-right{ grid-template-columns:1fr; gap:36px; } }

/* Stat boxes */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:760px){ .stat-row{ grid-template-columns:1fr 1fr; } }
.stat-box{ text-align:center; border:2px dotted var(--line-dot); border-radius:24px; padding:22px 14px; }
.stat-box strong{ display:block; font-family:'Cabin Sketch',cursive; font-size:32px; color:var(--navy); line-height:1.1; }
.stat-box span{ font-size:12.5px; color:var(--ink-soft); }

/* Table-ish spec list (bennes) */
.spec-list{ margin-top:14px; }
.spec-list li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:2px dotted var(--line-dot); font-size:14px; }
.spec-list li:first-child{ border-top:none; }
.spec-list li span:first-child{ color:var(--ink-soft); }
.spec-list li span:last-child{ color:var(--navy); font-weight:700; text-align:right; }

/* Sector hero band */
.sector-hero{ padding:56px 0 20px; }
.sector-hero .wrap{ max-width:1000px; }

/* Breadcrumb-ish note */
.page-note{ font-family:'Caveat',cursive; font-size:20px; color:var(--ink-soft); }

/* Timeline / process vertical */
.timeline{ position:relative; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:11px; top:8px; bottom:8px; border-left:2px dotted var(--line-dot); }
.timeline-item{ position:relative; padding-bottom:28px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item .tl-dot{
  position:absolute; left:-34px; top:2px;
  width:24px; height:24px; border-radius:50%;
  background:var(--green); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:'Nunito Sans',sans-serif; font-weight:800; font-size:12px;
  border:2px solid var(--paper);
}
.timeline-item h4{ font-size:16px; margin-bottom:5px; }
.timeline-item p{ font-size:14px; color:var(--ink-soft); }

/* Quote / testimonial-ish band */
.quote-band{
  background:var(--green-paper);
  border-radius:40px 120px 40px 120px / 120px 40px 120px 40px;
  padding:44px 40px; text-align:center;
}
.quote-band .note-hand{ font-size:30px; }

/* Mobile nav toggle */
.burger{ display:none; background:none; border:2px solid var(--navy); border-radius:10px; padding:7px 9px; }
.burger svg{ width:20px; height:20px; stroke:var(--navy); stroke-width:2.2; fill:none; }
@media (max-width:1080px){
  .burger{ display:block; }
  .nav-cta-desktop{ display:none; }
  .nav-links.open{
    display:flex; flex-direction:column; gap:2px;
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:2px solid var(--navy);
    padding:14px 28px 20px;
  }
  .nav-links.open a{ padding:11px 14px; }
}
header{ position:sticky; }
.nav{ position:relative; }

.footer-illu{ margin-top:18px; max-width:150px; border-radius:16px; overflow:hidden; opacity:0.92; }
.footer-illu img{ width:100%; display:block; }

/* ============================================================
   RESPONSIVE — grilles inline génériques
   ============================================================ */

/* Grille 3 colonnes inline → 1 colonne sur mobile */
@media (max-width:760px){
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* Grille 6 cols (bénéfices) → 2 cols sur mobile */
@media (max-width:760px){
  [style*="grid-template-columns:repeat(6,"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Grille 4 bénéfices → 2 cols */
@media (max-width:760px){
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Grille 5 étapes parcours → 2+3 cols */
@media (max-width:860px){
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width:560px){
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* Sites compact : grille 2 cols (thumbnail + texte) → stack */
@media (max-width:560px){
  [style*="grid-template-columns:130px 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* "Ce que vous y gagnez" — 3 colonnes navy → 1 col */
@media (max-width:760px){
  [style*="background:var(--navy)"] [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}