/* L'accueil (le hub, /index.html), direction « Au marché ». Chargée après /socle.css, dont elle
   reprend les jetons (--braise, --encre, --papier...) et les composants (.btn,
   .marque, .pastille, .bandeau). Les quelques teintes ajoutées sont déclarées
   ici, sur :root, avec leur contraste noté.
   Mouvement : tout est dans des @media (prefers-reduced-motion: no-preference).
   Sans mouvement, rien n'est caché. Les états de départ des révélations ne
   valent que sous html.anime, classe posée par le module (accueil.js) juste
   avant qu'il observe la page : sans script, rien n'attend une animation.
   L'ombre franche (décalée, sans flou) est réservée au papier : l'affiche et
   le ticket. Le reste porte des ombres douces ou un filet. */

@font-face{font-family:"Fraunces B";font-weight:100 900;font-display:swap;src:url(/fonts/f8.woff2) format("woff2")}
@font-face{font-family:"Fraunces B";font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/f5.woff2) format("woff2")}
@font-face{font-family:"DM Sans B";font-weight:100 1000;font-display:swap;src:url(/fonts/f1.woff2) format("woff2");unicode-range:U+0100-02FF,U+0304,U+0308,U+0329,U+1D00-1EFF,U+20A0-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans B";font-weight:100 1000;font-display:swap;src:url(/fonts/f2.woff2) format("woff2")}

:root{
  --braise-vive:#F28A4B;   /* braise lisible sur l'encre : 6,4:1 */
  --nuit:#1A140F;          /* le fond du tableau et des téléphones */
  --case:#3A2E24;          /* une palette : 1,5:1 contre le tableau, lettre 10,8:1 */
  --case-2:#30261D;        /* sa moitié basse, un ton plus bas */
  --case-lit:rgba(255,236,214,.17); /* le filet de lumière en haut d'une palette */
  --sur-sombre:#F4EDE2;    /* texte sur l'encre : 13:1 */
  --sur-sombre-2:#CBBBA6;  /* texte second sur l'encre : 8,4:1 */
  --filet-sombre:#4A3B2E;
  --f-titre:"Fraunces B","Fraunces",Georgia,serif;
  --f-texte:"DM Sans B","DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gout:clamp(16px,4.2vw,64px);
  --sortie:cubic-bezier(.16,1,.3,1);
  --bascule:cubic-bezier(.65,0,.35,1);
  --haut-entete:68px;
  --ombre-douce:0 26px 50px -30px rgba(43,33,24,.55);
}

/* ---------- Base ---------- */
html{scroll-padding-top:calc(var(--haut-entete) + 8px)}
.page-b{font-family:var(--f-texte);font-size:1.0625rem;overflow-x:clip}
.page-b :focus-visible{outline:3px solid var(--encre);outline-offset:3px}
.sur-sombre :focus-visible,.carnet-b__bande :focus-visible,.pied-b :focus-visible{outline-color:var(--or-clair)}
.appel-b :focus-visible{outline-color:var(--encre)}
.cadre{width:min(1320px,100% - 2 * var(--gout));margin-inline:auto}
.page-b img{max-width:100%;height:auto}

/* Le repère (trait et capitales) : trois sections seulement, héros, étapes, offre. */
.reperes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font:700 .75rem/1.35 var(--f-texte);letter-spacing:.22em;text-transform:uppercase;color:var(--braise)}
.reperes::before{content:"";flex:none;width:28px;height:2px;background:currentColor}
.statut-b{display:flex}

/* Trois tailles de titre : la preuve et le tableau montent, l'offre et les
   questions descendent, le reste entre les deux. */
.titre-b{font-family:var(--f-titre);font-weight:600;font-variation-settings:"opsz" 144;font-size:clamp(2.15rem,1.35rem + 3.2vw,4.35rem);line-height:.98;letter-spacing:-.022em;word-spacing:.05em;text-wrap:balance}
.titre-b--fort{font-size:clamp(2.6rem,1.4rem + 4.6vw,5.6rem);line-height:.93}
.titre-b--sobre{font-size:clamp(2rem,1.55rem + 1.6vw,3rem);line-height:1.04;letter-spacing:-.015em}
.sur-sombre .titre-b{color:var(--sur-sombre)}
.lede{font-size:clamp(1.06rem,1rem + .3vw,1.22rem);line-height:1.55;color:var(--encre-douce);max-width:56ch}
.sur-sombre .lede{color:var(--sur-sombre-2)}
.tete-b{display:grid;gap:18px;max-width:820px;margin-bottom:clamp(36px,5vw,72px)}
.sec-b{padding-block:clamp(72px,9vw,140px);scroll-margin-top:var(--haut-entete)}
.note-b{margin-top:14px;color:var(--encre-sourde);font-size:.8125rem}

/* Les boutons du socle, en plus franc. Une flèche dessinée suit le libellé. */
.page-b .btn{min-height:52px;padding:0 24px;border-radius:6px;font-size:1rem;letter-spacing:.01em;transition:background-color .25s var(--sortie),color .25s var(--sortie),border-color .25s var(--sortie),transform .25s var(--sortie)}
.page-b .btn:not(.btn--discret)::after{content:"";flex:none;width:.5em;height:.5em;margin-left:4px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--sortie)}
.page-b .btn:hover::after{transform:translateX(4px) rotate(45deg)}
.page-b .btn:active{transform:translateY(1px)}
.page-b .btn--secondaire{border:2px solid var(--encre);background:transparent;color:var(--encre)}
.page-b .btn--secondaire:hover{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.page-b .btn--discret{min-height:44px;padding:0 12px;font-size:.9375rem}
.page-b .btn--discret:hover{background:var(--papier-2)}
.lien-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--encre);font-weight:700;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/100% 2px no-repeat;transition:background-size .35s var(--sortie),color .2s}
.lien-b::after{content:"";flex:none;width:.42em;height:.42em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .3s var(--sortie)}
.lien-b:hover{color:var(--braise-fonce);background-size:0 2px}
.lien-b:hover::after{transform:translateX(3px) rotate(45deg)}
.lien-b--clair{color:var(--sur-sombre)}
.lien-b--clair:hover{color:var(--braise-vive)}

/* ---------- En-tête ---------- */
.entete-b{position:sticky;top:0;z-index:40;background:var(--papier);border-bottom:2px solid var(--encre)}
.entete-b__rang{display:flex;align-items:center;gap:16px;height:var(--haut-entete)}
.nav-b{display:none}
.entete-b__actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.entete-b .btn--creer{min-height:44px;padding:0 18px;font-size:.9375rem}
.entete-b .btn--creer::after{display:none}
/* Téléphone : un seul bouton, « Créer mon site » (les deux mènent à la même porte). */
/* Au téléphone, l'en-tête garde « Se connecter » (qui revient n'a que lui) ;
   « Créer mon site » est dans le héros, juste dessous. */
@media (max-width:559px){.entete-b .btn--creer{display:none}}
.entete-b .btn--creer{white-space:nowrap}
@media (max-width:399px){.entete-b__rang{gap:10px}.entete-b .marque__nom{letter-spacing:.12em}}
/* La barre des sections : les cinq sections de la page à partir de 1080 px,
   comme avant ; « La formation » (décision du 02/10/2026), sixième et dernier
   lien, ne la rejoint qu'à partir de 1280 px. Mesurée : les six tiennent sur
   une ligne, sans couper un intitulé, à partir de 1280 px, en serrant un peu
   les lettres jusqu'à 1439 px. Entre 1080 et 1279 px, le pied la porte (son
   premier lien), comme au téléphone. */
@media (min-width:1080px){
  .nav-b{display:flex;gap:2px;margin-left:auto}
  .nav-b a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--encre);font:700 .72rem/1 var(--f-texte);letter-spacing:.17em;text-transform:uppercase;text-decoration:none}
  .nav-b a::after{content:"";position:absolute;left:12px;right:12px;bottom:9px;height:2px;background:var(--braise);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--sortie)}
  .nav-b a:hover::after,.nav-b a:focus-visible::after{transform:scaleX(1)}
  .entete-b__actions{margin-left:12px}
}
@media (max-width:1279px){.nav-b .nav-b__formation{display:none}}
/* De 1280 à 1439 px, les lettres se serrent : à 1280 px, il reste une vingtaine
   de pixels, la largeur d'une barre de défilement (le media query la compte,
   la page non). */
@media (min-width:1280px) and (max-width:1439px){
  .nav-b a{padding:0 8px;letter-spacing:.11em}
  .nav-b a::after{left:8px;right:8px}
}

/* ---------- Le bandeau : une semaine de rôtisseur ---------- */
.defile{position:relative;display:flex;align-items:center;background:var(--braise);color:var(--papier);border-bottom:2px solid var(--encre)}
.defile__fenetre{flex:1;min-width:0;overflow:hidden}
.defile__rail{display:flex;width:max-content}
.defile__piste{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.defile__piste li{display:flex;align-items:center;gap:.6em;min-height:46px;padding-right:2.2em;white-space:nowrap;font:700 .875rem/1 var(--f-texte);letter-spacing:.2em;text-transform:uppercase}
.defile__piste li::after{content:"";flex:none;width:40px;height:10px;margin-left:1.4em;background:linear-gradient(var(--or-clair),var(--or-clair)) 10px 50%/30px 2px no-repeat,radial-gradient(circle at 4px 50%,transparent 2.2px,var(--or-clair) 2.8px 4px,transparent 4.6px)}
.defile__piste i{font:italic 500 1.12rem/1 var(--f-titre);letter-spacing:0;text-transform:none}
.defile__bouton{position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-left:2px solid var(--encre);background:var(--braise);cursor:pointer}
.defile__bouton:hover{background:var(--braise-fonce)}
.defile__pause{position:relative;width:13px;height:15px;border-left:4px solid var(--papier);border-right:4px solid var(--papier)}
.defile__arret:checked~.defile__bouton .defile__pause{width:0;height:0;border:0;border-left:13px solid var(--papier);border-top:8px solid transparent;border-bottom:8px solid transparent}
.defile__arret:focus-visible~.defile__bouton{outline:3px solid var(--encre);outline-offset:-5px}
@media (prefers-reduced-motion:no-preference){
  .defile__rail{animation:defile 52s linear infinite}
  .defile:hover .defile__rail,.defile__arret:checked~.defile__fenetre .defile__rail{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .defile__rail{width:auto}
  .defile__piste+.defile__piste{display:none}
  .defile__piste{flex-wrap:wrap;padding:8px 16px}
  .defile__piste li{min-height:34px}
  .defile__bouton{display:none}
}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- Le héros ----------
   Trois blocs, dans l'ordre du document : le titre, l'essai, le texte et les
   boutons. Écran large : le titre et le texte à gauche (ils se tiennent au
   milieu de la hauteur de l'essai), l'essai à droite. Téléphone : les boutons
   juste sous le panneau, le texte ensuite. */
.heros-b{padding-block:clamp(22px,2.6vw,40px) clamp(48px,6vw,96px);overflow:hidden}
.heros-b__grille{display:grid;row-gap:clamp(26px,4vw,40px);column-gap:clamp(36px,4.6vw,64px)}
.heros-b__sur{margin-bottom:clamp(16px,2vw,26px)}
.heros-b__titre{font-family:var(--f-titre);font-weight:600;font-variation-settings:"opsz" 144;font-size:clamp(3.15rem,min(6.2vw,11vh),7.6rem);line-height:.9;letter-spacing:-.038em;word-spacing:.05em;color:var(--encre)}
.heros-b__titre .ligne{display:block;overflow:hidden;padding:.06em .12em .08em 0;margin:-.06em 0 -.08em}
.heros-b__titre .ligne>span{display:block}
.heros-b__titre em{font-style:italic;font-weight:500;color:var(--braise)}
.heros-b__suite{display:grid;align-content:start}
.heros-b__intro{max-width:44ch;font-size:clamp(1.06rem,1rem + .35vw,1.25rem);line-height:1.55;color:var(--encre-douce)}
.heros-b__actions{margin-top:clamp(22px,2.6vw,34px);gap:12px}
.rassurances-b{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:clamp(18px,2.2vw,28px);padding-top:14px;border-top:1px solid var(--filet-fort);max-width:560px;color:var(--encre-douce);font-size:.875rem;line-height:1.4}
.rassurances-b li{display:flex;align-items:center;gap:9px}
.rassurances-b li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--braise)}
@media (max-width:559px){.heros-b__actions .btn{flex:1 1 100%}}
@media (max-width:619px){
  .heros-b__grille{row-gap:24px}
  .heros-b__actions{order:-1;margin:0 0 24px}
}
@media (min-width:1000px){
  .heros-b__grille{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"tete scene" "suite scene";row-gap:0;align-items:center}
  .heros-b__tete{grid-area:tete;align-self:end}
  .heros-b__suite{grid-area:suite;align-self:start;padding-top:clamp(18px,2.2vw,30px)}
  .scene{grid-area:scene}
}

/* La scène : sa légende (le lien, l'arrêt du mouvement), puis la photo du
   marché, la vraie page dans le téléphone, les bulles et l'affiche ;
   dessous, le panneau de l'essai, qui prend toute la largeur de la colonne.
   La boîte de la photo a sa propre hauteur : sur un écran bas, elle s'aplatit
   (la photo s'élargit, le téléphone suit la hauteur) pour que le panneau
   reste en vue, sans que rien rapetisse en largeur. */
.scene{width:min(100%,620px);margin:0;justify-self:center;container-type:inline-size;scroll-margin-top:calc(var(--haut-entete) + 12px)}
@media (min-width:1000px){.scene{width:min(100%,680px);justify-self:end}}

.scene__legende{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;margin-bottom:8px;color:var(--encre-sourde);font-size:.8125rem;line-height:1.45}
.scene__texte .lien-b{font-size:.875rem}
@container (max-width:539px){.scene__quoi{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.scene__pause{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-right:-4px;padding:0 4px;border:0;background:none;color:var(--encre);font:700 .6875rem/1 var(--f-texte);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.scene__pause-icone{display:grid;place-items:center;flex:none;width:28px;height:28px;border:2px solid var(--encre);border-radius:50%;transition:background-color .2s,color .2s}
.scene__pause-icone::before{content:"";width:8px;height:10px;border-inline:3px solid currentColor}
.scene__pause:hover .scene__pause-icone{background:var(--encre);color:var(--papier)}
.scene__pause[aria-pressed=true] .scene__pause-icone::before{width:0;height:0;margin-left:2px;border:0;border-left:9px solid currentColor;border-block:5.5px solid transparent}

/* --e-tel : l'échelle du téléphone là où le navigateur ne sait pas diviser
   deux longueurs (la boîte se règle alors sur lui). Sinon, la hauteur de la
   boîte décide, et --tel, la largeur du téléphone, s'en déduit (cadre de
   390 x 760, plus 8 px de coque de chaque côté). */
.scene__boite{--e-tel:.36;--tel:calc(390px * var(--e-tel) + 16px);position:relative;container-type:size;height:calc(760px * var(--e-tel) + 24px)}
@media (min-width:400px){.scene__boite{--e-tel:.4}}
@media (min-width:620px){.scene__boite{--e-tel:.56}}
@media (min-width:1000px){.scene__boite{--e-tel:.52}}
@media (min-width:1300px){.scene__boite{--e-tel:.56}}
@supports (width:calc(100cqw / 390px * 1px)){
  .scene__boite{--tel:calc((97cqh - 16px) * 390 / 760 + 16px);height:calc(100cqw * .71)}
  @media (max-width:619px){.scene__boite{height:calc(100cqw * .8)}}
  @media (min-width:1000px){.scene__boite{height:min(100cqw * .71,max(300px,100svh - 455px))}}
}
.scene__photo{position:absolute;top:0;right:0;left:calc(var(--tel) * .8);height:90%;overflow:hidden;border-radius:4px;background:var(--encre)}
.scene__photo picture,.scene__photo img{display:block;width:100%;height:100%}
.scene__photo img{object-fit:cover;object-position:64% 40%}
.scene__tel{position:absolute;left:1.5%;bottom:0;z-index:3;width:var(--tel);transform:rotate(-3deg);transform-origin:50% 100%}
.tel{padding:8px;border-radius:clamp(18px,4.2cqw,28px);background:var(--nuit);box-shadow:0 30px 50px -26px rgba(43,33,24,.6)}
.tel .echelle{border-radius:clamp(12px,3.2cqw,20px)}
.echelle--heros{--e:var(--e-tel)}

/* Les bulles : ce que la page annonce ce matin, et la place dans l'annuaire
   (retirée quand la scène est trop étroite pour la loger sans chevaucher). */
.bulle-b{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;margin:0;padding:8px 12px 8px 10px;border:2px solid var(--encre);border-radius:6px;background:var(--blanc);box-shadow:var(--ombre-douce);white-space:nowrap}
.bulle-b b{display:block;font:700 clamp(.5625rem,1.75cqw,.6875rem)/1.2 var(--f-texte);letter-spacing:.14em;text-transform:uppercase;color:var(--encre)}
.bulle-b small{display:block;margin-top:2px;font-size:clamp(.625rem,1.9cqw,.75rem);line-height:1.25;color:var(--encre-douce)}
.bulle-b .voyant{flex:none;background:var(--braise)}
.bulle-b .icone{flex:none;width:18px;height:18px;color:var(--braise)}
.bulle-b--jour{top:5%;left:calc(var(--tel) + 2.5%)}
.bulle-b--jour::after{content:"";position:absolute;left:18px;bottom:-7px;width:10px;height:10px;border-right:2px solid var(--encre);border-bottom:2px solid var(--encre);background:var(--blanc);transform:rotate(45deg)}
/* La seconde se tient juste sous la première, au-dessus de l'affiche même
   quand la boîte s'aplatit. */
.bulle-b--annuaire{right:-1%;top:calc(5% + 58px)}
@container (max-width:499px){.bulle-b--annuaire{display:none}}

/* Les couleurs de COULEURS (app/lib/site-rendu.js, leur « accent »), pour ce
   qui les montre ici : l'affiche, et le fond des pastilles le temps que leur
   image arrive. Une couleur sans ligne garde la braise. */
[data-couleur=rouge]{--teinte:#B0201E}
[data-couleur=or]{--teinte:#96601A}
[data-couleur=olive]{--teinte:#4F6B2E}
[data-couleur=ardoise]{--teinte:#2F4A6B}

/* L'affiche du stand : du papier, une ombre franche, un ruban. Elle suit le
   choix : son bandeau prend la couleur, le nom la lettre du style
   (lettres.css), son QR code mène à la page (essai.js le redessine). */
.affiche-b{position:absolute;z-index:5;right:3%;bottom:-1%;width:clamp(90px,min(25cqw,32cqh),150px);display:grid;justify-items:center;gap:clamp(3px,.8cqw,5px);padding:0 clamp(7px,1.6cqw,10px) clamp(8px,1.8cqw,11px);border:2px solid var(--encre);background:var(--papier);text-align:center;box-shadow:6px 6px 0 var(--encre);transform:rotate(3deg)}
.affiche-b::before{content:"";position:absolute;z-index:1;top:-10px;left:50%;width:48px;height:18px;margin-left:-24px;background:rgba(231,201,138,.85);transform:rotate(-3deg)}
.affiche-b__sur{justify-self:stretch;margin:0 calc(-1 * clamp(7px,1.6cqw,10px)) 2px;padding:clamp(9px,2cqw,12px) 4px clamp(4px,1cqw,6px);background:var(--teinte,var(--braise));color:var(--blanc);font:700 clamp(.4375rem,1.3cqw,.5625rem)/1.2 var(--f-texte);letter-spacing:.18em;text-transform:uppercase;transition:background-color .5s var(--sortie)}
.affiche-b__nom{max-width:100%;font:600 calc(clamp(.75rem,2.6cqw,1.05rem) * var(--taille,1))/1.05 var(--f-titre);font-variation-settings:"opsz" 72;letter-spacing:-.02em;text-wrap:balance;--ombre-neon:var(--teinte,#F2B33D)}
.affiche-b__qr{display:block;width:84%;height:auto;margin-top:2px}
.affiche-b__qr rect{fill:var(--papier)}
.affiche-b__qr path{fill:var(--encre)}
.affiche-b__scan{font:700 clamp(.4375rem,1.25cqw,.5625rem)/1.2 var(--f-texte);letter-spacing:.12em;text-transform:uppercase}

/* L'écran du téléphone : l'image fixe de la page (sans script, c'est tout
   l'écran ; avec, elle tient la place tant que la page n'est pas prête, et
   ne se montre qu'au bout d'une seconde : une page arrivée avant se monte
   pièce à pièce), les deux cadres l'un sur l'autre (l'actif, et celui qui
   prépare la page choisie), le filet du volet, la barre de chargement. */
.echelle.tel-ecran{background:var(--nuit)}
.tel-ecran__image{position:absolute;top:0;left:0;width:100%;height:auto;-webkit-mask-image:linear-gradient(#000 70%,transparent 99%);mask-image:linear-gradient(#000 70%,transparent 99%)}
.vue-b{visibility:hidden}
.vue-b.vue-b--active,.vue-b.vue-b--entre{visibility:visible}
.vue-b--entre{z-index:2}
.tel-ecran__volet{position:absolute;inset:0;z-index:3;border-top:3px solid var(--braise-vive);transform:translateY(100%);opacity:0;pointer-events:none}
.tel-ecran__charge{position:absolute;top:0;left:0;z-index:4;width:100%;height:3px;background:var(--braise-vive);opacity:0;transform:scaleX(.3);transform-origin:left;pointer-events:none;transition:opacity .2s}
.en-charge .tel-ecran__charge{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .tel-ecran__image{animation:vignette-tel .45s .95s var(--sortie) both}
  .en-charge .tel-ecran__charge{animation:charge 1.1s var(--sortie) infinite}
}
@keyframes vignette-tel{from{opacity:0}}
@keyframes charge{0%{transform:scaleX(0);transform-origin:left}49%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* Le panneau de l'essai : le style (une tuile par gabarit, son nom dans sa
   lettre : lettres.css ; « 02 / 10 » dit où l'on est), puis la couleur. Les
   tuiles et les pastilles sont bâties par essai.js depuis GABARITS et
   COULEURS ; en attendant, un tableau vide tient leur place. */
.essai-b{margin-top:14px;border:2px solid var(--encre);border-radius:8px;background:var(--blanc);box-shadow:var(--ombre-douce)}
.essai-b__groupe{min-width:0;margin:0;padding:0;border:0}
.essai-b__libelle{flex:none;font:700 .6875rem/1.2 var(--f-texte);letter-spacing:.2em;text-transform:uppercase;color:var(--encre-sourde)}
.essai-b__compte{margin-left:.9em;color:var(--braise-fonce);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.essai-b__compte:empty{display:none}
.essai-b__rang{display:flex;align-items:baseline;gap:4px 14px;padding:10px 16px 8px}
.essai-b__desc{min-width:0;min-height:1.35em;font-size:.875rem;line-height:1.35;color:var(--encre-douce)}
.essai-b__couleurs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 10px;padding-right:8px;border-top:1px solid var(--filet)}
.essai-b__couleurs .essai-b__rang{flex:1 1 auto;padding-block:10px}

/* Les tuiles : un tableau de styles à cinq colonnes, filets d'un pixel. Un
   rang incomplet est fermé par des cases vides. Celle qui est choisie passe à
   l'encre, un trait braise en tête, dans la tuile même. */
.essai-b__tuiles{--haut-tuile:58px;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;border-top:1px solid var(--filet);background:var(--filet)}
.essai-b__tuiles[data-colonnes="1"]{grid-template-columns:minmax(0,1fr)}
.essai-b__tuiles[data-colonnes="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.essai-b__tuiles[data-colonnes="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.essai-b__tuiles[data-colonnes="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.essai-b__tuiles:empty{min-height:calc(var(--haut-tuile) * 2 + 1px);background:linear-gradient(90deg,transparent calc(100% - 1px),var(--filet) 0) 0 0/20% 100%,linear-gradient(transparent calc(100% - 1px),var(--filet) 0) 0 0/100% 50%,var(--blanc)}
.tuile-b{position:relative;display:grid;align-content:space-between;justify-items:start;gap:2px;min-width:0;min-height:var(--haut-tuile);padding:7px 10px 8px;background:var(--blanc);color:var(--encre);cursor:pointer;container-type:inline-size;transition:background-color .25s var(--sortie),color .25s var(--sortie)}
.tuile-b--vide{cursor:default}
.tuile-b::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--braise-vive);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--sortie)}
.tuile-b__choix{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tuile-b__num{font:700 .625rem/1 var(--f-texte);letter-spacing:.16em;color:var(--encre-sourde);transition:color .25s}
.tuile-b__nom{--taille:1;display:block;max-width:100%;overflow:hidden;font:600 max(.9375rem,calc(clamp(.875rem,17cqi,1.5rem) * var(--taille)))/1.15 var(--f-texte);letter-spacing:-.01em;white-space:nowrap;text-overflow:clip}
.tuile-b:not(.tuile-b--vide):hover{background:var(--papier-2)}
.tuile-b:has(.tuile-b__choix:checked){background:var(--encre);color:var(--papier);--ombre-neon:var(--braise-vive)}
.tuile-b:has(.tuile-b__choix:checked)::before{transform:scaleX(1)}
.tuile-b:has(.tuile-b__choix:checked) .tuile-b__num{color:var(--braise-vive)}
.tuile-b:has(.tuile-b__choix:focus-visible){z-index:2;outline:3px solid var(--braise);outline-offset:-3px}
.tuile-b:has(.tuile-b__choix:checked:focus-visible){outline-color:var(--or-clair)}

/* Les pastilles : la couleur est une image (app/img/gabarits/couleur-*.webp),
   qui la garde en mode de contraste forcé ; son fond la tient en attendant. */
.essai-b__pastilles{display:flex;gap:0}
.pastille-b{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer}
.pastille-b__choix{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pastille-b__teinte{display:block;width:26px;height:26px;border-radius:50%;background:var(--teinte,var(--papier-2));box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:transform .35s var(--sortie),box-shadow .25s}
.pastille-b:hover .pastille-b__teinte{transform:scale(1.12)}
.pastille-b:has(.pastille-b__choix:checked) .pastille-b__teinte{box-shadow:0 0 0 3px var(--blanc),0 0 0 5px var(--encre);transform:scale(.86)}
.pastille-b:has(.pastille-b__choix:focus-visible){outline:3px solid var(--braise);outline-offset:-1px}

/* Téléphone : une scène plus serrée, des bulles plus petites ; les tuiles
   deviennent une rangée qui défile au doigt, ouverte sur la première. */
@media (max-width:399px){
  .scene__legende{column-gap:8px}
  .scene__texte .lien-b{font-size:.8125rem}
  .scene__pause{gap:7px;font-size:.625rem;letter-spacing:.09em}
}
@media (max-width:619px){
  .scene__tel{transform:rotate(-2deg)}
  .bulle-b{gap:7px;padding:6px 9px 6px 8px}
  .bulle-b--jour::after{left:14px}
  .affiche-b{right:1%;bottom:0;box-shadow:4px 4px 0 var(--encre)}
}
@media (max-width:519px){
  /* Deux tuiles et demie en vue : celle qui dépasse dit qu'il y en a d'autres.
     Un fondu de chaque côté tant qu'il reste à voir (essai.js pose
     data-debut et data-bout aux deux extrémités). */
  .essai-b__tuiles{--haut-tuile:56px;--fondu-g:26px;--fondu-d:26px;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(42% - 1px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fondu-g),#000 calc(100% - var(--fondu-d)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fondu-g),#000 calc(100% - var(--fondu-d)),transparent 100%)}
  .essai-b__tuiles::-webkit-scrollbar{display:none}
  .essai-b__tuiles[data-colonnes]{grid-template-columns:none}
  .essai-b__tuiles[data-debut]{--fondu-g:0px}
  .essai-b__tuiles[data-bout]{--fondu-d:0px}
  .essai-b__tuiles:empty{min-height:var(--haut-tuile);background:linear-gradient(90deg,transparent calc(100% - 1px),var(--filet) 0) 0 0/42% 100%,var(--blanc)}
  .tuile-b{scroll-snap-align:start}
  .tuile-b--vide{display:none}
  .essai-b__rang{flex-wrap:wrap;padding-inline:12px}
  .essai-b__styles .essai-b__desc{min-height:2.7em}
  .essai-b__couleurs{flex-wrap:nowrap}
  .essai-b__couleurs .essai-b__rang{flex-direction:column;gap:3px;padding-block:9px}
}

/* ---------- Les cadres de la vraie page ----------
   Par défaut, une échelle fixe (--e). Là où le navigateur sait diviser deux
   longueurs, le cadre prend la largeur de sa boîte et la page s'y ajuste.
   Ceux de la preuve, le module les retire de la tabulation, et les rend
   inertes sur un écran tactile ; celui du héros aussi. À la souris, on fait
   défiler la page dans le cadre ; au doigt, toucher le cadre ouvre la page. */
.echelle{--e:.5;position:relative;overflow:hidden;width:calc(var(--l) * var(--e));height:calc(var(--h) * var(--e));background:var(--blanc)}
.echelle iframe{position:absolute;top:0;left:0;width:var(--l);height:var(--h);max-width:none;border:0;transform:scale(var(--e));transform-origin:0 0}
.echelle--ordi{--l:1280px;--h:820px;--ar:1280/820}
.echelle--tel,.echelle--heros{--l:390px;--h:760px;--ar:390/760}
@supports (width:calc(100cqw / 390px * 1px)){
  .echelle{container-type:inline-size;width:100%;height:auto;aspect-ratio:var(--ar)}
  .echelle iframe{transform:scale(calc(100cqw / var(--l)))}
}
.echelle__ouvrir{display:none}
@media (hover:none){
  .echelle iframe{pointer-events:none}
  .echelle__ouvrir{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-start;justify-content:center;padding-top:14px;text-decoration:none}
  .echelle__ouvrir span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:99px;background:var(--encre);color:var(--papier);font:700 .8125rem/1 var(--f-texte);box-shadow:0 12px 24px -12px rgba(0,0,0,.7)}
  .echelle__ouvrir span::after{content:"";width:.45em;height:.45em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
  .echelle__ouvrir--heros{padding-top:9px}
  .echelle__ouvrir--heros span{gap:6px;min-height:28px;padding:0 11px;font-size:.6875rem}
}
/* À la souris, la pastille du téléphone du héros paraît quand on le survole. */
@media (hover:hover){
  .echelle__ouvrir--heros{position:absolute;top:10px;left:50%;z-index:5;display:flex;translate:-50% 0;opacity:0;text-decoration:none;transition:opacity .2s}
  .scene__tel:hover .echelle__ouvrir--heros{opacity:1}
  .echelle__ouvrir--heros span{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 13px;border-radius:99px;background:var(--encre);color:var(--papier);font:700 .75rem/1 var(--f-texte);white-space:nowrap;box-shadow:0 12px 24px -12px rgba(0,0,0,.7)}
  .echelle__ouvrir--heros span::after{content:"";width:.45em;height:.45em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
  .echelle__ouvrir--heros:hover span{background:var(--braise-fonce)}
}
.navigateur{overflow:hidden;border:2px solid var(--encre);border-radius:10px;background:var(--encre);box-shadow:var(--ombre-douce)}
.navigateur__barre{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;color:var(--sur-sombre-2);font:600 .75rem/1 var(--f-texte)}
.navigateur__barre i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--filet-sombre)}
.navigateur__barre span{margin-left:10px;padding:5px 14px;border-radius:99px;background:var(--nuit);letter-spacing:.04em}
.navigateur--sombre{border-color:var(--filet-sombre);box-shadow:0 30px 60px -34px rgba(0,0,0,.8)}
/* Les cadres de l'exemple, sous la souris : un filet braise, la page y défile. */
.preuve .navigateur,.preuve .telephone-b{transition:border-color .25s,background-color .25s}
@media (hover:hover){
  .preuve .navigateur:hover{border-color:var(--braise)}
  .preuve .telephone-b:hover{background:var(--braise-fonce)}
}
.telephone-b{display:inline-block;padding:9px;border-radius:32px;background:var(--nuit);box-shadow:0 26px 48px -26px rgba(26,20,15,.7)}
.telephone-b .echelle{border-radius:24px}

/* ---------- Le tableau à palettes ---------- */
.tableau-b{background:var(--encre);color:var(--sur-sombre);padding-block:clamp(64px,8vw,120px)}
.tableau-b__tete{display:grid;gap:28px;margin-bottom:clamp(28px,3.4vw,44px)}
.tableau-b__intro{display:grid;gap:22px;align-content:end}
.tableau-b__texte{max-width:52ch;color:var(--sur-sombre-2);font-size:clamp(1.02rem,1rem + .2vw,1.15rem)}
.panneau__photos{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:var(--case)}
.panneau__photo{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--sortie)}
.panneau__photo.est-active{opacity:1}
.panneau__photo img{width:100%;height:100%;object-fit:cover}
.panneau__legende{position:absolute;left:12px;bottom:12px;padding:7px 11px;border-radius:3px;background:var(--nuit);color:var(--sur-sombre);font:700 .6875rem/1.2 var(--f-texte);letter-spacing:.18em;text-transform:uppercase}
@media (min-width:1000px){
  .tableau-b__tete{grid-template-columns:minmax(0,1fr) minmax(0,400px);align-items:end;column-gap:56px}
  .panneau__photos{aspect-ratio:4/3.3}
}
.panneau{padding:clamp(14px,2.4vw,30px);border:1px solid var(--filet-sombre);border-radius:10px;background:var(--nuit)}
.panneau__en-tete{display:flex;align-items:center;gap:10px;margin-bottom:clamp(14px,2vw,22px);font:700 .75rem/1 var(--f-texte);letter-spacing:.24em;text-transform:uppercase;color:var(--braise-vive)}
.voyant{width:9px;height:9px;border-radius:50%;background:var(--braise-vive)}
.panneau__grille{container-type:inline-size;display:grid;gap:clamp(12px,1.6vw,20px)}
.panneau__rang{display:flex;flex-wrap:wrap;gap:12px 22px}
.champ-p{min-width:0}
.champ-p__nom{margin-bottom:6px;font:700 .6875rem/1 var(--f-texte);letter-spacing:.22em;text-transform:uppercase;color:var(--sur-sombre-2)}
/* Une case : --c de côté. Tablette : 14 cases sur la largeur ; ordinateur :
   27 sur le premier rang (jour, heure, marché). La place reste un texte sous
   900 px, et le marché aussi sur téléphone : là, dix cases font la largeur. */
.champ-p__val{--c:clamp(14px,calc((100cqw + 3px) / 14 - 3px),40px);display:flex;align-items:center;min-height:calc(var(--c) * 1.38);padding:0 .45em;border-radius:3px;background:var(--case);box-shadow:inset 0 1px 0 var(--case-lit);color:var(--sur-sombre);font:700 calc(var(--c) * .72)/1 var(--f-texte);letter-spacing:.32em;white-space:nowrap;text-transform:uppercase}
.champ-p__val--vif{color:var(--braise-vive)}
.champ-p__texte{display:none}
@media (max-width:899px){
  .champ-p--place .champ-p__val{min-height:46px;font-size:1rem;letter-spacing:.12em;white-space:normal}
  .champ-p--place .champ-p__val--cases{padding:0 .7em;background:var(--case);box-shadow:inset 0 1px 0 var(--case-lit)}
  .champ-p--place .case{display:none}
  .champ-p--place .champ-p__texte{display:block}
}
@media (min-width:900px){.champ-p__val{--c:clamp(16px,calc((100cqw - 41px) / 27 - 3px),44px)}}
@media (max-width:559px){
  .panneau__grille{grid-template-columns:auto auto;justify-content:start;column-gap:16px}
  .panneau__rang{display:contents}
  .champ-p--jour{grid-column:1/-1;order:1}
  .champ-p--heure{order:2}
  .champ-p--fin{order:3}
  .champ-p--marche{grid-column:1/-1;order:4}
  .champ-p--place{grid-column:1/-1;order:5}
  .champ-p__val{--c:clamp(18px,calc((100cqw - 40px) / 10),30px);font-size:calc(var(--c) * .78)}
  .champ-p--marche .champ-p__val{min-height:46px;font-size:1.0625rem;letter-spacing:.12em;white-space:normal}
  .champ-p--marche .champ-p__val--cases{padding:0 .7em;background:var(--case);box-shadow:inset 0 1px 0 var(--case-lit)}
  .champ-p--marche .case{display:none}
  .champ-p--marche .champ-p__texte{display:block}
}
/* Les cases bâties par le module : quatre moitiés, le rabat tombe. Seuls les
   rabats vivent sur leur propre couche (backface-visibility) : les moitiés
   fixes restent sur celle de la case, le caractère ne se décale plus. */
.champ-p__val--cases{gap:3px;padding:0;background:none;box-shadow:none;letter-spacing:0}
.case{position:relative;flex:none;width:var(--c);height:calc(var(--c) * 1.38);perspective:calc(var(--c) * 7)}
.case>span{position:absolute;inset:0;display:grid;place-items:center;border-radius:3px;background:linear-gradient(var(--case) 0 50%,var(--case-2) 50% 100%)}
.case__haut,.case__rabat{clip-path:inset(0 0 50% 0);box-shadow:inset 0 1px 0 var(--case-lit)}
.case__bas,.case__rabat2{clip-path:inset(50% 0 0 0)}
.case__rabat,.case__rabat2{visibility:hidden;backface-visibility:hidden}
.case__rabat::after,.case__rabat2::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:0}
.case::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:#0B0806;z-index:3}
@media (prefers-reduced-motion:no-preference){
  .voyant{animation:voyant 2.4s ease-in-out 4}
  .panneau__photo{transition:opacity .7s var(--sortie),transform 1.6s var(--sortie);transform:scale(1.07)}
  .panneau__photo.est-active{transform:none}
}
@keyframes voyant{50%{opacity:.35}}

/* ---------- La preuve ---------- */
.preuve__titre{max-width:17ch;margin-bottom:clamp(32px,4.4vw,68px)}
.preuve__grille{display:grid;gap:clamp(40px,5vw,72px)}
.preuve__texte{display:grid;gap:22px;align-content:start}
.preuve__faits{display:grid;margin-top:6px;border-top:2px solid var(--encre)}
.preuve__faits>div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--filet-fort)}
.preuve__faits dt{font:700 .75rem/1.5 var(--f-texte);letter-spacing:.18em;text-transform:uppercase}
.preuve__faits dd{margin:0;color:var(--encre-douce)}
@media (min-width:560px){.preuve__faits>div{grid-template-columns:minmax(0,9em) minmax(0,1fr)}}
.preuve__ecrans{position:relative;display:flex;justify-content:center}
.ecran-b{margin:0}
.ecran-b figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin-top:8px}
.ecran-b figcaption>span{font:700 .6875rem/1.3 var(--f-texte);letter-spacing:.2em;text-transform:uppercase;color:var(--encre-sourde)}
.ecran-b--ordi{display:none}
.ecran-b--tel{display:grid;justify-items:center}
.ecran-b--tel .echelle{--e:.72}
@media (min-width:420px){.ecran-b--tel .echelle{--e:.78}}
@media (min-width:760px){
  .preuve__ecrans{justify-content:flex-start;padding:0 110px 80px 0}
  .ecran-b--ordi{display:block}
  .ecran-b--ordi .echelle{--e:.42}
  .ecran-b--tel{position:absolute;right:0;bottom:0;justify-items:start}
  .ecran-b--tel .echelle{--e:.46}
}
@media (min-width:1100px){
  .preuve__grille{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
  .ecran-b--ordi .echelle{--e:.4}
  .ecran-b--tel .echelle{--e:.42}
}
@media (min-width:1300px){.ecran-b--ordi .echelle{--e:.46}}
@media (min-width:1400px){.ecran-b--ordi .echelle{--e:.5}.ecran-b--tel .echelle{--e:.46}}
@supports (width:calc(100cqw / 390px * 1px)){
  .ecran-b--tel .telephone-b{width:min(300px,80vw)}
  @media (min-width:760px){
    .preuve__ecrans{display:block;padding:0 14% 9% 0}
    .ecran-b--tel{width:27%}
    .ecran-b--tel .telephone-b{width:100%;padding:7px;border-radius:26px}
    .ecran-b--tel .echelle{border-radius:20px}
  }
}

/* ---------- Comment ça marche ---------- */
.comment-b{background:var(--papier-2)}
.etapes-b{border-top:2px solid var(--encre)}
.etape-b{display:grid;gap:18px 32px;align-items:start;padding-block:clamp(28px,3.4vw,44px);border-bottom:1px solid var(--filet-fort)}
.etape-b__heure{display:flex;align-items:center;gap:4px;perspective:600px}
.etape-b__heure span{position:relative;display:grid;place-items:center;width:clamp(34px,3.4vw,46px);height:clamp(46px,4.6vw,62px);border-radius:4px;background:linear-gradient(var(--encre) 0 50%,#231B15 50% 100%);box-shadow:inset 0 1px 0 rgba(255,236,214,.12);color:var(--sur-sombre);font:700 clamp(1.5rem,2.4vw,2.1rem)/1 var(--f-texte)}
.etape-b__heure span::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#0B0806}
.etape-b__heure b{padding:0 3px;font:700 clamp(1.5rem,2.4vw,2.1rem)/1 var(--f-texte);color:var(--braise)}
.etape-b__num{font:700 .75rem/1 var(--f-texte);letter-spacing:.22em;text-transform:uppercase;color:var(--braise)}
.etape-b__corps{display:grid;gap:10px;align-content:start}
.etape-b__corps h3{font:600 clamp(1.45rem,1.1rem + 1.2vw,2.1rem)/1.1 var(--f-titre);font-variation-settings:"opsz" 96;letter-spacing:-.015em;word-spacing:.04em}
.etape-b__corps p:not(.etape-b__num){max-width:46ch;color:var(--encre-douce)}
.etape-b__visuel{display:flex;justify-content:flex-start}
@media (min-width:960px){
  .etape-b{grid-template-columns:230px minmax(0,1fr) minmax(0,400px)}
  .etape-b__corps{padding-top:8px}
  .etape-b__visuel{justify-content:flex-end}
}
.courriel-b,.fiche-b{width:100%;max-width:400px;border:2px solid var(--encre);border-radius:8px;background:var(--blanc);box-shadow:var(--ombre-douce)}
.courriel-b{display:grid;gap:8px;padding:18px 20px}
.courriel-b__de{display:flex;justify-content:space-between;font-size:.875rem;color:var(--encre-sourde)}
.courriel-b__de b{color:var(--encre)}
.courriel-b__objet{font-weight:700}
.courriel-b__code{display:flex;gap:6px;margin-top:4px}
.courriel-b__code span{display:grid;place-items:center;width:40px;height:48px;border-radius:4px;background:var(--braise-voile);border:1.5px solid color-mix(in srgb,var(--braise) 45%,var(--blanc));color:var(--braise-fonce);font:700 1.35rem/1 var(--f-texte)}
.fiche-b{display:grid}
.fiche-b__ligne{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:10px;align-items:baseline;padding:12px 16px;border-top:1px solid var(--filet)}
.fiche-b__ligne:first-child{border-top:0}
.fiche-b__ligne span{font:700 .6875rem/1.4 var(--f-texte);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-sourde)}
.fiche-b__ligne b{font-weight:600}
.fiche-b__ligne--puces{grid-template-columns:minmax(0,1fr);gap:8px}
.fiche-b__ligne--puces b{display:flex;flex-wrap:wrap;gap:6px}
.fiche-b__ligne--puces i{padding:5px 10px;border:1.5px solid var(--encre);border-radius:99px;font:700 .6875rem/1.1 var(--f-texte);font-style:normal;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.fiche-b__ligne--puces i:first-child{background:var(--encre);color:var(--papier)}
/* Étape 3 : le lien envoyé aux clients, avec son aperçu (l'affiche est dans le héros). */
.message-b{width:100%;max-width:400px;padding:14px;border:2px solid var(--encre);border-radius:8px;background:var(--blanc);box-shadow:var(--ombre-douce)}
.message-b__de{display:flex;justify-content:space-between;font-size:.875rem;color:var(--encre-sourde)}
.message-b__de b{font:700 .6875rem/1.6 var(--f-texte);letter-spacing:.18em;text-transform:uppercase;color:var(--encre)}
.message-b__bulle{display:grid;gap:10px;margin-top:10px;padding:12px;border-radius:4px 14px 14px;background:var(--papier-2);font-weight:600;line-height:1.4}
.message-b__lien{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;padding:7px;border:1px solid var(--filet);border-radius:6px;background:var(--blanc)}
.message-b__lien picture,.message-b__lien img{display:block;width:76px;height:76px}
.message-b__lien img{object-fit:cover;border-radius:4px}
.message-b__lien b{display:block;font:600 1rem/1.2 var(--f-titre);font-variation-settings:"opsz" 48}
.message-b__lien span{display:block;margin-top:4px;font-weight:500;font-size:.8125rem;color:var(--encre-sourde)}
.message-b__outils{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.message-b__outils span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1.5px solid var(--encre);border-radius:99px;font:700 .6875rem/1.1 var(--f-texte);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.message-b__outils .icone{width:14px;height:14px;color:var(--braise)}

/* ---------- La commande : le texte, le téléphone et le ticket ---------- */
.duo-b{display:grid;gap:clamp(40px,5vw,80px);align-items:center}
.duo-b__texte{display:grid;gap:20px;align-content:start}
.duo-b__visuel{margin:0;display:grid;justify-items:center;gap:14px}
.duo-b__visuel figcaption{color:var(--encre-sourde);font-size:.8125rem;text-align:center}
@media (min-width:1000px){.duo-b{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.frais-tab{display:grid;margin-top:4px;border-top:2px solid var(--encre)}
.frais-tab>div{display:grid;gap:3px 20px;padding:14px 0;border-bottom:1px solid var(--filet-fort)}
.frais-tab dt{font:700 .75rem/1.5 var(--f-texte);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-sourde)}
.frais-tab dd{margin:0;font-weight:600}
@media (min-width:560px){.frais-tab>div{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:baseline}}

/* Le ticket sort de derrière le téléphone : à droite sur un écran large, par
   le bas sur un téléphone. La pile ne dépasse jamais sa colonne (430 px). */
.commande-b__pile{position:relative;display:grid;justify-items:center}
.telephone-b--mock{position:relative;z-index:2;width:min(272px,72vw);padding:9px}
.cmd{display:grid;padding:18px 16px 16px;border-radius:24px;background:var(--papier);color:var(--encre);font-size:.8125rem}
.cmd__tete{display:grid;gap:2px;padding-bottom:10px;border-bottom:2px solid var(--encre)}
.cmd__tete b{font:600 1.15rem/1.1 var(--f-titre)}
.cmd__tete span{font:700 .625rem/1.2 var(--f-texte);letter-spacing:.18em;text-transform:uppercase;color:var(--braise)}
.cmd__lieu{margin:10px 0 4px;font-weight:700}
.cmd__produits{display:grid}
.cmd__produits li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nom qte" "prix qte";gap:2px 10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--filet)}
.cmd__produits span{grid-area:nom;font-weight:600;line-height:1.25}
.cmd__produits em{grid-area:prix;font-style:normal;color:var(--encre-sourde)}
.cmd__qte{grid-area:qte;display:flex;align-items:center;gap:8px;font-style:normal;font-weight:700}
.cmd__qte s{display:grid;place-items:center;width:24px;height:24px;border:1.5px solid var(--encre);border-radius:50%;text-decoration:none;line-height:1}
.cmd__titre{margin:12px 0 6px;font:700 .625rem/1 var(--f-texte);letter-spacing:.18em;text-transform:uppercase;color:var(--encre-sourde)}
.cmd__creneaux{display:flex;flex-wrap:wrap;gap:5px}
.cmd__creneaux span{padding:6px 9px;border:1.5px solid var(--filet-champ);border-radius:4px;font-weight:600}
.cmd__creneaux .cmd__creneaux--pris{border-color:var(--encre);background:var(--encre);color:var(--papier)}
.cmd__total{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:2px solid var(--encre);font-weight:700}
.cmd__total b{font:600 1.1rem/1 var(--f-titre)}
.cmd__btn{margin-top:10px;padding:12px;border-radius:6px;background:var(--braise);color:var(--blanc);font-weight:700;text-align:center}
.ticket-b{position:relative;z-index:1;order:2;width:200px;margin-top:-34px;padding:46px 16px 20px;background:var(--blanc);border:2px solid var(--encre);box-shadow:8px 8px 0 var(--encre);transform:rotate(-3deg);font-size:.8125rem;--dents:radial-gradient(circle at 6px 0,transparent 5px,var(--blanc) 5.5px)}
.ticket-b::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-11px;height:10px;background:var(--dents) 0 0/12px 10px repeat-x}
.telephone-b--mock{order:1}
.ticket-b__tete{font:700 .625rem/1 var(--f-texte);letter-spacing:.14em;text-transform:uppercase;color:var(--braise)}
.ticket-b__heure{margin-top:6px;font:600 2rem/1 var(--f-titre);font-variation-settings:"opsz" 144}
.ticket-b__lieu{margin-top:2px;font-weight:700}
.ticket-b__lignes{margin-top:10px;padding-top:8px;border-top:1.5px dashed var(--filet-champ)}
.ticket-b__lignes li{display:flex;gap:8px;padding:2px 0}
.ticket-b__lignes span{font-weight:800}
.ticket-b__pied{margin-top:10px;padding-top:8px;border-top:1.5px dashed var(--filet-champ);font:700 .625rem/1 var(--f-texte);letter-spacing:.18em;text-transform:uppercase;color:var(--vert)}
@media (min-width:560px){
  .commande-b__pile{display:block;padding-right:160px}
  .ticket-b{position:absolute;right:0;top:30%;width:196px;margin:0;padding:16px 14px 20px 40px;transform:rotate(4deg)}
}

/* ---------- La gestion : le carnet en pleine largeur, le texte sur sa bande ---------- */
.gestion-b{background:var(--papier-2)}
.carnet-b{overflow:hidden;border:2px solid var(--encre);border-radius:12px;background:var(--blanc);box-shadow:var(--ombre-douce)}
.carnet-b__bande{display:grid;gap:20px 64px;padding:clamp(24px,4vw,56px) clamp(20px,4vw,56px) clamp(24px,3.4vw,48px);background:var(--encre);color:var(--sur-sombre)}
.carnet-b__titre{display:grid;gap:16px}
.carnet-b__bande .titre-b{max-width:16ch;color:var(--sur-sombre)}
.carnet-b__texte{max-width:46ch;color:var(--sur-sombre-2);font-size:clamp(1.04rem,1rem + .3vw,1.2rem);line-height:1.55}
@media (min-width:1000px){.carnet-b__bande{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end}}
/* La feuille : la marge rouge du carnet, les lignes, les jauges. */
.carnet-b__feuille{--marge:clamp(22px,4vw,64px);padding-left:calc(var(--marge) + 14px);background:linear-gradient(90deg,transparent calc(var(--marge) - 1px),rgba(194,65,12,.4) calc(var(--marge) - 1px) calc(var(--marge) + 1px),transparent calc(var(--marge) + 1px));font-size:.9375rem}
.carnet-b__tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:18px clamp(16px,3vw,40px) 14px 0;border-bottom:2px solid var(--encre)}
.carnet-b__tete b{font:600 1.35rem/1.1 var(--f-titre)}
.carnet-b__reseau{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:var(--vert-voile);color:var(--vert);font:700 .6875rem/1.2 var(--f-texte);letter-spacing:.06em}
.carnet-b__reseau::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.carnet-b__cols,.carnet-b__lignes li{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,.7fr));gap:8px;align-items:center;padding-right:clamp(16px,3vw,40px)}
.carnet-b__cols{padding-block:10px;font:700 .625rem/1.2 var(--f-texte);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-sourde)}
.carnet-b__cols span:not(:first-child),.carnet-b__lignes span{text-align:right;font-variant-numeric:tabular-nums}
.carnet-b__lignes li{position:relative;padding-block:12px 18px;border-top:1px solid var(--filet)}
.carnet-b__lignes b{font-weight:600}
.carnet-b__lignes span{font-weight:700}
.carnet-b__zero{color:var(--braise-fonce)}
.jauge{position:absolute;left:0;right:clamp(16px,3vw,40px);bottom:7px;height:4px;border-radius:2px;background:var(--papier-2)}
.jauge__vendu{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--braise);transform-origin:left}
.jauge--75{right:25%}.jauge--78{right:22%}.jauge--90{right:10%}.jauge--100{right:0}
.carnet-b__pied{display:flex;justify-content:space-between;align-items:baseline;padding:14px clamp(16px,3vw,40px) 16px 0;border-top:2px solid var(--encre);font-weight:600}
.carnet-b__pied b{font:600 1.6rem/1 var(--f-titre)}
@media (max-width:559px){.carnet-b__cols{font-size:.5625rem;letter-spacing:.06em}.carnet-b__cols,.carnet-b__lignes li{gap:6px}}
@media (min-width:900px){
  .carnet-b__cols,.carnet-b__lignes li{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.55fr)) minmax(0,1.7fr);column-gap:24px}
  .carnet-b__cols::after{content:"Part vendue";font:inherit}
  .carnet-b__lignes li{padding-block:16px}
  .jauge{position:relative;left:auto;right:auto;bottom:auto;height:8px;border-radius:4px}
  .jauge__vendu{border-radius:4px}
  .carnet-b__lignes b{font-size:1.02rem}
}

/* ---------- L'offre ---------- */
.tarifs{border-top:3px solid var(--encre)}
.tarif{display:grid;gap:14px 36px;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--filet-fort);transition:background-color .3s}
.tarif__tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px}
.tarif__num{font:700 .75rem/1 var(--f-texte);letter-spacing:.2em;color:var(--braise)}
.tarif__tete h3{font:700 .8125rem/1.4 var(--f-texte);letter-spacing:.16em;text-transform:uppercase}
.tarif__montant{font:600 clamp(2.3rem,1.5rem + 2.8vw,3.9rem)/.95 var(--f-titre);font-variation-settings:"opsz" 144;letter-spacing:-.03em;word-spacing:.04em;transition:color .3s,transform .4s var(--sortie);transform-origin:left}
.tarif__sous{margin-top:10px;color:var(--encre-douce);max-width:40ch}
.tarif__liste{display:grid;gap:10px}
.tarif__liste li{display:flex;gap:10px}
.tarif__liste .icone{width:18px;height:18px;margin-top:3px;color:var(--braise);stroke-width:2.6}
.tarif__rappel{color:var(--encre-douce)}
/* Le seul prix chiffré de la page : lisible, à l'encre, tenu par un trait braise. */
.tarif .offre__note{margin-top:4px;padding:6px 0 6px 16px;border-left:3px solid var(--braise);color:var(--encre);font-size:1rem;line-height:1.5}
.tarif:hover .tarif__montant{color:var(--braise);transform:translateX(6px)}
@media (min-width:960px){
  .tarif{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.1fr);align-items:start}
  .tarif__tete{flex-direction:column;align-items:flex-start;gap:12px}
}
.frais-b{display:grid;gap:14px;margin-top:clamp(28px,3vw,44px)}
.frais-b .bandeau{padding:20px 22px;border:2px solid var(--encre);border-radius:8px;background:var(--papier)}
.frais-b .bandeau--offre{background:var(--or-voile)}
@media (min-width:960px){.frais-b{grid-template-columns:1fr 1fr}}

/* ---------- Questions ---------- */
.questions-b{background:var(--papier-2)}
.questions-b__grille{display:grid;gap:clamp(32px,4vw,64px)}
.questions-b__tete{display:grid;gap:18px;align-content:start}
.questions__suite{color:var(--encre-douce)}
@media (min-width:1000px){
  .questions-b__grille{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .questions-b__tete{position:sticky;top:calc(var(--haut-entete) + 32px)}
}
.questions-b__liste{border-top:2px solid var(--encre)}
.depliant-b{border-bottom:1px solid var(--filet-fort)}
.depliant-b summary{position:relative;display:flex;align-items:center;min-height:64px;padding:16px 60px 16px 0;cursor:pointer;list-style:none;font:600 clamp(1.05rem,1rem + .3vw,1.2rem)/1.35 var(--f-texte);transition:color .2s}
.depliant-b summary::-webkit-details-marker{display:none}
.depliant-b summary::before,.depliant-b summary::after{content:"";position:absolute;right:14px;top:50%;width:16px;height:2px;margin-top:-1px;background:currentColor;transition:transform .35s var(--sortie)}
.depliant-b summary::after{transform:rotate(90deg)}
.depliant-b[open] summary::after{transform:rotate(0)}
.depliant-b summary:hover{color:var(--braise-fonce)}
.depliant-b p{max-width:64ch;padding:0 0 22px;color:var(--encre-douce)}
@media (prefers-reduced-motion:no-preference){
  :root{interpolate-size:allow-keywords}
  .depliant-b::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--sortie),content-visibility .45s allow-discrete}
  .depliant-b[open]::details-content{block-size:auto}
}

/* ---------- L'appel ---------- */
.appel-b{background:var(--braise);color:var(--papier);padding-block:clamp(80px,10vw,150px)}
.appel-b__grille{display:grid;gap:clamp(48px,6vw,80px);align-items:center}
.appel-b__texte{display:grid;gap:40px;justify-items:start}
/* La broche de Mon Poulet Adoré, et le petit tableau qui annonce la page, posé
   sur le coin de la photo. */
.appel-b__scene{position:relative;justify-self:center;width:min(100%,440px);margin:0 0 30px}
.appel-b__photo{display:block;overflow:hidden;border-radius:4px;background:var(--braise-fonce);box-shadow:0 34px 60px -30px rgba(26,20,15,.7)}
.appel-b__photo img{display:block;width:100%;height:auto;aspect-ratio:900/1125;object-fit:cover}
.appel-b__tableau{position:absolute;left:-6%;bottom:-30px;z-index:1;container-type:inline-size;display:grid;gap:6px;width:min(74%,330px);padding:clamp(12px,1.8vw,20px);border-radius:10px;background:var(--nuit);box-shadow:0 34px 60px -30px rgba(26,20,15,.75);transform:rotate(-2deg)}
.appel-b__tableau .champ-p__val{--c:clamp(18px,calc((100cqw + 3px) / 8 - 3px),46px)}
.appel-b__etiquette{margin-bottom:8px;font:700 .6875rem/1 var(--f-texte);letter-spacing:.24em;text-transform:uppercase;color:var(--braise-vive)}
@media (max-width:519px){.appel-b__tableau{left:-3%}}
@media (min-width:1000px){.appel-b__grille{grid-template-columns:minmax(0,1fr) minmax(0,440px)}.appel-b__scene{justify-self:end}}
.appel-b__titre{max-width:15ch;font:600 clamp(2.6rem,1.2rem + 5.4vw,6.6rem)/.92 var(--f-titre);font-variation-settings:"opsz" 144;letter-spacing:-.03em;word-spacing:.05em;color:var(--papier)}
/* Le socle teint en braise l'italique des titres : ici, sur la braise, il garde le papier. */
.appel-b__titre em{position:relative;font-style:italic;font-weight:500;white-space:nowrap;color:inherit}
.appel-b__titre em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.07em;background:var(--encre);transform-origin:left}
.appel-b .btn{background:var(--encre);color:var(--papier);border-color:var(--encre);min-height:58px;padding:0 30px;font-size:1.0625rem}
.appel-b .btn:hover{background:var(--papier);color:var(--encre);border-color:var(--papier)}

/* ---------- Le pied ---------- */
.pied-b{padding:48px 0 56px;background:var(--encre);color:var(--sur-sombre-2);font-size:.875rem}
.pied-b__grille{display:grid;gap:18px}
.pied-b .marque{color:var(--sur-sombre)}
.pied-b .marque svg{fill:var(--sur-sombre);color:var(--braise-vive)}
.pied-b .marque__pro{color:var(--braise-vive)}
.pied-b nav{display:flex;flex-wrap:wrap;gap:0 22px}
.pied-b nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--sur-sombre);text-underline-offset:4px}
.pied-b nav a:hover{color:var(--braise-vive)}
.pied-b .a-confirmer{background:#4A3B2E;color:var(--or-clair)}
@media (min-width:1000px){.pied-b__grille{grid-template-columns:auto 1fr;align-items:center;column-gap:48px}.pied-b nav{grid-column:1/-1}}

/* ---------- Le mouvement ---------- */
@media (prefers-reduced-motion:no-preference){
  /* L'entrée du héros, orchestrée : le titre monte ligne à ligne, la scène suit,
     puis la page se monte dans le téléphone (construire.css). */
  .heros-b__sur{animation:glisse .7s .05s var(--sortie) both}
  .heros-b__titre .ligne>span{animation:monte-ligne 1s var(--sortie) both}
  .heros-b__titre .ligne:nth-child(1)>span{animation-delay:.12s}
  .heros-b__titre .ligne:nth-child(2)>span{animation-delay:.22s}
  .heros-b__titre .ligne:nth-child(3)>span{animation-delay:.32s}
  .heros-b__intro{animation:leve .8s .5s var(--sortie) both}
  .heros-b__actions{animation:leve .8s .6s var(--sortie) both}
  .rassurances-b{animation:leve .8s .72s var(--sortie) both}
  .scene__photo{animation:rideau 1.2s .25s var(--bascule) both}
  .scene__photo img{animation:recul 1.8s .25s var(--sortie) both}
  .scene__tel{animation:tel-entre 1.1s .4s var(--sortie) both}
  .bulle-b--jour{animation:bulle .6s 1.05s var(--sortie) both}
  .bulle-b--annuaire{animation:bulle .6s 1.2s var(--sortie) both}
  .bulle-b .voyant{animation:voyant 2.4s 1.6s ease-in-out 4}
  .affiche-b{animation:affiche-pose .8s .85s var(--sortie) both}
  .scene__legende{animation:leve .8s .3s var(--sortie) both}
  .essai-b{animation:leve .8s .55s var(--sortie) both}
  /* Les noms prennent leur lettre en basculant, comme des palettes. */
  .essai-b--bascule .tuile-b__nom{transform-origin:50% 0;animation:bascule-nom .6s var(--sortie) both}
  .essai-b--bascule .tuile-b:nth-child(2) .tuile-b__nom{animation-delay:.04s}
  .essai-b--bascule .tuile-b:nth-child(3) .tuile-b__nom{animation-delay:.08s}
  .essai-b--bascule .tuile-b:nth-child(4) .tuile-b__nom{animation-delay:.12s}
  .essai-b--bascule .tuile-b:nth-child(5) .tuile-b__nom{animation-delay:.16s}
  .essai-b--bascule .tuile-b:nth-child(6) .tuile-b__nom{animation-delay:.2s}
  .essai-b--bascule .tuile-b:nth-child(7) .tuile-b__nom{animation-delay:.24s}
  .essai-b--bascule .tuile-b:nth-child(8) .tuile-b__nom{animation-delay:.28s}
  .essai-b--bascule .tuile-b:nth-child(9) .tuile-b__nom{animation-delay:.32s}
  .essai-b--bascule .tuile-b:nth-child(10) .tuile-b__nom{animation-delay:.36s}
  .essai-b--bascule .tuile-b:nth-child(11) .tuile-b__nom{animation-delay:.4s}
  .essai-b--bascule .tuile-b:nth-child(12) .tuile-b__nom{animation-delay:.44s}
  /* « Arrêter le mouvement » : la scène se fige aussi. */
  .scene--arret .scene__boite *,.scene--arret .scene__boite *::after{animation-play-state:paused!important}

  /* Les révélations : une fois, quand le bloc entre dans la vue (le module
     pose .vu). Les états de départ n'existent que sous html.anime. */
  .anime :is(.tete-b,.tableau-b__tete,.questions-b__tete):not(.vu)>*,
  .anime .preuve__titre:not(.vu),
  .anime .preuve__faits>div:not(.vu),
  .anime .frais-tab>div:not(.vu),
  .anime .tarif:not(.vu),
  .anime .carnet-b:not(.vu),
  .anime .appel-b__texte:not(.vu),
  .anime .appel-b__scene:not(.vu),
  .anime .preuve__ecrans:not(.vu) .ecran-b,
  .anime .etape-b:not(.vu) :is(.etape-b__corps,.etape-b__visuel),
  .anime .commande-b__scene:not(.vu) .telephone-b--mock{opacity:0}
  .anime :is(.tete-b,.tableau-b__tete,.questions-b__tete).vu>*{animation:leve .9s var(--sortie) both}
  .anime :is(.tete-b,.tableau-b__tete,.questions-b__tete).vu>:nth-child(2){animation-delay:.09s}
  .anime :is(.tete-b,.tableau-b__tete,.questions-b__tete).vu>:nth-child(3){animation-delay:.18s}
  .anime .preuve__titre.vu{animation:leve 1s var(--sortie) both}
  .anime :is(.preuve__faits,.frais-tab)>div.vu{animation:leve .8s var(--sortie) both}
  .anime .preuve__ecrans.vu .ecran-b--ordi{animation:glisse-g 1.1s var(--sortie) both}
  .anime .preuve__ecrans.vu .ecran-b--tel{animation:glisse-tel 1.2s .25s var(--sortie) both}
  .anime .etape-b.vu .etape-b__corps{animation:leve .8s .2s var(--sortie) both}
  .anime .etape-b.vu .etape-b__visuel{animation:glisse-d .9s .32s var(--sortie) both}
  .anime .etape-b:not(.vu) .etape-b__heure span{transform:rotateX(90deg)}
  .anime .etape-b.vu .etape-b__heure span{animation:palette .45s var(--sortie) both}
  .anime .etape-b.vu .etape-b__heure span:nth-child(2){animation-delay:.07s}
  .anime .etape-b.vu .etape-b__heure span:nth-child(4){animation-delay:.14s}
  .anime .etape-b.vu .etape-b__heure span:nth-child(5){animation-delay:.21s}
  .anime .commande-b__scene.vu .telephone-b--mock{animation:leve 1s var(--sortie) both}
  .anime .commande-b__scene:not(.vu) .ticket-b{opacity:0;transform:translateY(-78%) rotate(0)}
  .anime .commande-b__scene.vu .ticket-b{animation:ticket-bas 1s .75s var(--sortie) both}
  .anime .carnet-b.vu{animation:leve 1s var(--sortie) both}
  .anime .carnet-b:not(.vu) .jauge__vendu{transform:scaleX(0)}
  .anime .carnet-b.vu .jauge__vendu{animation:jauge 1.2s .55s var(--sortie) both}
  .anime .carnet-b.vu li:nth-child(2) .jauge__vendu{animation-delay:.67s}
  .anime .carnet-b.vu li:nth-child(3) .jauge__vendu{animation-delay:.79s}
  .anime .carnet-b.vu li:nth-child(4) .jauge__vendu{animation-delay:.91s}
  .anime .tarif.vu{animation:leve .8s var(--sortie) both}
  .anime .tarif.vu .tarif__montant{animation:glisse-g .9s .12s var(--sortie) both}
  .anime .appel-b__texte.vu{animation:leve .9s var(--sortie) both}
  .anime .appel-b__scene.vu{animation:glisse-d 1s .15s var(--sortie) both}
  .anime .appel-b__texte:not(.vu) .appel-b__titre em::after{transform:scaleX(0)}
  .anime .appel-b__texte.vu .appel-b__titre em::after{animation:trait .8s .45s var(--sortie) both}

  /* Micro-interactions */
  .scene__photo img{transition:transform .8s var(--sortie)}
  .scene__photo:hover img{transform:scale(1.03)}
  .courriel-b,.fiche-b,.message-b{transition:transform .5s var(--sortie)}
  .etape-b:hover :is(.courriel-b,.fiche-b,.message-b){transform:translateY(-4px)}
}
@media (prefers-reduced-motion:no-preference) and (min-width:560px){
  .anime .commande-b__scene:not(.vu) .ticket-b{opacity:0;transform:translateX(-80%) rotate(0)}
  .anime .commande-b__scene.vu .ticket-b{animation-name:ticket-cote}
}
@keyframes glisse{from{opacity:0;transform:translateX(-20px)}}
@keyframes glisse-g{from{opacity:0;transform:translateX(-40px)}}
@keyframes glisse-d{from{opacity:0;transform:translateX(30px)}}
@keyframes glisse-tel{from{opacity:0;transform:translateY(80px) rotate(4deg)}}
@keyframes monte-ligne{from{transform:translateY(105%)}}
@keyframes leve{from{opacity:0;transform:translateY(26px)}}
@keyframes rideau{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes recul{from{transform:scale(1.18)}}
@keyframes tel-entre{from{opacity:0;transform:translateY(70px) rotate(-12deg)}}
@keyframes bulle{from{opacity:0;transform:translateY(10px) scale(.9)}}
@keyframes affiche-pose{from{opacity:0;transform:translateY(-36px) rotate(-4deg)}}
@keyframes bascule-nom{from{opacity:0;transform:perspective(320px) rotateX(-88deg)}}
@keyframes palette{from{transform:rotateX(90deg)}}
@keyframes ticket-cote{from{opacity:0;transform:translateX(-80%) rotate(0)}25%{opacity:1}}
@keyframes ticket-bas{from{opacity:0;transform:translateY(-78%) rotate(0)}25%{opacity:1}}
@keyframes jauge{from{transform:scaleX(0)}}
@keyframes trait{from{transform:scaleX(0)}}

/* Un glissement discret reste lié au défilement, là où le navigateur le
   sait : les photos du tableau bougent un peu dans leur cadre. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .panneau__photos img{scale:1.08;animation:derive linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes derive{from{translate:0 -3%}to{translate:0 3%}}