/* Guide des commerciaux. Très peu de texte : une étape = un titre, une phrase, un écran.
   Même esprit que l'outil : à plat, une seule police, beaucoup de vide.
   Le PDF est l'impression de cette page (règles « @media print » en bas). */
:root{
  --fond:#fff; --encre:#0d0d0f; --doux:#5f6168; --trait:#e4e4e7; --creux:#f4f4f5;
  --bleu:#1f44d6; --vert:#0b7a4b; --rouge:#c62a1c; --ambre:#8a5a00;
  color-scheme:light;
}
/* Mode sombre : même choix que dans l'outil (theme.js), ou celui de l'appareil. Le PDF reste clair. */
:root[data-theme=sombre]{
  --fond:#0c0c0d; --encre:#f3f3f1; --doux:#a1a1a8; --trait:#26262a; --creux:#18181b;
  --bleu:#8ea6ff; --vert:#4fd39b; --rouge:#ff7a6b; --ambre:#f0b656;
  color-scheme:dark;
}
img.sombre{display:none}
:root[data-theme=sombre] img.clair{display:none}
:root[data-theme=sombre] img.sombre{display:block}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fond);color:var(--encre);
  font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:18px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
a{color:var(--bleu);text-underline-offset:4px}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
.tete,.une,.etape,.coince,.pied{padding-left:max(24px,calc(50% - 470px));padding-right:max(24px,calc(50% - 470px))}

.tete{display:flex;align-items:center;justify-content:space-between;height:72px}
.marque{display:flex;align-items:center;gap:10px}
.marque img{height:30px;width:30px;display:block}
.marque b{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1}
.marque small{display:block;font-size:11px;font-weight:500;color:var(--doux);line-height:1;margin-top:4px}
.actions{display:flex;align-items:center;gap:22px}
#theme{border:0;background:none;padding:10px 0;font:inherit;font-size:15px;color:var(--doux);cursor:pointer}
#theme:hover{color:var(--encre)}
.ouvrir{font-weight:600;font-size:16px;text-decoration:none}
.ouvrir:hover,.pdf:hover{text-decoration:underline}

/* la une : le titre, et rien d'autre */
.une{padding-top:12vh;padding-bottom:14vh}
.sur-titre{margin:0 0 16px;font-size:17px;color:var(--doux)}
h1{margin:0;font-size:clamp(40px,9vw,84px);font-weight:800;letter-spacing:-.035em;line-height:1;max-width:13ch}
.but{margin:30px 0 0;font-size:22px;line-height:1.35;color:var(--doux)}
.but span{display:block} /* une phrase par ligne ; les deux-points ne passent jamais seuls à la ligne (espaces insécables dans la page) */
.depart{margin:34px 0 0}
.commencer{display:inline-block;padding:18px 34px;border-radius:12px;background:var(--encre);color:var(--fond);font-size:18px;font-weight:700;text-decoration:none;transition:transform .12s}
.commencer:hover{transform:translateY(-2px)}
.commencer:active{transform:scale(.98)}
.commencer::after{content:"↓";display:inline-block;margin-left:10px;animation:descend 1.6s ease-in-out infinite}
@keyframes descend{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
.adresse{margin:26px 0 0;font-size:19px;color:var(--doux)}
.adresse a{font-weight:700}

/* une étape = un titre, une phrase, un écran ; une bande sur deux est grise */
.etape{display:grid;gap:40px;padding-top:11vh;padding-bottom:11vh;justify-items:start}
.etape:nth-of-type(even){background:var(--creux)}
.num{margin:0;font-size:22px;font-weight:800;color:var(--bleu)}
h2{margin:8px 0 0;font-size:clamp(38px,8vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1.02;max-width:11ch}
.phrase{margin:18px 0 0;font-size:22px;line-height:1.35;color:var(--doux);max-width:22ch}
figure{margin:0;width:100%;max-width:340px}
figure img{width:100%;border-radius:28px;box-shadow:0 0 0 1px var(--trait),0 22px 60px rgba(13,13,15,.12)}

/* le fil des étapes : il reste en haut et suit la lecture */
.fil{position:sticky;top:0;z-index:5;display:flex;justify-content:center;gap:6px;padding:8px 16px;background:var(--fond);border-bottom:1px solid var(--trait)}
.fil a{display:block;min-width:44px;padding:9px 0;text-align:center;font-weight:700;font-size:16px;color:var(--doux);text-decoration:none;border-bottom:3px solid transparent}
.fil a:hover{color:var(--encre)}
.fil a[aria-current]{color:var(--bleu);border-bottom-color:var(--bleu)}
.etape,.coince{scroll-margin-top:64px}

/* les étapes arrivent en douceur (seulement si le programme tourne) */
.js .etape .texte,.js .etape .ecran,.js .etape > figure{opacity:0;transform:translateY(26px);transition:opacity .5s ease-out,transform .5s ease-out}
.js .etape .ecran,.js .etape > figure{transition-delay:.12s}
.js .etape.vu .texte,.js .etape.vu .ecran,.js .etape.vu > figure{opacity:1;transform:none}

/* l'écran d'une étape qui se manipule : des mots à toucher, des lignes à glisser */
.ecran{width:100%;max-width:340px}
.essai p,.demo-titre{margin:0 0 10px;font-size:15px;font-weight:600;color:var(--bleu)}
.essai{margin-bottom:18px}
/* des mots qui ont l'air de boutons : on comprend qu'ils se touchent */
.essai button{display:inline-block;margin:0 8px 8px 0;padding:10px 16px;border-radius:999px;border:1px solid var(--doux);background:none;font:inherit;font-size:16px;font-weight:600;color:var(--encre);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .12s}
.essai button:hover{border-color:var(--encre);transform:translateY(-1px)}
.essai button:active{transform:scale(.97)}
.essai button[aria-pressed=true]{background:var(--encre);border-color:var(--encre);color:var(--fond)}

/* un écran à toucher : le point bleu bat à l'endroit du geste, l'écran passe à la suite */
.touche .avant{display:none}
.touche.garde-avant .avant{display:block}
.touche.garde-avant .apres{display:none}
.js .touche .avant{display:block;position:relative}
.js .touche .apres{display:none}
.js .touche.fait .avant{display:none}
.js .touche.fait .apres{display:block;animation:arrive .4s ease-out}
@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.geste{display:inline-block;margin:0 0 14px;padding:0;border:0;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--bleu);cursor:pointer}
.touche.fait .geste{text-decoration:underline;text-underline-offset:4px}
.point{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.point::before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--bleu);box-shadow:0 0 0 3px var(--fond)}
.point::after{content:"";position:absolute;inset:11px;border-radius:50%;border:2px solid var(--bleu);animation:bat 1.6s ease-out infinite}
@keyframes bat{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}

/* la ligne qui fait « coucou » : un petit aller-retour pour montrer qu'elle se glisse */
.rang.coucou .ligne{animation:coucou 1.3s ease-in-out}
.rang.coucou .options{visibility:visible;transition-delay:0s}
@keyframes coucou{0%,100%{transform:none}35%,60%{transform:translateX(-72px)}}
.demo-titre::after{content:"←";display:inline-block;margin-left:8px;animation:gauche 1.4s ease-in-out infinite}
.demo.compris .demo-titre::after{animation:none}
@keyframes gauche{0%,100%{transform:translateX(3px)}50%{transform:translateX(-5px)}}
.avec-demo figure{display:none}
.demo-liste{background:var(--fond);border-radius:22px;padding:6px 20px;box-shadow:0 0 0 1px var(--trait),0 22px 60px rgba(13,13,15,.12)}
.rang{position:relative;overflow:hidden;border-bottom:1px solid var(--trait)}
.rang:last-child{border-bottom:0}
.rang .ligne{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px 0;background:var(--fond);
  font-size:16px;color:var(--doux);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;transition:transform .18s ease-out}
.rang.tire .ligne{transition:none;cursor:grabbing}
.rang .ligne b{color:var(--encre);font-weight:600}
.rang .ligne em{font-style:normal;font-size:14px;white-space:nowrap}
.rang .ligne em.bleu{color:var(--bleu);font-weight:600}
.options{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;gap:18px;padding-left:16px;visibility:hidden;transition:visibility 0s linear .18s}
.rang.tire .options,.rang.ouvert .options{visibility:visible;transition-delay:0s}
.options button{border:0;background:none;font:inherit;font-size:16px;font-weight:600;color:var(--encre);padding:14px 0;cursor:pointer}
.options .retirer{color:var(--rouge)}
.demo-dit{min-height:1.5em;margin:14px 0 0;font-size:16px;font-weight:600;color:var(--encre)}
.phrase b{color:var(--encre);font-weight:700}

/* les trois réponses de l'outil */
.reponses{list-style:none;margin:30px 0 0;padding:0;font-size:19px;color:var(--doux)}
.reponses li{padding:5px 0}
.reponses b{font-weight:800;letter-spacing:-.01em}
.vert{color:var(--vert)} .ambre{color:var(--ambre)} .rouge{color:var(--rouge)}

.coince{padding-top:10vh;padding-bottom:10vh}
.coince h2{font-size:clamp(30px,6vw,44px);max-width:none}
.coince ul{list-style:none;margin:26px 0 0;padding:0;font-size:19px;color:var(--doux)}
.coince li{padding:8px 0}
.coince b{color:var(--encre);font-weight:700}
.pied{padding-top:44px;padding-bottom:80px;background:#0d0d0f;color:#a1a1a8;font-size:15px}
:root[data-theme=sombre] .pied{background:#18181b}
.pied a{color:#fff}
.pied .ouvrir{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em}
.pied .pdf{display:inline-block;margin-top:14px;font-weight:600;text-decoration:none}
.pied p{margin:30px 0 0}

@media (min-width:820px){
  .etape{grid-template-columns:minmax(0,1fr) 340px;column-gap:80px;align-items:center}
  .etape:nth-of-type(even) .texte{order:2}
  .etape .ecran{justify-self:start}
  .etape:nth-of-type(even){grid-template-columns:340px minmax(0,1fr)}
  .phrase{font-size:24px}
}

/* le PDF : deux pages A4, trois étapes par page */
@page{size:A4;margin:16mm 15mm}
@media (prefers-reduced-motion:reduce){
  .js .etape .texte,.js .etape .ecran,.js .etape > figure{opacity:1;transform:none;transition:none}
  .rang .ligne{transition:none}
  .point::after,.commencer::after,.demo-titre::after,.js .touche.fait .apres{animation:none}
}
@media print{
  :root[data-theme=sombre]{--fond:#fff; --encre:#0d0d0f; --doux:#5f6168; --trait:#e4e4e7; --creux:#f4f4f5; --bleu:#1f44d6; --vert:#0b7a4b; --rouge:#c62a1c; --ambre:#8a5a00; color-scheme:light}
  :root[data-theme=sombre] img.clair{display:block}
  :root[data-theme=sombre] img.sombre,img.sombre{display:none}
  #theme{display:none}
  .but{font-size:15px;margin-top:5mm;max-width:none}
  body{font-size:13px}
  .fil,.essai,.demo,.geste,.point,.depart{display:none!important}
  .touche .avant,.js .touche .avant{display:none!important}
  .touche .apres,.js .touche .apres{display:block!important;animation:none}
  .touche.garde-avant .avant,.js .touche.garde-avant .avant{display:block!important}
  .touche.garde-avant .apres,.js .touche.garde-avant .apres{display:none!important}
  .avec-demo figure{display:block}
  .js .etape .texte,.js .etape .ecran,.js .etape > figure{opacity:1!important;transform:none!important}
  .ecran{max-width:none}
  .tete,.une,.etape,.coince,.pied{padding-left:0;padding-right:0}
  .tete{height:auto;margin-bottom:10mm}
  .tete .ouvrir,.pied .ouvrir,.pied .pdf{display:none}
  .marque img{height:24px;width:24px}
  .marque b{font-size:16px}
  .marque small{font-size:10px}
  .une{padding:0 0 12mm}
  h1{font-size:46px;max-width:14ch}
  .sur-titre{font-size:13px;margin-bottom:3mm}
  .adresse{font-size:14px;margin-top:6mm}
  main{display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:9mm;row-gap:0;align-items:start}
  .une,.coince{grid-column:1 / -1}
  .etape,.etape:nth-of-type(even){display:block;background:none;padding:0;break-inside:avoid}
  #e4{break-before:page}
  #e4,#e5,#e6{padding-top:2mm}
  /* les écrans d'une même rangée partent de la même hauteur */
  #e1 .texte,#e2 .texte,#e3 .texte{min-height:72mm}
  #e4 .texte,#e5 .texte,#e6 .texte{min-height:42mm}
  .num{font-size:15px}
  h2{font-size:24px;margin-top:1mm;max-width:none}
  .phrase{font-size:14px;margin-top:2.5mm;max-width:none}
  .reponses{font-size:12.5px;margin-top:3mm}
  .reponses li{padding:.6mm 0}
  figure{max-width:none;margin-top:0}
  figure img{border-radius:4mm;box-shadow:0 0 0 .3mm var(--trait)}
  .coince{padding:12mm 0 0;break-inside:avoid}
  .coince h2{font-size:20px}
  .coince ul{font-size:13.5px;margin-top:3mm;display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:9mm}
  .coince li{padding:0}
  .coince b{display:block}
  .pied{background:none;color:var(--doux);padding:8mm 0 0;font-size:10.5px}
  .pied p{margin:0}
  a{color:inherit;text-decoration:none}
}