/* Socle commun des sites d'essai de Qora (21.10.2026): les couleurs de la marque, la base crème ou blanc,
   les tons des sections (clair, sombre, teinté), la marge unique, le verre cannelé des sections,
   la maquette animée de l'outil et le panneau de réglages. Chaque version ajoute sa propre feuille. */

:root{
  --encre:#141413; --lilas:#d8cded; --bleu:#b8c9eb; --creme:#faf7f2; --blanc:#ffffff; --nuit:#0f1122;
  --violet:#5b45a0; --violet-fonce:#3d2a66; --marine:#1c2c55;
  --lumiere-1:#a47bea; --lumiere-2:#658dec;
  /* La deuxième couleur (réglage du 28.10, plus bas): le fond de l'offre principale, son aurore, l'accent des sections sombres, l'agenda */
  --fond-principale:#1f1c4a; --aurore-1:rgba(150,112,245,.8); --aurore-2:rgba(101,141,236,.7); --aurore-3:rgba(170,128,238,.6);
  --accent-sombre:var(--lilas); --agenda:#5b45a0;

  --fond:var(--creme); --fond-alt:var(--creme); --carte:#ffffff; --fond-section:var(--fond);
  --texte:var(--encre); --texte2:#57534c; --texte3:#8b867c;
  --ligne:rgba(20,20,19,.10); --ligne2:rgba(20,20,19,.17);
  --accent:var(--violet);

  --police:"Helvetica Neue",Arial,sans-serif;
  --police-titre:var(--police);

  --marge:clamp(20px,5vw,72px); --max:1320px;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme:light;
}
html[data-base="blanc"]{--fond:#ffffff;--fond-alt:#ffffff;--carte:#f6f5f8;--texte2:#545359;--texte3:#8a8991}
html[data-base="mixte"]{--fond:#ffffff;--fond-alt:var(--creme);--texte2:#55534f;--texte3:#8a877f}
/* Les couleurs des bandes (28.10, sa demande: «des variantes tirées des couleurs du haut de page, et d'autres»; le lilas et le bleu
   de Novatix écartés; verre et nuit retirés le même jour: «ça se joue entre aurore, brume, perle ou crème», la crème au départ).
   Les bandes: les offres, les réalisations, les questions (data-bande="alt"), et la FAQ de la page de contact. */
/* Brume: le lilas et le bleu du verre, fondus dans du blanc */
html[data-base="brume"]{--fond:#ffffff;--fond-alt:#f1f1fa;--texte2:#54535c;--texte3:#8a8994}
/* Aurore: du blanc, et les deux lumières du haut posées dans les coins */
html[data-base="aurore"]{--fond:#ffffff;--fond-alt:#f7f6fc;--texte2:#54535c;--texte3:#8a8994}
html[data-base="aurore"] [data-bande="alt"],html[data-base="aurore"] .contact-faq{background:radial-gradient(55% 70% at 100% 0%,rgba(164,123,234,.17),transparent 70%),radial-gradient(50% 65% at 0% 100%,rgba(101,141,236,.14),transparent 70%),#fbfbfe}
/* Perle: un gris froid très clair; la couleur ne vient plus que du haut et des sections sombres */
html[data-base="perle"]{--fond:#ffffff;--fond-alt:#f4f4f7;--texte2:#54545a;--texte3:#8a8a92}

/* La deuxième couleur (28.10): bleu marine, encre et gris, vert sapin et café essayés et écartés le même jour («sont pas belles»); le violet reste pour l'instant, «c'est encore un petit réglage à faire». Les variables du haut (--fond-principale, --aurore-1 à 3, --accent-sombre, --agenda) servent à la prochaine série. */

/* Les tons d'une section: clair (par défaut), sombre, teinté de lilas */
[data-ton="clair"]{--fond-section:var(--fond)}
[data-ton="sombre"]{--fond-section:var(--nuit);--texte:#f4f1ea;--texte2:#b9bccd;--texte3:#8b90a9;--ligne:rgba(244,241,234,.12);--ligne2:rgba(244,241,234,.22);--accent:var(--accent-sombre);background:var(--nuit);color:var(--texte)}
[data-ton="teinte"]{--fond-section:color-mix(in srgb,var(--lilas) 34%,var(--fond));--accent:var(--violet);background:var(--fond-section)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:linear-gradient(180deg,#eee9fb 50%,#0f1122 50%)}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--police);font-weight:400;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
h1,h2,h3{font-family:var(--police-titre);text-wrap:balance}
p{text-wrap:pretty}
em{font-style:normal}
:focus-visible{outline:2px solid var(--lumiere-2);outline-offset:3px;border-radius:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:1.1em;height:1.1em;fill:currentColor;flex:none}
.cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section,header,footer{position:relative}
[data-bande="alt"]{background:var(--fond-alt)}

/* La marge unique: tout le contenu tombe sur ce bord, et elle dégage les bords du téléphone */
.conteneur{width:100%;max-width:calc(var(--max) + 2 * var(--marge));margin-inline:auto;
  padding-left:max(var(--marge),env(safe-area-inset-left,0px));padding-right:max(var(--marge),env(safe-area-inset-right,0px))}

/* Les apparitions: le contenu est toujours visible, il glisse juste un peu en entrant */
html.js .revele{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
html.js .revele:not(.vu){transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .revele:not(.vu){transform:none}
}

/* ---------- Le fond animé du haut ---------- */
.hero-fond{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-fond canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- Le verre cannelé des sections (CSS, la direction choisie le 09.10) ---------- */
.verre{position:absolute;inset:0;overflow:hidden;container-type:inline-size;pointer-events:none;z-index:0;
  --cote:1.6cqw;--l1:var(--lumiere-1);--l2:var(--lumiere-2);--flou:1.3cqw;
  --blanc-verre:rgba(250,247,242,.7);--ombre:rgba(6,7,18,.5);--reflet:rgba(255,255,255,.15)}
[data-ton="teinte"] .verre,[data-ton="clair"] .verre{--l1:#c3aff0;--l2:#9fb6ee;--blanc-verre:rgba(255,255,255,.95);--ombre:rgba(20,20,19,.07);--reflet:rgba(255,255,255,.6)}
.verre .lumiere{position:absolute;inset:-12%;filter:blur(var(--flou));will-change:transform;animation:derive 16s ease-in-out infinite alternate;background:
  linear-gradient(116deg,transparent 33%,var(--blanc-verre) 39.5%,transparent 43%),
  linear-gradient(116deg,transparent 24%,var(--l1) 35%,var(--l2) 47%,transparent 58%),
  radial-gradient(45% 80% at 30% 62%,color-mix(in srgb,var(--l1) 55%,transparent) 0%,transparent 72%)}
.verre .decalee{animation-name:derive2;-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(var(--cote) / 2),transparent calc(var(--cote) / 2) var(--cote));mask-image:repeating-linear-gradient(90deg,#000 0 calc(var(--cote) / 2),transparent calc(var(--cote) / 2) var(--cote))}
.verre .cotes{position:absolute;inset:0;background:linear-gradient(90deg,var(--ombre),rgba(6,7,18,.04) 24%,rgba(255,255,255,.03) 56%,var(--reflet) 78%,rgba(255,255,255,.03) 87%,var(--ombre)) 0 0/var(--cote) 100% repeat-x}
.verre .voile{position:absolute;inset:0}
.verre .grain{position:absolute;inset:0;background:var(--grain);opacity:.07;mix-blend-mode:overlay}
[data-ton="teinte"] .verre .grain,[data-ton="clair"] .verre .grain{opacity:.05;mix-blend-mode:multiply}
@keyframes derive{from{transform:translateX(-5%)}to{transform:translateX(6%)}}
@keyframes derive2{from{transform:translateX(-3.6%) scaleX(1.05)}to{transform:translateX(7.4%) scaleX(1.05)}}
@media (prefers-reduced-motion:reduce){.verre .lumiere{animation:none}}

/* ---------- La maquette animée de l'outil (remplie par maquette.js) ---------- */
.maquette{--maq-fond:#ffffff;--maq-texte:#141413;--maq-texte2:#6b6760;--maq-ligne:rgba(20,20,19,.09);--maq-accent:var(--violet);--maq-doc:#f4f2ee;
  font-family:var(--police);color:var(--maq-texte);background:var(--maq-fond);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 30px 70px -30px rgba(28,44,85,.45),0 0 0 1px var(--maq-ligne);
  display:flex;flex-direction:column;min-width:0;width:100%;font-size:13px;line-height:1.35;text-align:left}
.maquette.sombre{--maq-fond:#171a30;--maq-texte:#f4f1ea;--maq-texte2:#9ea3bc;--maq-ligne:rgba(244,241,234,.1);--maq-accent:var(--lilas);--maq-doc:#20243d}
.maq-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--maq-ligne)}
.maq-tete b{font-weight:600;font-size:13px}
.maq-exemple{font-size:11px;color:var(--maq-texte2);border:1px solid var(--maq-ligne);border-radius:999px;padding:3px 8px}
.maq-corps{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;padding:14px}
.maq-doc{position:relative;background:var(--maq-doc);border-radius:10px;padding:12px;min-height:170px;overflow:hidden}
.maq-doc-type{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--maq-texte2);margin-bottom:8px}
.maq-doc-nom{font-weight:600;font-size:12px;margin-bottom:10px}
.maq-traits{display:grid;gap:7px}
.maq-traits i{display:block;height:6px;border-radius:3px;background:var(--maq-ligne)}
.maq-traits i:nth-child(2){width:78%}.maq-traits i:nth-child(3){width:60%}.maq-traits i:nth-child(5){width:84%}.maq-traits i:nth-child(6){width:46%}
.maq-faisceau{position:absolute;left:0;right:0;height:38px;top:-40px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--lumiere-2) 30%,transparent) 70%,var(--lumiere-2) 96%,transparent);opacity:.9;pointer-events:none}
.maquette.lit .maq-faisceau{animation:faisceau 1.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes faisceau{from{top:-40px}to{top:100%}}
.maq-champs{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-content:start;min-width:0}
.maq-champs li{min-width:0;display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;background:color-mix(in srgb,var(--maq-doc) 70%,transparent);border:1px solid var(--maq-ligne)}
.maq-champs span{color:var(--maq-texte2);flex:none}
.maq-champs b{flex:1 1 auto;font-weight:600;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .3s}
.maq-champs b:empty::after{content:"";display:inline-block;width:46px;height:8px;border-radius:4px;background:var(--maq-ligne);vertical-align:middle}
.maq-pied{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-top:1px solid var(--maq-ligne);font-size:12px}
.maq-statut{display:inline-flex;align-items:center;gap:7px;color:var(--maq-texte2)}
.maq-statut::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lumiere-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--lumiere-2) 25%,transparent)}
.maquette.pret .maq-statut{color:var(--maq-accent)}
.maquette.pret .maq-statut::before{background:#3f9b6b;box-shadow:0 0 0 3px rgba(63,155,107,.22)}
.maq-compteur{color:var(--maq-texte2);font-variant-numeric:tabular-nums}
@media (max-width:420px){.maq-corps{grid-template-columns:minmax(0,1fr)}.maq-doc{min-height:120px}}