/* enveloppe de l’artefact (portée telle quelle) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* polices */
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/site-parenow/fonts/archivo-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/site-parenow/fonts/archivo-100-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/site-parenow/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/site-parenow/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/site-parenow/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/site-parenow/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/site-parenow/fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/site-parenow/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/site-parenow/fonts/playfair-display-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/site-parenow/fonts/playfair-display-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* prototype */

/* ============ Jetons : univers papier, un seul thème clair assumé ============ */
:root{
  color-scheme:light;
  --paper:#f3ecdd; --slip:#faf6ec; --ink:#1b1a16; --ink2:#2b2823;
  --forest:#173901; --terra:#9c440b; --terra-d:#7f3508; --sage:#c4efa3;
  --margin:#b23a0a; --crayon:#b23a0a; --err:#8a2415;
  /* comité 2 : un jeton, un rôle */
  --pousse:#2e6b0f; --perte:#b23a0a; --sage-vif:#a8e07e; --stabilo:#f6d365; --stylo:#1f5fae;
  --ciel:#cfe3f7; --peche:#f8c9a8; --menthe:#cdeadb; --lavande:#ddd6f0;
  --prusse-vif:#2a5a94; --ocre-vif:#e0a526;
  /* scène bouche-à-oreille (piste E) */
  --prusse:#1f3a5f; --corail:#e0603f; --rose:#f6a9bb; --violet:#6b4fb3; --ocre-scene:#c9962e;
  --rule:rgba(27,26,22,.45);
  --cover:#173901; --ribbon:#9c440b;
  --swatch-foret:#173901; --swatch-bleu:#1d4ed8; --swatch-bordeaux:#8a1c3b; --swatch-ocre:#e0a526; --swatch-ardoise:#334155;
  --sans:"Archivo","Arial Narrow",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;background-color:var(--paper);
  background-image:linear-gradient(rgba(27,26,22,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(27,26,22,.035) 1px,transparent 1px);
  background-size:8px 8px;color:var(--ink);font-family:var(--sans);font-size:17px;font-weight:500;line-height:1.45;overflow-x:hidden}
[hidden]{display:none !important}
a{color:var(--ink)}
p{margin:0}
h1,h2,h3{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
input[type=radio].vh{position:absolute;opacity:0;width:1px;height:1px;margin:0}

/* ============ Cadre ============ */
.proto-band{margin:0;padding:4px 16px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:16px;text-align:center}
.c-spiral{height:24px;background-color:var(--cover);background-image:radial-gradient(circle at 14px 12px,var(--ink) 0 4.5px,var(--paper) 5px 6.5px,transparent 7px);background-size:28px 24px;background-repeat:repeat-x;border-bottom:1.5px dashed rgba(27,26,22,.4)}
.sheet{position:relative;max-width:1240px;margin:0 auto;padding:0 16px}
@media (min-width:900px){
  .sheet{padding-left:104px;padding-right:40px}
  .sheet::before{content:"";position:absolute;top:0;bottom:0;left:68px;width:2px;background:var(--margin);opacity:.6;pointer-events:none}
}
.g12{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.g12>*{min-width:0}
@media (min-width:1000px){.g12{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}}

/* ============ En-tête ============ */
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 8px;border-bottom:1.5px solid var(--ink)}
.brand{display:block;line-height:0;flex:0 0 auto}
.brand svg{height:32px;width:auto}
.nav{display:flex;align-items:center;gap:14px;font-stretch:75%;font-weight:600;font-size:17px}
.nav a,.nav button{color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;background:none;border:0;padding:4px 0;font:inherit;cursor:pointer;white-space:nowrap}
.nav .extra{display:none}
.nav .ref{display:none;font-family:var(--mono);font-size:16px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;font-stretch:100%}
@media (min-width:700px){.nav{gap:22px}.brand svg{height:36px}}
@media (min-width:1000px){.nav .extra{display:inline}.nav .ref{display:inline}}

/* ============ Titres communs ============ */
.pg{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px;padding-top:8px;border-top:1.5px solid var(--ink);font-family:var(--mono);font-size:16px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.pg b{font-weight:600;color:var(--ink)}
.pg.red b{color:var(--crayon)}
.h2{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(32px,6.4vw,58px);line-height:.95;letter-spacing:-.005em;overflow-wrap:break-word}
.h2 b{font-weight:800;color:var(--forest)}
.lead{font-size:19px;line-height:1.45;max-width:36em}
.sec{padding:48px 0 0}
@media (min-width:1000px){.sec{padding-top:80px}}

/* ============ Hero ============ */
.hero{padding-top:14px;row-gap:14px}
@media (min-width:1000px){
  .hero{padding-top:40px;row-gap:0}
  .hero{grid-template-rows:auto auto auto 1fr}
  .h-intro{grid-column:1/7;grid-row:1}
  .h-sub{grid-column:1/7;grid-row:2;align-self:start;padding-top:22px}
  .bord{grid-column:7/13;grid-row:1/5}
}
.sur{margin:0 0 12px;font-weight:700;font-stretch:75%;text-transform:uppercase;letter-spacing:.04em;font-size:17px}
.mark{position:relative;display:inline-block;white-space:nowrap}
.mark svg.u{position:absolute;left:-2px;bottom:-7px;width:calc(100% + 2px);height:10px;overflow:visible}
.mark svg.u path{stroke-dasharray:100;stroke-dashoffset:0}
.is-on .mark svg.u path{animation:draw .6s ease-out .15s both}
@keyframes draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.toggle{display:flex;margin:0 0 14px;border:1.5px solid var(--ink);width:max-content;max-width:100%;background:var(--slip)}
.toggle label{display:flex;align-items:center;min-height:44px;white-space:nowrap;padding:8px 14px;font-weight:700;font-stretch:75%;text-transform:uppercase;letter-spacing:.04em;font-size:17px;cursor:pointer;color:var(--ink)}
.toggle label+input+label{border-left:1.5px solid var(--ink)}
.toggle input:checked+label{background:var(--ink);color:var(--paper)}
.toggle input:focus-visible+label{outline:3px solid var(--forest);outline-offset:2px}
.h1{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(34px,9vw,80px);line-height:.94;letter-spacing:-.005em;overflow-wrap:break-word}
.h1 b{font-weight:800;color:var(--forest)}
.h-sub p{font-size:19px;max-width:30em}
.h-sub p+p{margin-top:10px}

/* Bordereau */
.bord{background:var(--slip);border:1.5px solid var(--ink);position:relative;display:flex;flex-direction:column;align-self:start}
.b-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 12px;border-bottom:1.5px solid var(--ink);font-size:16px;text-transform:uppercase;letter-spacing:.05em;min-height:42px}
.stamp{display:inline-block;padding:3px 8px;border:3px double var(--forest);color:var(--forest);font-family:var(--mono);font-weight:600;font-size:16px;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-5deg);white-space:nowrap;background:transparent}
.stamp.print{animation:stamp .42s cubic-bezier(.2,.9,.3,1.2)}
@keyframes stamp{0%{transform:scale(1.15) rotate(-1deg);opacity:.35}60%{transform:scale(.98) rotate(-5.5deg);opacity:1}100%{transform:scale(1) rotate(-5deg);opacity:1}}
.b-res{padding:12px 12px 14px;border-bottom:1.5px dashed var(--ink)}
.cote{display:flex;align-items:center;gap:6px}
.cote .l{flex:1;height:0;border-top:1.5px solid var(--ink)}
.cote svg{flex:0 0 auto}
.big{margin:0;font-family:var(--mono);font-weight:600;font-size:clamp(40px,11vw,64px);line-height:1.1;white-space:nowrap;color:var(--ink)}
.big.terra{color:var(--terra-d)}
.b-lbl{margin:2px 0 10px;text-align:center;color:var(--ink);font-size:17px;font-stretch:75%;font-weight:600}
.offre{margin:0;font-size:18px;line-height:1.4}
.offre strong{font-family:var(--mono);font-weight:600;color:var(--terra-d);font-size:19px}
.offre mark{background:var(--sage);color:var(--ink);padding:0 3px}
.b-ctl{padding:12px 12px 6px;border-bottom:1.5px dashed var(--ink)}
.field{margin-bottom:8px}
.fh{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fh label,.fh .lbl{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:17px}
.fh output{font-family:var(--mono);font-weight:600;font-size:17px}
.scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:16px;color:var(--ink)}
.capn{margin:2px 0 0;font-size:16px;color:var(--ink);font-stretch:75%;font-weight:500}
.chips{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--ink);margin-top:6px}
.chips button{font:inherit;padding:8px 6px;background:var(--slip);color:var(--ink);border:0;cursor:pointer;text-align:left;line-height:1.25}
.chips button+button{border-left:1.5px solid var(--ink)}
.chips button b{display:block;font-stretch:75%;text-transform:uppercase;font-size:17px}
.chips button span{font-family:var(--mono);font-size:16px}
.chips button[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.chips button:focus-visible{outline:3px solid var(--forest);outline-offset:2px;position:relative}
.b-cta{padding:12px 12px 14px}
.q{margin:0 0 10px;font-weight:700;font-size:18px;line-height:1.3}
.btn{display:block;width:100%;padding:15px 16px;font:inherit;font-weight:800;font-stretch:75%;text-transform:uppercase;letter-spacing:.03em;font-size:21px;line-height:1.15;color:var(--paper);background:var(--forest);border:1.5px solid var(--ink);border-radius:1px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;text-align:center;text-decoration:none}
.btn.parrain{background:var(--terra-d)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.btn.auto{display:inline-block;width:auto}
.btn2{display:inline-block;font:inherit;font-weight:700;font-stretch:75%;text-transform:uppercase;letter-spacing:.03em;font-size:18px;padding:11px 14px;background:var(--slip);color:var(--ink);border:1.5px solid var(--ink);border-radius:1px;cursor:pointer;text-decoration:none}
.btn2:active{transform:translate(1px,1px)}
.mention{margin:10px 0 0;text-align:center;font-family:var(--mono);font-weight:500;font-size:17px;color:var(--ink)}
.proto-note{margin:6px 0 0;font-family:var(--mono);font-size:16px;color:var(--ink);min-height:0}
.proto-note:empty{display:none}.ulink{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
/* Curseurs */
.rw{position:relative;padding-top:4px}
.rng{-webkit-appearance:none;appearance:none;display:block;width:100%;height:40px;margin:0;background:transparent;cursor:pointer;
  --fill:50%;--cap:100%;
  --trk-h:12px;--trk-bw:1.5px;--th-w:20px;--th-h:30px;
  --trk-bg:linear-gradient(var(--ink),var(--ink)) 0 0/var(--fill) 100% no-repeat,
           repeating-linear-gradient(45deg,rgba(27,26,22,.55) 0 2px,transparent 2px 7px) right 0/calc(100% - var(--cap)) 100% no-repeat,
           var(--paper)}
.rng::-webkit-slider-runnable-track{height:var(--trk-h);background:var(--trk-bg);border:1.5px solid var(--ink);border-radius:0}
.rng::-moz-range-track{height:var(--trk-h);background:var(--trk-bg);border:1.5px solid var(--ink);border-radius:0}
.rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--th-w);height:var(--th-h);margin-top:calc((var(--trk-h) - var(--th-h)) / 2 - var(--trk-bw));background:var(--forest);border:1.5px solid var(--ink);border-radius:1px;box-shadow:2px 2px 0 var(--ink)}
.rng::-moz-range-thumb{width:var(--th-w);height:var(--th-h);background:var(--forest);border:1.5px solid var(--ink);border-radius:1px;box-shadow:2px 2px 0 var(--ink);box-sizing:border-box}
.rng.red::-webkit-slider-thumb{background:var(--crayon)}
.rng.red::-moz-range-thumb{background:var(--crayon)}
.rng:focus-visible{outline:3px solid var(--forest);outline-offset:4px}
@keyframes bump{0%{transform:scaleY(1.4)}100%{transform:scaleY(1)}}
/* Compteur mécanique */
.odo-v{display:inline-flex;white-space:nowrap}
.odo-d{display:inline-block;height:1.1em;line-height:1.1em;overflow:hidden;vertical-align:bottom}
.odo-s{display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.3,1.35,.5,1)}
.odo-s>span{display:block;height:1.1em;line-height:1.1em;text-align:center}
.odo-c{display:inline-block;line-height:1.1em;white-space:pre}

/* bordereau simplifié */
#hero-titre,#wl-titre{font-size:clamp(28px,5.2vw,52px);line-height:.96}
#simulateur .b-res,#wl-simulateur .b-res{padding:14px 14px 4px;border-bottom:0}
#simulateur .b-lbl,#wl-simulateur .b-lbl{margin:2px 0 4px}
#simulateur .b-ctl,#wl-simulateur .b-ctl{padding:10px 14px 12px;border-top:1.5px dashed var(--ink);border-bottom:1.5px dashed var(--ink)}
#simulateur .fh label,#wl-simulateur .fh label{font-size:19px;font-weight:700;font-stretch:75%;text-transform:uppercase;letter-spacing:.03em}
.seul{margin:6px 0 0;font-size:18px;font-weight:600}
.seul mark{background:var(--sage);color:var(--ink);padding:1px 4px}
#ctl-parrain .chips{margin-top:0}
#simulateur .b-cta,#wl-simulateur .b-cta{padding:14px}
@media (max-width:699px){
  .scale{display:none}
  .rng{height:36px}
  .h1{font-size:34px}
  #hero-titre,#wl-titre{font-size:27px}
  .sur{margin-bottom:10px}
  .toggle{margin-bottom:12px}
  .hero{padding-top:12px}
  .big{font-size:44px}
  .b-lbl{margin-bottom:6px}
  .b-res{padding:10px 12px 12px}
  .offre{font-size:17px}.offre strong{font-size:18px}
  .q{font-size:17px;margin-bottom:8px}
  .btn{font-size:19px;padding:13px 12px}
  .b-cta{padding:10px 12px 10px}
  .mention{margin-top:6px}
}

/* ============ Bandeau de confiance ============ */
.trust{margin:32px 0 0;padding:0;list-style:none;border-top:1.5px solid var(--ink)}
.trust li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:10px 0;border-bottom:1.5px dashed var(--rule);font-size:17px}
.trust .ref{font-family:var(--mono);font-size:16px;color:var(--ink2);padding-top:1px}
@media (min-width:1000px){.trust{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}.trust li{grid-template-columns:1fr;gap:4px;padding:12px 14px;border-bottom:0}.trust li+li{border-left:1.5px dashed var(--rule)}.trust li:first-child{padding-left:0}}

.label{margin-top:14px;font-size:19px;font-style:italic;max-width:32em}
.calc{background:var(--slip);border:1.5px solid var(--ink);position:relative;box-shadow:4px 4px 0 var(--ink)}
.calc .b-h{color:var(--ink)}
.calc .b-h .red{color:var(--crayon);font-weight:600}
.calc-in{padding:14px 12px 6px}
.calc-link{margin:2px 0 14px;font-size:17px}
.calc-link b{font-family:var(--mono)}
.loss{padding:6px 12px 14px;border-top:1.5px dashed var(--ink)}
.loss .big{position:relative;display:inline-block}
.loss .crayon{position:absolute;left:-6%;top:44%;width:112%;height:24px;overflow:visible;pointer-events:none}
.loss .crayon path{stroke-dasharray:100;stroke-dashoffset:0}
.loss .crayon.draw path{animation:draw .55s ease-out both}
.loss-lbl{margin:4px 0 8px;text-align:center;font-weight:700;font-stretch:75%;font-size:19px;line-height:1.25}
.loss-calc{margin:0;text-align:center;font-family:var(--mono);font-size:16px;color:var(--ink)}
.loss-gain{margin:12px 0 0;padding-top:10px;border-top:1.5px dashed var(--rule);font-size:18px}
.loss-gain strong{font-family:var(--mono);color:var(--terra-d)}
.calc .b-cta{border-top:1.5px dashed var(--ink)}

/* ============ Démo 3 temps ============ */
@media (min-width:1000px){.d-phone{grid-column:1/6}.d-steps{grid-column:6/13;align-self:center}}
.phone-wrap{position:relative;max-width:330px;margin:0 auto;padding-right:40px}
.phone{position:relative;background:var(--slip);border:2px solid var(--ink);border-radius:34px;padding:34px 14px 22px;box-shadow:5px 5px 0 var(--ink)}
.phone::before{content:"";position:absolute;top:12px;left:50%;width:64px;height:8px;margin-left:-32px;border:1.5px solid var(--ink);border-radius:5px}
.phone-screen{position:relative;height:520px;overflow:hidden;border:1.5px solid var(--ink);background:var(--paper);background-image:linear-gradient(rgba(27,26,22,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(27,26,22,.035) 1px,transparent 1px);background-size:8px 8px}
.phone-cote{position:absolute;right:0;top:0;bottom:0;width:30px;display:flex;flex-direction:column;align-items:center}
.phone-cote .v{flex:1;width:0;border-left:1.5px solid var(--ink)}
.phone-cote span{writing-mode:vertical-rl;font-family:var(--mono);font-size:16px;padding:6px 0;color:var(--ink)}
.scr{position:absolute;inset:0;padding:16px 14px;display:flex;flex-direction:column;gap:12px}
.scr-who{font-family:var(--mono);font-size:16px;color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.scr-title{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:24px;line-height:1}
.f-lbl{font-size:16px;font-weight:600;margin-bottom:3px}
.f-box{min-height:40px;padding:8px 10px;border:1.5px solid var(--ink);background:var(--slip);font-size:17px}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--ink);vertical-align:-2px;margin-left:1px}
.f-btn{padding:10px;text-align:center;background:var(--forest);color:var(--paper);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:18px;border:1.5px solid var(--ink)}
.p-toast{padding:8px 10px;border:1.5px solid var(--ink);background:var(--sage);color:var(--ink);font-size:16px;font-weight:600}
.notif{position:absolute;left:10px;right:10px;top:10px;z-index:2;display:flex;gap:10px;align-items:center;padding:10px;background:var(--ink);color:var(--paper);font-size:16px;line-height:1.25;border:1.5px solid var(--ink)}
.notif b{color:var(--sage)}
.fiche{border:1.5px solid var(--ink);background:var(--slip);padding:12px;position:relative}
.fiche h4{margin:0;font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:22px}
.fiche .m{font-size:16px;color:var(--ink)}
.frise{margin-top:12px}
.frise .bar{height:8px;border:1.5px solid var(--ink);background:var(--paper)}
.frise .bar i{display:block;height:100%;width:0;background:var(--forest)}
.frise .lb{display:grid;grid-template-columns:repeat(4,1fr);margin-top:6px;font-size:16px;font-stretch:75%;font-weight:600;color:var(--ink)}
.frise .lb span.on{color:var(--ink)}
.fiche .stamp{position:absolute;right:10px;top:10px;font-size:18px}
.reward{border:1.5px solid var(--ink);background:var(--slip);padding:14px 12px}
.reward .k{font-family:var(--mono);font-size:16px;text-transform:uppercase;color:var(--ink)}
.reward .amt{font-family:var(--mono);font-weight:600;font-size:44px;color:var(--terra-d);line-height:1.1}
.reward p{font-size:16px}
.scr-end{font-size:16px;text-align:center}
.steps{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.steps li{border-bottom:1.5px dashed var(--rule)}
.step{display:grid;grid-template-columns:88px 1fr;gap:10px;width:100%;text-align:left;font:inherit;color:var(--ink);background:none;border:0;padding:14px 0;cursor:pointer}
.step .n{font-family:var(--mono);font-size:16px;color:var(--ink2);padding-top:4px;white-space:nowrap}
.step h3{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:26px;line-height:1}
.step p{margin-top:4px;font-size:18px}
.step[aria-current="step"] .n{color:var(--paper);background:var(--ink);align-self:start;padding:2px 6px;justify-self:start}
.step[aria-current="step"] h3{color:var(--forest)}
.demo-ctrl{display:flex;align-items:center;gap:14px;margin-top:16px}
.progress{flex:1;height:10px;border:1.5px solid var(--ink);background:var(--slip)}
.progress i{display:block;height:100%;width:0;background:var(--ink)}

/* ============ Objections ============ */

.notes{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.notes>li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:16px 0;border-bottom:1.5px dashed var(--rule)}
.notes .n{font-family:var(--mono);font-size:16px;color:var(--ink2);padding-top:4px}
.notes h3{font-weight:800;font-stretch:75%;font-size:25px;line-height:1.08;text-transform:uppercase}
.notes p{margin-top:6px;font-size:18px}
.notes p strong{background:var(--sage);padding:0 3px}
.notes textarea,.form textarea{display:block;width:100%;min-height:96px;margin-top:10px;padding:10px 12px;font:inherit;font-size:17px;color:var(--ink);background:var(--slip);border:1.5px solid var(--ink);border-radius:0;resize:vertical}
.said{margin-top:8px;font-size:17px;font-weight:600}
.said:empty{display:none}

/* ============ Intercalaire (porte) ============ */
.tabdoor{display:block;position:relative;margin-top:24px;padding:0;text-decoration:none;color:var(--ink)}
.tabdoor .tab{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 10px;background:var(--tab,var(--forest));color:var(--tab-on,#fff);border:1.5px solid var(--ink);border-bottom:0;font-family:var(--mono);font-size:16px;text-transform:uppercase;letter-spacing:.05em;transition:background-color .3s}
.tabdoor .tab svg{flex:0 0 auto}
.tabdoor .body{display:grid;gap:12px;padding:18px 16px;background:var(--slip);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.tabdoor h2{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(28px,5vw,44px);line-height:.98}
.tabdoor p{font-size:18px}
.tabdoor .go{font-weight:700;font-stretch:75%;text-transform:uppercase;font-size:20px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
@media (min-width:1000px){.tabdoor .body{grid-template-columns:1fr auto;align-items:end;padding:26px 28px}}
.tabdoor:hover .body{box-shadow:6px 6px 0 var(--ink)}

/* ============ Fondateur ============ */
@media (min-width:1000px){.f-photo{grid-column:1/4}.f-txt{grid-column:4/11}}
.photo{position:relative;width:180px;height:210px;border:1.5px dashed var(--ink);background:var(--slip);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.photo.has{border-style:solid}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo .ini{font-weight:800;font-stretch:75%;font-size:60px;line-height:1;color:var(--forest)}
.photo small{font-family:var(--mono);font-size:16px;color:var(--ink)}
.photo i{position:absolute;width:22px;height:22px;background:var(--ink)}
.photo i:nth-child(1){top:-2px;left:-2px;clip-path:polygon(0 0,100% 0,0 100%)}
.photo i:nth-child(2){top:-2px;right:-2px;clip-path:polygon(0 0,100% 0,100% 100%)}
.photo i:nth-child(3){bottom:-2px;left:-2px;clip-path:polygon(0 0,0 100%,100% 100%)}
.photo i:nth-child(4){bottom:-2px;right:-2px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.f-name{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:28px}
.f-txt p{font-size:18px;max-width:34em}
.f-txt p+p{margin-top:10px}
.tag{display:inline-block;font-family:var(--mono);font-size:16px;padding:2px 8px;border:1.5px solid var(--ink)}

/* ============ FAQ ============ */
@media (min-width:1000px){.q-head{grid-column:1/4}.q-list{grid-column:4/12}}
.faq{border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1.5px dashed var(--rule)}
.faq summary{display:grid;grid-template-columns:52px 1fr 24px;gap:10px;align-items:baseline;padding:14px 0;cursor:pointer;list-style:none;font-weight:700;font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font-family:var(--mono);font-weight:500;font-size:16px;color:var(--ink2)}
.faq summary::after{content:"+";font-family:var(--mono);font-size:22px;text-align:right}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 16px 62px;font-size:18px;max-width:40em}

/* ============ Final ============ */
.final{margin-top:48px;border:1.5px solid var(--ink);background:var(--slip);padding:22px 16px;position:relative}
@media (min-width:1000px){.final{margin-top:80px;padding:40px 44px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}.final .f-a{grid-column:1/8}.final .f-b{grid-column:8/13;align-self:end}}
.final .h2{font-size:clamp(32px,6vw,60px)}
.final .stamp{position:absolute;right:14px;top:-16px;background:var(--slip)}
.final .f-b{margin-top:18px}
.colo{margin:26px 0 0;padding:8px 0 20px;border-top:1.5px solid var(--ink);font-family:var(--mono);font-size:16px;color:var(--ink);letter-spacing:.03em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
.colo a{color:var(--ink)}

@media (min-width:1000px){.m-app{grid-column:7/13}}
.nuancier{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:18px;max-width:460px}
.sw{font:inherit;background:var(--slip);border:1.5px solid var(--ink);padding:0 0 4px;cursor:pointer;color:var(--ink);text-align:center}
.sw i{display:block;height:44px;background:var(--sw);border-bottom:1.5px solid var(--ink)}
.sw span{display:block;font-stretch:75%;font-weight:600;font-size:16px;padding-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw[aria-checked="true"]{box-shadow:3px 3px 0 var(--ink);outline:2px solid var(--ink);outline-offset:-5px}
.sw:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.sw-name{margin-top:10px;font-family:var(--mono);font-size:16px}
.wlapp{position:relative;max-width:320px;margin:0 auto;background:var(--slip);border:2px solid var(--ink);border-radius:34px;padding:34px 14px 22px;box-shadow:5px 5px 0 var(--ink)}
.wlapp::before{content:"";position:absolute;top:12px;left:50%;width:64px;height:8px;margin-left:-32px;border:1.5px solid var(--ink);border-radius:5px}
.wlapp .scrn{display:flex;flex-direction:column;gap:10px;min-height:470px;padding:14px 12px;background:#ffffff;border:1.5px solid var(--ink)}
.ex-tag{position:absolute;top:-14px;right:-8px;z-index:2;background:var(--slip)}
.wl-top{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;padding-bottom:8px;border-bottom:2px solid var(--wl)}
.wl-hello{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:24px;color:var(--ink)}
.wl-card{background:var(--wl);color:var(--wl-on);padding:12px}
.wl-card .k{font-size:16px}
.wl-card .v{font-family:var(--mono);font-weight:600;font-size:36px;line-height:1.1}
.wl-card .s{font-size:16px}
.wl-btn{padding:10px;text-align:center;border:2px solid var(--wl);color:var(--ink);font-weight:700;font-size:17px;background:#ffffff}
.wl-row{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(27,26,22,.2);font-size:16px}
.wl-pill{font-family:var(--mono);font-size:16px;padding:0 6px;background:var(--wl);color:var(--wl-on)}
.wl-url{margin-top:auto;text-align:center;font-family:var(--mono);font-size:16px;color:var(--ink)}
/* Cadre du film */
.video{position:relative;margin-top:18px;border:1.5px solid var(--ink);background:var(--slip);box-shadow:4px 4px 0 var(--ink);overflow:hidden}
.subs{margin:0;min-height:3.2em;padding:10px 14px;background:var(--ink);color:var(--paper);font-size:18px;line-height:1.35}
.vctrl{display:flex;align-items:center;gap:12px;padding:10px 12px;border-top:1.5px solid var(--ink)}
.vctrl .btn2{padding:6px 12px;font-size:17px}
.transcript{margin-top:12px}
.transcript summary{cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:4px}
@media (min-width:1000px){.a-head{grid-column:1/5}.a-list{grid-column:5/13}}
.args{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.args li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:14px 0;border-bottom:1.5px dashed var(--rule)}
.args .n{font-family:var(--mono);font-size:16px;color:var(--ink2);padding-top:3px}
.args h3{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:22px;line-height:1.05}
.args p{margin-top:4px;font-size:18px}
.start{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0;border:1.5px solid var(--ink);background:var(--slip)}
.start li{display:grid;grid-template-columns:40px 1fr;gap:8px;padding:12px;font-size:18px}
.start li+li{border-top:1.5px dashed var(--ink)}
.start b{font-family:var(--mono)}
@media (min-width:1000px){.start{grid-template-columns:repeat(3,1fr)}.start li+li{border-top:0;border-left:1.5px dashed var(--ink)}}
.price{margin-top:18px;font-size:19px;max-width:36em}
@media (min-width:1000px){.fo-txt{grid-column:1/6}.fo-box{grid-column:6/13}}
.form{background:var(--slip);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:18px 14px}
.fgrid{display:grid;gap:14px}
@media (min-width:700px){.fgrid{grid-template-columns:1fr 1fr}.fgrid .full{grid-column:1/-1}}
.form label{display:block;font-weight:600;font-size:17px;margin-bottom:4px}
.form label .opt{font-weight:500;color:var(--ink)}
.form input,.form select{display:block;width:100%;padding:11px 12px;font:inherit;font-size:17px;color:var(--ink);background:#ffffff;border:1.5px solid var(--ink);border-radius:0}
.form select{appearance:auto}
.form .invalid{border-color:var(--err);border-width:2px}
.err{margin-top:4px;font-size:16px;color:var(--err);font-weight:600}
.err:empty{display:none}
.hint{margin-top:4px;font-size:16px;color:var(--ink)}
.reassure{margin-top:10px;text-align:center;font-size:17px;font-weight:600}
.ok h3{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:30px;margin:6px 0 8px}
.ok p{font-size:18px}
.ok .stamp{font-size:18px}

/* ============ Onglets de classeur ============ */
.tabs-wrap{position:relative;margin-top:10px;border-bottom:1.5px solid var(--ink)}
.tabs{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 2px 0;margin:0;list-style:none;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tabs li{flex:0 0 auto}
.tabs a{display:block;position:relative;padding:8px 14px 8px;margin-bottom:-1.5px;background:var(--slip);color:var(--ink);border:1.5px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;font-weight:700;font-stretch:75%;text-transform:uppercase;letter-spacing:.03em;font-size:17px;text-decoration:none;white-space:nowrap;transition:transform .25s ease,background-color .25s}
.tabs a:hover{transform:translateY(-2px)}
.tabs a[aria-current="page"]{background:var(--paper);padding-bottom:11px;z-index:1;transform:translateY(-3px)}
.tabs a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:5px;background:var(--paper)}
.tabs a:focus-visible{outline:3px solid var(--forest);outline-offset:-4px}
.tabs .num{font-family:var(--mono);font-weight:500;font-size:16px;color:var(--ink2);margin-right:6px;letter-spacing:0}
@media (max-width:699px){.tabs-wrap::after{content:"";position:absolute;right:0;top:0;bottom:2px;width:28px;background:linear-gradient(90deg,transparent,var(--paper));pointer-events:none}.tabs .num{display:none}.tabs a{padding:7px 12px}}
/* page qui se tourne */
.view.turn{animation:turn .5s cubic-bezier(.2,.8,.3,1) both;transform-origin:50% 0}
@keyframes turn{0%{transform:perspective(1600px) rotateX(-7deg) translateY(-6px);opacity:.35}100%{transform:none;opacity:1}}
/* mètre ruban = progression de lecture */
.tape{position:fixed;top:0;left:0;right:0;height:12px;z-index:50;pointer-events:none;background:transparent}
.tape i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background-color:var(--forest);
  background-image:repeating-linear-gradient(90deg,var(--paper) 0 1.5px,transparent 1.5px 8px),repeating-linear-gradient(90deg,var(--paper) 0 2px,transparent 2px 40px);
  background-size:100% 5px,100% 9px;background-repeat:no-repeat;background-position:0 0,0 0;border-bottom:1.5px solid var(--ink)}
.proto-band{padding-top:14px}
/* trait de crayon sous les titres */
.pencil{display:block;width:min(220px,60%);height:10px;margin-top:10px;overflow:visible}
.pencil path{stroke-dasharray:100;stroke-dashoffset:0}
.pencil.draw path{animation:draw .7s ease-out both}
/* talon : appel à l'action répété */
.talon{margin-top:28px;max-width:480px;border-top:1.5px dashed var(--ink);padding-top:14px;position:relative}
.talon::before{content:"Talon · à garder";position:absolute;top:-12px;left:0;padding:0 8px 0 0;background:var(--paper);font-family:var(--mono);font-size:16px;color:var(--ink2);line-height:1.4}
.talon .mention{text-align:left}
.mention a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* check-list cochée à la main */
.check{list-style:none;margin:0;padding:0}
.check li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:9px 0;border-bottom:1.5px dashed var(--rule);font-size:18px}
.check svg{margin-top:1px}
.check svg .tick{stroke-dasharray:100;stroke-dashoffset:0}
.check.go svg .tick{animation:draw .35s ease-out both}
/* Tarifs */
@media (min-width:1000px){.t-pro{grid-column:1/8}.t-side{grid-column:8/13}}
.tarif{background:var(--slip);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.tarif .body{padding:16px 14px}
.tarif .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 4px}
.tarif .price .big{font-size:clamp(48px,10vw,76px)}
.tarif .price .per{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:24px}
.tarif .price-lbl{font-size:18px;margin-bottom:14px}
.side-line{border:1.5px solid var(--ink);background:var(--slip);padding:14px 14px 16px}
.side-line+.side-line{margin-top:18px}
.side-line h3{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:24px;line-height:1.05}
.side-line .free{font-family:var(--mono);font-weight:600;font-size:40px;color:var(--terra-d);line-height:1.1;margin:4px 0}
.side-line p{font-size:18px}
.bareme{width:100%;border-collapse:collapse;margin-top:14px;background:var(--slip);border:1.5px solid var(--ink);font-size:18px}
.bareme th,.bareme td{padding:10px 12px;text-align:left;border-bottom:1.5px dashed var(--rule);vertical-align:top}
.bareme thead th{font-family:var(--mono);font-weight:500;font-size:16px;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--ink)}
.bareme td.v{font-family:var(--mono);font-weight:600;white-space:nowrap;text-align:right}
.bareme tr:last-child td{border-bottom:0}
@media (min-width:1000px){.b-tab{grid-column:1/8}.b-ex{grid-column:8/13;align-self:end}}
.ex{border:1.5px solid var(--ink);background:var(--slip);padding:14px}
.ex .big{font-size:48px;color:var(--terra-d)}
.ex p{font-size:18px}
/* Comment ça marche : parcours détaillés */

.path h3{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:28px;line-height:1;margin-bottom:10px}
.path h3 small{display:block;font-family:var(--mono);font-weight:500;font-size:16px;text-transform:none;color:var(--ink);margin-bottom:6px}
.path ol{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.path li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:12px 0;border-bottom:1.5px dashed var(--rule);font-size:18px}
.path li b.n{font-family:var(--mono);font-weight:600;font-size:18px}
.asterisk{margin:14px 0 0;font-family:var(--mono);font-size:16px;color:var(--ink)}
.stamp.two{white-space:normal;text-align:center;line-height:1.15}
/* Film « Comment ça marche » : trois pièces */
.cv{max-width:1100px}
.cvstage{position:relative;aspect-ratio:4/5;background:var(--ink);overflow:hidden;border-bottom:1.5px solid var(--ink)}
@media (min-width:700px){.cvstage{aspect-ratio:16/9}}
.cvsvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cvsvg text{font-family:var(--sans)}
.cvsvg text.m{font-family:var(--mono)}
.cvcard{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(27,26,22,.5);opacity:0;visibility:hidden}
.cvcard-in{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:560px;padding:20px 22px;text-align:center;background:var(--slip);border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);will-change:transform}
.cvcard .bigt{margin:0;font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(24px,4.4vw,42px);line-height:1}
.cvcard .bigt em{font-style:normal;color:var(--forest)}
.cvcard .proto-note{margin:0}
@media (max-width:699px){.cvcard-in{padding:14px 14px;gap:10px}#cv-logo{width:64px;height:44px}.cvcard .btn{font-size:18px;padding:11px 14px}}
.cvposter{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;padding:12px;font:inherit;text-align:left;background:transparent;border:0;cursor:pointer;color:var(--paper)}
.cvposter .card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:min(92%,440px);padding:14px 16px;background:var(--ink);box-shadow:4px 4px 0 rgba(27,26,22,.3)}
.cvposter .t{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(24px,4vw,40px);line-height:.95}
.cvposter .t em{font-style:normal;color:var(--sage)}
.cvposter .play{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1.5px solid var(--paper);font-weight:700;font-stretch:75%;text-transform:uppercase;font-size:19px}
.cvposter .meta{font-family:var(--mono);font-size:16px}
@media (max-width:699px){.cvposter{padding:10px}.cvposter .card{padding:10px 12px}.cvposter .t{font-size:22px}.cvposter .play{padding:6px 12px;font-size:18px}}
.cvposter:focus-visible{outline:3px solid var(--forest);outline-offset:-6px}
.cvprog i{width:100%;transform-origin:0 50%;transform:scaleX(0)}
.chap{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:1100px}
@media (min-width:700px){.chap{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1000px){.chap{grid-template-columns:repeat(5,minmax(0,1fr))}}
.chap button{display:block;width:100%;height:100%;min-height:48px;padding:6px 8px;font:inherit;font-size:16px;font-weight:600;font-stretch:75%;line-height:1.15;text-align:left;color:var(--ink);background:var(--slip);border:1.5px solid var(--ink);cursor:pointer}
.chap button .n{display:block;font-family:var(--mono);font-weight:500;font-stretch:100%;color:var(--ink2)}
.chap button[aria-current="true"]{background:var(--ink);color:var(--paper)}
.chap button[aria-current="true"] .n{color:var(--sage)}
.cv-tr{margin:8px 0 0;padding-left:1.4em;font-size:18px}
.cv-tr li+li{margin-top:6px}

/* ============ Carnet n° 02 : entreprises et réseaux (seul carnet du site) ============ */
@property --paper{syntax:'<color>';inherits:true;initial-value:#f3ecdd}
@property --slip{syntax:'<color>';inherits:true;initial-value:#faf6ec}
@property --ink{syntax:'<color>';inherits:true;initial-value:#1b1a16}
@property --forest{syntax:'<color>';inherits:true;initial-value:#173901}
@property --terra-d{syntax:'<color>';inherits:true;initial-value:#7f3508}
@property --sage{syntax:'<color>';inherits:true;initial-value:#c4efa3}
@property --margin{syntax:'<color>';inherits:true;initial-value:#b23a0a}
@property --cover{syntax:'<color>';inherits:true;initial-value:#173901}
@property --ribbon{syntax:'<color>';inherits:true;initial-value:#9c440b}
:root{transition:--paper .6s ease,--slip .6s ease,--ink .6s ease,--forest .6s ease,--terra-d .6s ease,--sage .6s ease,--margin .6s ease,--cover .6s ease,--ribbon .6s ease}
:root.no-tr{transition:none}
/* Carnet n° 02 : même papier quadrillé, plus froid ; encre bleu de Prusse, accent ocre */
:root[data-site="wl"]{
  --paper:#e9ebe6; --slip:#f5f6f2; --ink:#1a1c20; --ink2:#2b2e33;
  --forest:#1f3a5f; --terra:#8a5a0c; --terra-d:#7a4f08; --sage:#f1dfa6;
  --margin:#b7862a; --cover:#1f3a5f; --ribbon:#c9962e;
  --rule:rgba(26,28,32,.45);
}
/* bascule de version */
.head{flex-wrap:wrap;row-gap:10px}
.brand-box{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.brand-tag{font-family:var(--mono);font-size:16px;line-height:1.2;color:var(--forest);font-weight:600}
/* ruban marque-page, dans la marge (grand écran) */
.ribbon{display:none}
@media (min-width:900px){.ribbon{display:block;position:absolute;top:-2px;left:26px;width:24px;height:118px;z-index:2;background:var(--ribbon);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);transform-origin:50% 0}}
:root[data-site="wl"] .ribbon{background:var(--brand,var(--ribbon))}
:root[data-site="wl"] .tabs a[aria-current="page"]{box-shadow:inset 0 4px 0 var(--brand,var(--forest))}

/* ============ Version entreprises ============ */
#wl-simulateur .fh label{font-size:17px}
#wl-simulateur .fh output{white-space:nowrap}
#wl-simulateur .offre{text-align:center;margin:2px 0 6px}
@media (min-width:1000px){.c3{grid-column:span 4}}
.path+.path{margin-top:0}
@media (max-width:999px){.c3+.c3{margin-top:18px}}
.feed{display:grid;gap:14px;margin-top:20px}
@media (min-width:1000px){.feed{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post{border:1.5px solid var(--ink);background:var(--slip);padding:14px;display:flex;flex-direction:column;gap:8px}
.post .k{font-family:var(--mono);font-size:16px;text-transform:uppercase;letter-spacing:.04em}
.post h3{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:22px;line-height:1.05}
.post p{font-size:17px}
.post .ph{height:84px;border:1.5px dashed var(--ink);background:repeating-linear-gradient(45deg,rgba(26,28,32,.10) 0 2px,transparent 2px 8px)}
.post .until{align-self:flex-start;font-family:var(--mono);font-size:16px;padding:1px 8px;background:var(--sage);border:1.5px solid var(--ink)}
.bareme td.num{font-family:var(--mono);white-space:nowrap}
.bareme tr.tot td{border-top:1.5px solid var(--ink);font-weight:700}
.bareme tr.on td{background:var(--sage)}
@media (max-width:699px){.bareme.wide thead th:nth-child(3),.bareme.wide td:nth-child(3){display:none}}
.marque-form{display:grid;gap:14px;margin-top:18px;max-width:460px}
.marque-form label{display:block;font-weight:600;font-size:17px;margin-bottom:4px}
.marque-form input[type=text]{display:block;width:100%;padding:11px 12px;font:inherit;font-size:17px;color:var(--ink);background:#ffffff;border:1.5px solid var(--ink);border-radius:0}
.colorrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.colorrow input[type=color]{width:64px;height:44px;padding:2px;border:1.5px solid var(--ink);background:var(--slip);cursor:pointer}
.colorrow input[type=color]:focus-visible,.marque-form input[type=text]:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
.marque-form .nuancier{margin-top:0}
.wl-logo{flex:0 0 auto;min-width:44px;height:36px;padding:0 4px;display:grid;place-items:center;background:var(--wl);color:var(--wl-on);font-weight:800;font-size:16px;letter-spacing:.02em}
.wl-logo.empty{background:transparent;color:var(--ink);border:1.5px dashed var(--ink);font-family:var(--mono);font-weight:500}
.wl-top .js-bname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.badge{position:relative;max-width:320px;margin:26px auto 0;border:2px solid var(--ink);background:#ffffff;box-shadow:4px 4px 0 var(--ink)}
.badge .bh{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--wl);color:var(--wl-on);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:20px;line-height:1.05;overflow-wrap:anywhere}
.badge .bb{display:grid;grid-template-columns:1fr 96px;gap:12px;align-items:center;padding:12px}
.badge .bb p{font-size:16px;color:#1a1c20}
.badge svg{width:96px;height:96px;display:block}
.badge .ex-tag{top:-14px;right:-8px}
@media (min-width:1000px){
  #vue-wl-marque .a-list{display:flex;align-items:center;justify-content:center}
  #vue-wl-marque .badge{width:100%;max-width:520px;margin:0 auto;box-shadow:6px 6px 0 var(--ink)}
  #vue-wl-marque .badge .bh{font-size:30px;padding:16px 18px}
  #vue-wl-marque .badge .bb{grid-template-columns:1fr 168px;gap:20px;padding:20px 18px}
  #vue-wl-marque .badge .bb p{font-size:21px;line-height:1.4}
  #vue-wl-marque .badge svg{width:168px;height:168px}
  #vue-wl-marque .badge .ex-tag{top:-18px;right:-12px}
}
.wl-apercu{margin-top:10px;font-family:var(--mono);font-size:16px}


/* ============ v7 · Entrée de page plus nerveuse : le tampon claque, le bordereau encaisse, le crayon souligne ============ */
.stamp.slam{animation:slam .56s cubic-bezier(.2,.9,.25,1) both}
@keyframes slam{0%{transform:scale(2.4) rotate(-18deg);opacity:0}45%{transform:scale(.9) rotate(-4deg);opacity:1}62%{transform:scale(1.05) rotate(-5.5deg)}100%{transform:scale(1) rotate(-5deg);opacity:1}}
.bord.thud{animation:thud .34s cubic-bezier(.3,.6,.3,1) .25s}
@keyframes thud{0%{transform:none}35%{transform:translate(1px,3px)}100%{transform:none}}
.is-on .mark svg.u path{animation:draw .38s cubic-bezier(.6,0,.3,1) .5s both}
/* boutons : pression d'un tampon */
@media (hover:hover){
  .btn{transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s cubic-bezier(.2,.8,.3,1)}
  .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
  .btn:hover:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
}


/* ============ Le téléphone à vous, dans le haut de page ============ */
@media (min-width:1000px){
  .essai .tp-guide{grid-column:1/6;grid-row:1;align-self:start;position:sticky;top:24px}
  .essai .tp-col{grid-column:7/13;grid-row:1;align-self:start}
}
.tp-guide{border-top:1.5px solid var(--ink);padding-top:12px}
.tp-n{margin:0;font-size:16px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.tp-ticks{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;list-style:none;margin:8px 0 0;padding:0;max-width:380px}
.tp-ticks li{height:14px;border:1.5px solid var(--ink);background:var(--slip);transition:background-color .3s cubic-bezier(.2,.8,.3,1),transform .3s cubic-bezier(.2,.9,.3,1.3)}
.tp-ticks li.done{background:var(--forest)}
.tp-ticks li.on{background:var(--ink);transform:translateY(-3px);box-shadow:2px 2px 0 var(--terra-d)}
.tp-consigne{margin-top:14px;font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(22px,3vw,32px);line-height:1.02;color:var(--forest);max-width:20em}
.tp-consigne.flash{animation:cons .42s cubic-bezier(.2,.8,.3,1)}
@keyframes cons{from{transform:translateY(8px);opacity:.15}to{transform:none;opacity:1}}
.tp-intro{margin-top:12px;font-size:18px;max-width:30em}
.tp-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;max-width:380px}
.tp-again{font:inherit;font-family:var(--mono);font-size:16px;background:none;border:0;padding:6px 0;color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
.tp-again:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
.tp-col{min-width:0}
.tp-wrap{position:relative;max-width:340px;margin:0 auto}
/* le cadre reste au carnet : trait d'encre, ombre décalée */
.tp-phone{position:relative;z-index:2;background:var(--slip);border:2px solid var(--ink);border-radius:34px;padding:30px 12px 22px;box-shadow:5px 5px 0 var(--ink)}
.tp-phone::before{content:"";position:absolute;top:11px;left:50%;width:64px;height:8px;margin-left:-32px;border:1.5px solid var(--ink);border-radius:5px}
.tp-phone::after{content:"";position:absolute;bottom:8px;left:50%;width:84px;height:4px;margin-left:-42px;border-radius:3px;background:var(--ink)}
.tp-phone.buzz{animation:buzz .5s cubic-bezier(.36,.07,.19,.97) 2}
@keyframes buzz{0%,100%{transform:none}12%{transform:translateX(-4px) rotate(-1.2deg)}25%{transform:translateX(4px) rotate(1.2deg)}38%{transform:translateX(-4px) rotate(-1deg)}50%{transform:translateX(3px) rotate(.8deg)}62%{transform:translateX(-3px) rotate(-.6deg)}75%{transform:translateX(2px) rotate(.4deg)}88%{transform:translateX(-1px)}}
.tp-onde{position:absolute;inset:-2px;z-index:-1;border:2px solid var(--forest);border-radius:36px;opacity:0;pointer-events:none}
.tp-phone.ring .tp-onde{animation:onde .9s cubic-bezier(.2,.7,.3,1) both}
.tp-phone.ring .tp-onde.two{animation-delay:.32s}
@keyframes onde{from{opacity:.75;transform:none}to{opacity:0;transform:scale(1.07,1.04)}}
/* l'écran : blanc pur, police du téléphone, composants « iPhone » */
.tp-screen{--ios-txt:#111111;--ios-sub:#5c5c61;--ios-fill:#f2f2f7;--ios-line:#d1d1d6;--ios-bub:#e9e9eb;--ios-blue:#1d4ed8;
  position:relative;height:540px;overflow:hidden;border:1.5px solid var(--ink);border-radius:22px;background:#ffffff;color:var(--ios-txt);
  font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;font-weight:400;font-stretch:100%;-webkit-font-smoothing:antialiased}
.tp-screen .mono{font-family:inherit;font-weight:600;font-variant-numeric:tabular-nums}
.tp-sb{position:absolute;top:0;left:0;right:0;height:28px;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:0 16px;font-size:16px;font-weight:600;color:var(--ios-txt);pointer-events:none;font-variant-numeric:tabular-nums}
.tp-sb .bat{width:26px;height:13px;border:1.5px solid currentColor;border-radius:4px;background:linear-gradient(currentColor,currentColor) 2px 2px/15px 6px no-repeat}
.tp-scr{position:absolute;top:28px;left:0;right:0;bottom:0;padding:10px 16px 16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overscroll-behavior:contain;background:#ffffff}
.tp-scr.in{animation:scrIn .34s cubic-bezier(.2,.8,.3,1) both}
@keyframes scrIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.tp-who{font-size:16px;font-weight:600;color:var(--ios-sub)}
.tp-t{font-weight:700;font-size:26px;line-height:1.12;letter-spacing:-.01em}
.tp-t.xl{font-size:34px}
.tp-t:focus{outline:none}
.tp-t:focus-visible{outline:3px solid var(--forest);outline-offset:3px;border-radius:4px}
.tp-p{font-size:17px;line-height:1.35}
.tp-small{font-size:16px;line-height:1.35;color:var(--ios-sub)}
.tp-form{display:flex;flex-direction:column;gap:6px}
.tp-form label{font-weight:600;font-size:16px;line-height:1.25}
.tp-form input,.tp-form select{display:block;width:100%;padding:10px 12px;font:inherit;font-size:17px;color:var(--ios-txt);background:#ffffff;border:1px solid #8e8e93;border-radius:10px}
.tp-form select{appearance:auto}
.tp-form input:focus-visible,.tp-form select:focus-visible,.tp-num input:focus-visible{outline:3px solid var(--forest);outline-offset:1px}
.tp-form .invalid{border-color:var(--err);border-width:2px}
.tp-screen .err{font-size:16px}
.tp-b{display:block;width:100%;margin-top:4px;padding:13px 12px;font:inherit;font-weight:600;font-size:17px;line-height:1.15;color:#ffffff;background:var(--forest);border:0;border-radius:12px;cursor:pointer;transition:transform .12s cubic-bezier(.2,.8,.3,1),filter .12s}
.tp-b:active{transform:scale(.97);filter:brightness(1.15)}
.tp-b.alt{background:var(--ios-bub);color:var(--ios-txt)}
.tp-b:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.tp-screen .stamp{transform:none;border:0;border-radius:999px;padding:4px 12px;background:#e3f4d7;color:var(--forest);font-family:inherit;font-weight:600;letter-spacing:0;text-transform:none}
.tp-screen .stamp.print{animation:pop .4s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pop{from{transform:scale(.6);opacity:.2}to{transform:none;opacity:1}}
/* écran verrouillé : fond d'écran doux, notification blanche translucide */
.tp-lock{top:0;padding-top:38px}
.tp-notif{display:flex;gap:10px;align-items:flex-start;width:100%;padding:11px 12px;text-align:left;font:inherit;color:#111111;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:0;border-radius:18px;box-shadow:0 6px 20px rgba(17,17,17,.14);cursor:pointer;position:relative}
@media (prefers-reduced-transparency:reduce){.tp-notif{background:#ffffff}}
.tp-notif.drop{animation:drop .62s cubic-bezier(.2,.9,.3,1.25) .2s both}
@keyframes drop{from{transform:translateY(-170%)}to{transform:none}}
.tp-notif:focus-visible{outline:3px solid #173901;outline-offset:3px}
.tp-app{flex:0 0 auto;width:38px;height:38px;border-radius:9px;background:#173901;display:grid;place-items:center}
.tp-nb{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:16px;line-height:1.25}
.tp-nh{display:flex;justify-content:space-between;gap:6px;font-size:16px;color:#3c3c43}
.tp-nh b{font-weight:600}
.tp-ntitle{font-weight:600}
.tp-clock{display:flex;flex-direction:column;align-items:center;margin-top:18px;color:#173901}
.tp-date{font-size:17px;font-weight:600}
.tp-hour{font-weight:600;font-size:84px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* messages, façon iMessage */
.tp-msg{gap:8px}
.tp-mh{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--ios-line)}
.tp-back{font-size:32px;line-height:1;color:var(--ios-blue);font-weight:400}
.tp-av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#173901;display:grid;place-items:center}
.tp-mname{font-weight:600;font-size:19px}
.tp-ts{text-align:center;font-size:16px;color:var(--ios-sub)}
.tp-bub{align-self:flex-start;max-width:86%;padding:9px 14px;background:var(--ios-bub);color:#111111;border-radius:18px 18px 18px 5px;font-size:17px;line-height:1.3}
.tp-link{display:inline;padding:0;font:inherit;font-weight:500;background:none;border:0;color:var(--ios-blue);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer;overflow-wrap:anywhere;text-align:left}
.tp-link:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px}
/* fiche du contact */
.tp-bar{display:flex;align-items:center;gap:8px;margin:-10px -16px 0;padding:8px 16px;background:var(--forest);color:#ffffff;font-weight:600;font-size:17px}
.tp-chip{align-self:flex-start;font-size:16px;font-weight:600;padding:2px 10px;background:#e3f4d7;color:var(--forest);border-radius:999px}
.tp-card{border-radius:14px;background:var(--ios-fill);padding:14px;display:flex;flex-direction:column;gap:4px}
.tp-l1{font-size:19px;font-weight:600}
.tp-l2{font-size:17px;color:#3c3c43}
.tp-2b{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.tp-2b .tp-b{margin-top:0}
/* le chantier : sablier + jours cochés */
.tp-sab{display:block;margin:2px auto 0;width:92px;height:138px;overflow:visible}
.tp-sab .glass{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tp-sab .sand{fill:var(--terra)}
.tp-sab .s-top,.tp-sab .s-bot{transform-box:fill-box;transform-origin:50% 100%}
.tp-sab .s-top{transform:scaleY(0)}
.tp-sab .s-fil{opacity:0}
.run .tp-sab .s-top{animation:sTop 1.8s cubic-bezier(.45,.05,.55,.95) both}
.run .tp-sab .s-bot{animation:sBot 1.8s cubic-bezier(.45,.05,.55,.95) both}
.run .tp-sab .s-fil{animation:sFil 1.8s steps(24) both}
.run .tp-sab{animation:sabTilt 1.8s cubic-bezier(.45,.05,.55,.95)}
@keyframes sTop{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes sBot{from{transform:scaleY(.08)}to{transform:scaleY(1)}}
@keyframes sFil{0%,94%{opacity:1}100%{opacity:0}}
@keyframes sabTilt{0%,100%{transform:none}50%{transform:rotate(2deg)}}
.tp-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;list-style:none;margin:4px 0 0;padding:0}
.tp-days li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0 4px;border-radius:10px;background:var(--ios-fill);font-size:16px;font-weight:500}
.tp-days .tick{stroke-dasharray:100;stroke-dashoffset:0}
.run .tp-days .tick{animation:draw .26s ease-out both}
.run .tp-days li:nth-child(1) .tick{animation-delay:.2s}
.run .tp-days li:nth-child(2) .tick{animation-delay:.52s}
.run .tp-days li:nth-child(3) .tick{animation-delay:.84s}
.run .tp-days li:nth-child(4) .tick{animation-delay:1.16s}
.run .tp-days li:nth-child(5) .tick{animation-delay:1.48s}
#tp-s5.apres .tp-sab{display:none}
/* montant + prime : curseurs façon iPhone */
.tp-field .fh label{font-size:17px;font-weight:600}
.tp-num{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:17px}
.tp-num input{width:100px;padding:6px 8px;font:inherit;font-size:16px;text-align:right;color:var(--ios-txt);background:var(--ios-fill);border:1px solid #8e8e93;border-radius:8px}
.tp-scale{display:flex;justify-content:space-between;gap:8px;font-size:16px;color:var(--ios-sub);font-variant-numeric:tabular-nums}
.tp-screen .rng{height:34px}
.tp-screen .rng::-webkit-slider-runnable-track{height:6px;border:0;border-radius:3px;background:linear-gradient(var(--forest),var(--forest)) 0 0/var(--fill) 100% no-repeat,#d1d1d6}
.tp-screen .rng::-moz-range-track{height:6px;border:0;border-radius:3px;background:linear-gradient(var(--forest),var(--forest)) 0 0/var(--fill) 100% no-repeat,#d1d1d6}
.tp-screen .rng::-webkit-slider-thumb{width:28px;height:28px;margin-top:-11px;border:0;border-radius:50%;background:#ffffff;box-shadow:0 1px 4px rgba(0,0,0,.32),0 0 0 .5px rgba(0,0,0,.12)}
.tp-screen .rng::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#ffffff;box-shadow:0 1px 4px rgba(0,0,0,.32),0 0 0 .5px rgba(0,0,0,.12)}
.tp-screen .rng:focus-visible{outline:3px solid var(--forest);outline-offset:2px;border-radius:8px}
.tp-res{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:10px 12px;border-radius:12px;background:var(--ios-fill)}
.tp-res .k{font-weight:600;font-size:17px}
.tp-amt{font-weight:700;font-size:32px;line-height:1.1;color:var(--terra-d)}
/* reçu : chiffre d'affaires grâce à Julie */
.tp-okc{align-self:flex-start;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--forest)}
.tp-okc.print{animation:pop .4s cubic-bezier(.2,.9,.3,1.3)}
.tp-ca-box{border-radius:14px;background:var(--ios-fill);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.tp-ca-k{font-size:16px;font-weight:600;color:var(--ios-sub)}
.tp-ca-v{font-weight:700;font-size:40px;line-height:1.1;color:var(--forest);letter-spacing:-.01em}
.tp-ca-l{font-size:17px;font-weight:600}
.tp-ca-p{margin-top:6px;padding-top:8px;border-top:1px solid var(--ios-line);font-size:17px}
.tp-ca-p b{color:var(--terra-d);font-weight:700}
.tp-rappel{font-size:17px;font-weight:600;padding:8px 12px;border-radius:12px;background:#e3f4d7;color:var(--forest)}
/* sous le téléphone : les sorties */
.tp-out{max-width:340px;margin:22px auto 0}
.tp-out .btn2{display:block;width:100%;text-align:center;box-shadow:3px 3px 0 var(--ink)}
.tp-out .btn2:active{box-shadow:1px 1px 0 var(--ink)}
.tp-out .btn2:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
.tp-out .mention{margin-top:10px}
.tp-mention{font-size:16px;text-align:center;line-height:1.3;color:var(--ios-sub)}
.tp-sent{font-size:16px;font-weight:600;background:#e3f4d7;color:var(--forest);padding:8px 10px;border-radius:10px}
.tp-sent:empty{display:none}
.tp-final .err{margin-top:0}
@media (max-width:999px){
  .tp-guide{position:sticky;top:12px;z-index:4;background:var(--paper);padding-bottom:10px;border-bottom:1.5px dashed var(--rule)}
  .tp-consigne{margin-top:10px}
  .tp-intro{display:none}
}
@media (max-width:699px){
  .tp-guide{padding-top:8px;padding-bottom:8px}
  .tp-ticks{margin-top:6px}
  .tp-ticks li{height:12px}
  .tp-consigne{font-size:20px;margin-top:8px}
  .tp-screen{height:500px}
  .tp-phone{padding-top:26px}
  .tp-phone::before{top:9px}
  .tp-scr{gap:8px;padding-top:8px}
  .tp-scr.tp-lock{padding-top:38px}
  .tp-t{font-size:24px}
  .tp-t.xl{font-size:32px}
  .tp-hour{font-size:72px}
  .tp-ca-v{font-size:36px}
  .tp-out{margin-top:18px}
}

/* ============ Version courte : un écran, une idée ============ */
/* 3 temps en icônes, une ligne chacun */
.trio{list-style:none;margin:18px 0 0;padding:0;border-top:1.5px solid var(--ink)}
.trio li{display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1.5px dashed var(--rule);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:22px;line-height:1.08}
.trio .ico{display:grid;place-items:center;width:58px;height:58px;background:var(--slip);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);color:var(--forest)}
.trio .n{display:block;font-family:var(--mono);font-weight:500;font-size:16px;font-stretch:100%;color:var(--ink2);letter-spacing:.05em;margin-bottom:2px}
@media (min-width:1000px){.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:0}.trio li{grid-template-columns:1fr;align-items:start;padding:18px 20px 18px 0;border-bottom:0;border-top:1.5px solid var(--ink)}.trio li+li{padding-left:20px;border-left:1.5px dashed var(--rule)}}
.more-link{margin-top:14px;font-size:18px}
.more-link a{display:inline-flex;align-items:center;min-height:44px}
/* le prix, en une ligne */
.prix .h2{font-size:clamp(34px,7vw,60px)}
.prix-sub{margin-top:12px;font-family:var(--mono);font-size:17px;max-width:34em}
.prix .cta-row{max-width:480px}
.prix .btn{margin-top:16px}
.mini-grille{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.mini-grille li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1.5px dashed var(--rule)}
.mini-grille b{font-family:var(--mono);font-weight:600;white-space:nowrap}
/* « En savoir plus » : le détail replié */
.plus-list .a.wide{padding:0 0 18px}
.plus-list .a.wide .calc,.plus-list .a.wide .bord{max-width:560px}
.plus-list .a.wide .trust{margin-top:0}
.plus-list .a.wide .bareme{margin-top:0}
.plus-list .a.wide.path ol{border-top:0}
.plus-list .a.wide .feed{margin-top:12px}
@media (max-width:699px){.faq summary{grid-template-columns:44px 1fr 20px;font-size:18px}.faq .a{padding-left:0}}
details.mini{margin-top:14px;border-top:1.5px dashed var(--rule)}
details.mini>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;cursor:pointer;list-style:none;font-weight:700;font-size:18px}
details.mini>summary::-webkit-details-marker{display:none}
details.mini>summary::after{content:"+";font-family:var(--mono);font-size:22px}
details.mini[open]>summary::after{content:"−"}
.transcript summary{display:inline-flex;align-items:center;min-height:44px}
/* deux boutons côte à côte */
.talon.duo{display:grid;gap:12px}
.talon.duo .btn2{text-align:center}
.lines{list-style:none;margin:18px 0 0;padding:0;border-top:1.5px solid var(--ink)}
.lines li{padding:10px 0;border-bottom:1.5px dashed var(--rule);font-size:18px}
/* accueil entreprises : accroche, puis l'aperçu à vos couleurs */
.wl-cta{max-width:420px}
/* cibles tactiles ≥ 44 px */
.nav button{min-height:44px}
.tp-again{min-height:44px}
@media (max-width:699px){
  .tabs a{display:flex;align-items:center;min-height:44px}
  .toggle label{font-size:16px;padding:8px 12px}
  .sur{font-size:16px;margin-bottom:8px}
  #simulateur .b-res{padding-top:10px}
  #simulateur .b-ctl{padding-top:8px;padding-bottom:10px}
  #simulateur .b-cta{padding:12px}
  .trio li{font-size:20px}
  .hero-demo .sur{display:none}
  .hero-demo{row-gap:10px}
  .b-h .stamp.two{white-space:nowrap}
}

/* ============ v2 PO : démo dans le hero, sous-titres ============ */
.sub{margin-top:10px;font-size:18px;line-height:1.4;max-width:36em;font-weight:500}
.h1+.sub,.h1+.pencil+.sub{margin-top:12px}
.final .sub{margin-top:12px}
#hero-sous-titre{font-size:21px;line-height:1.4;font-weight:600;color:var(--ink);max-width:30em;margin-top:16px;padding:2px 0 2px 14px;border-left:4px solid var(--forest)}
#hero-sous-titre span{display:block}
#hero-sous-titre .hs-2{margin-top:6px}
#hero-sous-titre b{font-weight:800;background-image:linear-gradient(var(--stabilo),var(--stabilo));background-repeat:no-repeat;background-size:100% .42em;background-position:0 88%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 2px}
#hero-sous-titre em{font-style:normal;font-weight:800;color:var(--forest)}
@media (min-width:1000px){
  .hero-demo{grid-template-rows:auto auto 1fr}
  .hero-demo .h-intro{grid-column:1/7;grid-row:1}
  #hero-titre{font-size:40px;line-height:.98}
  .hero-demo .h-sub{grid-column:1/7;grid-row:2;padding-top:18px}
  .hero-demo .tp-guide{grid-column:1/7;grid-row:3;align-self:start;margin-top:22px;position:sticky;top:24px}
  .hero-demo .tp-col{grid-column:7/13;grid-row:1/4;align-self:start}
  .hero-demo .d-phone{grid-column:7/13;grid-row:1/4;align-self:start}
  .hero-demo .d-steps{grid-column:1/7;grid-row:3;align-self:start;margin-top:22px}
}
.bord-sec .bord{margin-top:18px;max-width:560px}
@media (max-width:699px){
  #hero-titre{font-size:23px;line-height:1.02}
  #hero-sous-titre{font-size:18px;line-height:1.38;padding-left:12px;border-left-width:3px}
  .sub{font-size:18px}
  .hero-demo .tp-guide{padding-top:6px;padding-bottom:6px}
  .hero-demo .tp-consigne{font-size:18px;margin-top:6px}
}

/* ===================================================================== */
/* ============ Comité n° 2 : couleur, onglets ouverts, téléphone en 8 étapes ============ */
/* ===================================================================== */
:root[data-site="wl"]{ --forest-vif:var(--prusse-vif); }
.big.perte{color:var(--perte)}
.calc .b-h .red{color:var(--perte)}
.rng.red::-webkit-slider-thumb{background:var(--perte)}
.rng.red::-moz-range-thumb{background:var(--perte)}

/* ---- En-tête : un seul plein, l'action ---- */
.nav .head-cta{display:none}
@media (min-width:1000px){
  .nav .head-cta{display:inline-block;width:auto;min-height:44px;padding:9px 15px;font-weight:800;font-stretch:75%;text-transform:uppercase;letter-spacing:.03em;font-size:17px;line-height:1.15;color:var(--paper);background:var(--forest);border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);text-decoration:none;white-space:nowrap}
  .nav .head-cta[hidden]{display:none}
}

/* ---- Onglets de classeur : pastels de classement (aucun texte coloré dessus) ---- */
.tabs a[data-view="accueil"],.tabs a[data-view="entreprises"]{background:var(--ciel)}
.tabs a[data-view="comment"],.tabs a[data-view="entreprises-comment"]{background:var(--peche)}
.tabs a[data-view="tarifs"],.tabs a[data-view="entreprises-tarifs"]{background:var(--menthe)}
.tabs a[data-view="questions"],.tabs a[data-view="entreprises-questions"]{background:var(--lavande)}
.tabs a[data-view="qui"],.tabs a[data-view="entreprises-qui"],.tabs a[data-view="entreprises-marque"]{background:var(--slip);box-shadow:inset 0 3px 0 var(--stylo)}
.tabs a[aria-current="page"]{box-shadow:inset 0 4px 0 var(--ink)}
.tabs a[aria-current="page"]::after{background:inherit}
:root[data-site="wl"] .tabs a[aria-current="page"]{box-shadow:inset 0 4px 0 var(--brand,var(--forest))}

/* ---- Haut de page : l'ordre sur mobile, le guide ---- */
.preuves{margin-top:10px;font-size:16px;font-weight:600;line-height:1.4;color:var(--ink);max-width:36em}
@media (max-width:999px){
  .hero-demo .h-intro{order:1}
  .hero-demo .tp-guide{order:2}
  .hero-demo .tp-col{order:3}
  .hero-demo .h-sub{order:4;margin-top:6px}
  #hero-sous-titre{margin-top:10px}
}
.tp-guide{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n press" "ticks again" "cons cons" "intro intro";column-gap:12px;align-items:center}
#tp-etape{grid-area:n}
.tp-press{grid-area:press;justify-self:end}
.tp-again{grid-area:again;justify-self:end}
.tp-ticks{grid-area:ticks}
.tp-consigne{grid-area:cons}
.tp-intro{grid-area:intro}
.tp-press{font:inherit;font-weight:700;font-stretch:75%;font-size:16px;line-height:1.15;min-height:44px;padding:6px 10px;color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:1px;cursor:pointer;white-space:nowrap;text-align:center}
.tp-press:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
.tp-press[hidden]{display:none}
.tp-again .ic{display:none;font-size:22px;line-height:1}
.tp-ticks{display:flex;gap:5px;list-style:none;margin:6px 0 12px;padding:0;max-width:none}
.tp-ticks li{position:relative;width:30px;height:30px;display:grid;place-items:center;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);transition:background-color .3s cubic-bezier(.2,.8,.3,1),transform .3s cubic-bezier(.2,.9,.3,1.3)}
.tp-ticks li.done{background:var(--sage-vif)}
.tp-ticks li.done svg{visibility:hidden}
.tp-ticks li.done::before{content:"";position:absolute;left:8px;top:7px;width:12px;height:7px;border-left:2.5px solid var(--forest);border-bottom:2.5px solid var(--forest);transform:rotate(-45deg)}
.tp-ticks li.on{background:var(--stabilo);transform:translateY(-3px);box-shadow:2px 2px 0 var(--terra-d)}
.tp-dots{position:absolute;left:50%;bottom:-11px;margin-left:-12px;display:flex;gap:3px;width:24px;justify-content:center}
.tp-dots i{flex:0 0 auto;width:6px;height:6px;border-radius:50%;border:1px solid var(--ink);background:transparent}
.tp-dots i.f{background:var(--ink)}
@media (max-width:999px){
  .tp-guide{grid-template-areas:"n again" "ticks ticks" "cons cons" "press press";padding-bottom:8px}
  .tp-press{justify-self:start;margin-top:6px}
}
@media (min-width:1000px){
  .nav .ref{display:none}
  .hero-demo .h-intro{grid-row:1}
  .hero-demo .tp-guide{grid-row:2;position:static;margin-top:20px}
  .hero-demo .h-sub{grid-row:3;padding-top:20px}
  .hero-demo{grid-template-rows:auto auto auto 1fr}
  .hero-demo .tp-col{grid-row:1/5}
}
@media (max-width:699px){
  .hero-demo .tp-guide{padding-top:4px;padding-bottom:6px}
  .tp-again .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tp-again .ic{display:inline}
  .tp-again{min-width:44px;text-decoration:none;border:1.5px solid var(--ink);padding:0;display:grid;place-items:center}
  .tp-again[hidden]{display:none}
  .tp-ticks{margin:4px 0 12px}
  .hero-demo .tp-consigne{margin-top:2px}
  .tp-phone{padding-top:18px}
  .tp-screen{height:530px}
  .tp-phone::before{top:5px}
}

/* ---- Le téléphone : étape 1 compacte, carte fantôme ---- */
.tp-row{display:flex;gap:8px;align-items:stretch}
.tp-row input{flex:1 1 auto;min-width:0}
.tp-row .tp-b{flex:0 0 96px;width:96px;min-height:48px;margin:0;border-radius:12px}
.tp-ghost{display:flex;gap:10px;align-items:center;margin-top:6px;padding:12px;border:1.5px dashed rgba(27,26,22,.4);border-radius:14px;color:var(--ios-sub);font-size:16px;line-height:1.3}
.tp-ghost-ico{flex:0 0 auto;width:32px;height:32px;border-radius:8px;border:1.5px dashed rgba(27,26,22,.4);display:grid;place-items:center}
.tp-bareme{font-size:16px;font-weight:600;line-height:1.3;color:#111111}
.tp-rappel{background:var(--stabilo);color:var(--ink);border-radius:12px}
/* l'anneau sur la prochaine cible (2 passages, puis arrêt) */
.ring-t{position:relative}
.ring-t.ring-on::after,.ring-t.ring-fix::after{content:"";position:absolute;inset:-4px;border-radius:var(--ring-r,16px);border:2px solid #173901;pointer-events:none;opacity:0}
.ring-t.ring-on::after{animation:ringP 1.3s cubic-bezier(.2,.7,.3,1) 2}
.ring-t.ring-fix::after{opacity:.6}
@keyframes ringP{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(var(--ring-sx,1.08),var(--ring-sy,1.08))}}
.tp-notif{--ring-r:22px;--ring-sx:1.06;--ring-sy:1.25}
.tp-bub{--ring-r:22px}
.tp-call{--ring-r:50%}
.tp-slot{--ring-r:8px}
/* 4 c : l'appel et le devis */
.tp-ap-h{text-align:center;padding-top:6px}
.tp-ap-h .tp-t{font-size:28px}
.tp-ap-a{display:flex;flex-direction:column;align-items:center;gap:8px;margin:auto 0}
.tp-call{width:72px;height:72px;border-radius:50%;border:0;background:var(--forest);display:grid;place-items:center;cursor:pointer;transition:transform .12s cubic-bezier(.2,.8,.3,1)}
.tp-call:active{transform:scale(.95)}
.tp-call:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.tp-call-l{font-size:17px;font-weight:600}
.tp-ap-b{display:flex;flex-direction:column;gap:8px}
.tp-ap-st{text-align:center;font-size:16px;font-weight:600;color:var(--ios-sub)}
.tp-ap-dots i{display:inline-block;width:5px;height:5px;margin-left:3px;border-radius:50%;background:currentColor;vertical-align:middle;animation:dotP .7s ease-in-out 2}
.tp-ap-dots i:nth-child(2){animation-delay:.15s}
.tp-ap-dots i:nth-child(3){animation-delay:.3s}
@keyframes dotP{0%,100%{opacity:.25}50%{opacity:1}}
.tp-cb{align-self:flex-start;max-width:88%;padding:9px 14px;background:var(--ios-bub);color:#111111;border-radius:18px 18px 18px 5px;font-size:17px;line-height:1.3}
.tp-cb.me{align-self:flex-end;background:var(--forest);color:#ffffff;border-radius:18px 18px 5px 18px}
.tp-cb.in{animation:pop .3s cubic-bezier(.2,.9,.3,1.3) both}
.tp-devis{border-radius:14px;background:var(--ios-fill);padding:12px 14px 16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.tp-devis-k{align-self:flex-start;font-weight:600;font-size:17px}
.tp-slot{width:176px;min-height:64px;padding:6px;border:2px dashed rgba(17,17,17,.5);border-radius:6px;background:#ffffff;transform:rotate(-5deg);font:inherit;font-weight:700;font-size:18px;color:#111111;cursor:pointer;display:grid;place-items:center}
.tp-slot:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.tp-slot.done{border-color:transparent;background:transparent;transform:none;cursor:default}
.tp-dstamp{display:inline-block;padding:6px 12px;border:4px double var(--forest);color:var(--forest);font-family:var(--mono);font-weight:600;font-size:20px;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-5deg);white-space:nowrap}
.tp-dstamp.slam{animation:slam .56s cubic-bezier(.2,.9,.25,1) both}
/* 7 c : Julie recommande encore */
.tp-encore{position:absolute;left:10px;right:10px;top:8px;z-index:3;width:auto;background:rgba(255,255,255,.94)}
.tp-encore .tp-nh{align-items:center}
.tp-ex{font-family:var(--mono);font-size:16px;line-height:1.2;padding:0 6px;border:1.5px solid var(--ink);border-radius:4px;color:var(--ink);background:#ffffff}
.tp-encore-l{font-size:16px;font-weight:600;text-align:center}
.tp-phone.buzz1{animation:buzz .5s cubic-bezier(.36,.07,.19,.97) 1}
.tp-hl{position:relative;display:inline-block;isolation:isolate}
.tp-hl::before{content:"";position:absolute;left:-4px;right:-4px;bottom:.08em;height:.42em;background:var(--stabilo);z-index:-1;opacity:0;transform-origin:0 50%}
.tp-hl.go::before{opacity:1;animation:hlGo .4s cubic-bezier(.2,.8,.3,1) both}
@keyframes hlGo{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tp-wrap{transform-origin:50% 40%}

/* ---- Le calcul : la perte en face du gain ---- */
.dpage{display:grid;gap:14px;margin-top:20px}
.dp-arrow{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--stylo);font-family:var(--mono);font-size:16px}
.dp-arrow svg{transform:rotate(90deg)}
@media (min-width:1000px){
  .dpage{grid-template-columns:minmax(0,7fr) 64px minmax(0,5fr);gap:0;align-items:center}
  .dp-arrow{flex-direction:column}
  .dp-arrow svg{transform:none}
}
.fiche-prime{background:var(--slip);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.fiche-prime .b-h .stamp{font-size:16px}
.fp-in{padding:14px 14px 16px}
.fp-pct{font-size:20px;font-weight:600}
.fiche-prime .big{font-size:clamp(44px,8vw,64px)}
.fp-lbl{font-size:18px;font-weight:600}
.fiche-prime .loss-gain{margin-top:10px}
.fp-sub{margin-top:10px;font-size:17px}
.fp-sub mark{background:var(--sage);color:var(--ink);padding:0 3px}
.dp-cta{max-width:520px;margin-top:22px}
.dp-cta .q{font-size:19px}
/* le prix : la phrase audit, les tampons contre le bouton */
.prix .audit{font-size:19px;font-weight:600;max-width:34em}
.garanties{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 14px;max-width:560px}
.garanties .stamp{display:inline-block;white-space:normal;line-height:1.2;padding:5px 9px;font-size:16px;background:var(--slip)}
.garanties li:nth-child(even) .stamp{transform:rotate(-2deg)}
.garanties .stamp.g-f{border-color:var(--forest);color:var(--forest)}
.garanties .stamp.g-s{border-color:var(--stylo);color:var(--stylo)}
.garanties .stamp.slam{animation:slam .56s cubic-bezier(.2,.9,.25,1) both}
#wl-garanties{margin-top:16px}
/* les objections, en post-it */
.postits{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:700px){.postits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.postits.trois{grid-template-columns:repeat(3,minmax(0,1fr))}}
.postit{position:relative;padding:14px 16px 18px;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--ciel);color:var(--ink)}
.postit:nth-child(4n+2){background:var(--peche)}
.postit:nth-child(4n+3){background:var(--menthe)}
.postit:nth-child(4n+4){background:var(--lavande)}
@media (min-width:1000px){.postit:nth-child(odd){rotate:-.7deg}.postit:nth-child(even){rotate:.6deg}}
.postit .n{display:block;font-size:16px;color:var(--ink);margin-bottom:6px}
.postit h3{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:24px;line-height:1.05}
.postit p{margin-top:8px;font-size:18px}
.postit p b{font-weight:700}
.pas-pour-moi{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;margin-top:18px;padding:16px;border:1.5px dashed var(--ink);background:var(--slip)}
.pas-pour-moi .n{font-size:16px;color:var(--ink2);padding-top:4px}
.pas-pour-moi h3{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:26px;line-height:1.05}
.pas-pour-moi p{margin-top:6px;font-size:18px}
.pas-pour-moi textarea{display:block;width:100%;min-height:96px;margin-top:10px;padding:10px 12px;font:inherit;font-size:17px;color:var(--ink);background:#ffffff;border:1.5px solid var(--ink);border-radius:0;resize:vertical}
@media (max-width:699px){.pas-pour-moi{grid-template-columns:1fr}}
/* le lien du film */
.film-sec{padding-top:36px}
.film-link{display:inline-flex;align-items:center;gap:14px;min-height:48px;color:var(--ink);text-decoration:none}
.film-play{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;background:var(--ink);border:1.5px solid var(--ink)}
.film-t{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:21px;line-height:1.1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.film-link:focus-visible{outline:3px solid var(--forest);outline-offset:4px}
.fondateur{margin-top:14px;font-size:17px}

/* ---- Onglets visibles (Chacun son côté, parcours entreprises, calcul en deux faces) ---- */
.tabset{margin-top:18px}
.tablist{display:flex;flex-wrap:wrap;gap:6px;padding:4px 2px 0;border-bottom:1.5px solid var(--ink)}
.tablist [role=tab]{position:relative;font:inherit;font-weight:700;font-stretch:75%;text-transform:uppercase;letter-spacing:.03em;font-size:17px;line-height:1.15;color:var(--ink);background:var(--ciel);border:1.5px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;padding:10px 14px;min-height:44px;margin-bottom:-1.5px;cursor:pointer;text-align:left;transition:translate .25s ease}
.tablist [role=tab]:nth-child(2){background:var(--peche)}
.tablist [role=tab]:nth-child(3){background:var(--menthe)}
.tablist [role=tab]:nth-child(4){background:var(--lavande)}
.tablist [role=tab]:nth-child(5){background:var(--slip)}
.tablist [role=tab][aria-selected="true"]{translate:0 -3px;padding-bottom:13px;box-shadow:inset 0 4px 0 var(--ink);z-index:1}
.tablist [role=tab]:focus-visible{outline:3px solid var(--forest);outline-offset:-5px}
.tablist .tn{font-weight:500;font-stretch:100%;font-size:16px;margin-right:4px}
@media (hover:hover) and (pointer:fine){.tablist [role=tab][aria-selected="false"]:hover{translate:0 -2px}}
.tabpanel{border:1.5px solid var(--ink);border-top:0;background:var(--slip);padding:12px 16px 16px}
.tabpanel:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.tabpanel.path ol{border-top:0}
.tabpanel .args{border-top:0}
.tabpanel .feed{margin-top:12px}
.mini-feed{display:inline-flex;gap:2px;margin-left:6px;vertical-align:middle}
.mini-feed i{width:8px;height:10px;border:1.5px solid var(--ink);background:var(--paper)}
/* le calcul entreprises en deux faces */
.faces{margin-top:18px}
.face-h{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:24px;line-height:1.05;margin-bottom:10px}
.face-sub{font-size:18px;margin:-4px 0 10px}
.faces .bord,.faces .calc{max-width:none}
@media (min-width:1000px){
  .faces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;align-items:start}
  .faces-tabs{display:none}
}
@media (max-width:999px){
  .faces .face.is-off{display:none}
  .faces .face{border:1.5px solid var(--ink);border-top:0;background:var(--paper);padding:14px 10px 16px}
  .faces .face-h{display:none}
}
/* entreprises : les cinq cartes */
.cartes5{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:700px){.cartes5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.cartes5{grid-template-columns:repeat(6,minmax(0,1fr))}.cartes5 li:nth-child(-n+2){grid-column:span 3}.cartes5 li:nth-child(n+3){grid-column:span 2}}
.carte{border:1.5px solid var(--ink);background:var(--slip);box-shadow:3px 3px 0 var(--ink);padding:14px 16px 18px}
.carte .n{display:block;font-size:16px;color:var(--ink2);margin-bottom:6px}
.carte h3{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:24px;line-height:1.05}
.carte p{margin-top:8px;font-size:18px}
.cartes5 li:nth-child(-n+2) h3{font-size:28px}
/* entreprises : les cartes de prix façon « ce qui est inclus » */
.cartes-prix{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.cartes-prix{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.cartes-prix{grid-template-columns:repeat(3,minmax(0,1fr))}}
.carte-prix{border:1.5px solid var(--ink);background:var(--slip);box-shadow:3px 3px 0 var(--ink);padding:14px 14px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:relative}
.carte-prix .cp-n{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:19px;line-height:1.05}
.carte-prix .cp-pers{font-size:16px;color:var(--ink2)}
.carte-prix .cp-prix{font-weight:700;font-size:26px;line-height:1.1;margin-top:6px;white-space:nowrap}
.carte-prix .cp-prix span{display:block;font-size:16px;font-weight:500;margin-top:2px}
.carte-prix .cp-prix s{text-decoration-thickness:3px;text-decoration-color:var(--ink)}
.carte-prix .cp-lanc{font-weight:800;font-size:19px;line-height:1.2;color:var(--forest)}
.carte-prix .cp-lanc span{display:block;font-size:14px;font-weight:600;color:var(--ink2)}
.prix-centre{max-width:620px;margin:18px auto 0;display:flex;flex-direction:column;align-items:stretch;text-align:center}
.prix-centre .engage{margin-top:0}
.prix-centre .field{margin-top:18px;text-align:left}
.prix-centre .fh output{font-size:30px;font-weight:700}
.prix-centre .cartes-prix{grid-template-columns:1fr !important;margin-top:16px}
.prix-centre .carte-prix{align-items:center;text-align:center;padding:24px 20px 22px;box-shadow:5px 5px 0 var(--ink);background:var(--slip) !important}
.prix-centre .carte-prix:not([aria-current]){display:none}
.prix-centre .carte-prix .cp-votre{display:none}
.prix-centre .carte-prix .cp-n{font-size:clamp(30px,6vw,42px)}
.prix-centre .carte-prix .cp-pers{font-size:18px}
.prix-centre .carte-prix .cp-prix{font-size:clamp(34px,7vw,48px);margin-top:10px}
.prix-centre .carte-prix .cp-lanc{font-size:clamp(24px,4.6vw,30px);margin-top:4px}
.prix-centre .carte-prix .cp-lanc span{font-size:16px}
.prix-centre .carte-prix .cp-calc-n{margin-top:-2px;margin-bottom:6px}
.carte-prix .cp-calc{font-size:16px;margin-top:4px}
.prix-centre .carte-prix .btn2{max-width:340px;margin-top:14px}
@media (prefers-reduced-motion:no-preference){.prix-centre .carte-prix[aria-current]{animation:cpIn .28s cubic-bezier(.2,.8,.3,1)}}
@keyframes cpIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.carte-prix .cp-calc{font-size:15px;color:var(--ink2)}
.carte-prix .btn2{display:block;width:100%;box-sizing:border-box;text-align:center;min-height:44px;margin-top:10px}
.carte-prix .cp-votre{margin-bottom:2px;font-size:15px;padding:2px 7px}
.carte-prix[aria-current="true"]{background:var(--ocre-vif)}
@media (prefers-reduced-motion:no-preference){.carte-prix{transition:translate .18s cubic-bezier(.2,.8,.3,1)}}
@media (hover:hover) and (pointer:fine){.carte-prix:hover{translate:-2px -2px}}
/* tarifs : bas de page qui suit la carte (PO 2026-10-12) */
.engage-bloc{margin-top:18px;text-align:left}
.engage-bloc .sortie{margin-top:0;max-width:none}
.sortie-solo{background:var(--ciel)}
.mep{margin-top:12px;font-size:18px}
.inclus-court{margin-top:28px;text-align:left}
.ic-row{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ic-row li{border:1.5px solid var(--ink);background:var(--slip);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.ic-row .ic-n{font-size:13px;color:var(--ink2)}
.ic-row b{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:18px;line-height:1.05}
.ic-row span:last-child{font-size:15px;line-height:1.35}
.ic-detail{margin-top:10px}
.ic-detail summary{cursor:pointer;font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:flex;align-items:center}
.ic-detail .inclus{margin-top:6px}
.ic-detail .inclus-grid{grid-template-columns:1fr !important}
@media (min-width:640px){.ic-detail .inclus-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
.fine{margin-top:22px;font-size:14px;color:var(--ink2);text-align:center}
.talon-c{margin-left:auto;margin-right:auto}
.cp-solo73{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:8px}
.cp-solo73 .sweep{font-weight:800;font-size:clamp(22px,4.4vw,28px);color:var(--forest);padding:0 6px;
  background-image:linear-gradient(var(--stabilo),var(--stabilo));background-repeat:no-repeat;background-position:0 85%;background-size:100% .55em}
.carte-prix .cp-lanc .sweep-rose{display:inline;font-style:normal;font-weight:800;color:var(--ink);padding:0 4px;background-image:linear-gradient(var(--rose),var(--rose));background-repeat:no-repeat;background-position:0 85%;background-size:100% .6em}
@media (prefers-reduced-motion:no-preference){.carte-prix .cp-lanc .sweep-rose{animation:sweep 3s cubic-bezier(.4,.1,.2,1) infinite}}
.lancement{position:relative;align-self:center;margin:10px auto 0;padding:22px 26px 16px;border:1.5px solid var(--ink);background:var(--slip);box-shadow:4px 4px 0 var(--ink);text-align:center;max-width:460px;width:100%}
.lancement::before{content:"";position:absolute;inset:5px;border:1px dashed var(--ink2);pointer-events:none}
.lc-stamp{position:absolute;top:-16px;right:-4px;font-size:15px;border-color:var(--corail);color:var(--corail);background:var(--slip)}
.lc-big{font-family:var(--mono);font-weight:700;font-size:clamp(42px,9vw,60px);line-height:1;color:var(--corail)}
.lc-t{margin-top:6px;font-size:18px}
.cp-solo73-s{font-size:15px;font-weight:600;color:var(--ink2)}
@media (prefers-reduced-motion:no-preference){.cp-solo73 .sweep{animation:sweep 3s cubic-bezier(.4,.1,.2,1) infinite}}
@keyframes sweep{0%{background-size:0 .55em}30%{background-size:100% .55em}85%{background-size:100% .55em}100%{background-size:0 .55em;background-position:100% 85%}}
/* entreprises : bloc « inclus dans chaque palier » */
.inclus{margin-top:22px}
.inclus-h{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:22px;line-height:1.05;margin-bottom:10px}
.inclus-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:700px){.inclus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.inclus-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.inclus-col h4{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:17px;line-height:1.1;margin-bottom:4px}
.inclus-col .check li{font-size:17px}
.side-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px}
.side-row .side-line{flex:1 1 220px}
.mes{margin-top:10px;font-size:18px}
.sortie{margin-top:22px;padding:16px 16px 14px;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--menthe);color:var(--ink);max-width:760px}
.sortie h3{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(22px,3.6vw,28px);line-height:1.05}
.sortie h3 b{color:var(--forest)}
.sortie p{margin-top:6px;font-size:18px}
.sx{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.sx li{border:1.5px solid var(--ink);background:var(--slip);text-align:center;font:600 14px/30px var(--mono,monospace)}
.sx li.sx-in{background:var(--forest);color:var(--slip)}
.sx li:nth-child(3){position:relative}
.sx li:nth-child(3)::after{content:"";position:absolute;right:-4px;top:-8px;bottom:-8px;border-right:3px dashed var(--ink)}
.sx-leg{display:flex;align-items:center;gap:8px;margin-top:10px !important;font-size:14px !important}
.sx-key{width:14px;height:14px;flex:none;background:var(--forest);border:1.5px solid var(--ink)}
.sx-leg .sx-flag{font-weight:700;color:var(--forest)}
.engage{margin-top:14px;font-size:19px}
.mer-h,.open-h{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:24px;line-height:1.05;margin-top:16px}
.open-blocks{display:grid;gap:26px;margin-top:18px}
.open-b .bareme{margin-top:12px}
.wl-sans{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:24px;line-height:1.05;margin-bottom:10px}
.wl-sans b{color:var(--perte)}
.proto-tag{display:inline-block;padding:0 6px;border:1.5px dashed var(--ink)}

/* ---- M2 : le surligneur sous les mots qui vendent ---- */
.hl b{background-image:linear-gradient(var(--stabilo),var(--stabilo));background-repeat:no-repeat;background-size:100% .42em;background-position:0 88%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (hover:hover) and (pointer:fine) and (min-width:1000px){
  .hl b{background-image:none;position:relative;display:inline-block;white-space:nowrap;isolation:isolate}
  .hl b::before{content:"";position:absolute;left:-3px;right:-3px;bottom:.06em;height:.42em;background:var(--stabilo);z-index:-1;transform:scaleX(0) rotate(-1deg);transform-origin:0 50%;transition:transform .18s cubic-bezier(.2,.8,.3,1)}
  .hl b:hover::before{transform:scaleX(1) rotate(-1deg);transition-duration:.28s}
  .hl b:hover{color:var(--pousse)}
  :root[data-site="wl"] .hl b:hover{color:var(--prusse-vif)}
  .h1 b:hover{color:var(--pousse)}
}
/* ---- M3 : les liens soulignés au crayon ---- */
@media (hover:hover) and (pointer:fine){
  .ulink,.film-t{position:relative}
  .ulink::after,.film-t::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:7px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 7' preserveAspectRatio='none'%3E%3Cpath d='M1 4 C 20 1.6, 38 6, 58 3.2 S 88 5.2, 99 2.6' fill='none' stroke='%231b1a16' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;transform:scaleX(0);transform-origin:0 50%;transition:transform .32s cubic-bezier(.2,.8,.3,1)}
  .ulink:hover,.ulink:focus-visible,.film-link:hover .film-t,.film-link:focus-visible .film-t{text-decoration-color:transparent}
  .ulink:hover::after,.ulink:focus-visible::after,.film-link:hover .film-t::after,.film-link:focus-visible .film-t::after{transform:scaleX(1)}
}
/* ---- M5 : les fiches qui se soulèvent ---- */
@media (hover:hover) and (pointer:fine){
  .lift,.postit,.carte{transition:translate .18s cubic-bezier(.2,.8,.3,1)}
  .lift:hover,.postit:hover,.carte:hover{translate:-2px -2px}
}
.postit:active,.carte:active{translate:2px 2px;transition-duration:.08s}
/* ---- M1 : la lampe du quadrillage (toutes les pages) ---- */
.lamp-zone{position:relative;isolation:isolate}
.lamp-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.lamp{position:absolute;left:0;top:0;width:340px;height:340px;opacity:0;transition:opacity .24s ease;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(246,211,101,.22) 0,rgba(246,211,101,0) 70%);
  -webkit-mask-image:radial-gradient(circle,#000 0 42%,transparent 72%);mask-image:radial-gradient(circle,#000 0 42%,transparent 72%);overflow:hidden}
.lamp.on{opacity:1}
.lamp.off{transition-duration:.16s}
.lamp-grid{position:absolute;left:0;top:0;background-image:linear-gradient(rgba(27,26,22,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(27,26,22,.2) 1px,transparent 1px);background-size:8px 8px;will-change:transform}
/* ---- Barre collante, mobile ---- */
.sbar{display:none}
@media (max-width:699px){
  .sbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:6px 16px calc(6px + env(safe-area-inset-bottom,0px));background:var(--slip);border-top:1.5px solid var(--ink);transform:translateY(110%);visibility:hidden;transition:transform .16s cubic-bezier(.2,.8,.3,1),visibility 0s linear .16s}
  .sbar.on{transform:none;visibility:visible;transition:transform .22s cubic-bezier(.2,.8,.3,1),visibility 0s}
  .sbar .btn{min-height:44px;padding:10px 12px;font-size:19px;box-shadow:2px 2px 0 var(--ink)}
  .sbar .proto-note{margin:0 0 6px}
  body.sbar-on .colo{padding-bottom:72px}
}

/* le film : la carte de lecture passe en bas, l'étiquette « Julie, qui recommande » reste lisible */
.cvposter{justify-content:flex-end}
/* ===================================================================== */
/* ============ Entreprises seulement : le téléphone à votre marque ============ */
/* ===================================================================== */
/* en-tête collé en haut sur ordinateur : « Programmer une démo » y apparaît dès qu'on quitte le haut de page */
@media (min-width:1000px){
  .head{position:sticky;top:0;z-index:45;background:var(--paper)}
  html{scroll-padding-top:84px}
}
.brand-tag{color:var(--ink2)}
/* haut de page */
.hero-sans{margin-top:14px}
.wl-cta{margin-top:18px}
.wl-cta .mention{text-align:left}
@media (max-width:699px){
  .hero-sans{font-size:18px;margin-top:8px}
  #hero-titre{font-size:24px}
}
/* la marque du visiteur, partout dans le téléphone */
.tp-screen{--brand-c:var(--wl,#1f3a5f);--brand-on:var(--wl-on,#ffffff)}
.tp-screen .tp-b{background:var(--brand-c);color:var(--brand-on)}
.tp-screen .tp-b.alt{background:var(--ios-bub);color:var(--ios-txt)}
.tp-bar{background:var(--brand-c);color:var(--brand-on);min-width:0;transition:background-color .25s ease}
.tp-bn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-ini{flex:0 0 auto;display:grid;place-items:center;min-width:30px;height:30px;padding:0 4px;border-radius:8px;background:var(--brand-on);color:var(--brand-c);font-weight:700;font-size:16px;line-height:1;letter-spacing:.02em}
.tp-app,.tp-av{background:var(--brand-c);color:var(--brand-on);font-weight:700;font-size:16px;line-height:1;letter-spacing:.02em}
.tp-mh{min-width:0}
.tp-mname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-nh .tp-bn{max-width:70%}
.tp-lock{background:radial-gradient(circle at 85% 70%,rgba(255,255,255,.5) 0 110px,transparent 111px),radial-gradient(circle at 10% 95%,rgba(246,211,101,.25) 0 90px,transparent 91px),linear-gradient(165deg,#eef2f7 0%,#d5deea 55%,#bccadc 100%)}
.tp-clock{color:#1a1c20}
.tp-chip{background:var(--ios-fill);color:#111111}
.tp-call,.tp-okc{background:var(--brand-c);color:var(--brand-on)}
.tp-cb.me{background:var(--brand-c);color:var(--brand-on)}
.tp-screen .rng::-webkit-slider-runnable-track{background:linear-gradient(var(--brand-c),var(--brand-c)) 0 0/var(--fill) 100% no-repeat,#d1d1d6}
.tp-screen .rng::-moz-range-track{background:linear-gradient(var(--brand-c),var(--brand-c)) 0 0/var(--fill) 100% no-repeat,#d1d1d6}
.tp-dots{width:auto;margin-left:0;transform:translateX(-50%)}
/* étape 1 : les cinq pastilles */
.tp-lbl{font-weight:600;font-size:16px;line-height:1.25}
.tp-sws{display:flex;gap:10px;flex-wrap:wrap}
.tp-sw{flex:0 0 auto;width:44px;height:44px;padding:0;border-radius:50%;border:3px solid #ffffff;background:var(--sw);box-shadow:0 0 0 1.5px rgba(17,17,17,.35);cursor:pointer}
.tp-sw[aria-checked="true"]{box-shadow:0 0 0 3px #111111}
.tp-sw:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* étape 4 bis : la frise Reçu → Appelé → Visite → Signé */
.tp-frise{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;font-size:16px;color:var(--ios-sub)}
.tp-frise li{position:relative;padding-top:12px;text-align:center}
.tp-frise li::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:3px;background:#d1d1d6;transition:background-color .3s ease}
.tp-frise li.on{color:#111111;font-weight:700}
.tp-frise li.on::before{background:var(--brand-c)}
/* étape 7 : le document de prime, signé puis contresigné */
.tp-doc{border-radius:14px;background:var(--ios-fill);padding:0 0 10px;overflow:hidden;display:flex;flex-direction:column;gap:6px}
.tp-doc-h{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 12px;background:var(--brand-c);color:var(--brand-on);font-weight:600;font-size:16px}
.tp-doc-l{display:flex;justify-content:space-between;gap:8px;padding:0 12px;font-size:16px}
.tp-sig{position:relative;margin:2px 12px 0;padding-top:6px;padding-right:132px;border-top:1px dashed #8e8e93;min-height:60px}
.tp-ap-st.fini .tp-ap-dots{display:none}
.tp-sig-k{display:block;font-size:16px;color:var(--ios-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tp-sig svg{display:block;width:130px;height:24px;overflow:visible}
.tp-sig svg path{stroke-dasharray:100;stroke-dashoffset:0}
.tp-sig:not(.go) svg{visibility:hidden}
.tp-sig.go svg path{animation:draw .9s ease-out both}
.tp-sst{position:absolute;right:0;bottom:4px;padding:2px 8px;border:3px double #1f3a5f;color:#1f3a5f;background:rgba(255,255,255,.85);font-family:var(--mono);font-weight:600;font-size:16px;line-height:1.2;text-transform:uppercase;letter-spacing:.03em;transform:rotate(-6deg);white-space:nowrap}
.tp-sst.slam{animation:slam .56s cubic-bezier(.2,.9,.25,1) both}
#tp-s7 .tp-b{margin-top:auto}
/* à vos couleurs (section 2) */
.wl-couleurs .g12{margin-top:18px;align-items:start}
.wl-couleurs .marque-form{margin-top:0}
@media (min-width:1000px){.wl-couleurs .cc-form{grid-column:1/7}.wl-couleurs .m-app{grid-column:8/13}}
/* le film : la marque du visiteur sur la carte de fin */
.cv-bmark{display:inline-flex;align-items:center;gap:10px;max-width:100%;font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:20px;line-height:1.1}
.cv-bi{flex:0 0 auto;display:grid;place-items:center;min-width:44px;height:44px;padding:0 6px;border-radius:10px;background:var(--wl,#1f3a5f);color:var(--wl-on,#ffffff);font-stretch:100%}
.cv-bn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* artisan indépendant : bientôt */
.bientot{display:grid;gap:8px;justify-items:start;max-width:640px;padding:18px 16px 20px;border:1.5px dashed var(--ink);background:var(--slip)}
.bientot h2{font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(26px,4.4vw,36px);line-height:1}
.bientot p{font-size:18px}
.bientot-st{font-size:16px;margin-bottom:4px}

/* ===================== Retouches accueil (spec 2026-10-07) ===================== */
/* haut de page : le sur-titre dit pour qui, aussi sur mobile ; « projets » souligné au crayon */
@media (max-width:699px){.hero-demo .sur{display:block}}
.h1 .mark svg.u{bottom:-5px;height:11px}
/* bandeau bouche-à-oreille : la roue des parrains autour du téléphone de l'entreprise (canvas, piste E) ; pas de fond, le quadrillage passe derrière */
.bao-sec{padding-top:30px}
@media (min-width:1000px){.bao-sec{padding-top:56px}}
.bao-stage{position:relative;aspect-ratio:16/8;max-width:100%;overflow:hidden}
.bao-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:640px){.bao-stage{aspect-ratio:1/1.1}}
/* la ligne métiers, en étiquettes */
.metiers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.metiers-k{font-weight:700;font-stretch:75%;text-transform:uppercase;letter-spacing:.04em;font-size:17px;margin-right:2px}
.metiers .tag{background:var(--slip)}
/* bénéfices : trois cartes */
@media (min-width:700px) and (max-width:999px){.cartes5.cartes3 li:nth-child(3){grid-column:1/-1}}
@media (min-width:1000px){.cartes5.cartes3{grid-template-columns:repeat(3,minmax(0,1fr))}.cartes5.cartes3 li:nth-child(n){grid-column:auto}}
.cartes5.cartes3 li h3{font-size:26px}
.carte-st{margin-top:14px;font-size:16px;background:var(--slip)}
/* le calcul : l'étiquette « Vos chiffres » seule, le doute « Sans vous » sur la face des pertes */
.face-sub.wl-sans{margin:-4px 0 12px;font-size:22px}
/* mobile : les sections entrent au défilement (classe posée par le script seulement) */
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
.rv.rv-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .lamp-layer{display:none !important}
  .tp-wrap{transform:none !important}
  .postit,.carte,.lift,.tablist [role=tab]{translate:none !important}
  .rv{opacity:1 !important;transform:none !important}
}

/* ===================================================================== */
/* ============ Menu mobile : bouton « Menu » + sommaire de carnet ============ */
/* ===================================================================== */
.menu-btn,.m-cur,.menu-panel{display:none}
@media (max-width:699px){
  .tabs-wrap{display:none}
  .nav{gap:12px}
  .nav .menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px 8px 11px;font:inherit;font-weight:800;font-stretch:75%;text-transform:uppercase;letter-spacing:.05em;font-size:17px;line-height:1;color:var(--ink);background:var(--slip);border:1.5px solid var(--ink);border-radius:1px;box-shadow:2px 2px 0 var(--ink);cursor:pointer;text-decoration:none!important}
  .nav .menu-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
  .nav .menu-btn:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
  .menu-btn .burger{display:block;width:18px;height:12px;background:linear-gradient(var(--ink),var(--ink)) 0 0/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 5px/72% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 10px/100% 2px no-repeat}
  /* repère : l'onglet de la page courante, posé sur le trait de l'en-tête */
  .m-cur{display:flex;margin:-1.5px 0 6px;padding:0 2px}
  .m-cur span{display:inline-flex;align-items:baseline;gap:8px;padding:3px 10px 4px;background:var(--ciel);border:1.5px solid var(--ink);border-top:0;border-radius:0 0 6px 6px;font-family:var(--mono);font-size:16px;font-weight:600;line-height:1.3;text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}
  .m-cur span b{font-weight:500;color:var(--ink2)}
  .m-cur[data-view="entreprises-comment"] span{background:var(--peche)}
  .m-cur[data-view="entreprises-tarifs"] span{background:var(--menthe)}
  .m-cur[data-view="entreprises-questions"] span{background:var(--lavande)}
  .m-cur[data-view="entreprises-marque"] span,.m-cur[data-view="entreprises-qui"] span{background:var(--slip);box-shadow:inset 0 -3px 0 var(--stylo)}

  /* le panneau plein écran */
  .menu-panel{display:flex;flex-direction:column;position:fixed;inset:0;z-index:90;overflow-y:auto;overscroll-behavior:contain;padding:env(safe-area-inset-top,0px) 16px calc(20px + env(safe-area-inset-bottom,0px));
    background-color:var(--paper);background-image:linear-gradient(rgba(27,26,22,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(27,26,22,.035) 1px,transparent 1px);background-size:8px 8px;
    clip-path:inset(0 0 100% 0);transform:translateY(-14px);transition:clip-path .24s cubic-bezier(.2,.8,.3,1),transform .24s cubic-bezier(.2,.8,.3,1)}
  .menu-panel.open{clip-path:inset(0 0 -20px 0);transform:none}
  .menu-panel[hidden]{display:none}
  .mp-spiral{flex:0 0 auto;margin:0 -16px}
  .mp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 10px;border-bottom:1.5px solid var(--ink)}
  .mp-head h2{margin:0;font-family:var(--mono);font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink)}
  .mp-head h2 small{display:block;font-weight:500;letter-spacing:.05em;color:var(--ink2);font-size:16px}
  .mp-close{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;padding:0;font:inherit;font-family:var(--mono);font-size:30px;line-height:1;color:var(--ink);background:var(--slip);border:1.5px solid var(--ink);border-radius:1px;box-shadow:2px 2px 0 var(--ink);cursor:pointer}
  .mp-close:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
  .mp-close:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
  .toc{list-style:none;margin:6px 0 0;padding:0}
  .toc li{border-bottom:1.5px dashed var(--rule)}
  .toc a{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 2px;color:var(--ink);text-decoration:none}
  .toc a:focus-visible{outline:3px solid var(--forest);outline-offset:-3px}
  .toc .n{flex:0 0 auto;width:36px;padding:2px 0;text-align:center;font-family:var(--mono);font-size:16px;font-weight:600;color:var(--ink);background:var(--ciel);border:1.5px solid var(--ink);border-radius:4px 4px 0 0}
  .toc a[data-view="entreprises-comment"] .n{background:var(--peche)}
  .toc a[data-view="entreprises-tarifs"] .n{background:var(--menthe)}
  .toc a[data-view="entreprises-questions"] .n{background:var(--lavande)}
  .toc a[data-view="entreprises-marque"] .n,.toc a[data-view="entreprises-qui"] .n{background:var(--slip);box-shadow:inset 0 3px 0 var(--stylo)}
  .toc .t{flex:0 1 auto;min-width:0;font-weight:800;font-stretch:75%;text-transform:uppercase;letter-spacing:0;font-size:27px;line-height:1.05}
  .toc .t span{background-image:linear-gradient(var(--stabilo),var(--stabilo));background-repeat:no-repeat;background-size:0 .46em;background-position:0 88%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .toc .lead{flex:1 1 12px;min-width:12px;align-self:flex-end;margin-bottom:17px;border-bottom:2.5px dotted var(--ink2);opacity:.6}
  .toc .go{flex:0 0 auto;font-family:var(--mono);font-size:18px;font-weight:600;color:var(--ink)}
  .toc a[aria-current="page"] .t span{background-size:100% .46em}
  .toc a[aria-current="page"] .go{font-size:16px}
  .toc a[aria-current="page"] .go::before{content:"ici ";}
  .toc a:active .t{transform:translateX(3px)}
  .mp-foot{margin-top:auto;padding-top:26px}
  .mp-foot .btn{box-shadow:3px 3px 0 var(--ink)}
  .mp-foot .mp-line{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1.5px solid var(--ink)}
  .mp-login{min-height:44px;padding:4px 0;font:inherit;font-weight:700;font-stretch:75%;font-size:18px;color:var(--ink);background:none;border:0;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
  .mp-login:focus-visible{outline:3px solid var(--forest);outline-offset:3px}
  .mp-mail{font-family:var(--mono);font-size:16px;color:var(--ink2)}
  html.menu-open,html.menu-open body{overflow:hidden}
  html.menu-open .sbar{display:none!important}
}
@media (max-width:379px){
  .head{gap:8px}
  .nav{gap:10px}
  .brand-box{flex:0 1 128px;min-width:0}
  .brand-box .brand{align-self:flex-start}
  .nav .menu-btn{padding:8px 10px;gap:7px}
  .toc .t{font-size:25px}
}
@media (max-width:699px) and (prefers-reduced-motion:reduce){
  .menu-panel,.menu-panel.open{transition:none;transform:none}
}

/* ajouts déclarés */
/* La vue Accueil, visible dans le HTML servi, ne doit pas apparaître avant que le script principal ait choisi la vue et posé son état initial. */
html.vue-en-attente #vue-wl-accueil{display:none}
/* Couleur de marque de départ : le script principal choisit « Bordeaux » (nuancier coché dans le balisage) et l'écrit sur :root.
   La poser ici évite le bleu de repli du téléphone de démo avant son exécution ; le script la réécrit ensuite à l'identique. */
:root{--wl:var(--swatch-bordeaux);--wl-on:#ffffff}
/* Champ leurre (patch form-leurre) et sa copie dans la fenêtre : hors écran, sans prise dans la mise en page. L'identifiant du formulaire rend la règle plus spécifique que `.form input`, quel que soit l'ordre des feuilles. */
#wl-form input.hp,#wl-form-fen input.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* fix-demo-bulle-recouvre (D13 ii) : la bulle « Nouvelle demande », hors flux, recouvrait le haut de la carte « 8 000 € » ; la carte lui laisse sa place quand elle est affichée. */
@media (max-width:699px){ #tp-s7b:has(#tp-encore:not([hidden])) .tp-ca-box{margin-top:46px} }
@media (min-width:700px){ #tp-s7b:has(#tp-encore:not([hidden])) .tp-ca-box{margin-top:39px} }
/* fix-demo-intro-etape8 : « 1 minute · rien n’est envoyé. » est faux à l'étape 8, dont le bouton mène à un envoi réel ; visibility garde la place (le téléphone ne remonte pas). */
.hero-demo:has(#tp-s8:not([hidden])) #tp-intro{visibility:hidden}
/* Intégration : ligne d'information sous le bouton du formulaire de démo (patch form-info-collecte), à la place d'un style en ligne. */
#f-info,#f-info-fen{margin-top:10px}
/* Intégration : bouton d'envoi pendant l'attente (désactivé), jusqu'ici sans aucun état visuel. Même opacité (.6) que les marges et filets du carnet. */
.btn:disabled,.btn2:disabled,.tp-b:disabled{opacity:.6;cursor:default}
/* Intégration : message d'échec d'envoi dans l'emplacement de remerciement (patch envoi-pas-pour-nous). Même couleur que les erreurs du formulaire (--err). */
.said.echec{color:var(--err)}
/* Fenêtre « Programmer une démo » (patch fenetre-coquille, script fenetre.js). Une page du carnet : même papier quadrillé (8 px) que la page, mêmes filets et ombre dure que `.form`, titre `.h2`.
   `<dialog>` ouvert par showModal() : au-dessus de tout (barre fixe, en-tête collant, sommaire mobile), le reste de la page inerte. Jetons existants uniquement. */
html.fen-ouverte,html.fen-ouverte body{overflow:hidden}
/* La barre de défilement disparaît quand la page se fige derrière la fenêtre : sa place reste réservée, la page ne se décale pas. Aucun effet fenêtre fermée. */
html.fen-ouverte{scrollbar-gutter:stable}
.fen{position:fixed;inset:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.fen::backdrop{background:rgba(27,26,22,.5)}
.fen-carte:focus{outline:none}
.fen-carte{position:relative;width:100%;min-height:100%;padding:0 16px calc(24px + env(safe-area-inset-bottom,0px));padding-left:calc(16px + env(safe-area-inset-left,0px));padding-right:calc(16px + env(safe-area-inset-right,0px));background-color:var(--slip);background-image:linear-gradient(rgba(27,26,22,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(27,26,22,.035) 1px,transparent 1px);background-size:8px 8px}
/* Croix : sobre, zone tactile 44 px ; collante en haut sur mobile, donc toujours atteignable pendant le défilement. */
.fen-fermer{position:sticky;top:0;z-index:2;display:grid;place-items:center;min-width:44px;min-height:44px;margin:0 -8px 0 auto;padding:0;font:inherit;font-family:var(--mono);font-size:30px;font-weight:500;line-height:1;color:var(--ink);background:transparent;border:1.5px solid transparent;border-radius:1px;cursor:pointer}
.fen-fermer:hover{border-color:var(--ink)}
.fen-fermer:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.fen-carte{padding-top:calc(8px + env(safe-area-inset-top,0px))}
.fen-fermer{top:calc(8px + env(safe-area-inset-top,0px))}
.fen-carte .h2{margin:0 0 16px;padding-bottom:10px;border-bottom:1.5px solid var(--ink);font-size:clamp(28px,8vw,36px)}
/* Le formulaire et l'agenda reposent directement sur la feuille : pas de seconde carte dans la carte. */
.fen-carte .fen-etape{max-width:100%;padding:0;background:none;border:0;box-shadow:none}
.fen-carte .fgrid{gap:12px}
.fen-carte .form label{font-size:16px}
.fen-carte .form textarea{min-height:64px;margin-top:4px}
.fen-carte #wl-form-fen .btn{margin-top:14px!important}
/* Les quatre tampons de garanties alourdissaient la fenêtre : masqués ici seulement (ils restent dans le formulaire du bas). « La démo ne vous engage à rien. » est conservée. */
#wl-garanties-fen{display:none}
.fen-carte .reassure{margin-top:8px;font-size:16px}
/* Étape 2 : remerciement compact, puis l'agenda qui prend la place. */
#fen-merci{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 12px}
#fen-merci h3{margin:0;font-size:26px}
#fen-merci .stamp{font-size:16px}
.fen-agenda iframe{display:block;width:100%;height:clamp(320px,calc(100dvh - 170px),680px);margin:0;border:1.5px dashed var(--rule);background:#ffffff}
.fen-carte #fen-cal{display:inline-flex;align-items:center;width:auto;min-height:44px;margin:0;padding:8px 2px;font-size:16px;font-weight:700;letter-spacing:.03em;color:var(--ink);background:none;border:0;box-shadow:none;text-decoration:underline;text-underline-offset:4px}
.fen-carte #fen-cal:active{transform:none;box-shadow:none}
.fen-carte #fen-cal:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (min-width:700px){
  .fen[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(min-content,1fr);padding:32px 16px}
  .fen-carte{width:100%;max-width:720px;min-height:0;margin:auto;padding:28px 28px 28px;border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
  .fen[data-etape="2"] .fen-carte{max-width:960px}
  .fen-fermer{position:absolute;top:12px;right:12px;margin:0}
  .fen-carte .h2{padding-right:48px;font-size:36px}
  .fen-agenda iframe{height:clamp(320px,calc(100dvh - 190px),680px)}
}
/* Apparition courte et discrète ; rien à jouer si l'on demande moins de mouvement. */
@media (prefers-reduced-motion:no-preference){
  .fen[open]{animation:fenIn .18s ease-out}
  .fen[open]::backdrop{animation:fenFond .18s ease-out}
}
@keyframes fenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fenFond{from{opacity:0}to{opacity:1}}
/* Fenêtre « conditions » (patch fenetre-conditions-coquille, script conditions.js) : la carte de la fenêtre de démo en petit, centrée, sur tous les écrans. */
.fen-cond[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(min-content,1fr);padding:16px}
.fen-cond .fen-carte{width:100%;max-width:520px;min-height:0;margin:auto;padding:28px 20px 24px;border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.fen-cond .fen-fermer{position:absolute;top:12px;right:12px;margin:0}
.fen-cond .fen-carte .h2{padding-right:48px;font-size:clamp(24px,7vw,32px)}
.fen-cond .fen-carte p{margin:0 0 12px;font-size:18px}
/* Fenêtre ouverte DEPUIS le téléphone de démo (`data-origine="telephone"`, posé par fenetre.js le temps de cette ouverture) : plein écran, comme l'écran du
   téléphone agrandi. La feuille défile dans son cadre ; en haut, le bandeau de l'appli (couleur de marque et nom choisis par le visiteur, mêmes règles `.tp-bar`
   que dans le téléphone) ; la croix reste posée dessus. Les autres ouvertures ne sont pas concernées : le bandeau y reste masqué. */
.fen-bar{display:none}
.fen[data-origine="telephone"]{overflow:hidden}
.fen[data-origine="telephone"][open]{display:block;padding:0;animation:none}
.fen[data-origine="telephone"] .fen-carte{--fen-l:calc(100% - 32px);position:static;width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:0 0 calc(24px + env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
/* Le bandeau court d'un bord à l'autre ; le titre et les deux étapes tiennent dans une colonne de lecture centrée. */
.fen[data-origine="telephone"] .fen-carte>.h2,.fen[data-origine="telephone"] .fen-carte>.fen-etape{width:var(--fen-l);margin-left:auto;margin-right:auto}
.fen[data-origine="telephone"] .fen-bar{--brand-c:var(--wl,#1f3a5f);--brand-on:var(--wl-on,#ffffff);display:flex;position:sticky;top:0;z-index:1;margin:0 0 12px;padding:calc(8px + env(safe-area-inset-top,0px)) 60px 8px 16px}
.fen[data-origine="telephone"] .fen-fermer{position:absolute;top:calc(1px + env(safe-area-inset-top,0px));right:6px;z-index:2;margin:0;color:var(--wl-on,#ffffff)}
.fen[data-origine="telephone"] .fen-fermer:hover{border-color:currentColor}
.fen[data-origine="telephone"] .fen-fermer:focus-visible{outline-color:currentColor;outline-offset:-4px}
@media (min-width:700px){
  /* Rappel du téléphone couché : le cadre, les coins et l'ombre de `.tp-phone`, autour de l'écran plein page. */
  .fen[data-origine="telephone"][open]{padding:12px 17px 17px 12px}
  .fen[data-origine="telephone"] .fen-carte{--fen-l:min(100% - 56px,720px);padding-bottom:28px;border:2px solid var(--ink);border-radius:34px;box-shadow:5px 5px 0 var(--ink)}
  .fen[data-origine="telephone"][data-etape="2"] .fen-carte{--fen-l:min(100% - 56px,1120px)}
  .fen[data-origine="telephone"] .fen-bar{margin-bottom:20px;padding:10px 84px 10px 28px}
  .fen[data-origine="telephone"] .fen-fermer{top:15px;right:36px}
  .fen[data-origine="telephone"] .fen-carte .h2{padding-right:0}
  .fen[data-origine="telephone"] .fen-agenda iframe{height:max(320px,calc(100dvh - 200px))}
}
@media (prefers-reduced-motion:no-preference){
  .fen[data-origine="telephone"][open]::backdrop{animation:fenFond .45s ease-out}
}
/* Dernière étape de la démo : le bandeau reste en haut, le titre, le rappel, le bouton et la mention sont centrés dans le reste de l'écran (marges automatiques ; sans effet si le contenu déborde). */
#tp-s8>.tp-t{margin-top:auto}
#tp-s8>.tp-mention{margin-bottom:auto}
/* Tarifs : ligne « mise en service » (patch tarifs-mise-en-service). Montant barré comme celui des cartes (.cp-prix s) ; « Voir conditions » est un bouton qui se lit comme un lien (.ulink). */
.mep s{text-decoration-thickness:2px;text-decoration-color:var(--ink)}
.mep-cond{position:relative;padding:0 2px;font:inherit;font-weight:600;line-height:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* zone tactile de 44 px sans agrandir la ligne */
.mep-cond::after{content:"";position:absolute;inset:-12px -6px}
.lc-mep{margin-top:12px;font-size:18px;font-weight:700;color:var(--corail)}
.lc-mep s{text-decoration-thickness:2px;text-decoration-color:var(--corail)}
.lc-mep .mep-cond{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.mep-cond:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* Démo ralentie (patches demo-lente-*, demande PO du 13/10) : les animations calées sur un temps automatique s'allongent de la même durée, `--tp-lent`
   (posée par le script ; absente ou nulle = durées du prototype). Étape 4 : les points de « Appel en cours » battent jusqu'à « Appel terminé », qui les masque.
   Étape 5 : le sablier et les cinq jours cochés durent ce que dure l'attente (1,8 s + la durée ajoutée ; chaque coche garde sa place dans le déroulé). */
.tp-ap-dots i{animation-iteration-count:infinite}
.run .tp-sab,.run .tp-sab .s-top,.run .tp-sab .s-bot,.run .tp-sab .s-fil{animation-duration:calc(1.8s + var(--tp-lent,0s))}
.run .tp-days li:nth-child(1) .tick{animation-delay:calc(.2s + var(--tp-lent,0s)*.111)}
.run .tp-days li:nth-child(2) .tick{animation-delay:calc(.52s + var(--tp-lent,0s)*.289)}
.run .tp-days li:nth-child(3) .tick{animation-delay:calc(.84s + var(--tp-lent,0s)*.467)}
.run .tp-days li:nth-child(4) .tick{animation-delay:calc(1.16s + var(--tp-lent,0s)*.644)}
.run .tp-days li:nth-child(5) .tick{animation-delay:calc(1.48s + var(--tp-lent,0s)*.822)}
/* Champ téléphone (patch form-telephone, script telephone.js) : le sélecteur de pays à gauche du numéro, sur une ligne. La boîte du sélecteur reprend le fond,
   le filet et la taille de texte de `.form select` et affiche la forme courte (drapeau, indicatif) ; la vraie liste déroulante, native, la recouvre, invisible
   mais active (clavier, lecteurs d'écran, roue du téléphone), à 17 px comme les autres champs (pas de zoom sur iPhone). Anneau de focus : celui des champs. */
.tel{display:flex;gap:8px}
.tel>input{flex:1 1 0;min-width:0}
.tel-pays{position:relative;flex:none;display:flex;align-items:center;padding:0 28px 0 12px;font-size:17px;white-space:nowrap;color:var(--ink);background:#ffffff;border:1.5px solid var(--ink)}
.tel-pays::after{content:"";position:absolute;right:11px;top:50%;margin-top:-3px;border:5px solid transparent;border-top:6px solid var(--ink);border-bottom:0}
.form .tel-pays select{position:absolute;top:-1.5px;left:-1.5px;width:calc(100% + 3px);height:calc(100% + 3px);padding:0;border:0;opacity:0;cursor:pointer}
.tel-pays:has(select:focus-visible){outline:3px solid var(--forest);outline-offset:3px}

/* Ordinateur : la page occupe plus de largeur (demande PO 15/10) */
@media (min-width:1000px){.sheet{max-width:1520px;padding-left:104px;padding-right:40px}.cv,.chap{max-width:1300px}}
/* Bandeau des étapes de la démo (`#tp-guide`) : plus bas d'un tiers (demande PO du 15/10), sans le bouton « Pressé ? ». « Recommencer » occupe les deux premières lignes à droite
   (sa zone de 44 px tient sans ajouter de hauteur) ; l'identifiant l'emporte sur les règles du prototype, quelle que soit la largeur. */
#tp-guide{grid-template-areas:"n again" "ticks again" "cons cons" "intro intro";padding-top:6px;padding-bottom:6px}
#tp-guide .tp-n{font-size:15px;line-height:1.2}
#tp-guide .tp-again{align-self:center;padding-top:0;padding-bottom:0}
#tp-guide .tp-ticks{margin:2px 0 8px}
#tp-guide .tp-ticks li{width:26px;height:26px}
#tp-guide .tp-ticks li.done::before{left:6px;top:5px}
#tp-guide .tp-dots{bottom:-8px}
#tp-guide .tp-consigne{margin-top:2px}
#tp-guide .tp-intro{margin-top:2px;font-size:16px;line-height:1.25}
@media (min-width:700px){ #tp-guide .tp-consigne{font-size:clamp(20px,2.2vw,26px)} }
@media (max-width:699px){ #tp-guide .tp-consigne{font-size:18px} }
/* Consigne de l'étape : rouge vif dans un cadre blanc (demande PO 15/10), et un reflet blanc qui balaie toute la case
   de gauche à droite à chaque changement d'étape (la classe `flash` est rejouée par le script). #c41e0c sur #ffffff : contraste 5,9:1. */
:root{--consigne-rouge:#c41e0c}
#tp-guide .tp-consigne{position:relative;overflow:hidden;display:block;color:var(--consigne-rouge);background:#ffffff;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:6px 12px}
#tp-guide .tp-consigne::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;pointer-events:none;background:linear-gradient(105deg,transparent 0%,rgba(196,30,12,.35) 40%,rgba(255,255,255,1) 50%,rgba(196,30,12,.35) 60%,transparent 100%);transform:translateX(-120%)}
#tp-guide .tp-consigne.flash{animation:cons .42s cubic-bezier(.2,.8,.3,1)}
#tp-guide .tp-consigne.flash::after{animation:cons-reflet 2.2s ease-in-out .2s}
@keyframes cons-reflet{from{transform:translateX(-120%)}to{transform:translateX(330%)}}
@media (prefers-reduced-motion:reduce){
  #tp-guide .tp-consigne.flash,#tp-guide .tp-consigne.flash::after{animation:none}
}