/* MARZEL — la feuille commune du site : en-tête, pied, formulaire et panneau du diagnostic, pages légales, 404, et
   l'ancienne page d'accueil (direction C « Le chantier », D-055 ; maquette : 04-marketing/refonte-site-2026-10/direction-c).
   Direction artistique et typographie des slides du 2026-10-15 (premier carrousel Instagram ; source exacte :
   09-outils/hyperframes/film-reseaux/publication-01.html) : fond clair à lueurs douces, cartes blanches à grands rayons,
   un seul bleu (MARZEL et l'action), titres en IBM Plex Sans 700 serré, accents en Newsreader italique, petites mesures
   en IBM Plex Mono. La nouvelle page (/maquette/page/) ajoute maquette.css ; le mode prospection a sa feuille,
   prospection.css. Les dessins de l'ancienne page d'accueil sont des SVG isométriques en ligne dans index.html ; leurs
   mouvements sont en bas de cette feuille. */

/* Polices de la marque, hébergées sur le site (sous-ensemble latin de Google Fonts, licence OFL), 114 Ko en tout :
   les fichiers mêmes des slides. IBM Plex Sans : titres et texte ; variable en graisse de 100 à 700 (le 700 des titres
   est dessiné, jamais fabriqué : contrôle du 2026-10-15, la chasse croît de 100 à 700 puis ne bouge plus).
   Newsreader italique, en 400 seulement : les accents (seconde moitié des titres, signature). IBM Plex Mono, en 500
   seulement : petites mesures et étiquettes. (Archivo et Instrument Sans, essayés le 2026-10-15, sont rangés dans
   _archives/typo-essai-2026-10-15/.) */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/newsreader-italique-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }

:root {
  --fond: #F5F7FB;
  --blanc: #FFFFFF;
  --encre: #0B1A3E;
  --texte-2: #3D4A66;      /* le texte courant des slides : 9,4:1 sur blanc, 8,2:1 sur le fond */
  --gris: #6F7D95;         /* pastille de légende seulement, jamais du texte */
  --bleu: #1660FF;         /* les aplats : boutons, tuiles d'icônes, cases, coches */
  --bleu-texte: #0D4FE0;   /* le bleu des mots (6,5:1 sur blanc) */
  --bleu-fonce: #0A3FD6;
  --bleu-pale: #E6EEFF;
  --argent: #C9D2DF;
  --filet: #E1E7F0;
  --bord: #848FA5; /* bord des champs : 3:1 sur blanc */
  /* Les trois polices */
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --accent: "Newsreader", Georgia, "Times New Roman", serif; /* toujours en italique 400 */
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* Les titres, comme les slides : Plex Sans 700, serrés, lignes resserrées */
  --titre-police: var(--sans);
  --titre-graisse: 700;
  --titre-interlettrage: -0.045em;
  --titre-interligne: 1.02;
  /* Titres moyens (étapes, arrêts, réponses, panneau) : la même graisse, un peu moins serrés */
  --moyen-interlettrage: -0.03em;
  --moyen-interligne: 1.1;
  /* Grands chiffres (« 5 h 20 min », « 670 h », le téléphone) : 700 serré, l'unité plus petite */
  --chiffre-interlettrage: -0.045em;
  /* L'accent : la seconde moitié d'un titre (« Et on le supprime. » sur la slide 1), la signature */
  --accent-couleur: var(--bleu-texte);
  --accent-interlettrage: -0.01em;
  /* Tailles qui suivent l'écran comme les titres (tour 1 du jury, 2026-10-15) : sur les slides, titre / texte = 3,2 et
     titre / mesure en Plex Mono = 4,2. Le texte courant passe de 16 px (téléphone) à 18 px vers 1 440 et 20 px à 2 240 ;
     les petites mesures en Plex Mono de 14 à 17 px. Sous 600 px, rien ne change. */
  --texte-taille: clamp(1rem, 0.85rem + 0.3vw, 1.25rem);
  --mono-taille: clamp(0.875rem, 0.65rem + 0.3vw, 1.0625rem);
  /* Le formulaire, les boutons et le lien de l'en-tête suivent eux aussi l'écran au-delà de 1 440 px (tour 2 du jury) :
     même échelle que la carte des étapes posée à côté. En dessous, presque rien ne change. */
  --btn-taille: clamp(1.0625rem, 0.95rem + 0.15vw, 1.1875rem);
  --form-taille: max(0.9375rem, calc(var(--texte-taille) - 0.125rem)); /* libellés, « Ou appelez Valentin » */
  --champ-h: clamp(52px, 2.4rem + 0.9vw, 60px);
  --champ-texte: var(--texte-taille);
  --hdr-lien-taille: clamp(0.9375rem, 0.8rem + 0.15vw, 1.0625rem);
  /* Les cartes des slides (filet clair, rayon de 48 px et ombre longue sur une image de 1 080 px), ramenées à l'écran :
     rayon de 22 px sur téléphone à 32 px sur grand écran, ombre qui s'allonge avec l'écran (celle des slides à 2 240 px) */
  --carte-filet: rgba(225, 231, 240, 0.9);
  --carte-rayon: clamp(22px, 2vw, 32px);
  --carte-ombre: 0 clamp(14px, 1.35vw, 30px) clamp(34px, 3.1vw, 70px) rgba(11, 26, 62, 0.12), 0 2px 8px rgba(11, 26, 62, 0.06);
  --tuile-ombre: 0 clamp(8px, 0.62vw, 14px) clamp(18px, 1.34vw, 30px) rgba(22, 96, 255, 0.32); /* celle des slides (0 14px 30px) à 2 240 px */
  --sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --ombre-bouton: 0 1px 0 rgba(11, 26, 62, 0.08), 0 10px 28px -12px rgba(22, 96, 255, 0.7);
  color-scheme: light;
}
/* L'ancienne page d'accueil (remplacée par la nouvelle) garde ses accents à l'encre (sa boucle de crayon est bleue) et
   ses tailles de formulaire, de boutons et d'en-tête */
.etroit { --accent-couleur: var(--encre); --btn-taille: 1.0625rem; --form-taille: 0.9375rem; --champ-h: 52px; --champ-texte: 1rem; --hdr-lien-taille: 0.9375rem; }

/* ================= Bases ================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; } /* jamais de gras ni d'italique fabriqués par le navigateur */
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 1rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* Pages courtes (404, mentions) : le pied reste en bas de l'écran, sans bande vide dessous */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
/* Les lueurs des slides : blanche en haut à gauche, bleue à 7 % en haut à droite, bleue à 12 % en bas à droite.
   Fixées à l'écran, derrière tout (rien ne se redessine au défilement), sans effet sur la lecture ni sur les clics. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle max(57vw, 46vh) at 7% 3%, #FFFFFF, rgba(255, 255, 255, 0)),
    radial-gradient(circle max(37vw, 30vh) at 90% 10%, rgba(22, 96, 255, 0.07), rgba(22, 96, 255, 0)),
    radial-gradient(circle max(51vw, 41vh) at 84% 100%, rgba(22, 96, 255, 0.12), rgba(22, 96, 255, 0));
}
body > main { flex: 1 0 auto; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
h2[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--bleu); color: var(--blanc); }
a[href^="tel:"] { white-space: nowrap; }

/* La colonne du contenu (2026-10-15) : sur grand écran, environ 80 % de la largeur, des marges qui grandissent avec
   l'écran (1 300 px de contenu à 1 440 px de large, 1 480 à 1 728, 1 800 à 2 240, 2 000 au plus). Jusqu'à 1 280 px,
   rien ne change : 1 200 px au plus, et toujours 24 px de marge de chaque côté (20 px sur téléphone, plus bas). */
.wrap { width: min(100% - 3rem, max(1200px, min(62.5% + 25rem, 2000px))); margin-inline: auto; }
/* L'ancienne page d'accueil (site C, <body class="etroit">) garde sa colonne de 1 200 px : son dessin d'accroche, ses cartes
   et son formulaire sont réglés pour elle ; elle sera remplacée par la nouvelle page. */
@media (min-width: 600px) { .etroit .wrap { width: min(1200px, calc(100% - 3rem)); } }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--encre); color: var(--blanc); font-weight: 600; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lnk { text-decoration: none; }
.lnk:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Boutons : une pilule bleue, toujours la même action */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 58px;
  padding: 0 1.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--bleu);
  color: var(--blanc);
  font: 600 var(--btn-taille)/1.2 var(--sans);
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ombre-bouton);
  transition: background-color 0.25s ease, transform 0.25s var(--sortie), box-shadow 0.25s ease;
}
.btn:active { background: var(--bleu-fonce); transform: scale(0.98); transition-duration: 0.08s; }
@media (hover: hover) {
  .btn:hover { background: var(--bleu-fonce); transform: translateY(-1px); }
  .hdr-appel:hover, .barre-appel:hover { border-color: var(--encre); }
}
.btn[disabled] { opacity: 0.55; cursor: progress; transform: none; }
.btn-sm { min-height: 48px; padding: 0 1.25rem; font-size: 0.9375rem; }
.fleche { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Typographie commune. Le surtitre : une ligne en Plex Mono, comme « MARZEL · Saint-Nazaire » sur les slides. */
.surtitre { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; font: 500 var(--mono-taille)/1.45 var(--mono); color: var(--texte-2); }
.surtitre svg { flex: none; width: 12px; height: 12px; }
.titre-2 { font: var(--titre-graisse) clamp(2.125rem, 1rem + 2.8vw, 4.25rem)/var(--titre-interligne) var(--titre-police); letter-spacing: var(--titre-interlettrage); text-wrap: balance; }
/* Les titres de section restent nettement sous l'accroche (73 px à 1 440, 88 à 2 240) : 56 px à 1 440, 68 px au plus.
   L'ancienne page d'accueil garde ses tailles d'avant les slides (son accroche plafonne à 72 px). */
@media (min-width: 900px) { .etroit .titre-2 { font-size: clamp(2.25rem, 4.2vw, 4rem); } }
/* L'accent : Newsreader italique, en bleu des mots (« Et on le supprime. »), un cran plus petit que le constat comme sur
   la slide 1 (96 px pour 106) : la réponse suit, plus légère. Il ne se coupe jamais d'avec lui-même : il suit le constat
   sur sa ligne s'il y tient, sinon il passe entier à la ligne, comme « Et on le supprime. » (aussi sur téléphone). */
.titre-2 em, .une-titre em { font-family: var(--accent); font-style: italic; font-weight: 400; font-size: 0.92em; letter-spacing: var(--accent-interlettrage); color: var(--accent-couleur); }
.titre-2 em { display: inline-block; }
.bloc { padding-block: 7.5rem; }
.blanc { background: var(--blanc); }
.centre { display: flex; justify-content: center; margin-top: 3.5rem; }

/* ================= En-tête : le logo, deux liens, le bouton (le téléphone seul sur téléphone) ================= */
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
.hdr-logo { display: inline-flex; align-items: center; min-height: 44px; }
.hdr-logo img { width: auto; height: 34px; }
.hdr-nav { display: flex; align-items: center; gap: 0.5rem 1.75rem; }
.hdr-lien { padding-block: 0.9rem; font: 600 var(--hdr-lien-taille)/1 var(--sans); } /* Plex Sans en 400, 600 ou 700, comme les slides : le 500 reste au Plex Mono */
.hdr-appel { display: none; place-items: center; width: 44px; height: 44px; border: 1px solid var(--argent); border-radius: 999px; background: var(--blanc); }
.hdr-appel svg, .barre-appel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

/* ================= 1. L'accroche ================= */
.une { padding-block: 3.5rem 6rem; }
.une-grille { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; }
/* Sur ordinateur, l'accroche occupe l'écran sous l'en-tête : le titre suivant ne dépasse plus coupé en bas de l'écran */
@media (min-width: 900px) and (min-height: 680px) {
  .une { display: flex; align-items: center; min-height: calc(100svh - 5.5rem); padding-block: 1.5rem 4.5rem; }
}
.une-texte { flex: 1.3 1 480px; min-width: 0; }
/* Bases réduites (maquette : 560 et 440 px) pour garder deux colonnes jusqu'à 960 px ; empilé, le dessin ne dépasse pas 34 rem */
.une-scene { flex: 1 1 380px; min-width: 0; max-width: 34rem; margin-inline: auto; }
.une-scene svg, .comment-scene svg { width: 100%; height: auto; }
/* L'accroche, comme la slide 1 : le constat en Plex 700 serré, à l'encre ; la réponse en Newsreader italique */
.une-titre { font: var(--titre-graisse) clamp(2.5rem, 4.6vw, 4.5rem)/var(--titre-interligne) var(--titre-police); letter-spacing: var(--titre-interlettrage); text-wrap: balance; }
.une-titre > span, .une-titre > em { display: block; }
.une-titre > em { margin-top: 0.06em; line-height: 1.04; }
/* Le trait de crayon qui entoure « perdez » (ancienne page d'accueil seulement). Le SVG couvre exactement le mot
   (viewBox 0 0 100 100 = la boîte du mot) : un ovale incliné d'un trait qui dépasse son départ, qui garde tout le mot
   dedans et le point final dehors. L'écart de 0,1 em avant le point laisse passer le trait entre le mot et le point. */
.cercle { position: relative; display: inline-block; margin-right: 0.1em; white-space: nowrap; }
.cercle svg { position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: 100%; overflow: visible; pointer-events: none; } /* max-width : sinon la règle des svg (100 %) coupe la boucle */
/* Au repos, trait plein (pas de tirets) : avec vector-effect: non-scaling-stroke, Chrome compte les tirets à l'échelle
   de l'écran, et un tiret de 100 ne couvrait plus toute la boucle dès que le SVG dépassait sa viewBox (boucle ouverte).
   Les tirets ne servent qu'au dessin animé (loop-draw, plus bas). */
.cercle path { fill: none; stroke: var(--bleu); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: none; stroke-dashoffset: 0; }
.une-sous { max-width: 34rem; margin-top: 1.75rem; font: 400 1.25rem/1.5 var(--sans); letter-spacing: -0.01em; color: var(--texte-2); }
.une-action { margin-top: 2.25rem; }
.rassure { margin-top: 0.875rem; font: 400 1rem/1.45 var(--sans); color: var(--texte-2); } /* la phrase qui rassure : pas plus petite que le texte */

/* ================= 2. Le problème : trois cartes dessinées ================= */
.probleme .titre-2 { max-width: 16em; }
.cartes { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 4rem; }
.carte { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; padding: 1.75rem; border: 1px solid var(--filet); border-radius: 24px; background: var(--blanc); }
.carte-scene { display: flex; align-items: center; justify-content: center; height: 205px; }
.carte-scene svg { width: 100%; height: 100%; }
.carte p { font: 500 1.25rem/1.4 var(--sans); text-wrap: pretty; }

/* ================= 3. Comment ça marche : les trois étapes et la séquence ================= */
.comment .titre-2 { max-width: 15em; }
.comment .titre-2 em { display: block; } /* « Rien à changer de votre côté. » forme sa propre ligne : pas de « à » seul en fin de ligne */
.comment-grille { display: flex; flex-wrap: wrap; align-items: center; gap: 3rem; margin-top: 4rem; }
.etapes { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2.25rem; }
.etape-num { font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--bleu-texte); }
.etape h3 { margin-top: 0.5rem; font: var(--titre-graisse) 2rem/var(--moyen-interligne) var(--titre-police); letter-spacing: var(--moyen-interlettrage); text-wrap: balance; }
.etape-texte { margin-top: 0.5rem; font: 400 1.0625rem/1.5 var(--sans); color: var(--texte-2); text-wrap: pretty; }
.etape-barre { height: 3px; margin-top: 1rem; overflow: hidden; border-radius: 3px; background: var(--filet); }
.etape-barre span { display: block; height: 100%; background: var(--bleu); transform-origin: 0 50%; transform: scaleX(0); }
.comment-scene { flex: 2 1 560px; min-width: 0; padding: 1.5rem; border-radius: 28px; background: var(--fond); }
/* Le texte des feuilles « Bons » et « Heures » dans les dessins */
.scene text { font: 500 15px var(--mono); }

/* ================= 4. Ce que vous gagnez : un seul chiffre, signalé comme exemple ================= */
.gain { text-align: center; }
.gain-chiffre { margin-top: 1.5rem; font: var(--titre-graisse) clamp(6rem, 15vw, 14rem)/0.95 var(--titre-police); letter-spacing: -0.05em; }
.gain-chiffre em { font-style: normal; color: var(--bleu); }
.gain-unite { margin-top: 0.5rem; font: 600 2.5rem/1.2 var(--sans); letter-spacing: -0.02em; }
.gain-regle { width: min(560px, 100%); height: 24px; margin: 1.75rem auto 0; stroke: var(--encre); }
.gain-exemple { margin-top: 1rem; font: 500 0.9375rem/1.45 var(--mono); color: var(--texte-2); }
.gain-exemple span { display: inline-block; } /* sur téléphone, la phrase se coupe après « par jour, », jamais au milieu */

/* ================= 5. Confiance et réservation ================= */
.diag-grille { display: flex; flex-wrap: wrap; align-items: center; gap: 4rem; }
.diag-texte { flex: 1 1 460px; min-width: 0; }
.garanties { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.5rem; }
.garanties li { display: flex; align-items: center; gap: 1rem; min-height: 44px; font: 500 1.25rem/1.35 var(--sans); }
.garanties svg { flex: none; width: 28px; height: 28px; }
.valentin { display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--filet); }
.valentin img { flex: none; width: 42px; height: auto; }
.valentin p { font: 400 1.0625rem/1.5 var(--sans); color: var(--texte-2); }
.valentin strong { font-weight: 600; color: var(--encre); }

/* Le formulaire : une carte blanche des slides dans la section, ou le corps du panneau */
.reserver { flex: 1 1 420px; min-width: 0; padding: clamp(1.25rem, 2.4vw, 2.5rem); border: 1px solid var(--carte-filet); border-radius: var(--carte-rayon); background: var(--blanc); box-shadow: var(--carte-ombre); }
.formulaire-diag { display: flex; flex-direction: column; gap: 1.125rem; }
.champ { display: flex; flex-direction: column; gap: 0.5rem; }
.champ label { font: 600 var(--form-taille)/1.3 var(--sans); }
.champ input { width: 100%; height: var(--champ-h); padding: 0 1rem; border: 1px solid var(--bord); border-radius: 14px; background: var(--blanc); font: 400 var(--champ-texte)/1 var(--sans); color: var(--encre); transition: border-color 0.15s; }
.champ input:hover { border-color: var(--texte-2); }
.champ input:focus { border-color: var(--bleu); }
.champ input[aria-invalid="true"] { border: 2px solid var(--encre); }
.champ-erreur { font: 600 0.9375rem/1.4 var(--sans); color: var(--encre); }
.formulaire-diag .btn { width: 100%; margin-top: 0.375rem; }
.formulaire-diag [data-anti-robots]:empty { display: none; }
.reserver-appel { text-align: center; font: 400 var(--form-taille)/1.45 var(--sans); color: var(--texte-2); }
.reserver-appel a { font-weight: 600; color: var(--encre); }
.reserver-pied { text-align: center; font: 400 max(0.875rem, calc(var(--form-taille) - 0.125rem))/1.45 var(--sans); color: var(--texte-2); text-wrap: balance; } /* 14 px au moins, 16 px à 2 240 */
.reserver-pied a { color: var(--encre); }
/* Vide, la zone d'état reste dans l'arbre d'accessibilité (sinon ses messages ne sont pas annoncés) */
.formulaire-etat { font-size: 0.9375rem; }
.formulaire-etat:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.formulaire-etat.erreur { font-weight: 600; }
.formulaire-etat a { color: var(--encre); }
.merci { outline: none; }
.merci-titre { font: var(--titre-graisse) clamp(1.9rem, 3vw, 2.5rem)/1.05 var(--titre-police); letter-spacing: var(--moyen-interlettrage); }
.merci p:not(.merci-titre) { margin-top: 0.75rem; font-size: 1.0625rem; color: var(--texte-2); }
.merci strong, .merci a { color: var(--encre); }
.sans-script { font-size: 1.0625rem; color: var(--texte-2); }
.sans-script a { font-weight: 600; color: var(--encre); }
/* Tant que diagnostic.js n'a pas pris l'envoi en charge, le formulaire reste masqué : la phrase de secours donne le téléphone */
html:not(.form-pret) .formulaire-diag { display: none; }
html.form-pret .sans-script { display: none; }

/* Le panneau : le même formulaire, ouvert là où se trouve le visiteur. Une carte des slides, posée sur un voile. */
.panneau { width: min(520px, calc(100vw - 32px)); max-height: calc(100svh - 48px); margin: auto; padding: 0; border: 0; border-radius: var(--carte-rayon); background: var(--blanc); color: var(--encre); box-shadow: 0 30px 80px rgba(7, 18, 51, 0.28); overflow: auto; overscroll-behavior: contain; }
.panneau::backdrop { background: rgba(7, 18, 51, 0.55); }
.panneau[open] { animation: panneau-entre 0.32s var(--sortie); }
.panneau-tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.625rem 1.625rem 1.125rem; border-bottom: 1px solid var(--filet); background: var(--blanc); }
.panneau-titre { font: var(--titre-graisse) 1.75rem/1.08 var(--titre-police); letter-spacing: var(--moyen-interlettrage); text-wrap: balance; }
.panneau-titre:focus { outline: none; }
.panneau-sous { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--texte-2); }
.panneau-fermer { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -6px -8px 0 0; border: 1px solid var(--argent); border-radius: 999px; background: var(--blanc); font: 400 1.75rem/1 var(--sans); cursor: pointer; }
.panneau-fermer:hover { border-color: var(--encre); }
.panneau-corps { padding: 1.375rem 1.625rem 1.75rem; }
html:has(.panneau[open]) { overflow: hidden; }
@keyframes panneau-entre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes feuille-monte { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* La barre d'action sur téléphone : visible une fois l'accroche passée (diagnostic.js), cachée au-delà de 760 px */
.barre-action { display: none; }

/* ================= 6. Questions fréquentes (details / summary, sans JavaScript) : une liste à filets ================= */
.questions .wrap { max-width: 56rem; }
.questions .titre-2 { margin-bottom: 2.5rem; }
.questions-liste { border-top: 1px solid var(--filet); }
.question { border-bottom: 1px solid var(--filet); }
.question summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.375rem; cursor: pointer; list-style: none;
  font: 600 1.25rem/1.35 var(--sans); letter-spacing: -0.01em; color: var(--encre);
}
.question summary::-webkit-details-marker { display: none; }
/* Pastille « + » (repliée) ou « − » (ouverte), dessinée en dégradés : aucune image ni police d'icônes */
.question summary::after {
  content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background:
    linear-gradient(var(--bleu), var(--bleu)) center / 0.75rem 2px no-repeat,
    linear-gradient(var(--bleu), var(--bleu)) center / 2px 0.75rem no-repeat,
    var(--bleu-pale);
}
.question[open] summary::after {
  background: linear-gradient(var(--bleu), var(--bleu)) center / 0.75rem 2px no-repeat, var(--bleu-pale);
}
.question summary:hover { color: var(--bleu-texte); }
.question summary:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; border-radius: 6px; }
.question p { max-width: 34rem; padding-bottom: 1.5rem; font: 400 1.125rem/1.6 var(--sans); color: var(--texte-2); } /* 70 signes par ligne au plus */
@media (max-width: 599px) {
  .questions .titre-2 { margin-bottom: 1.75rem; }
  .question summary { padding-block: 1.125rem; font-size: 1.125rem; }
  .question p { font-size: 1.0625rem; }
}

/* ================= Pied de page : comme la slide 5, le logo et la signature sur un filet ================= */
.ftr { color: var(--encre); }
.ftr-in { padding-block: 0 clamp(2rem, 4vw, 3rem); }
.ftr-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--filet); }
/* Le logo du bas aux proportions de la slide 5 (marzel-logo-pied.svg : symbole de 56 × 54, mot de 236 × 41, écart de 26) :
   les lettres pèsent autant que la signature (24 px à 1 440, 37 px à 2 240) */
.ftr-logo { width: auto; height: clamp(34px, 2.4vw, 54px); }
.ftr-signature { font: italic 400 clamp(1.375rem, 1rem + 0.9vw, 2rem)/1.2 var(--accent); letter-spacing: var(--accent-interlettrage); }
.ftr-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 2rem; margin-top: 1.25rem; font: 400 0.875rem/1.45 var(--sans); color: var(--texte-2); }
.ftr-contact { display: flex; flex-wrap: wrap; gap: 0 1.75rem; font-weight: 600; color: var(--encre); }
.ftr-bas a { display: inline-block; padding-block: 0.75rem; } /* zone de clic de 44 px */

/* ================= Pages de texte : mentions légales, confidentialité, 404 ================= */
.texte { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); }
.texte .wrap > * { max-width: 46rem; }
.texte .wrap > p, .texte .wrap > ul { max-width: 34rem; } /* 70 signes par ligne au plus */
.texte .surtitre { margin-bottom: 0.75rem; font-size: var(--mono-taille); color: var(--texte-2); } /* sinon « .texte p » lui donne la taille du texte */
.texte h1 { margin-bottom: 2rem; font: var(--titre-graisse) clamp(2.25rem, 1rem + 3.4vw, 4.25rem)/var(--titre-interligne) var(--titre-police); letter-spacing: var(--titre-interlettrage); text-wrap: balance; }
.texte h2 { margin: 2.5rem 0 0.625rem; font: var(--titre-graisse) 1.5rem/1.15 var(--titre-police); letter-spacing: var(--moyen-interlettrage); text-wrap: balance; }
.texte p, .texte li { font-size: 1.0625rem; color: var(--texte-2); }
.texte p + p { margin-top: 0.625rem; }
.texte ul { margin-top: 0.5rem; padding-left: 1.2em; list-style: disc; }
.texte li + li { margin-top: 0.25rem; }
.texte a:not(.btn) { color: var(--encre); text-underline-offset: 3px; }
.action-404 { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.lien-fort { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 5px; }

/* ================= Tailles d'écran ================= */

/* Tablette : l'en-tête garde le téléphone et le bouton */
/* Colonnes empilées (sous 980 px) : le dessin d'abord, les trois étapes juste dessous, en ligne,
   pour qu'on voie l'étape s'allumer en même temps que le dessin (sinon les étapes passent un écran avant lui) */
@media (max-width: 979px) {
  .comment-grille { flex-direction: column; align-items: stretch; }
  .comment-scene { order: -1; flex: none; width: 100%; max-width: 46rem; margin-inline: auto; }
  .etapes { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; width: 100%; max-width: 46rem; margin-inline: auto; }
  .etape h3 { font-size: 1.5rem; }
  .etape-texte { font-size: 1rem; }
}

@media (max-width: 899px) {
  .hdr-comment { display: none; }
  .carte { flex-basis: 220px; }
}

/* Tablette (600 à 899 px) : les titres gardent leur présence, sinon ils tombent à la taille du téléphone */
@media (min-width: 600px) and (max-width: 899px) {
  .une-titre { font-size: clamp(2.75rem, 7vw, 3.75rem); }
  .titre-2 { font-size: clamp(2.25rem, 6vw, 3rem); }
}

/* Téléphone : le logo et le bouton d'appel en haut, la réservation dans la barre du bas */
@media (max-width: 759px) {
  .hdr-in { padding-block: 14px 0; }
  .hdr-logo img { height: 28px; }
  .hdr-lien, .hdr-cta { display: none; }
  .hdr-appel { display: inline-grid; }

  /* Opaque, avec un fondu du fond au-dessus (comme sous la maquette épinglée) : on ne voit plus le texte passer dessous */
  .barre-action { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--fond); box-shadow: 0 -14px 20px var(--fond); transform: translateY(110%); transition: transform 0.28s var(--sortie), visibility 0s linear 0.28s; }
  .barre-action.visible { transform: none; visibility: visible; transition: transform 0.28s var(--sortie), visibility 0s; }
  /* Cachée, la barre sort aussi de la tabulation (pour les navigateurs qui ignorent inert) */
  .barre-action:not(.visible) { visibility: hidden; }
  .barre-action .btn { flex: 1; min-height: 52px; padding-inline: 12px; font-size: 1rem; }
  .barre-appel { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1px solid var(--argent); border-radius: 999px; background: var(--blanc); color: var(--encre); }
  .barre-appel[hidden] { display: none; }
  html:not(.js) .barre-action { display: none; }
  /* Un champ qui reçoit le focus ne doit pas se cacher derrière la barre du bas */
  html.barre-visible { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  .panneau { width: 100vw; max-width: 100vw; max-height: 92svh; margin: auto 0 0; border-radius: 24px 24px 0 0; scroll-padding-bottom: 84px; }
  .panneau[open] { animation: feuille-monte 0.3s var(--sortie); }
  .panneau-tete { position: static; padding: 1rem 1rem 0.625rem; }
  .panneau-titre { font-size: 1.4rem; }
  .panneau-sous { margin-top: 0.25rem; font-size: 0.875rem; }
  .panneau-corps { padding: 1.125rem 1rem calc(1.375rem + env(safe-area-inset-bottom, 0px)); }
  .panneau-corps .formulaire-diag > .btn { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -16px 16px var(--blanc); }
}

/* Téléphone (maquette C-mobile, 390 × 844) */
@media (max-width: 599px) {
  .wrap { width: calc(100% - 2.5rem); }
  .bloc { padding-block: 4.5rem; }

  .une { padding-block: 18px 3rem; }
  .surtitre { align-items: flex-start; gap: 8px; margin-bottom: 14px; font-size: 0.8125rem; }
  .surtitre svg { width: 10px; height: 10px; margin-top: 4px; }
  .une-titre { font-size: clamp(2.375rem, 11vw, 3rem); text-wrap: wrap; }
  .une-titre em { text-wrap: balance; } /* la réponse en deux lignes égales, jamais un mot seul sur la sienne */
  .titre-2 { font-size: clamp(2rem, 8.8vw, 2.375rem); }
  .une-sous { margin-top: 14px; font-size: 1.0625rem; }
  .une-action { margin-top: 20px; }
  .une-action .btn, .centre .btn, .formulaire-diag .btn { width: 100%; padding-inline: 1rem; }
  .rassure { margin-top: 10px; font-size: 0.9375rem; } /* alignée à gauche, comme tout le reste */
  .une-grille { gap: 1.5rem; }
  .une-scene { margin-inline: -0.5rem; }

  .cartes { gap: 1rem; margin-top: 2.5rem; }
  .carte { padding: 1.25rem; border-radius: 20px; }
  .carte-scene { height: 170px; }
  .carte p { font-size: 1.125rem; }

  .comment-grille { gap: 1.75rem; margin-top: 2.5rem; }
  .etapes { grid-template-columns: 1fr; gap: 1.25rem; }
  .etape h3 { margin-top: 0.25rem; font-size: 1.5rem; }
  .etape-barre { margin-top: 0.75rem; }
  .etape-texte { font-size: 1rem; }
  .comment-scene { padding: 0.75rem; border-radius: 20px; }
  .centre { margin-top: 2.5rem; }

  .gain-unite { font-size: 2rem; }
  .gain-exemple { font-size: 0.8125rem; }

  .diag-grille { gap: 2.5rem; }
  .garanties li { font-size: 1.125rem; }

  .ftr-bas { flex-direction: column; align-items: flex-start; }
  .ftr-contact { flex-direction: column; gap: 0; }
}

@media (max-width: 380px) {
  .btn { padding-inline: 1.25rem; font-size: 1rem; }
  .btn .fleche { display: none; }
}

/* Écrans tactiles : zones de toucher agrandies sur les liens dans le texte, sans écarter les lignes */
@media (pointer: coarse) {
  .reserver-pied a, .reserver-appel a, .sans-script a { display: inline-block; padding-block: 13px; margin-block: -13px; } /* 44 px de haut */
}

/* ================= Mouvement =================
   Tout est en CSS (transform, opacity, stroke-dashoffset, color) sur les SVG en ligne : rien ne recalcule la mise en page.
   Une scène ([data-anime]) ne joue que visible : site.js lui pose la classe « joue » quand elle entre à l'écran
   et la retire quand elle en sort (les animations s'arrêtent, la batterie aussi).
   Sans JavaScript ou en mouvement réduit, aucune animation : chaque dessin montre son état final, lisible et fixe
   (dans « Comment ça marche » : le téléphone, le trait bleu jusqu'à l'ordinateur, la coche, plus de pile). */
.js [data-anime]:not(.joue), .js [data-anime]:not(.joue) * { animation-play-state: paused !important; }
html:not(.js) [data-anime] *, html.rm *, html.rm *::before, html.rm *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .etape-barre span { transform: none; }
}
/* Image fixe (sans JavaScript ou mouvement réduit) : les trois étapes sont faites, leurs barres sont pleines. */
html:not(.js) .etape-barre span, html.rm .etape-barre span { transform: none; }

/* L'accroche de l'ancienne page d'accueil : le crayon entoure « perdez », une fois. --trait (pathLength 100) : la plus
   grande longueur de la boucle à l'écran rapportée à sa viewBox, ×100 (« perdez » : 1,57 à 2 240 px) : le dessin finit
   avec l'animation, sans morceau qui apparaît d'un coup ; à la fin, trait plein. */
.loop-draw { --trait: 160; animation: loop-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.5s backwards; }
@keyframes loop-draw { from { stroke-dasharray: var(--trait) var(--trait); stroke-dashoffset: var(--trait); } to { stroke-dasharray: var(--trait) var(--trait); stroke-dashoffset: 0; } }

/* Séquences de la maquette (C-page.dc.html), reprises telles quelles :
   h-… l'accroche (8 s) : la grue, la camionnette et les feuilles entre le chantier et le bureau, l'horloge, le repère bleu ;
   p1-… p2-… p3-… les trois cartes du problème (6 s) ;
   f-… « Comment ça marche » (15 s) : les feuilles font l'aller-retour, puis le téléphone envoie tout au bureau par le trait bleu,
   la pile disparaît, l'horloge ralentit, la coche ; st… stn… sb… les trois étapes s'allument en même temps que le dessin. */
@keyframes h-trol{0%,8%{transform:translate(0,0)}46%,58%{transform:translate(60.6px,35px)}96%,100%{transform:translate(0,0)}}
.h-trol{animation:h-trol 8.0s cubic-bezier(.65,0,.35,1) infinite}
@keyframes h-van{0%{transform:translate(0,0);opacity:1;}7.5%{transform:translate(0,0);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1);}40%{transform:translate(77.9px,45px);opacity:1;}47.5%{transform:translate(77.9px,45px);opacity:1;}51.25%{transform:translate(77.9px,45px);opacity:0;}51.88%{transform:translate(0,0);opacity:0;}57.5%{transform:translate(0,0);opacity:1;}100%{transform:translate(0,0);opacity:1;}}
.h-van{animation:h-van 8.0s linear infinite}
@keyframes h-hm{to{transform:rotate(360deg)}}
@keyframes h-hh{from{transform:rotate(300deg)}to{transform:rotate(660deg)}}
.h-hm{transform-box:fill-box;transform-origin:50% 100%;animation:h-hm 4s linear infinite}
.h-hh{transform-box:fill-box;transform-origin:50% 100%;transform:rotate(300deg);animation:h-hh 48s linear infinite}
@keyframes h-lens{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.h-lens{transform-box:fill-box;transform-origin:50% 50%;animation:h-lens 3s cubic-bezier(.65,0,.35,1) infinite}
@keyframes h-lensr{to{transform:rotate(360deg)}}
.h-lensr{transform-box:fill-box;transform-origin:50% 50%;animation:h-lensr 5s linear infinite}
@keyframes h-c0{0%{opacity:0;transform:translate(0,0) rotate(0deg);}11.25%{opacity:0;transform:translate(0,0) rotate(0deg);}12.88%{opacity:1;transform:translate(19px,-16.3px) rotate(-5.6deg) scale(0.96);}14.5%{opacity:1;transform:translate(50.8px,-38.7px) rotate(-10.2deg) scale(0.93);}16.12%{opacity:1;transform:translate(92.3px,-58.8px) rotate(-13.6deg) scale(0.90);}17.75%{opacity:1;transform:translate(140.3px,-69px) rotate(-15.8deg) scale(0.86);}19.38%{opacity:1;transform:translate(191.4px,-64.8px) rotate(-17deg) scale(0.82);}21%{opacity:1;transform:translate(242.5px,-44.7px) rotate(-17deg) scale(0.79);}22.62%{opacity:1;transform:translate(290.5px,-11.7px) rotate(-16deg) scale(0.76);}24.25%{opacity:1;transform:translate(331.9px,28.1px) rotate(-13.8deg) scale(0.72);}25.88%{opacity:1;transform:translate(363.8px,65.7px) rotate(-10.4deg) scale(0.69);}27.5%{opacity:0;transform:translate(382.8px,91px) rotate(-6deg) scale(0.65);}100%{opacity:0;transform:translate(0,0) rotate(0deg);}}
.h-c0{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:h-c0 8.0s linear infinite}
@keyframes h-c1{0%{opacity:0;transform:translate(0,0) rotate(0deg);}37.5%{opacity:0;transform:translate(0,0) rotate(0deg);}39.12%{opacity:1;transform:translate(19px,-16.3px) rotate(4.9deg) scale(0.96);}40.75%{opacity:1;transform:translate(50.8px,-38.7px) rotate(8.9deg) scale(0.93);}42.38%{opacity:1;transform:translate(92.3px,-58.8px) rotate(11.9deg) scale(0.90);}44%{opacity:1;transform:translate(140.3px,-69px) rotate(13.9deg) scale(0.86);}45.62%{opacity:1;transform:translate(191.4px,-64.8px) rotate(15deg) scale(0.82);}47.25%{opacity:1;transform:translate(242.5px,-44.7px) rotate(15.1deg) scale(0.79);}48.88%{opacity:1;transform:translate(290.5px,-11.7px) rotate(14.3deg) scale(0.76);}50.5%{opacity:1;transform:translate(331.9px,28.1px) rotate(12.5deg) scale(0.72);}52.12%{opacity:1;transform:translate(363.8px,65.7px) rotate(9.7deg) scale(0.69);}53.75%{opacity:0;transform:translate(382.8px,91px) rotate(6deg) scale(0.65);}100%{opacity:0;transform:translate(0,0) rotate(0deg);}}
.h-c1{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:h-c1 8.0s linear infinite}
@keyframes h-c2{0%{opacity:0;transform:translate(0,0) rotate(0deg);}65%{opacity:0;transform:translate(0,0) rotate(0deg);}66.62%{opacity:1;transform:translate(19px,-16.3px) rotate(-5.6deg) scale(0.96);}68.25%{opacity:1;transform:translate(50.8px,-38.7px) rotate(-10.2deg) scale(0.93);}69.88%{opacity:1;transform:translate(92.3px,-58.8px) rotate(-13.6deg) scale(0.90);}71.5%{opacity:1;transform:translate(140.3px,-69px) rotate(-15.8deg) scale(0.86);}73.12%{opacity:1;transform:translate(191.4px,-64.8px) rotate(-17deg) scale(0.82);}74.75%{opacity:1;transform:translate(242.5px,-44.7px) rotate(-17deg) scale(0.79);}76.38%{opacity:1;transform:translate(290.5px,-11.7px) rotate(-16deg) scale(0.76);}78%{opacity:1;transform:translate(331.9px,28.1px) rotate(-13.8deg) scale(0.72);}79.62%{opacity:1;transform:translate(363.8px,65.7px) rotate(-10.4deg) scale(0.69);}81.25%{opacity:0;transform:translate(382.8px,91px) rotate(-6deg) scale(0.65);}100%{opacity:0;transform:translate(0,0) rotate(0deg);}}
.h-c2{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:h-c2 8.0s linear infinite}
@keyframes f-trol{0%,8%{transform:translate(0,0)}46%,58%{transform:translate(60.6px,35px)}96%,100%{transform:translate(0,0)}}
.f-trol{animation:f-trol 15.0s cubic-bezier(.65,0,.35,1) infinite}
@keyframes f-stack{0%{opacity:1;transform:translateY(0);}34.67%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.75,.2);}37.33%{opacity:0;transform:translateY(8px);}95.33%{opacity:0;transform:translateY(-10px);animation-timing-function:cubic-bezier(.22,1,.36,1);}98.67%{opacity:1;transform:translateY(0);}100%{opacity:1;transform:translateY(0);}}
.f-stack{opacity:0;animation:f-stack 15.0s linear infinite}
@keyframes f-phone{0%{opacity:0;transform:translateY(22px);}36%{opacity:0;transform:translateY(22px);animation-timing-function:cubic-bezier(.34,1.56,.64,1);}40%{opacity:1;transform:translateY(0);}94.67%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.75,.2);}97.33%{opacity:0;transform:translateY(14px);}100%{opacity:0;transform:translateY(22px);}}
.f-phone{animation:f-phone 15.0s linear infinite}
@keyframes f-van{0%{transform:translate(0,0);opacity:1;}2%{transform:translate(0,0);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1);}12.67%{transform:translate(77.9px,45px);opacity:1;}14.67%{transform:translate(77.9px,45px);opacity:1;}16%{transform:translate(77.9px,45px);opacity:0;}16.33%{transform:translate(0,0);opacity:0;}17.33%{transform:translate(0,0);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1);}28%{transform:translate(77.9px,45px);opacity:1;}30%{transform:translate(77.9px,45px);opacity:1;}31.33%{transform:translate(77.9px,45px);opacity:0;}31.67%{transform:translate(0,0);opacity:0;}34%{transform:translate(0,0);opacity:1;}100%{transform:translate(0,0);opacity:1;}}
.f-van{animation:f-van 15.0s linear infinite}
@keyframes f-hm{0%{transform:rotate(0deg);animation-timing-function:linear}66.67%{transform:rotate(1980deg);animation-timing-function:cubic-bezier(.1,.6,.2,1)}100%{transform:rotate(2160deg)}}
@keyframes f-hh{0%{transform:rotate(300deg);animation-timing-function:linear}66.67%{transform:rotate(630deg);animation-timing-function:cubic-bezier(.1,.6,.2,1)}100%{transform:rotate(660deg)}}
.f-hm{transform-box:fill-box;transform-origin:50% 100%;transform:rotate(40deg);animation:f-hm 15.0s infinite}
.f-hh{transform-box:fill-box;transform-origin:50% 100%;transform:rotate(300deg);animation:f-hh 15.0s infinite}
@keyframes f-scr{0%{opacity:0;}46%{opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1);}49.33%{opacity:1;}95.33%{opacity:1;}98%{opacity:0;}100%{opacity:0;}}
.f-scr{animation:f-scr 15.0s linear infinite}
@keyframes f-lens{0%{opacity:0;transform:scale(1.5);}15.33%{opacity:0;transform:scale(1.5);animation-timing-function:cubic-bezier(.22,1,.36,1);}20%{opacity:1;transform:scale(1);}42%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.55,0,.75,.2);}45.33%{opacity:0;transform:scale(.7);}100%{opacity:0;transform:scale(.7);}}
.f-lens{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:f-lens 15.0s linear infinite}
@keyframes f-lensr{to{transform:rotate(360deg)}}
.f-lensr{transform-box:fill-box;transform-origin:50% 50%;animation:f-lensr 5s linear infinite}
@keyframes f-pl0{0%{opacity:1;transform:translateY(0);}47%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.75,.2);}49.67%{opacity:0;transform:translateY(-16px);}96%{opacity:0;transform:translateY(-12px);animation-timing-function:cubic-bezier(.22,1,.36,1);}99.33%{opacity:1;transform:translateY(0);}100%{opacity:1;transform:translateY(0);}}
.f-pl0{opacity:0;animation:f-pl0 15.0s linear infinite}
@keyframes f-pl1{0%{opacity:0;transform:translateY(-18px);}8%{opacity:0;transform:translateY(-18px);animation-timing-function:cubic-bezier(.22,1,.36,1);}10%{opacity:1;transform:translateY(0);}46.13%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.75,.2);}48.8%{opacity:0;transform:translateY(-16px);}100%{opacity:0;transform:translateY(-18px);}}
.f-pl1{opacity:0;animation:f-pl1 15.0s linear infinite}
@keyframes f-pl2{0%{opacity:0;transform:translateY(-18px);}13.33%{opacity:0;transform:translateY(-18px);animation-timing-function:cubic-bezier(.22,1,.36,1);}15.33%{opacity:1;transform:translateY(0);}45.27%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.75,.2);}47.93%{opacity:0;transform:translateY(-16px);}100%{opacity:0;transform:translateY(-18px);}}
.f-pl2{opacity:0;animation:f-pl2 15.0s linear infinite}
@keyframes f-pl3{0%{opacity:0;transform:translateY(-18px);}18.67%{opacity:0;transform:translateY(-18px);animation-timing-function:cubic-bezier(.22,1,.36,1);}20.67%{opacity:1;transform:translateY(0);}44.4%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.75,.2);}47.07%{opacity:0;transform:translateY(-16px);}100%{opacity:0;transform:translateY(-18px);}}
.f-pl3{opacity:0;animation:f-pl3 15.0s linear infinite}
@keyframes f-pl4{0%{opacity:0;transform:translateY(-18px);}24%{opacity:0;transform:translateY(-18px);animation-timing-function:cubic-bezier(.22,1,.36,1);}26%{opacity:1;transform:translateY(0);}43.53%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.75,.2);}46.2%{opacity:0;transform:translateY(-16px);}100%{opacity:0;transform:translateY(-18px);}}
.f-pl4{opacity:0;animation:f-pl4 15.0s linear infinite}
@keyframes f-pl5{0%{opacity:0;transform:translateY(-18px);}29.33%{opacity:0;transform:translateY(-18px);animation-timing-function:cubic-bezier(.22,1,.36,1);}31.33%{opacity:1;transform:translateY(0);}42.67%{opacity:1;transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.75,.2);}45.33%{opacity:0;transform:translateY(-16px);}100%{opacity:0;transform:translateY(-18px);}}
.f-pl5{opacity:0;animation:f-pl5 15.0s linear infinite}
@keyframes f-c0{0%{opacity:0;transform:translate(0,0) rotate(0deg);}1.33%{opacity:0;transform:translate(0,0) rotate(0deg);}2%{opacity:1;transform:translate(19px,-16.3px) rotate(-5.6deg) scale(0.96);}2.67%{opacity:1;transform:translate(50.8px,-38.7px) rotate(-10.2deg) scale(0.93);}3.33%{opacity:1;transform:translate(92.3px,-58.8px) rotate(-13.6deg) scale(0.90);}4%{opacity:1;transform:translate(140.3px,-69px) rotate(-15.8deg) scale(0.86);}4.67%{opacity:1;transform:translate(191.4px,-64.8px) rotate(-17deg) scale(0.82);}5.33%{opacity:1;transform:translate(242.5px,-44.7px) rotate(-17deg) scale(0.79);}6%{opacity:1;transform:translate(290.5px,-11.7px) rotate(-16deg) scale(0.76);}6.67%{opacity:1;transform:translate(331.9px,28.1px) rotate(-13.8deg) scale(0.72);}7.33%{opacity:1;transform:translate(363.8px,65.7px) rotate(-10.4deg) scale(0.69);}8%{opacity:0;transform:translate(382.8px,91px) rotate(-6deg) scale(0.65);}100%{opacity:0;transform:translate(0,0) rotate(0deg);}}
.f-c0{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:f-c0 15.0s linear infinite}
@keyframes f-c1{0%{opacity:0;transform:translate(0,0) rotate(0deg);}6.67%{opacity:0;transform:translate(0,0) rotate(0deg);}7.33%{opacity:1;transform:translate(19px,-16.3px) rotate(4.9deg) scale(0.96);}8%{opacity:1;transform:translate(50.8px,-38.7px) rotate(8.9deg) scale(0.93);}8.67%{opacity:1;transform:translate(92.3px,-58.8px) rotate(11.9deg) scale(0.90);}9.33%{opacity:1;transform:translate(140.3px,-69px) rotate(13.9deg) scale(0.86);}10%{opacity:1;transform:translate(191.4px,-64.8px) rotate(15deg) scale(0.82);}10.67%{opacity:1;transform:translate(242.5px,-44.7px) rotate(15.1deg) scale(0.79);}11.33%{opacity:1;transform:translate(290.5px,-11.7px) rotate(14.3deg) scale(0.76);}12%{opacity:1;transform:translate(331.9px,28.1px) rotate(12.5deg) scale(0.72);}12.67%{opacity:1;transform:translate(363.8px,65.7px) rotate(9.7deg) scale(0.69);}13.33%{opacity:0;transform:translate(382.8px,91px) rotate(6deg) scale(0.65);}100%{opacity:0;transform:translate(0,0) rotate(0deg);}}
.f-c1{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:f-c1 15.0s linear infinite}
@keyframes f-c2{0%{opacity:0;transform:translate(0,0) rotate(0deg);}12%{opacity:0;transform:translate(0,0) rotate(0deg);}12.67%{opacity:1;transform:translate(19px,-16.3px) rotate(-5.6deg) scale(0.96);}13.33%{opacity:1;transform:translate(50.8px,-38.7px) rotate(-10.2deg) scale(0.93);}14%{opacity:1;transform:translate(92.3px,-58.8px) rotate(-13.6deg) scale(0.90);}14.67%{opacity:1;transform:translate(140.3px,-69px) rotate(-15.8deg) scale(0.86);}15.33%{opacity:1;transform:translate(191.4px,-64.8px) rotate(-17deg) scale(0.82);}16%{opacity:1;transform:translate(242.5px,-44.7px) rotate(-17deg) scale(0.79);}16.67%{opacity:1;transform:translate(290.5px,-11.7px) rotate(-16deg) scale(0.76);}17.33%{opacity:1;transform:translate(331.9px,28.1px) rotate(-13.8deg) scale(0.72);}18%{opacity:1;transform:translate(363.8px,65.7px) rotate(-10.4deg) scale(0.69);}18.67%{opacity:0;transform:translate(382.8px,91px) rotate(-6deg) scale(0.65);}100%{opacity:0;transform:translate(0,0) rotate(0deg);}}
.f-c2{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:f-c2 15.0s linear infinite}
@keyframes f-c3{0%{opacity:0;transform:translate(0,0) rotate(0deg);}17.33%{opacity:0;transform:translate(0,0) rotate(0deg);}18%{opacity:1;transform:translate(19px,-16.3px) rotate(4.9deg) scale(0.96);}18.67%{opacity:1;transform:translate(50.8px,-38.7px) rotate(8.9deg) scale(0.93);}19.33%{opacity:1;transform:translate(92.3px,-58.8px) rotate(11.9deg) scale(0.90);}20%{opacity:1;transform:translate(140.3px,-69px) rotate(13.9deg) scale(0.86);}20.67%{opacity:1;transform:translate(191.4px,-64.8px) rotate(15deg) scale(0.82);}21.33%{opacity:1;transform:translate(242.5px,-44.7px) rotate(15.1deg) scale(0.79);}22%{opacity:1;transform:translate(290.5px,-11.7px) rotate(14.3deg) scale(0.76);}22.67%{opacity:1;transform:translate(331.9px,28.1px) rotate(12.5deg) scale(0.72);}23.33%{opacity:1;transform:translate(363.8px,65.7px) rotate(9.7deg) scale(0.69);}24%{opacity:0;transform:translate(382.8px,91px) rotate(6deg) scale(0.65);}100%{opacity:0;transform:translate(0,0) rotate(0deg);}}
.f-c3{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:f-c3 15.0s linear infinite}
@keyframes f-c4{0%{opacity:0;transform:translate(0,0) rotate(0deg);}22.67%{opacity:0;transform:translate(0,0) rotate(0deg);}23.33%{opacity:1;transform:translate(19px,-16.3px) rotate(-5.6deg) scale(0.96);}24%{opacity:1;transform:translate(50.8px,-38.7px) rotate(-10.2deg) scale(0.93);}24.67%{opacity:1;transform:translate(92.3px,-58.8px) rotate(-13.6deg) scale(0.90);}25.33%{opacity:1;transform:translate(140.3px,-69px) rotate(-15.8deg) scale(0.86);}26%{opacity:1;transform:translate(191.4px,-64.8px) rotate(-17deg) scale(0.82);}26.67%{opacity:1;transform:translate(242.5px,-44.7px) rotate(-17deg) scale(0.79);}27.33%{opacity:1;transform:translate(290.5px,-11.7px) rotate(-16deg) scale(0.76);}28%{opacity:1;transform:translate(331.9px,28.1px) rotate(-13.8deg) scale(0.72);}28.67%{opacity:1;transform:translate(363.8px,65.7px) rotate(-10.4deg) scale(0.69);}29.33%{opacity:0;transform:translate(382.8px,91px) rotate(-6deg) scale(0.65);}100%{opacity:0;transform:translate(0,0) rotate(0deg);}}
.f-c4{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:f-c4 15.0s linear infinite}
@keyframes f-line{0%{stroke-dashoffset:1000;}39.33%{stroke-dashoffset:1000;animation-timing-function:cubic-bezier(.6,0,.2,1);}46%{stroke-dashoffset:0;}97.33%{stroke-dashoffset:0;}97.67%{stroke-dashoffset:1000;}100%{stroke-dashoffset:1000;}}
@keyframes f-lineg{0%{opacity:0;}39%{opacity:0;}39.67%{opacity:1;}94.67%{opacity:1;}97%{opacity:0;}100%{opacity:0;}}
.f-line{stroke-dashoffset:0;animation:f-line 15.0s linear infinite}
.f-lineg{animation:f-lineg 15.0s linear infinite}
@keyframes f-pks{0%{opacity:0;}46%{opacity:0;}47.33%{opacity:1;}93.33%{opacity:1;}95.33%{opacity:0;}100%{opacity:0;}}
.f-pks{opacity:0;animation:f-pks 15.0s linear infinite}
@keyframes f-pk{from{stroke-dashoffset:40}to{stroke-dashoffset:-1000}}
.f-pk{animation:f-pk 1.5s cubic-bezier(.45,0,.55,1) infinite}.f-pk2{animation-delay:-.75s}
@keyframes f-chk{0%{opacity:0;transform:scale(0);}70%{opacity:0;transform:scale(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1);}74%{opacity:1;transform:scale(1);}94.67%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.55,0,.75,.2);}97.33%{opacity:0;transform:scale(.6);}100%{opacity:0;transform:scale(0);}}
.f-chk{transform-box:fill-box;transform-origin:50% 50%;animation:f-chk 15.0s linear infinite}
@keyframes f-chkp{0%{stroke-dashoffset:100;}72.67%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(.22,1,.36,1);}76.67%{stroke-dashoffset:0;}100%{stroke-dashoffset:0;}}
.f-chkp{stroke-dashoffset:0;animation:f-chkp 15.0s linear infinite}
@keyframes f-ring{0%{opacity:0;transform:scale(1);}73.33%{opacity:0;transform:scale(1);}73.67%{opacity:.6;transform:scale(1);animation-timing-function:cubic-bezier(.22,1,.36,1);}82.67%{opacity:0;transform:scale(2);}100%{opacity:0;transform:scale(2);}}
.f-ring{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:f-ring 15.0s linear infinite}
@keyframes p1-hl{0%,22%{transform:translateY(0)}25%,47%{transform:translateY(9px)}50%,72%{transform:translateY(18px)}75%,94%{transform:translateY(27px)}97%,100%{transform:translateY(0)}}
.p1-hl{animation:p1-hl 6.0s cubic-bezier(.65,0,.35,1) infinite}
@keyframes p1-f0{0%{transform:scaleX(0);opacity:1;}4.17%{transform:scaleX(0);opacity:1;animation-timing-function:steps(6,end);}19.17%{transform:scaleX(1);opacity:1;}93.33%{transform:scaleX(1);opacity:1;}98.33%{transform:scaleX(1);opacity:0;}100%{transform:scaleX(0);opacity:1;}}
.p1-f0{transform-box:fill-box;transform-origin:0% 50%;animation:p1-f0 6.0s linear infinite}
@keyframes p1-f1{0%{transform:scaleX(0);opacity:1;}29.17%{transform:scaleX(0);opacity:1;animation-timing-function:steps(6,end);}44.17%{transform:scaleX(1);opacity:1;}93.33%{transform:scaleX(1);opacity:1;}98.33%{transform:scaleX(1);opacity:0;}100%{transform:scaleX(0);opacity:1;}}
.p1-f1{transform-box:fill-box;transform-origin:0% 50%;animation:p1-f1 6.0s linear infinite}
@keyframes p1-f2{0%{transform:scaleX(0);opacity:1;}54.17%{transform:scaleX(0);opacity:1;animation-timing-function:steps(6,end);}69.17%{transform:scaleX(1);opacity:1;}93.33%{transform:scaleX(1);opacity:1;}98.33%{transform:scaleX(1);opacity:0;}100%{transform:scaleX(0);opacity:1;}}
.p1-f2{transform-box:fill-box;transform-origin:0% 50%;animation:p1-f2 6.0s linear infinite}
@keyframes p1-f3{0%{transform:scaleX(0);opacity:1;}79.17%{transform:scaleX(0);opacity:1;animation-timing-function:steps(6,end);}94.17%{transform:scaleX(1);opacity:1;}93.33%{transform:scaleX(1);opacity:1;}98.33%{transform:scaleX(1);opacity:0;}100%{transform:scaleX(0);opacity:1;}}
.p1-f3{transform-box:fill-box;transform-origin:0% 50%;animation:p1-f3 6.0s linear infinite}
@keyframes p1-ar{to{stroke-dashoffset:-18}}.p1-ar{animation:p1-ar .9s linear infinite}
@keyframes p2-ic{0%{transform:translate(0px,0px);opacity:1;}21.67%{transform:translate(0px,0px);opacity:1;animation-timing-function:cubic-bezier(.3,0,.7,1);}27.5%{transform:translate(19.1px,-9px);opacity:1;animation-timing-function:cubic-bezier(.3,0,.7,1);}33.33%{transform:translate(38.1px,34px);opacity:1;}55%{transform:translate(38.1px,34px);opacity:1;animation-timing-function:cubic-bezier(.3,0,.7,1);}60.83%{transform:translate(57.2px,25px);opacity:1;animation-timing-function:cubic-bezier(.3,0,.7,1);}66.67%{transform:translate(76.2px,68px);opacity:1;}88.33%{transform:translate(76.2px,68px);opacity:1;}93.33%{transform:translate(76.2px,68px);opacity:0;}94.17%{transform:translate(0px,0px);opacity:0;}100%{transform:translate(0px,0px);opacity:1;}}
.p2-ic{animation:p2-ic 6.0s linear infinite}
@keyframes p2-spin{0%,8%{transform:rotate(0)}30%,100%{transform:rotate(360deg)}}
.p2-spin{transform-box:fill-box;transform-origin:50% 50%;animation:p2-spin 2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes p2-d0{0%{transform:translateY(-3px);animation-timing-function:cubic-bezier(.22,1,.36,1);}6.67%{transform:translateY(0);}96.67%{transform:translateY(0);}100%{transform:translateY(-3px);}}
.p2-d0{animation:p2-d0 6.0s linear infinite}
@keyframes p2-d1{0%{transform:translateY(0);}33.33%{transform:translateY(-3px);animation-timing-function:cubic-bezier(.22,1,.36,1);}40%{transform:translateY(0);}100%{transform:translateY(0);}}
.p2-d1{animation:p2-d1 6.0s linear infinite}
@keyframes p2-d2{0%{transform:translateY(0);}66.67%{transform:translateY(-3px);animation-timing-function:cubic-bezier(.22,1,.36,1);}73.33%{transform:translateY(0);}100%{transform:translateY(0);}}
.p2-d2{animation:p2-d2 6.0s linear infinite}
@keyframes p3-mg{0%{transform:translate(0px,0px) rotate(0deg);}20%{transform:translate(0px,0px) rotate(0deg);animation-timing-function:cubic-bezier(.65,0,.35,1);}33.33%{transform:translate(19.1px,21px) rotate(0deg);}50%{transform:translate(19.1px,21px) rotate(0deg);animation-timing-function:cubic-bezier(.65,0,.35,1);}63.33%{transform:translate(58.9px,36px) rotate(0deg);}73.33%{transform:translate(66.9px,30px) rotate(-6deg);}81.67%{transform:translate(58.9px,36px) rotate(0deg);animation-timing-function:cubic-bezier(.65,0,.35,1);}100%{transform:translate(0px,0px) rotate(0deg);}}
.p3-mg{animation:p3-mg 6.0s linear infinite}
@keyframes st0{0%{opacity:1;}32%{opacity:1;}34.67%{opacity:.78;}97.33%{opacity:.78;}100%{opacity:1;}}
.st0{animation:st0 15.0s linear infinite}
@keyframes stn0{0%{color:#1660FF;}32%{color:#1660FF;}34.67%{color:#3D4A66;}97.33%{color:#3D4A66;}100%{color:#1660FF;}}
.stn0{animation:stn0 15.0s linear infinite}
@keyframes sb0{0%{transform:scaleX(0);}0%{transform:scaleX(0);}33.33%{transform:scaleX(1);}33.4%{transform:scaleX(0);}100%{transform:scaleX(0);}}
.sb0{transform-origin:0 50%;transform:scaleX(0);animation:sb0 15.0s linear infinite}
@keyframes st1{0%{opacity:.78;}32%{opacity:.78;}34.67%{opacity:1;}65.33%{opacity:1;}68%{opacity:.78;}100%{opacity:.78;}}
.st1{animation:st1 15.0s linear infinite}
@keyframes stn1{0%{color:#3D4A66;}32%{color:#3D4A66;}34.67%{color:#1660FF;}65.33%{color:#1660FF;}68%{color:#3D4A66;}100%{color:#3D4A66;}}
.stn1{animation:stn1 15.0s linear infinite}
@keyframes sb1{0%{transform:scaleX(0);}33.33%{transform:scaleX(0);}66.67%{transform:scaleX(1);}66.73%{transform:scaleX(0);}100%{transform:scaleX(0);}}
.sb1{transform-origin:0 50%;transform:scaleX(0);animation:sb1 15.0s linear infinite}
@keyframes st2{0%{opacity:.78;}65.33%{opacity:.78;}68%{opacity:1;}96.67%{opacity:1;}99.33%{opacity:.78;}100%{opacity:.78;}}
.st2{animation:st2 15.0s linear infinite}
@keyframes stn2{0%{color:#3D4A66;}65.33%{color:#3D4A66;}68%{color:#1660FF;}96.67%{color:#1660FF;}99.33%{color:#3D4A66;}100%{color:#3D4A66;}}
.stn2{animation:stn2 15.0s linear infinite}
@keyframes sb2{0%{transform:scaleX(0);}66.67%{transform:scaleX(0);}97.33%{transform:scaleX(1);}97.4%{transform:scaleX(0);}100%{transform:scaleX(0);}}
.sb2{transform-origin:0 50%;transform:scaleX(0);animation:sb2 15.0s linear infinite}