/* La vitrine publique (src/accueil.js), et les pages de message de la boutique.

   Meme univers que boutique.css : fond d'arene bleu roi avec ses rayons et son damier, enseigne en
   planche a rivets, cartes a cadre epais et biseaute, rubans de rarete, boutons en relief. Ce qui
   change, c'est que toutes les teintes sortent des jetons de marque.css : la feuille ne choisit
   aucune couleur, elle derive des nuances a partir de celles du contrat, avec color-mix. Les
   valeurs ecrites en repli dans le bloc ci-dessous sont celles du tableau de docs/identite.md, et
   elles ne servent que si marque.css n'est pas la.

   Le fond d'arene est clair en son centre : tout texte gris se pose donc sur un panneau marine,
   jamais sur l'arene nue. Les mesures sont dans le harnais de capture, pas a l'oeil. */

:root{
  color-scheme:dark;

  /* Les jetons de marque.css. Un seul endroit les lit. */
  --v-marine:var(--marine,#0a1a33);
  --v-or:var(--or,#ffcc33);
  --v-or-sombre:var(--or-sombre,#b98600);
  --v-encre:var(--encre,#0b1220);
  --v-papier:var(--papier,#f5f7fb);
  --v-rare:var(--rare,#2f7de1);
  --v-epique:var(--epique,#7a4ddb);
  --v-mystere:var(--mystere,#6b4fd8);
  --v-succes:var(--succes,#1d9a5a);
  --v-titre:var(--titre,'Lilita One','Plus Jakarta Sans',system-ui,sans-serif);
  --v-corps:var(--corps,'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);

  /* La profondeur, derivee du marine et du bleu : aucune teinte nouvelle n'est inventee. */
  --v-bleu-1:color-mix(in srgb,var(--v-rare) 62%,var(--v-marine));
  --v-bleu-2:color-mix(in srgb,var(--v-rare) 48%,var(--v-marine));
  --v-bleu-3:color-mix(in srgb,var(--v-rare) 24%,var(--v-marine));
  --v-fond-2:color-mix(in srgb,var(--v-marine) 86%,var(--v-rare));
  --v-bord:color-mix(in srgb,var(--v-marine) 58%,#fff);
  --v-texte:var(--v-papier);
  /* 80 % de papier : mesure faite sur le panneau le plus clair que le texte courant traverse. */
  --v-doux:color-mix(in srgb,var(--v-papier) 80%,var(--v-marine));
  --v-encre-doux:color-mix(in srgb,var(--v-encre) 72%,var(--v-papier));
  --v-argent:color-mix(in srgb,var(--v-papier) 78%,var(--v-marine));
  /* Le panneau marine, qui rend l'arene lisible sous un texte gris. */
  --v-panneau:color-mix(in srgb,var(--v-marine) 84%,transparent);
  /* Le halo marine qui detache un titre clair du fond, comme dans la boutique. */
  --v-halo:0 2px 0 var(--v-marine),0 -2px 0 var(--v-marine),2px 0 0 var(--v-marine),-2px 0 0 var(--v-marine),1.5px 1.5px 0 var(--v-marine),-1.5px 1.5px 0 var(--v-marine),1.5px -1.5px 0 var(--v-marine),-1.5px -1.5px 0 var(--v-marine);

  /* Les couleurs des infographies, redefinies dans les sections claires. */
  --i-fort:var(--v-texte);
  --i-doux:var(--v-doux);
  --i-trait:var(--v-bord);
  --i-bloc:color-mix(in srgb,var(--v-marine) 60%,var(--v-rare));
  --i-accent:var(--v-or);
  --i-sur-accent:var(--v-marine);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:clip}
body{background:var(--v-marine);color:var(--v-texte);font:16px/1.55 var(--v-corps);-webkit-font-smoothing:antialiased}
/* Le fond d'arene : marine sur les bords, lumiere bleu roi au centre et en haut, rayons discrets
   et damier a 45 degres. Repris de boutique.css, teintes derivees des jetons. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(55% 32% at 50% 0%,color-mix(in srgb,var(--v-rare) 46%,transparent),transparent 72%),
    repeating-conic-gradient(from 0deg at 50% -20%,rgb(255 255 255/.035) 0 4deg,transparent 4deg 11deg),
    repeating-linear-gradient(45deg,rgb(255 255 255/.03) 0 2px,transparent 2px 38px),
    repeating-linear-gradient(-45deg,rgb(255 255 255/.03) 0 2px,transparent 2px 38px),
    radial-gradient(62% 58% at 50% 32%,var(--v-bleu-1) 0%,var(--v-bleu-2) 34%,var(--v-bleu-3) 64%,var(--v-marine) 92%)}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--focus,var(--v-or));outline-offset:3px}
.cadre,dialog{--focus:var(--v-marine)}

.saut{position:absolute;left:-9999px;top:0;z-index:20;padding:14px 18px;background:var(--v-or);color:var(--v-marine);font-weight:800;border-radius:0 0 12px 0}
.saut:focus{left:0}

/* --- Le bandeau : le logo, gros et centre, et un lien de connexion discret --------------------- */

.bandeau{position:relative;display:flex;justify-content:center;padding:16px 20px 12px}
.bandeau .logo{display:block;min-height:44px}
.bandeau img{display:block;width:150px;height:auto}
.bandeau .connexion{position:absolute;right:16px;top:20px;margin:0}
.bandeau .connexion a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;
  color:var(--v-doux);font-size:14.5px;font-weight:600;text-decoration:underline;text-underline-offset:4px;border-radius:10px}
.bandeau .connexion a:hover{color:var(--v-texte)}

/* --- Les boutons, en relief, comme dans la boutique -------------------------------------------- */

.b{position:relative;display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font:inherit;font-size:15px;font-weight:800;line-height:1.1;min-height:46px;padding:0 18px;border-radius:13px;
  cursor:pointer;text-decoration:none;color:#fff;border:3px solid var(--v-marine);
  text-shadow:0 1.5px 0 color-mix(in srgb,var(--v-marine) 70%,transparent);
  box-shadow:inset 0 3px 0 rgb(255 255 255/.3),inset 0 -4px 0 rgb(0 0 0/.2),0 4px 0 var(--v-marine);
  transition:transform .07s,box-shadow .07s;-webkit-tap-highlight-color:transparent}
.b:hover{filter:brightness(1.06)}
.b:active{transform:translateY(3px);box-shadow:inset 0 3px 0 rgb(255 255 255/.3),inset 0 -2px 0 rgb(0 0 0/.2),0 1px 0 var(--v-marine)}
/* Le geste d'achat reste vert, comme dans la boutique. Le vert est assombri au marine : sur le
   --succes pur, le blanc de 15 px ne tient que 3,8:1. */
.b.plein{--vert:color-mix(in srgb,var(--v-succes) 78%,var(--v-marine));
  background:linear-gradient(color-mix(in srgb,var(--vert) 74%,#fff) 0 18%,var(--vert) 18%,color-mix(in srgb,var(--vert) 74%,var(--v-marine)) 100%)}
.b.or{background:linear-gradient(color-mix(in srgb,var(--v-or) 45%,#fff) 0 18%,var(--v-or) 18%,var(--v-or-sombre) 100%);
  color:var(--v-marine);text-shadow:0 1px 0 rgb(255 255 255/.55)}
.b.grand{min-height:56px;padding:0 30px;font-size:18px;border-radius:15px}
.b.sur-clair{border-color:var(--v-encre);box-shadow:inset 0 3px 0 rgb(255 255 255/.3),inset 0 -4px 0 rgb(0 0 0/.2),0 4px 0 var(--v-encre)}

/* --- Le corps de page --------------------------------------------------------------------------- */

main{display:block}
section{max-width:1160px;margin:0 auto;padding:60px 20px 0}
/* Le titre de section, sur sa planche, comme l'enseigne en plus petit. */
section h2{margin:0 0 18px;text-align:center}
section h2 span{display:inline-block;font:400 clamp(24px,3.4vw,34px)/1.1 var(--v-titre);letter-spacing:.5px;color:#fff;
  text-shadow:var(--v-halo),0 4px 0 var(--v-marine);padding:10px 28px 12px;border:4px solid var(--v-marine);border-radius:14px;
  background:linear-gradient(var(--v-bleu-1) 0 16%,var(--v-bleu-2) 16%,color-mix(in srgb,var(--v-bleu-3) 70%,var(--v-marine)) 100%);
  box-shadow:inset 0 4px 0 rgb(255 255 255/.24),0 6px 0 var(--v-marine)}
section .intro{margin:0 auto 26px;max-width:74ch;padding:13px 20px;border-radius:16px;text-align:center;
  background:var(--v-panneau);border:2px solid var(--v-bord);color:var(--v-doux);font-size:16px}
.garde-fou{margin:22px auto 0;max-width:74ch;padding:12px 18px;border:2px dashed var(--v-bord);border-radius:14px;
  background:var(--v-panneau);color:var(--v-doux);font-size:14px;line-height:1.5;text-align:center}
.garde-fou.haut{margin:0 auto 24px}
.actions{display:flex;justify-content:center;margin:26px 0 0}
.rassure{margin:12px 0 0;text-align:center;font-size:14.5px;color:var(--v-doux)}

/* --- Le premier ecran : l'enseigne a rivets ----------------------------------------------------- */

.hero{padding-top:12px}
.enseigne{position:relative;max-width:min(880px,calc(100% - 64px));margin:30px auto 26px}
.enseigne::before,.enseigne::after{content:"";position:absolute;top:34px;bottom:-14px;width:70px;z-index:0;
  background:linear-gradient(var(--v-bleu-1),var(--v-bleu-3));border:4px solid var(--v-marine);
  box-shadow:inset 0 3px 0 rgb(255 255 255/.22)}
.enseigne::before{left:-40px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,32% 50%)}
.enseigne::after{right:-40px;clip-path:polygon(0 0,100% 0,68% 50%,100% 100%,0 100%)}
.planche{position:relative;z-index:1;text-align:center;padding:26px 30px 24px;border:4px solid var(--v-marine);border-radius:20px;
  background:
    radial-gradient(circle at 18px 18px,color-mix(in srgb,var(--v-or) 55%,#fff) 0 3px,var(--v-or-sombre) 3.5px 5.5px,transparent 6px),
    radial-gradient(circle at calc(100% - 18px) 18px,color-mix(in srgb,var(--v-or) 55%,#fff) 0 3px,var(--v-or-sombre) 3.5px 5.5px,transparent 6px),
    radial-gradient(circle at 18px calc(100% - 18px),color-mix(in srgb,var(--v-or) 55%,#fff) 0 3px,var(--v-or-sombre) 3.5px 5.5px,transparent 6px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px),color-mix(in srgb,var(--v-or) 55%,#fff) 0 3px,var(--v-or-sombre) 3.5px 5.5px,transparent 6px),
    linear-gradient(var(--v-bleu-1) 0%,color-mix(in srgb,var(--v-bleu-2) 80%,var(--v-marine)) 55%,color-mix(in srgb,var(--v-bleu-3) 60%,var(--v-marine)) 100%);
  box-shadow:inset 0 0 0 3px var(--v-or),inset 0 0 0 5px color-mix(in srgb,var(--v-marine) 55%,transparent),
    inset 0 9px 0 rgb(255 255 255/.12),0 8px 0 var(--v-marine),0 20px 34px rgb(0 0 0/.4)}
.planche .reflet{position:absolute;inset:0;border-radius:16px;overflow:clip;pointer-events:none}
.planche .reflet::before{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(105deg,rgb(255 255 255/0) 38%,rgb(255 255 255/.28) 47%,rgb(255 255 255/.06) 51%,rgb(255 255 255/0) 58%);
  animation:balayage 6s ease-in-out infinite}
@keyframes balayage{0%,62%{transform:translateX(-100%)}92%,100%{transform:translateX(100%)}}
.kicker{position:absolute;left:50%;top:-19px;transform:translateX(-50%);white-space:nowrap;max-width:calc(100% - 40px);
  overflow:clip;text-overflow:ellipsis;background:var(--v-marine);color:var(--v-or);font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:9px 18px;border-radius:999px;border:3px solid var(--v-or);
  box-shadow:0 4px 0 color-mix(in srgb,var(--v-marine) 45%,transparent);margin:0}
.hero h1{position:relative;margin:0 0 14px;font:400 clamp(28px,4.2vw,42px)/1.06 var(--v-titre);letter-spacing:.4px;color:#fff;
  text-shadow:var(--v-halo),0 6px 0 var(--v-marine),0 10px 18px rgb(0 0 0/.35);text-wrap:balance}
.hero .chapeau{margin:0 auto 20px;max-width:68ch;font-size:16.5px;line-height:1.55;color:var(--v-doux)}
/* Un trait de surligneur derriere SEO et GEO : la bande d'or ne monte qu'aux deux tiers du mot, ce
   qui se lit comme un marquage et non comme un bouton. */
.surligne{position:relative;padding:0 3px;color:#fff;font-weight:800;white-space:nowrap;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--v-or) 42%,transparent) 0 62%,
    transparent 62%);
  box-shadow:0 1px 0 color-mix(in srgb,var(--v-or) 55%,transparent)}
.hero .actions{margin:0}
.hero .rassure{margin-top:14px}

/* Les cartes gardent la largeur de celles de la boutique : en dessous de 300px, la plaque du volume
   se casse en deux lignes et les badges se font rogner. La grille pose donc des colonnes de 300 a
   320px, autant que la largeur en tient, et centre les rangees : cinq cartes font trois puis deux. */
.grille-demo{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:52px 26px;align-items:stretch;margin-top:34px}

/* --- La carte, dessinee en HTML et CSS ----------------------------------------------------------- */

/* Les quatre nuances de la rarete sortent toutes de --base : une seule formule, cinq paliers. La
   carte et sa fiche les partagent, sinon l'illustration de la fiche perd sa couleur de rarete. */
.carte-demo,dialog.fiche{
  --r1:color-mix(in srgb,var(--base) 32%,#fff);
  --r2:var(--base);
  --r3:color-mix(in srgb,var(--base) 64%,var(--v-marine));
  --r4:color-mix(in srgb,var(--base) 30%,var(--v-marine));
  --ruban-texte:var(--v-papier);
  --base:var(--v-argent)}

.carte-demo{position:relative;isolation:isolate;margin:0;padding:7px;border-radius:20px;display:flex;cursor:pointer;
  transform:translateY(var(--ty,0));transition:transform .18s ease-out}
.carte-demo:hover{--ty:-6px}
.carte-demo::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:20px;border:3px solid var(--v-marine);
  background:linear-gradient(155deg,var(--r1) 0%,var(--r2) 28%,var(--r3) 72%,var(--r4) 100%);
  box-shadow:inset 0 3px 0 rgb(255 255 255/.5),inset 0 -4px 0 rgb(0 0 0/.25),0 7px 0 var(--v-marine),0 16px 24px rgb(0 0 0/.42)}
.carte-demo[data-palier=majeur],dialog.fiche[data-palier=majeur]{--base:var(--v-or);--ruban-texte:var(--v-marine)}
.carte-demo[data-palier=majeur]::before{box-shadow:inset 0 3px 0 rgb(255 255 255/.7),inset 0 -4px 0 rgb(0 0 0/.25),
  0 0 0 3px var(--v-or),0 0 0 5px var(--v-marine),0 8px 0 2px var(--v-marine),0 0 16px 6px color-mix(in srgb,var(--v-or) 55%,transparent)}
.carte-demo[data-palier=fort],dialog.fiche[data-palier=fort]{--base:var(--v-epique)}
.carte-demo[data-palier=fort]::before{box-shadow:inset 0 3px 0 rgb(255 255 255/.5),inset 0 -4px 0 rgb(0 0 0/.25),0 7px 0 var(--v-marine),0 0 22px color-mix(in srgb,var(--v-epique) 70%,transparent)}
.carte-demo[data-palier=solide],dialog.fiche[data-palier=solide]{--base:var(--v-rare)}
.carte-demo[data-palier=niche],dialog.fiche[data-palier=niche]{--base:var(--v-argent);--ruban-texte:var(--v-marine)}
.carte-demo[data-palier=sous-seuil],dialog.fiche[data-palier=sous-seuil]{--base:var(--v-mystere)}

/* marque.css donne a .cadre la planche a rivets : son calage et son lisere dore n'ont rien a faire
   dans une carte, qui reprend le nom de classe pour son cadre interieur. On les efface ici. */
/* --- Ce qui se passe au survol d'une carte, une rarete a la fois -------------------------------- */

/* Deux couches : .fx est decoupee au bord de la carte, pour ce qui doit passer devant sa face ;
   ::after vit derriere le cadre, pour ce qui a le droit de deborder. Les deux ne s'allument qu'au
   survol, et le bloc prefers-reduced-motion en bas de feuille coupe leurs animations. */
.carte-demo .fx{position:absolute;inset:0;z-index:3;border-radius:20px;overflow:clip;pointer-events:none;
  opacity:0;transition:opacity .2s ease-out}
.carte-demo::after{content:"";position:absolute;inset:-18px -16px -52px;z-index:-2;border-radius:30px;pointer-events:none;
  opacity:0;transition:opacity .3s ease-out}
.carte-demo:hover .fx,.carte-demo:hover::after,.carte-demo:focus-within .fx,.carte-demo:focus-within::after{opacity:1}

/* Legendaire : le feu monte derriere la carte, et des braises traversent sa face. */
.carte-demo[data-palier=majeur]::after{
  background:
    radial-gradient(26% 26% at 18% 92%,#fff3b0 0,#ffb300 40%,rgb(255 84 0/.55) 70%,transparent 86%),
    radial-gradient(30% 34% at 50% 96%,#fffbe0 0,#ffc400 38%,rgb(255 74 0/.55) 68%,transparent 86%),
    radial-gradient(26% 26% at 82% 92%,#fff3b0 0,#ffb300 40%,rgb(255 84 0/.55) 70%,transparent 86%),
    radial-gradient(70% 40% at 50% 100%,rgb(255 140 0/.55) 0,transparent 72%);
  filter:blur(4px);transform-origin:50% 100%;animation:flammes 1.05s ease-in-out infinite alternate}
.carte-demo[data-palier=majeur] .fx::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 18% 80%,#fff0a8 0 2px,transparent 3px),
    radial-gradient(circle at 42% 92%,#ffd24a 0 1.6px,transparent 3px),
    radial-gradient(circle at 63% 84%,#fff0a8 0 2.2px,transparent 3px),
    radial-gradient(circle at 82% 94%,#ffb300 0 1.8px,transparent 3px);
  animation:braises 1.7s linear infinite}
@keyframes flammes{from{transform:translateY(5px) scaleY(.92)}to{transform:translateY(-7px) scaleY(1.1)}}
@keyframes braises{0%{transform:translateY(12%);opacity:0}25%{opacity:1}100%{transform:translateY(-70%);opacity:0}}

/* Epique : un halo violet qui bat, et un eclair qui claque deux fois en travers de la carte. */
.carte-demo[data-palier=fort]::after{
  background:radial-gradient(58% 56% at 50% 50%,color-mix(in srgb,var(--v-epique) 78%,transparent),transparent 74%);
  filter:blur(2px);animation:battement 1.2s ease-in-out infinite alternate}
.carte-demo[data-palier=fort] .fx::before{content:"";position:absolute;top:4%;left:29%;width:42%;height:54%;
  background:linear-gradient(#fff 0,#f1e6ff 46%,color-mix(in srgb,var(--v-epique) 55%,#fff) 100%);
  clip-path:polygon(58% 0,22% 52%,46% 52%,26% 100%,80% 44%,54% 44%,76% 0);
  filter:drop-shadow(0 0 14px #d7bcff);animation:eclair 1.5s steps(1,end) infinite}
@keyframes battement{from{opacity:.55;transform:scale(.97)}to{opacity:1;transform:scale(1.03)}}
@keyframes eclair{0%,16%{opacity:0}18%{opacity:1}22%{opacity:.1}26%{opacity:.9}32%,100%{opacity:0}}

/* Rare et Commune : un reflet balaie la carte, vif sur le bleu, lent et doux sur l'argent. */
.carte-demo[data-palier=solide]::after,.carte-demo[data-palier=niche]::after{
  background:radial-gradient(56% 54% at 50% 50%,color-mix(in srgb,var(--base) 62%,transparent),transparent 74%);
  filter:blur(3px)}
.carte-demo[data-palier=solide] .fx::before,.carte-demo[data-palier=niche] .fx::before{
  content:"";position:absolute;top:-40%;left:-60%;width:42%;height:180%;transform:rotate(14deg);
  background:linear-gradient(100deg,transparent,rgb(255 255 255/.6),transparent);
  animation:reflet-carte 1.5s ease-in-out infinite}
.carte-demo[data-palier=niche] .fx::before{animation-duration:2.4s;background:linear-gradient(100deg,transparent,rgb(255 255 255/.42),transparent)}
/* Nom distinct de celui du reflet de l'enseigne, plus haut : deux @keyframes du meme nom, et c'est
   le dernier qui gagne pour tout le monde. */
@keyframes reflet-carte{from{left:-60%}to{left:118%}}

/* Mystere : une brume qui tourne derriere la carte, sans jamais rien reveler. */
.carte-demo[data-palier=sous-seuil]::after{
  background:conic-gradient(from 0turn,transparent 0 12%,color-mix(in srgb,var(--v-mystere) 70%,transparent) 26%,
    transparent 44%,color-mix(in srgb,var(--v-mystere) 45%,transparent) 66%,transparent 84%);
  filter:blur(7px);animation:brume 3.6s linear infinite}
.carte-demo[data-palier=sous-seuil] .fx::before{content:"";position:absolute;inset:0;
  background:radial-gradient(42% 36% at 22% 34%,color-mix(in srgb,var(--v-mystere) 34%,transparent),transparent 70%);
  animation:battement 2.1s ease-in-out infinite alternate}
@keyframes brume{to{transform:rotate(1turn)}}

.carte-demo .cadre{flex:1;min-width:0;display:flex;flex-direction:column;border-radius:13px;overflow:clip;
  padding:0;box-shadow:none;background:var(--v-papier);border:3px solid var(--v-marine)}
.carte-demo h3{margin:0;padding:10px 14px 0;font:400 22px/1.12 var(--v-titre);letter-spacing:.2px;color:var(--v-encre)}
.carte-demo .corps{display:flex;flex-direction:column;gap:9px;padding:6px 14px 16px;flex:1;color:var(--v-encre)}

.tag-exemple{position:absolute;z-index:4;top:-9px;left:12px;padding:3px 9px 4px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--v-papier);color:var(--v-encre);border:2px solid var(--v-marine);box-shadow:0 2px 0 var(--v-marine)}

.illu{position:relative;height:142px;padding:10px 12px 0;overflow:clip;border-bottom:3px solid var(--v-marine);
  background:
    repeating-linear-gradient(45deg,rgb(255 255 255/.1) 0 2px,transparent 2px 18px),
    repeating-linear-gradient(-45deg,rgb(255 255 255/.1) 0 2px,transparent 2px 18px),
    radial-gradient(95% 130% at 22% 60%,var(--r1) 0%,var(--r2) 34%,var(--r3) 74%,var(--r4) 100%)}
.illu::before{content:"";position:absolute;left:60px;top:84px;width:460px;height:460px;margin:-230px 0 0 -230px;z-index:0;
  background:repeating-conic-gradient(rgb(255 255 255/.26) 0 8deg,rgb(255 255 255/0) 8deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 0,rgb(0 0 0/.6) 25%,transparent 58%);
  mask:radial-gradient(circle,#000 0,rgb(0 0 0/.6) 25%,transparent 58%)}
.haut{position:relative;z-index:2;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.badge{font-size:11.5px;font-weight:800;line-height:1;padding:5px 9px;border-radius:999px;
  background:var(--v-papier);color:var(--v-marine);border:2px solid var(--v-marine);box-shadow:0 2px 0 var(--v-marine)}
.badge.type{background:var(--v-marine);color:var(--v-papier)}
/* La plaque laisse passer le ruban, qui remonte sur le bas de l'illustration. */
.scene{position:absolute;z-index:2;left:12px;right:12px;bottom:26px;display:flex;align-items:center;gap:12px}
/* L'embleme est le dessin plein de la boutique, appele dans le sprite : ni trait blanc, ni
   remplissage impose ici, sinon les aplats du symbole sautent. */
.sprite{position:absolute;width:0;height:0;overflow:clip}
.embleme{flex:none;width:72px;height:72px;filter:drop-shadow(0 4px 0 color-mix(in srgb,var(--v-marine) 70%,transparent))}
.mystere{flex:none;width:72px;text-align:center;font:400 82px/.9 var(--v-titre);color:#fff;text-shadow:0 6px 0 var(--v-marine)}
.vol{min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:5px 12px 7px;border-radius:14px;
  background:color-mix(in srgb,var(--v-marine) 90%,transparent);border:2px solid rgb(255 255 255/.24);
  box-shadow:0 3px 0 color-mix(in srgb,var(--v-marine) 50%,transparent)}
.vol b{font:400 38px/1 var(--v-titre);letter-spacing:.5px;word-spacing:.16em;color:#fff;text-shadow:0 3px 0 #000;
  max-width:100%;overflow-wrap:anywhere}
.carte-demo[data-palier=majeur] .vol b,.fiche[data-palier=majeur] .vol b{color:color-mix(in srgb,var(--v-or) 70%,#fff)}
.vol span{margin-top:3px;font-size:12px;font-weight:700;line-height:1.2;color:var(--v-doux)}
.vol.attente{padding-block:6px 8px}
.vol.attente b{font-size:24px;line-height:1.1}

.ruban{position:relative;z-index:3;align-self:center;margin:-20px auto 0;min-width:64%;display:flex;justify-content:center}
.ruban::before,.ruban::after{content:"";position:absolute;top:9px;height:32px;width:30px;
  background:linear-gradient(var(--r3),var(--r4));border:3px solid var(--v-marine)}
.ruban::before{left:-18px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,38% 50%)}
.ruban::after{right:-18px;clip-path:polygon(0 0,100% 0,62% 50%,100% 100%,0 100%)}
.ruban b{position:relative;z-index:1;flex:1;text-align:center;font:400 20px/1 var(--v-titre);letter-spacing:.6px;
  color:var(--ruban-texte);padding:8px 20px 9px;border:3px solid var(--v-marine);border-radius:9px;
  /* La bande du milieu est celle que les lettres recouvrent : elle est assombrie au marine, sinon
     le bleu du palier Rare ne tient que 4,15:1 sous le texte clair. */
  background:linear-gradient(color-mix(in srgb,var(--r1) 70%,var(--r2)) 0 14%,color-mix(in srgb,var(--r2) 84%,var(--v-marine)) 14%,var(--r3) 100%);
  box-shadow:inset 0 3px 0 rgb(255 255 255/.4),0 4px 0 var(--v-marine)}

.mesure{margin:0;font-size:12px;line-height:1.4;color:var(--v-encre-doux)}
.ligne-stat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;align-items:center;
  background:color-mix(in srgb,var(--v-marine) 7%,transparent);border:2px solid color-mix(in srgb,var(--v-marine) 18%,transparent);
  border-radius:12px;padding:7px 10px 9px}
.ligne-stat .etiq{font-size:12.5px;font-weight:800;color:var(--v-encre-doux)}
.ligne-stat b{font-size:13px;font-weight:800;text-align:right;color:var(--v-encre)}
.jauge{grid-column:1/-1;position:relative;display:block;height:12px;border-radius:6px;overflow:clip;
  background:color-mix(in srgb,var(--v-marine) 82%,#fff);border:2px solid var(--v-marine);box-shadow:inset 0 3px 0 rgb(0 0 0/.3)}
.jauge i{display:block;height:100%;border-radius:0 4px 4px 0;background:linear-gradient(var(--r1),var(--r2) 45%,var(--r3));
  box-shadow:inset 0 2px 0 rgb(255 255 255/.45)}
.jauge::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 2px),color-mix(in srgb,var(--v-marine) 70%,transparent) calc(25% - 2px) 25%)}

.carte-demo .bas{margin-top:auto;padding-top:10px;border-top:2px dashed color-mix(in srgb,var(--v-marine) 22%,transparent);
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.prix{margin:0;min-width:0}
.carte-demo .prix b{display:block;font:400 25px/1 var(--v-titre);color:var(--v-encre)}
.carte-demo .prix span{display:block;margin-top:2px;font-size:11px;font-weight:600;line-height:1.25;color:var(--v-encre-doux)}
.carte-demo .b{min-height:40px;padding:0 12px;font-size:14px}

/* --- La fiche d'une carte, en fenetre de jeu ------------------------------------------------------ */

dialog.fiche{border:4px solid var(--v-marine);border-radius:24px;padding:0;max-width:720px;width:calc(100% - 32px);
  background:color-mix(in srgb,var(--v-papier) 92%,var(--v-rare));color:var(--v-encre);
  box-shadow:0 8px 0 var(--v-marine),0 30px 80px rgb(0 0 0/.55);overflow:auto;overscroll-behavior:contain}
dialog.fiche[data-palier=majeur]{border-color:var(--v-or)}
dialog::backdrop{background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--v-rare) 55%,transparent),color-mix(in srgb,var(--v-marine) 92%,transparent))}
.fiche > article{padding:0 0 26px}
.fiche header{position:relative}
.fiche header .illu{height:auto;min-height:150px;padding:14px 66px 46px 16px}
.fiche header .illu::before{left:70px;top:96px}
.fiche header .scene{position:relative;left:auto;right:auto;bottom:auto;margin-top:16px}
.fiche header .ruban{margin:-20px auto 0;width:min(320px,70%);min-width:0}
/* Le coin haut gauche est celui des badges de la carte : la mention d'exemple se range a droite,
   avant le bouton de fermeture. */
.fiche .tag-exemple{position:absolute;z-index:8;top:16px;right:68px;left:auto}
/* Le titre tient la place de la plaque du volume : dans la bande de rarete, a cote de l'embleme.
   Le chiffre du marche est juste en dessous, dans sa section, et n'a pas a etre dit deux fois. */
.fiche h2{margin:0;min-width:0;font:400 30px/1.12 var(--v-titre);letter-spacing:.6px;color:#fff;text-shadow:0 3px 0 #000;
  background:color-mix(in srgb,var(--v-marine) 90%,transparent);border:2px solid rgb(255 255 255/.24);
  border-radius:14px;padding:6px 12px 8px}
.fiche .fermer{position:absolute;right:12px;top:12px;z-index:8;width:46px;height:46px;padding:0;border-radius:13px;cursor:pointer;
  background:linear-gradient(color-mix(in srgb,var(--v-mystere) 40%,var(--v-marine)),var(--v-marine));
  border:3px solid var(--v-marine);color:#fff;font:400 30px/1 var(--v-titre);
  box-shadow:inset 0 3px 0 rgb(255 255 255/.3),0 4px 0 var(--v-marine)}
.fiche .fermer:active{transform:translateY(3px);box-shadow:inset 0 3px 0 rgb(255 255 255/.3),0 1px 0 var(--v-marine)}
.fiche section{position:relative;margin:34px 18px 0;padding:24px 18px 14px;background:#fff;
  border:3px solid color-mix(in srgb,var(--v-encre) 18%,var(--v-papier));border-radius:16px;
  box-shadow:0 4px 0 color-mix(in srgb,var(--v-encre) 18%,var(--v-papier))}
.fiche h4{position:absolute;left:14px;top:-19px;margin:0;font:400 17px/1 var(--v-titre);letter-spacing:.3px;color:#fff;
  text-shadow:var(--v-halo);background:linear-gradient(var(--v-bleu-1),var(--v-bleu-2));border:3px solid var(--v-marine);
  border-radius:10px;padding:7px 12px 8px;box-shadow:inset 0 3px 0 rgb(255 255 255/.28),0 3px 0 var(--v-marine)}
/* marque.css peint tout b et tout strong en clair, pour le fond marine. Dans les panneaux blancs
   de la fiche, ce blanc sur blanc efface le texte : le gras y reprend la couleur de son paragraphe.
   L'entete garde ses regles propres, plus specifiques. */
.fiche section b{color:inherit}
.fiche h5{margin:0 0 6px;font-size:13px;color:var(--v-encre-doux);font-weight:800}
.fiche p{margin:0 0 8px;font-size:15px;color:var(--v-encre)}
.fiche .src{font-size:12.5px;color:var(--v-encre-doux)}
.fiche code{font:13px ui-monospace,Consolas,monospace;background:color-mix(in srgb,var(--v-papier) 88%,var(--v-rare));
  padding:1px 6px;border-radius:5px;word-break:break-word}
.fiche .chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:12px}
.fiche .chiffres div{background:color-mix(in srgb,var(--v-papier) 92%,var(--v-rare));
  border:2px solid color-mix(in srgb,var(--v-encre) 22%,var(--v-papier));border-radius:12px;padding:10px 12px}
.fiche .chiffres b{display:block;font:400 26px/1.05 var(--v-titre);letter-spacing:.3px;word-spacing:.14em;color:var(--v-marine)}
.fiche .chiffres span{display:block;margin-top:4px;font-size:12.5px;line-height:1.35;color:var(--v-encre-doux);font-weight:600}
.fiche ul{margin:0 0 8px;padding:0;list-style:none}
.fiche ul.preuves li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"quoi res" "src src";
  gap:2px 12px;align-items:baseline;padding:9px 12px;margin-bottom:8px;
  background:color-mix(in srgb,var(--v-papier) 92%,var(--v-rare));
  border:2px solid color-mix(in srgb,var(--v-encre) 22%,var(--v-papier));border-radius:12px}
.fiche ul.preuves b{grid-area:quoi;font-size:14.5px;font-weight:800}
.fiche ul.preuves .res{grid-area:res;justify-self:end;text-align:right;font:400 19px/1.1 var(--v-titre);letter-spacing:.3px;color:var(--v-marine)}
.fiche ul.preuves .src{grid-area:src;font-size:12.5px;color:var(--v-encre-doux)}
.fiche .maille{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fiche .maille li{font-size:14px;padding:3px 0}
.fiche ul.inclus li{font-size:14.5px;padding:4px 0 4px 24px;position:relative}
.fiche ul.inclus li::before{content:"";position:absolute;left:0;top:9px;width:13px;height:13px;transform:rotate(45deg);
  border-radius:3px;background:linear-gradient(135deg,color-mix(in srgb,var(--v-rare) 40%,#fff),var(--v-rare));
  border:2px solid var(--v-marine)}
.fiche .prixfiche{display:flex;align-items:center;gap:10px;margin:12px 0 0}
.fiche .prixfiche b{font:400 30px/1 var(--v-titre);color:var(--v-marine)}
.fiche .prixfiche span{font-size:13px;color:var(--v-encre-doux)}
.fiche .essai{margin:14px 0 8px}
.fiche .essai .b{width:100%}

/* --- Comment ca marche --------------------------------------------------------------------------- */

.etapes{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.etapes li{position:relative;padding:24px 20px 22px;border-radius:18px;text-align:left;
  background:linear-gradient(var(--v-fond-2),color-mix(in srgb,var(--v-marine) 94%,#000));
  border:3px solid var(--v-marine);box-shadow:inset 0 2px 0 rgb(255 255 255/.14),0 5px 0 var(--v-marine)}
.etapes .illustration{display:block;width:74px;height:74px;margin-bottom:12px;
  background:linear-gradient(var(--v-or),var(--v-or-sombre));
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.etapes [data-image=mesure]{--src:url("/images/mesure.svg")}
.etapes [data-image=carte]{--src:url("/images/carte.svg")}
.etapes [data-image=livraison]{--src:url("/images/livraison.svg")}
.etapes .rang{position:absolute;top:18px;right:18px;margin:0;width:40px;height:40px;border-radius:50%;
  font:400 22px/36px var(--v-titre);text-align:center;color:#fff;text-shadow:var(--v-halo);
  background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--v-rare) 70%,#fff) 0 22%,var(--v-bleu-1) 50%,var(--v-bleu-2));
  border:3px solid var(--v-marine);box-shadow:inset 0 -4px 0 rgb(0 0 0/.25),0 3px 0 var(--v-marine)}
.etapes h3{margin:0 0 8px;font:400 21px/1.15 var(--v-titre);color:#fff;text-shadow:var(--v-halo)}
.etapes p{margin:0;color:var(--v-doux);font-size:15.5px;line-height:1.55}
.sous-capot{margin:22px auto 0;max-width:76ch;padding:14px 18px 12px;border-radius:14px;background:var(--v-panneau);
  border:2px solid var(--v-bord);font-size:14px;line-height:1.55;color:var(--v-doux);text-align:center}
.sous-capot b{display:block;margin-bottom:4px;font:400 19px/1.2 var(--v-titre);letter-spacing:.3px;color:#fff}
.sous-capot .sources{display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--v-bord);
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:color-mix(in srgb,var(--v-doux) 80%,var(--v-marine))}

/* --- Les prix, sur fond clair --------------------------------------------------------------------- */

section.prix{max-width:1120px;margin:60px auto 0;padding:44px 28px 40px;border:4px solid var(--v-marine);border-radius:26px;
  background:var(--v-papier);color:var(--v-encre);box-shadow:0 8px 0 var(--v-marine),0 20px 34px rgb(0 0 0/.35);
  --i-fort:var(--v-encre);--i-doux:var(--v-encre-doux);--i-trait:color-mix(in srgb,var(--v-encre) 26%,var(--v-papier));
  --i-bloc:color-mix(in srgb,var(--v-papier) 88%,var(--v-marine));--i-accent:var(--v-or-sombre);--i-sur-accent:var(--v-papier)}
section.prix .intro{background:none;border:0;color:var(--v-encre-doux);padding:0}
.offres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.offre{padding:24px 22px;border-radius:18px;background:#fff;border:3px solid color-mix(in srgb,var(--v-encre) 16%,var(--v-papier));
  box-shadow:0 5px 0 color-mix(in srgb,var(--v-encre) 16%,var(--v-papier))}
.offre.mise-en-avant{border-color:var(--v-or-sombre);box-shadow:0 5px 0 color-mix(in srgb,var(--v-or) 60%,var(--v-papier))}
.offre h3{margin:0 0 10px;font:400 22px/1.1 var(--v-titre);color:var(--v-encre)}
.offre .montant{margin:0 0 12px}
.offre .montant b{display:block;font:400 38px/1 var(--v-titre);color:var(--v-or-sombre)}
.offre .montant span{display:block;margin-top:4px;font-size:14px;font-weight:800;color:var(--v-encre-doux)}
.offre p{margin:0;font-size:15px;line-height:1.55;color:var(--v-encre-doux)}

/* --- Les avis de demonstration --------------------------------------------------------------------- */

.trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.avis{position:relative;margin:0;padding:26px 22px 22px;border-radius:18px;text-align:left;
  background:var(--v-fond-2);border:2px dashed var(--v-bord)}
.avis .tag-exemple{top:-11px;left:20px}
.avis blockquote{margin:0 0 14px}
.avis blockquote p{margin:0;font-size:16px;line-height:1.6;color:var(--v-texte)}
.avis figcaption{display:flex;flex-direction:column;gap:2px}
.avis figcaption b{font-size:15px;color:#fff}
.avis figcaption span{font-size:13.5px;color:var(--v-doux)}

/* --- La FAQ ----------------------------------------------------------------------------------------- */

.paires{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;text-align:left}
.paires div{padding:20px 20px 18px;border-radius:16px;background:var(--v-panneau);border:2px solid var(--v-bord)}
.paires h3{margin:0 0 6px;font:400 20px/1.2 var(--v-titre);color:#fff}
.paires p{margin:0;color:var(--v-doux);font-size:15.5px;line-height:1.6}
/* La relance de fin de page : une phrase qui reprend la promesse du haut, puis le bouton. */
.faq .final{margin:48px 0 8px;font:400 clamp(24px,3vw,32px)/1.12 var(--v-titre);letter-spacing:.3px;color:#fff;
  text-shadow:var(--v-halo);text-wrap:balance}
.faq .rassure{margin:0 auto 20px;max-width:56ch}

/* --- Le pied ------------------------------------------------------------------------------------------ */

.pied{max-width:1160px;margin:56px auto 0;padding:24px 20px 40px;border-top:2px solid var(--v-bord);
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;color:var(--v-doux);font-size:14px}
.pied p{margin:0}
.pied .marque img{display:block;width:107px;height:auto}
.pied .liens{margin-left:auto;display:flex;gap:4px}
.pied .liens a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--v-texte)}

/* --- Les infographies ---------------------------------------------------------------------------------- */

.info{margin:0 auto;max-width:440px;width:100%;padding:16px 14px;border-radius:18px;
  background:var(--v-panneau);border:2px solid var(--v-bord)}
.info.large{max-width:560px}
section.prix .info{background:none;border:0;padding:0}
.info svg{display:block;width:100%;height:auto;overflow:visible}
.info figcaption{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--i-doux);text-align:center}
.info text{font-family:var(--v-corps)}
.i-fort{font-size:16.5px;font-weight:800;fill:var(--i-fort)}
.i-fort.accent{fill:var(--i-accent)}
.i-doux{font-size:14.5px;fill:var(--i-doux)}
.i-doux.titre-liste{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.i-num{font-family:var(--v-titre);font-size:17px;fill:var(--i-sur-accent)}
.i-num.rang{fill:var(--i-doux);font-size:15px}
.i-num.sur-gemme{fill:var(--i-sur-accent);font-size:19px}
.i-num.sur-case{fill:var(--i-sur-accent);font-size:15px}
.i-point{fill:var(--i-trait)}
.i-rail{stroke:var(--i-trait);stroke-width:2}
.i-pastille{fill:var(--i-accent)}
.i-bloc{fill:var(--i-bloc);stroke:var(--i-trait);stroke-width:2}
.i-bloc.plein{fill:var(--i-accent);stroke:none}
.i-fort.sur-plein{fill:var(--i-sur-accent)}
.i-fleche{stroke:var(--i-trait);stroke-width:2;fill:none;stroke-dasharray:5 5}
.i-case{fill:var(--i-bloc);stroke:var(--i-trait);stroke-width:2}
.i-case.source{fill:var(--i-accent);stroke:none}
.i-place{fill:var(--i-bloc);stroke:var(--i-trait);stroke-width:2}
.i-place.vide{fill:color-mix(in srgb,var(--i-accent) 22%,transparent);stroke:var(--i-accent);stroke-dasharray:6 5}
.i-place.absent{fill:none;stroke:var(--i-accent);stroke-width:2;stroke-dasharray:6 5}
.i-barre{fill:var(--i-trait)}
.i-gemme{fill:var(--i-trait)}
.info [data-palier=majeur] .i-barre,.info [data-palier=majeur] .i-gemme{fill:var(--v-or)}
.info [data-palier=fort] .i-barre,.info [data-palier=fort] .i-gemme{fill:var(--v-epique)}
.info [data-palier=solide] .i-barre,.info [data-palier=solide] .i-gemme{fill:var(--v-rare)}
.info [data-palier=niche] .i-barre,.info [data-palier=niche] .i-gemme{fill:var(--v-argent)}
.info [data-palier=sous-seuil] .i-gemme{fill:var(--v-mystere)}

/* --- Ce qui bouge selon la largeur ------------------------------------------------------------------------ */

@media(max-width:1080px){
  .etapes,.offres,.trois{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .paires{grid-template-columns:minmax(0,1fr)}
  .enseigne{max-width:calc(100% - 44px)}
  .enseigne::before,.enseigne::after{width:44px}
  .enseigne::before{left:-26px}
  .enseigne::after{right:-26px}
}
@media(max-width:700px){
  section{padding:44px 16px 0}
  section.prix{margin-inline:16px;padding:32px 18px 30px;border-radius:20px}
  /* Le logo reste centre sur telephone, et assez grand pour se lire : le lien de connexion est
     pose par-dessus, en absolu, donc il ne pousse pas la marque sur le cote. */
  .bandeau{padding:14px 16px 0}
  .bandeau img{width:150px}
  .bandeau .connexion{right:10px;top:12px}
  .bandeau .connexion a{font-size:13.5px;padding:0 6px}
  .hero{padding-top:8px}
  .planche{padding:28px 18px 24px}
  /* Le sur-titre se coupait par le milieu sur telephone : il passe sur deux lignes plutot que de
     perdre ses derniers mots, et l'enseigne se degage d'autant en haut. */
  .kicker{position:static;transform:none;max-width:none;white-space:normal;text-align:center;
    display:block;margin:0 auto 14px;width:fit-content;font-size:11px;letter-spacing:.1em;padding:8px 14px;line-height:1.35}
  .planche{padding-top:22px}
  .grille-demo{gap:44px 18px;margin-top:36px}
  .etapes,.offres,.trois{grid-template-columns:minmax(0,1fr)}
  .etapes li{padding:22px 18px}
  .fiche .maille{grid-template-columns:minmax(0,1fr)}
  .fiche h2{font-size:23px}
  .pied{margin-top:44px;padding-bottom:32px}
  .pied .liens{margin-left:0}
}
/* Une seule carte par rangee a cette largeur : elle garde presque sa taille de bureau, et ne perd
   que ce qu'il faut pour que la plaque du volume tienne sur un telephone etroit. */
@media(max-width:430px){
  .carte-demo{padding:6px}
  .carte-demo h3{font-size:20px;padding-inline:12px}
  .carte-demo .corps{padding:6px 12px 14px}
  .illu{height:128px;padding:9px 10px 0}
  .vol b{font-size:32px}
  .embleme,.mystere{width:60px}
  .embleme{height:60px}
  .mystere{font-size:68px}
  .ruban b{font-size:18px;padding:7px 14px 8px}
  .carte-demo .prix b{font-size:22px}
  .carte-demo .b{padding:0 10px;font-size:13px}
  .b.grand{font-size:16.5px;padding:0 20px}
}

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

/* --- Les pages de message de la boutique (pageMessage, dans src/boutique.js) ---------------------
   Elles partagent cette feuille et n'ont que ces classes : les garder evite de les casser. */

.accueil{max-width:760px;margin:0 auto;padding:0 20px 72px}
.accueil > header{padding:76px 0 8px}
.accueil .marque{margin:0 0 20px;font:400 22px/1 var(--v-titre);letter-spacing:.18em;text-transform:uppercase;color:var(--v-or)}
.accueil h1{margin:0 0 18px;font:400 46px/1.1 var(--v-titre);letter-spacing:.4px;color:#fff;text-shadow:var(--v-halo)}
.accueil .chapeau{margin:0 0 28px;font-size:18px;line-height:1.55;color:var(--v-doux);max-width:62ch}
.accueil .action{margin:0 0 8px}
.accueil .bouton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:14px;
  text-decoration:none;font-weight:800;font-size:16.5px;color:var(--v-marine);border:3px solid var(--v-marine);
  background:linear-gradient(color-mix(in srgb,var(--v-or) 45%,#fff) 0 18%,var(--v-or) 18%,var(--v-or-sombre) 100%);
  box-shadow:inset 0 3px 0 rgb(255 255 255/.4),0 4px 0 var(--v-marine)}
.message > header{padding-top:92px}
.message h1{font-size:38px}
@media(max-width:620px){
  .accueil{padding:0 16px 56px}
  .accueil > header{padding-top:48px}
  .accueil h1{font-size:32px}
  .message h1{font-size:28px}
  .accueil .chapeau{font-size:16.5px}
}