/* Retouches du 24/10 (fil « Installer le site sur la copie de test »), chargées après la feuille de la page.
   Boutons de la bande finale « Une panne ? Un projet ? On en parle. » : plus de relief, cadre pixel, icônes, appui marqué. */
.ctas:has(>.btn-g) .btn{--n:6px;position:relative;min-height:60px;padding:2px 18px 6px 16px;gap:10px;font-size:18px;
  box-shadow:inset 0 0 0 3px #234d0b,inset 0 6px 0 rgba(255,255,255,.28),inset 0 -9px 0 rgba(0,0,0,.24);
  transition:transform 120ms steps(2),box-shadow 120ms steps(2),background-color 160ms ease}
.ctas:has(>.btn-g) .btn::before{content:"";flex:none;width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;image-rendering:pixelated}
.ctas:has(>.btn-g) .btn-v{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%208%208%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M1%200h5v1H1zM6%201h1v7H6zM1%201h1v7H1zM2%207h4v1H2zM3%202h2v1H3zM3%204h2v1H3z%22/%3E%3C/svg%3E")}
.ctas:has(>.btn-g) .btn-w{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%208%208%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M0%201h8v2H0zM0%203h1v5H0zM7%203h1v5H7zM1%207h6v1H1zM2%200h1v1H2zM5%200h1v1H5zM2%204h1v1H2zM4%204h1v1H4zM2%205h1v1H2z%22/%3E%3C/svg%3E")}
.ctas:has(>.btn-g) .btn-g{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%208%208%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M0%200h3v1H0zM0%201h1v3H0zM1%201h2v1H1zM1%204h1v1H1zM2%205h1v1H2zM3%206h1v1H3zM4%207h4v1H4zM7%205h1v2H7zM5%205h2v1H5z%22/%3E%3C/svg%3E");color:var(--lime);letter-spacing:.02em}
.ctas:has(>.btn-g) .btn-w{background:#fff;color:var(--vert);box-shadow:inset 0 0 0 3px #234d0b,inset 0 6px 0 #f6fdf0,inset 0 -9px 0 #cfe9b4}
.ctas:has(>.btn-g) .btn::after{content:"";position:absolute;right:10px;top:10px;width:4px;height:4px;background:currentColor;opacity:.55;
  box-shadow:-6px 0 0 currentColor}
@media (hover:hover) and (pointer:fine){
  .ctas:has(>.btn-g) .btn:hover{transform:translateY(-3px)}
  .ctas:has(>.btn-g) .btn:hover::before{animation:mbv-ico .5s steps(2) infinite}
}
.ctas:has(>.btn-g) .btn:active{transform:translateY(3px);box-shadow:inset 0 0 0 3px #234d0b,inset 0 3px 0 rgba(0,0,0,.18),inset 0 -3px 0 rgba(0,0,0,.18)}
.ctas:has(>.btn-g) .btn:focus-visible{outline:3px solid #6b5fe0;outline-offset:3px}
@keyframes mbv-ico{50%{translate:0 -2px}}
@media (prefers-reduced-motion:reduce){.ctas:has(>.btn-g) .btn,.ctas:has(>.btn-g) .btn::before{animation:none;transition:none}}
@media (max-width:560px){.ctas:has(>.btn-g) .btn{width:100%;justify-content:center}}
/* Page Wi-Fi : la classe .ecran de l'écran de connexion (fond blanc) touchait aussi la lueur des photos et cachait la photo de montagne */
.lueur.ecran{background:none;display:block}
/* Accueil : boutons WhatsApp / Facebook / Instagram aussi dans le paysage du haut, sous les villes */
.hero-res{margin:18px 0 0!important;gap:10px}
.hero-res .res-b{min-height:46px;padding:0 16px;font-size:16px}
@media (max-width:560px){.hero-res .res-b{flex:1 1 auto;justify-content:center}}
/* Brins d'herbe voletants derrière le texte des encadrés « On en parle » (retouches.js) */
.vol-boite{isolation:isolate}
.vol-couche{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.vol-herbe{z-index:-1}
.vol-herbe i{position:absolute;top:var(--y);animation:vol-derive var(--t) linear var(--d) infinite;will-change:transform,opacity}
.vol-herbe b{display:block;width:3px;height:var(--h);background:#234d0b;opacity:.55;rotate:var(--a);animation:vol-ondule var(--s) ease-in-out infinite alternate}
.vol-herbe b.clair{background:#f6fdf0;opacity:.9}
@keyframes vol-derive{0%{transform:translate(0,0);opacity:0}12%{opacity:1}85%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes vol-ondule{from{transform:translateY(-10px) rotate(-25deg)}to{transform:translateY(10px) rotate(35deg)}}
/* Flocons sur la photo du PC dans la neige (page Wi-Fi) */
.vol-neige{z-index:1}
.vol-neige i{position:absolute;top:-12px;opacity:var(--o);animation:vol-tombe var(--t) linear var(--d) infinite;will-change:transform}
.vol-neige b{display:block;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.25);animation:vol-balance var(--s) ease-in-out infinite alternate}
@keyframes vol-tombe{from{transform:translateY(0)}to{transform:translateY(calc(var(--hauteur,600px) + 24px))}}
@keyframes vol-balance{from{transform:translateX(calc(var(--sx) * -1))}to{transform:translateX(var(--sx))}}
.vol-pause i,.vol-pause b{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.vol-couche{display:none}}

/* Formulaire de devis branché à l'appli (assets/js/appli.js) */
.form-err{margin:10px 0 0;padding:8px 12px;border:2px solid #b3261e;background:#fde8e6;color:#8c1d18;font-size:15px;line-height:1.4}
.form-err[hidden]{display:none}
.form-piege{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.envoi button[aria-busy="true"]{opacity:.6;cursor:progress}

/* Accueil, carte Informatique : le petit ordi ASCII réduit à 96 px devenait une tache illisible sur le coin de la fenêtre */
.scene-info .ordi-pose{display:none}

/* Accueil, carte Caisses : la tablette suivait son propre mouvement au défilement et se promenait dans le coin.
   Elle bouge maintenant avec l'écran de caisse, posée sur son coin haut gauche. */
.scene-caisse .tab{animation-name:flotteLent;left:-10px;top:14px;width:124px;rotate:-5deg;filter:drop-shadow(4px 5px 0 rgba(35,77,11,.18))}

/* Paysage du haut sur très grand écran (plus de 2560 px) : les calques grandissent avec la largeur au lieu d'être rognés par le haut
   (les règles d'origine visaient les noms d'images de la maquette, qui ont changé dans le thème : arbres coupés en deux). */
.hero>.couche[src$="/vallee-montagnes3.png"]{height:max(320px,calc((100cqw + 96px) * 0.12500))!important}
.hero>.couche[src$="/vallee-collines3.png"]{height:max(272px,calc((100cqw + 96px) * 0.10625))!important}
.hero>.couche[src$="/vallee-village3.png"]{height:max(208px,calc((100cqw + 96px) * 0.08125))!important}
.hero>.couche[src$="/vallee-pre3.png"]{height:max(120px,calc((100cqw + 96px) * 0.04688))!important}
.hero>.couche[src$="/herbe-fond3.png"]{height:max(104px,calc((100cqw + 96px) * 0.04063))!important}
.hero>.couche[src$="/herbe-milieu3.png"]{height:max(88px,calc((100cqw + 96px) * 0.03438))!important}
.hero>.couche[src$="/herbe-devant3.png"]{height:max(80px,calc((100cqw + 96px) * 0.03125))!important}
.hero>.couche[src$="/herbe-devant3b.png"]{height:max(80px,calc((100cqw + 96px) * 0.03125))!important}

/* compteurs : 3 cadrans (HDD, SSD SATA, SSD NVMe), échelle 0-1500 */
.vits{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vit{padding:14px 8px 12px}
.vit .j-v{font-size:clamp(20px,2.2vw,28px)}
.vit.nvme{background:#6b5fe0;border-color:#6b5fe0;color:#e9e6ff}
.nvme .j-aig{fill:#a3d96b}
.nvme.pleine .j-v{color:#fff}
@media (max-width:640px){
  .vits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vit.nvme{grid-column:1/-1}
  .vit.nvme .vit-svg{max-width:170px}
  .vit .j-v{font-size:clamp(22px,7vw,30px)}
}

/* Caisses : labels NF525 + facturation électronique, marques du matériel */
.labels{margin-top:24px;background:#fff;border:3px solid var(--vert);padding:22px 26px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 32px;align-items:center;--n:10px}
.labels-l{display:flex;flex-wrap:wrap;gap:12px}
.labels-l img{height:60px;width:auto;image-rendering:pixelated}
.labels p{margin:0;max-width:64ch;font-size:16px}
.marques{margin-top:22px}
.marques-t{margin:0 0 10px;font-size:12px;letter-spacing:.08em;opacity:.75}
.marques ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.marques img{height:44px;width:auto;display:block;image-rendering:pixelated}
@media (max-width:900px){.labels{grid-template-columns:minmax(0,1fr);padding:20px}.labels-l img{height:50px}.marques img{height:38px}}

/* Caisses : sceau « certifié » à côté du livret */
.livret{flex-wrap:nowrap}
.sceau{width:190px;flex:none;rotate:-6deg;overflow:visible}
.sc-fond{fill:#fff}
.sc-trait{fill:none;stroke:var(--vert);stroke-width:3}
.sc-tirets{fill:none;stroke:var(--vert);stroke-width:1.5;stroke-dasharray:3 3}
.sc-txt{font-family:"Geist Mono",monospace;font-size:12.5px;fill:var(--vert);letter-spacing:.04em}
.sc-ascii text{font-family:"Geist Mono",monospace;font-size:6.2px;fill:var(--vert)}
.sc-ruban{transform:rotate(-8deg);transform-origin:100px 137px}
.sc-ruban path{fill:var(--lime)}
.sc-ruban text{font-family:VG5000,monospace;font-size:12px;fill:var(--vert);letter-spacing:.06em}
.sc-anneau{transform-origin:100px 100px;animation:sc-tourne 40s linear infinite}
.sceau.hors .sc-anneau{animation-play-state:paused}
@keyframes sc-tourne{to{transform:rotate(360deg)}}
/* coup de tampon à l'arrivée (seulement si le script a préparé le sceau) */
.sceau.attente{opacity:0;scale:1.25;rotate:-16deg}
.sceau.tampon{transition:opacity .18s ease-out,scale .32s cubic-bezier(.3,1.5,.5,1),rotate .32s cubic-bezier(.3,1.5,.5,1)}
@media (max-width:700px){.livret{flex-wrap:wrap;justify-content:center}.sceau{width:130px}}
@media (prefers-reduced-motion:reduce){.sc-anneau{animation:none}.sceau.attente{opacity:1;scale:1;rotate:-6deg}}
@media (max-width:640px){.vit.nvme .vit-svg{max-width:150px}}

/* Wi-Fi : logo d'ondes retravaillé (point + 3 arcs qui s'allument tour à tour, halo qui respire) */
.ondes{top:-104px;width:104px;height:77px}
.ondes svg{position:relative;width:100%;height:auto;animation:none;clip-path:none;fill:#a3d96b;filter:drop-shadow(0 3px 0 #234d0b) drop-shadow(0 -3px 0 #234d0b) drop-shadow(3px 0 0 #234d0b) drop-shadow(-3px 0 0 #234d0b)}
.ondes path{opacity:.22}
.ondes .o0{opacity:1;fill:#fff}
.ondes-halo{position:absolute;left:50%;bottom:-6px;width:150px;height:150px;margin-left:-75px;border-radius:50%;background:radial-gradient(closest-side,rgba(163,217,107,.55),rgba(163,217,107,0));opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .ondes .o1{animation:ondesArc 2.4s steps(1) infinite}
  .ondes .o2{animation:ondesArc 2.4s steps(1) .3s infinite}
  .ondes .o3{animation:ondesArc 2.4s steps(1) .6s infinite}
  .ondes-halo{animation:ondesHalo 2.4s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){.ondes path{opacity:1}}
@keyframes ondesArc{0%{opacity:.22}12%,70%{opacity:1}85%,100%{opacity:.22}}
@keyframes ondesHalo{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.75;transform:scale(1.08)}}

/* Wi-Fi : un vrai téléphone (coque arrondie, tranche, boutons, îlot, barre d'accueil, reflet) */
.telm-zone::before,.telm-zone::after{content:"";position:absolute;z-index:-1;width:6px;background:#0d2203}
.telm-zone::before{left:-5px;top:118px;height:44px;box-shadow:0 58px 0 #0d2203}
.telm-zone::after{right:-5px;top:150px;height:70px}
.telm{--n:0px;clip-path:none;border-radius:38px;background:linear-gradient(150deg,#3d6f1c 0%,#1d3f09 22%,#10290a 100%);padding:14px 11px 14px;
  box-shadow:inset 0 0 0 2px #0a1c04,inset 3px 3px 0 rgba(222,248,198,.25),inset -3px -3px 0 rgba(0,0,0,.35),12px 14px 0 rgba(35,77,11,.2);filter:none}
.telm::before{top:24px;z-index:3;width:78px;height:22px;margin-left:-39px;border-radius:12px;background:#0a1c04}
.telm::after{content:"";position:absolute;left:50%;bottom:21px;z-index:3;width:96px;height:5px;margin-left:-48px;border-radius:3px;background:#234d0b;opacity:.55}
.telm .ecran{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 0 0 3px #050f02}
.telm .ecran::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.08) 26%,rgba(255,255,255,0) 27%)}
.telm .barre-t{padding:12px 22px 8px;min-height:22px}
.telm .p-pied{padding-bottom:22px}
@media (max-width:900px){.telm-zone::before{top:110px}.ondes{top:-92px;width:90px;height:67px}}

/* Wi-Fi : « ça vous protège, vous » */
.garanties{margin-top:28px;background:var(--vert);color:var(--pale);padding:30px 32px 32px;--n:14px}
.garanties .pro-tag{color:var(--lime);margin:0}
.gar-t{margin:10px 0 0;font-size:clamp(26px,2.6vw,36px);line-height:1.1;color:#fff;max-width:28ch}
.gar-l{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gar-c{background:#1a3d07;padding:20px 20px 22px;--n:10px}
.gar-i{display:grid;place-items:center;width:48px;height:48px;background:var(--lime)}
.gar-i svg{width:30px;height:30px;fill:var(--vert)}
.gar-c h3{margin:14px 0 0;font-size:22px;color:#fff}
.gar-c p{margin:8px 0 0;font-size:15.5px;line-height:1.5}
@media (max-width:900px){.gar-l{grid-template-columns:minmax(0,1fr)}.garanties{padding:24px 20px}}

/* Wi-Fi : étapes, la ligne s'arrête sur le 4 et se trace à l'arrivée */
.etapes-w::before{display:none}
.etapes-w li:not(:last-child)::after{content:"";position:absolute;left:60px;right:-16px;top:22px;height:6px;background:repeating-linear-gradient(90deg,var(--vert) 0 12px,transparent 12px 20px);transform-origin:left;z-index:0}
.etapes-w .pin-e{z-index:1;transition:background-color .2s,color .2s,scale .3s cubic-bezier(.3,1.6,.5,1)}
.etapes-w li:last-child .pin-e{background:var(--violet);color:#fff;box-shadow:0 0 0 4px var(--fond),0 0 0 7px var(--violet)}
.etapes-w li:last-child .pin-e::after{content:"✓";position:absolute;right:-12px;top:-12px;width:22px;height:22px;display:grid;place-items:center;font-size:13px;background:var(--lime);color:var(--vert)}
.etapes-w.attente li::after{transform:scaleX(0)}
.etapes-w.attente .pin-e{scale:.6;opacity:.4}
.etapes-w.trace li::after{transition:transform .45s steps(6)}
.etapes-w.trace .pin-e{transition:opacity .2s,scale .3s cubic-bezier(.3,1.6,.5,1)}
.etapes-w.trace li:nth-child(1) .pin-e{transition-delay:0s}
.etapes-w.trace li:nth-child(1)::after{transition-delay:.2s}
.etapes-w.trace li:nth-child(2) .pin-e{transition-delay:.6s}
.etapes-w.trace li:nth-child(2)::after{transition-delay:.8s}
.etapes-w.trace li:nth-child(3) .pin-e{transition-delay:1.2s}
.etapes-w.trace li:nth-child(3)::after{transition-delay:1.4s}
.etapes-w.trace li:nth-child(4) .pin-e{transition-delay:1.8s}
@media (max-width:900px){
  .etapes-w li:not(:last-child)::after{left:22px;right:auto;top:58px;bottom:-20px;width:6px;height:auto;background:repeating-linear-gradient(180deg,var(--vert) 0 12px,transparent 12px 20px);transform-origin:top}
  .etapes-w.attente li::after{transform:scaleY(0)}
}
@media (prefers-reduced-motion:reduce){.etapes-w.attente li::after{transform:none}.etapes-w.attente .pin-e{scale:1;opacity:1}}

/* boutique : le bonhomme de la porte à taille humaine (environ 3/4 de la porte) */
.boutique .bonhomme{left:-25%;width:150%;bottom:1%;overflow:visible}
.boutique .bonhomme .bras{transform-origin:9.5px 7.5px}

/* Magasin : la boutique posée au sol comme sur l'accueil, avec le panneau des horaires à côté */
.hero>.mag-boutique{left:auto;right:300px;bottom:58px;width:400px;z-index:2}
.hero>.mag-poteau{left:auto;right:40px;bottom:40px;width:248px}
.hero>.mag-poteau .planche::before{box-shadow:220px 0 0 #5a3a17}
.mag-boutique .panneau{left:51%;top:41.5%}
@media (max-width:1180px){.hero>.mag-boutique{right:270px;width:340px}}
@media (max-width:900px){
  .hero>.mag-boutique{right:4%;left:auto;width:260px;bottom:50px}
  .hero>.mag-poteau{position:relative;right:auto;bottom:auto;width:auto;margin:24px 16px 0;z-index:12}
}
.mag-poteau .planche{display:block!important;height:auto;margin:0;box-shadow:inset 0 0 0 3px #5a3a17,inset 0 -7px 0 rgba(90,58,23,.3)}
.hero .compo .chips-l{top:300px!important;left:auto;right:0;justify-content:flex-end;max-width:420px}
@media (max-width:900px){.hero .compo .chips-l{display:none}}
.hero .compo .chips-l{top:90px!important}
.hero>.mag-poteau{width:268px;bottom:36px}
.hero>.mag-poteau .pieux i{height:40px}
@media (max-width:900px){
  .hero:has(>.mag-boutique) .compo{display:none}
  .hero>.mag-poteau{margin:28px 16px 290px}
  .hero>.mag-poteau .pieux{display:none}
  .hero>.mag-boutique{right:50%;translate:50% 0;width:300px;bottom:52px}
}

/* Magasin : rubrique Terra, partenaire officiel */
.terra{position:relative;margin-top:8px;background:#fff;border:3px solid var(--vert);padding:40px 44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:36px 48px;align-items:center;--n:14px}
.terra-badge{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0}
.terra-badge img{height:46px;width:auto;image-rendering:pixelated}
.terra-badge span{background:var(--vert);color:var(--lime);font-size:12px;letter-spacing:.08em;padding:6px 10px 5px}
.terra h2{margin:22px 0 0}
.terra-txt>p:not(.terra-badge){margin:16px 0 0;max-width:52ch}
.terra-l{list-style:none;margin:20px 0 26px;padding:0;display:grid;gap:10px}
.terra-l li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.terra-l .ico{flex:none;width:18px;height:18px;margin-top:3px;fill:var(--vert);background:var(--lime);padding:2px}
.terra-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.terra-g figure{margin:0;background:var(--pale);display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:end;padding:18px 14px 12px;min-height:200px}
.terra-g img{max-width:100%;max-height:170px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(35,77,11,.18));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.terra-g figcaption{margin-top:10px;font-size:12px;letter-spacing:.06em;opacity:.8}
@media (hover:hover) and (pointer:fine){.terra-g figure:hover img{transform:translateY(-6px)}}
@media (max-width:900px){.terra{grid-template-columns:minmax(0,1fr);padding:26px 20px}.terra-g figure{min-height:150px}.terra-g img{max-height:120px}}
.ondes svg{fill:var(--violet);filter:drop-shadow(0 0 5px rgba(255,255,255,.7))}
.ondes .o0{fill:var(--violet)}
.ondes path{opacity:.28}
.nuit .ondes svg{fill:#a3d96b;filter:drop-shadow(0 0 6px rgba(163,217,107,.65))}
.nuit .ondes .o0{fill:#fff}
.vits .j-s{font-size:11px;line-height:1.3}
@media (max-width:900px){.telm::before{width:60px;margin-left:-30px;height:18px;top:26px}.telm .barre-t{padding:12px 18px 8px}}

/* passage entre les pages : fondu glissé (choix du propriétaire, 24/10, après la fine mosaïque jugée « PowerPoint »).
   Chrome/Edge : l'ancienne page s'efface en 140 ms, la nouvelle apparaît en remontant de 12 px en 260 ms (transition de vue, en-tête fixe).
   Firefox : aucun effet, la page s'affiche normalement (sans transition de vue, tout effet ajouté s'y voyait mal). */
.pix-tr{display:none!important}
::view-transition-old(root){animation:passageSort 140ms ease-out both}
::view-transition-new(root){animation:passageEntre 260ms cubic-bezier(0.23,1,0.32,1) both}
@keyframes passageSort{to{opacity:0}}
@keyframes passageEntre{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root){animation:none}
  ::view-transition-new(root){animation:passageFondu 160ms ease both}
  @keyframes passageFondu{from{opacity:0}}
}

/* accessibilité (audit 24/10) : textes atténués en couleur pleine plutôt qu'en transparence, contraste AA ≥ 4,5:1 */
.note-t{opacity:1;color:#4a6539}.note-t b{color:#5a4fd0}
.rep .rep-c{opacity:1;color:#5f7a50}
.posts-note{opacity:1;color:#5f7a50}
.rdv-etapes li{opacity:1;color:#5f7a50}.rdv-etapes li.fait,.rdv-etapes li.en{color:var(--vert)}
.rdv-box legend span{opacity:1;color:#56704a}
.rdv-mo:not([aria-pressed="true"]) .m{opacity:1;color:#4f6b40}
.res.r-fb,.res-b.r-fb{background:#1466d8}.post-r.r-fb{color:#1466d8}.post-r.r-ig{color:#c81f59}
.ligne>.ok,.fin>.ok{color:#357512}
.vit.nvme{background:#5a4fd0}.vits .nvme .j-s{opacity:1;color:#e9e6ff}.vits .ssd .j-s{opacity:1}
.offre .non{opacity:1}
.garanties .pro-tag{color:#fff}
.atout .at-n{color:#5a4fd0}
.av{color:#8a5f00}
li>.n.m{color:#c4ec9c}

/* LCP : le chapeau du haut de page monte sans partir de la transparence (sinon Google le compte affiché ~0,5 s plus tard) */
.titre>.lead{animation-name:monteH}
.cta .boutique{height:auto}
.logo-j,.barre-logo img{max-width:none}

/* en venant d'une autre page du site : le titre du haut est déjà là (pas d'arrivée rejouée à chaque page) */
.nav-interne .titre>*{animation:none}

/* enseigne de la boutique (demande du 24/10) : le logo monte sur le toit en totem, fixé sur une petite barre,
   et le fronton devient un panneau lumineux violet où le message de l'appli défile de droite à gauche */
.boutique{container-type:inline-size}
.boutique .enseigne>img{visibility:hidden}
.boutique .enseigne::before{background:radial-gradient(closest-side,rgba(150,140,255,.45),rgba(107,95,224,.16) 60%,transparent)}
.totem{position:absolute;left:50%;bottom:88.5%;z-index:1;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);pointer-events:none}
.totem-p{display:block;padding:1.6cqw 3.2cqw;background:#234d0b;border:.9cqw solid #16300a;border-radius:1.2cqw;
  box-shadow:0 0 0 .5cqw #2f6312 inset,0 0 3cqw rgba(222,248,198,.35)}
.totem-p img{display:block;height:8cqw;width:auto;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 5px rgba(240,255,228,.95)) drop-shadow(0 0 12px rgba(222,248,198,.7));animation:neon 6s steps(1) 1.8s infinite}
.totem-m{display:block;width:1.6cqw;height:6.5cqw;background:linear-gradient(90deg,#16300a 0 30%,#2f6312 30% 70%,#16300a 70%)}
.totem-m::after{content:"";display:block;width:7cqw;height:1.2cqw;margin:6.5cqw 0 0 -2.7cqw;background:#16300a}
.fronton{position:absolute;inset:14% 2.5%;z-index:1;display:flex;align-items:center;overflow:hidden;border-radius:.8cqw;
  background-color:#6b5fe0;background-image:radial-gradient(rgba(255,255,255,.16) 32%,transparent 36%);background-size:1.1cqw 1.1cqw;
  box-shadow:0 0 0 .5cqw #3a2f9e,0 0 2.4cqw .4cqw rgba(140,128,255,.75),inset 0 0 1.6cqw rgba(30,20,90,.55)}
.fr-t{flex:none;padding-left:100%;white-space:nowrap;font:400 max(9px,4.6cqw)/1 "VG5000","Geist Mono",monospace;letter-spacing:.06em;color:#fff;
  text-shadow:0 0 1px #fff,0 0 .8cqw rgba(255,255,255,.9),0 0 2cqw rgba(200,192,255,.9);animation:frDefile var(--d,16s) linear infinite}
@keyframes frDefile{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .fr-t{animation:none;padding:0 3cqw;overflow:hidden;text-overflow:ellipsis;flex:1}
  .totem-p img{animation:none}
}

/* Firefox : aucun passage entre les pages (demande du propriétaire 24/10 23h, « ça ralentit ») */
@supports (-moz-appearance:none){
  @view-transition{navigation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* panneau en bois : plus de halo lumineux autour (demande du propriétaire 24/10 23h40).
   À la place, une lampe col-de-cygne posée sur la planche, qui l'éclaire du ciel rosé de fin d'après-midi jusqu'au matin. */
.poteau::before{content:none!important}
.nuit .poteau .planche{filter:brightness(.78)}
.lampe{position:absolute;left:50%;bottom:100%;z-index:3;width:120px;height:44px;margin-left:-60px;margin-bottom:-3px;pointer-events:none}
.lampe i{position:absolute;display:block}
.lampe .lp-m{left:6px;bottom:0;width:6px;height:40px;background:#3b2a14;box-shadow:inset -2px 0 0 #241808}
.lampe .lp-b{left:6px;top:0;width:58px;height:6px;background:#3b2a14;box-shadow:inset 0 -2px 0 #241808}
.lampe .lp-a{left:46px;top:6px;width:32px;height:12px;background:#234d0b;clip-path:polygon(25% 0,75% 0,100% 100%,0 100%);box-shadow:inset 0 3px 0 #16300a}
.lampe .lp-r{left:52px;top:18px;width:20px;height:4px;background:#6b6250}
.lampe::after{content:"";position:absolute;left:22px;top:22px;width:80px;height:0;background:linear-gradient(rgba(255,226,150,.55),rgba(255,226,150,0));clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);opacity:0}
.poteau .planche{position:relative}
.poteau .planche::after{content:"";position:absolute;inset:3px;background:radial-gradient(ellipse 75% 70% at 50% 0,rgba(255,220,140,.42),rgba(255,220,140,.12) 55%,rgba(255,220,140,0) 85%);mix-blend-mode:screen;opacity:0;pointer-events:none}
.va:is(.m-aprem3,.m-crepuscule,.m-soiree,.m-nuit,.m-aube) .lampe .lp-r{background:#fff3c4}
.va:is(.m-aprem3,.m-crepuscule,.m-soiree,.m-nuit,.m-aube) .lampe::after{height:48px;opacity:1}
.va:is(.m-aprem3,.m-crepuscule,.m-soiree,.m-nuit,.m-aube) .poteau .planche{filter:none}
.va:is(.m-aprem3,.m-crepuscule,.m-soiree,.m-nuit,.m-aube) .poteau .planche::after{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .va:is(.m-aprem3,.m-crepuscule,.m-soiree,.m-nuit,.m-aube) .lampe .lp-r,
  .va:is(.m-aprem3,.m-crepuscule,.m-soiree,.m-nuit,.m-aube) .lampe::after,
  .va:is(.m-aprem3,.m-crepuscule,.m-soiree,.m-nuit,.m-aube) .poteau .planche::after{animation:lampeAllume 900ms steps(1) 600ms both}
  @keyframes lampeAllume{0%{opacity:0}20%{opacity:1}30%{opacity:.2}45%{opacity:1}55%{opacity:.4}65%,100%{opacity:1}}
}
@media (max-width:900px){.lampe,.poteau .planche::after{display:none}}