/* DIAGNOSTIC FUSIONNÉ — DA de l'audit : encre, filets, lime, Geist / Geist Mono, angles droits, ombres dures. */
.fd { --fd-orange: #FF8A1F; --fd-rouge: #E0352B; --fd-nc: rgba(14, 14, 12, .86); --fd-nc-bord: #0E0E0C; --fd-gris: #9A9A92; --fd-gris-txt: #6E6E66; --fd-bord: 20px; container-type: inline-size; }
.fd-grille { display: flex; flex-direction: column; }
@media (min-width: 700px) { .fd { --fd-bord: 32px; } }
/* MOBILE : un seul fil, dans l'ordre de lecture ; les deux colonnes du desktop s'effacent */
.fd-gauche, .fd-droite { display: contents; }
.fd-tete { order: 1; }
.fd-carte { order: 2; }
.fd-compteur { order: 3; }
.fd-phrase { order: 4; }
.fd-reglage { order: 5; }
.fd-comparer { order: 6; }
.fd-presence { order: 7; }
.fd-cta { order: 8; }

.fd-titre { margin: 0; font-family: var(--mono); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.fd-quoi { margin: 4px 0 0; font-size: 14px; line-height: 1.35; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-quoi b { color: var(--ink); font-weight: 600; }
/* LA CARTE : pleine largeur, angles droits, pas de carte dans la carte */
/* pleine largeur du contenu (l'accordéon rogne tout débord), angles droits, sans cadre */
.fd-carte { position: relative; margin: 12px 0 0; aspect-ratio: 1 / .875; border-radius: 0; background: #F0F0EB; overflow: hidden; }
.fd-map { position: absolute; inset: 0; }
.fd-map .maplibregl-ctrl-attrib { font-size: 9px; opacity: .75; }

.fd-compteur { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.fd-lab { margin: 0; font-family: var(--mono); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.fd-n { display: flex; align-items: baseline; margin: 0; font-weight: 900; letter-spacing: -.045em; font-size: clamp(24px, 7.2cqi, 30px); line-height: 1; font-variant-numeric: tabular-nums; }
.fd-n[hidden], .fd-lab[hidden], .fd-zero[hidden] { display: none; }
.fd-sep { color: var(--fd-gris); font-weight: 500; margin: 0 .04em; }
.fd-zones { margin-left: .35em; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.fd-zero { margin: 0; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(18px, 5.4cqi, 22px); line-height: 1.1; white-space: nowrap; }
.fd-phrase { margin: 2px 0 0; min-height: 1.25em; font-weight: 700; font-size: clamp(16px, 4.6cqi, 19px); line-height: 1.25; transition: opacity .24s ease, transform .24s ease; }
.fd-phrase.sort { opacity: 0; transform: translateY(5px); }

/* LA RÉGLETTE : .sim-reg + .sim-bornes du simulateur ; bornes cliquables */
.fd-reglage { margin-top: -4px; }
/* iPhone : le glissement horizontal va à la réglette, le vertical fait défiler la page (aucun effet visuel) */
.fd-reglage input[type="range"] { touch-action: pan-y; }
.fd-bornes { display: flex; justify-content: space-between; }
.fd-bornes button { background: none; border: 0; padding: 4px 0; font: inherit; color: inherit; cursor: pointer; text-transform: uppercase; }
.fd-bornes button.actif { color: var(--ink); font-weight: 700; }
/* la légende vit SUR la carte, en haut à gauche : une ligne, discrète, toujours sous les yeux */
.fd-legende { position: absolute; left: 8px; top: 8px; z-index: 2; display: flex; gap: 10px; margin: 0; padding: 5px 8px; list-style: none; background: rgba(255,255,255,.92); border: 1px solid var(--line-fort); font-family: var(--mono); font-size: 10.5px; color: var(--ink); white-space: nowrap; pointer-events: none; }
.fd-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; border: 1.5px solid var(--ink); }
.fd-legende i.v { background: var(--marker); } .fd-legende i.o { background: var(--fd-orange); } .fd-legende i.r { background: var(--fd-rouge); }
/* NON CLASSÉ : le pire état, plus sombre que le rouge, contour pointillé, jamais gris (un gris se lit « moins grave ») */
.fd-legende i.a { position: relative; background: #0E0E0C; border-color: #0E0E0C; }
.fd-legende i.a::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 9px/1 var(--sans, system-ui); font-style: normal; }
.fd-legende li.nc { font-weight: 700; }

.fd-comparer { margin-top: 4px; }
/* COMPARER, compact : « Moi · Comparer » ; au clic, les concurrents dans la même ligne */
.fd-onglets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fd-onglets button { min-height: 28px; padding: 0 10px; border: 1px solid var(--ink); background: var(--card, #fff); color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; border-radius: 0; }
.fd-onglets button[aria-pressed="true"] { background: var(--ink); color: var(--marker); }
.fd-onglets .fd-ouvrir-c { border-color: transparent; background: none; text-decoration: underline; text-underline-offset: 3px; padding: 0 4px; }
.fd-onglets .fd-ouvrir-c[hidden], .fd-autres[hidden] { display: none; }
.fd-autres { display: contents; }

/* TA PRÉSENCE : une ligne éditoriale, trois colonnes, filets fins — pas de cartes */
.fd-presence { margin-top: 10px; }
.fd-pres { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--line-fort); border-bottom: 1px solid var(--line-fort); }
.fd-pres > div { padding: 9px 8px 9px 0; min-width: 0; }
.fd-pres > div + div { border-left: 1px solid var(--line); padding-left: 10px; }
.fd-pres dt { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.fd-pres dd { margin: 2px 0 0; font-weight: 800; font-size: 16px; letter-spacing: -.02em; line-height: 1.1; }
.fd-pres dd small { display: block; margin-top: 2px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .02em; color: var(--dim); line-height: 1.3; }
.fd-pres dd.ko { color: var(--brique, #B3300A); }
.fd-cta { margin-top: 4px; }
.fd-cta .jeu-suivant { margin-top: 10px; }

/* LES POINTS */
.fd-pt { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 12.5px; border: 1.5px solid var(--ink); box-shadow: 1.5px 1.5px 0 var(--ink); opacity: 0; transform: scale(.35); transition: transform 420ms cubic-bezier(.22,.8,.24,1), opacity 260ms ease, width 500ms ease, height 500ms ease, font-size 500ms ease, background-color 200ms ease; will-change: transform, opacity; }
.fd-pt.on { opacity: 1; transform: scale(1); }
.fd-pt.on.bascule { opacity: .15; transform: scale(.82); transition-duration: 140ms; }
.fd-pt.v { background: var(--marker); color: var(--ink); }
.fd-pt.o { background: var(--fd-orange); color: var(--ink); }
.fd-pt.r { background: var(--fd-rouge); color: #fff; }
/* NON CLASSÉ (> 20e ou absent) : noir quasi plein, croix blanche, fin liseré blanc, contour noir extérieur pour
   détacher le point de la carte. Fixe. À 86 % la carte reste lisible dessous même à 70 points sur 73. */
.fd-pt.a { background: var(--fd-nc); color: #fff; border: 1.5px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1.5px var(--fd-nc-bord); font-family: var(--sans, system-ui); font-weight: 700; font-size: 16px; }
/* un point pas encore relevé : rond gris vide, qui respire ; jamais de chiffre */
/* EN COURS DE RELEVÉ : gris clair, trait plein fin, sans chiffre, qui respire. Rien de commun avec le non classé
   (sombre, pointillé, « × » fixe) : un point ne devient non classé qu'après la réponse réelle. */
.fd-pt.fd-vide { background: #F2F2EE; color: transparent; border: 1.5px solid #B9B9B1; box-shadow: none; }
@keyframes fd-respire { from { opacity: .6; } to { opacity: 1; } }
.fd-pt.centre { width: 36px; height: 36px; font-size: 14.5px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
.petits .fd-pt { width: 21px; height: 21px; font-size: 9.5px; box-shadow: 1px 1px 0 var(--ink); }
.petits .fd-pt.centre { width: 27px; height: 27px; font-size: 11.5px; }
.fd-pt.fd-vide.centre, .petits .fd-pt.fd-vide { box-shadow: none; }
.fd-pt.a.centre { box-shadow: 0 0 0 1.5px var(--fd-nc-bord); }
.petits .fd-pt.a { box-shadow: 0 0 0 1px var(--fd-nc-bord); border-width: 1px; font-size: 13px; }
/* la fin d'un relevé : l'état de mesure laisse place au résultat, en fondu court, sans saut */
.fd-compteur.arrive { animation: fd-arrive .28s ease-out; }
@keyframes fd-arrive { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.fd-porte { display: flex; flex-direction: column; align-items: center; padding-bottom: 25px; pointer-events: none; }
.petits .fd-porte { padding-bottom: 20px; }
.fd-porte-autre { padding-bottom: 0; }
.fd-etiquette { display: block; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 5px 8px; white-space: nowrap; box-shadow: 2px 2px 0 var(--marker); opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .4s ease; }
.fd-etiquette.on { opacity: 1; transform: none; }
.fd-porte-autre .fd-etiquette { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.fd-adresse { width: 12px; height: 12px; margin-top: 4px; background: var(--ink); border: 2px solid #fff; transform: rotate(45deg); box-shadow: 0 0 0 1.5px var(--ink); }
/* quand on regarde un concurrent, l'étiquette de l'entreprise s'efface un peu */
.fd-map.concurrent .fd-porte:not(.fd-porte-autre) .fd-etiquette { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .fd-pt, .fd-etiquette, .fd-phrase { transition-duration: 1ms !important; } }

/* DESKTOP : split-screen dans la carte d'audit. Gauche : carte quasi carrée + réglette. Droite : le reste + CTA. */
@container (min-width: 620px) {
  .fd-grille { display: grid; grid-template-columns: calc(var(--fd-split) * 1%) 1fr; column-gap: 28px; align-items: start; }
  .fd-gauche, .fd-droite { display: block; }
  .fd-carte { margin: 0; aspect-ratio: 1 / 1; }
  .fd-reglage { margin-top: 10px; }
  .fd-compteur { margin-top: 18px; }
  .fd-zero { white-space: normal; }
  .fd-n { font-size: clamp(28px, 4.6cqi, 36px); }
  .fd-zero { font-size: clamp(20px, 3.2cqi, 26px); }
  .fd-phrase { font-size: clamp(15.5px, 2.3cqi, 18px); }
  .fd-pres dd { font-size: 17px; }
}

/* LE SCAN (données réelles) : seuls les points EN VOL bougent (un arc fin tourne autour, un pouls léger) ; à la réponse
   le point se verrouille puis devient calme ; l'intensité baisse avec le nombre de points (.n0 = 9, .n1 = 25, .n2 = 73).
   CSS seul, transform / opacity. Un point dont la requête n'est pas partie reste gris et immobile. */
.fd-reel .fd-pt { position: relative; }
.fd-reel .fd-pt.fd-vide.on { animation: none; }
.fd-reel .fd-phrase { min-height: 2.5em; }
.fd-reel .fd-zero.fdx-narre { font-size: clamp(15px, 4.4cqi, 19px); white-space: normal; line-height: 1.15; }
.fd-reel .fd-compte { display: inline-block; font-variant-numeric: tabular-nums; }
.fd-reel .fd-compte.fdx-bump { animation: fdx-bump .42s cubic-bezier(.2,.8,.3,1); }
@keyframes fdx-bump { 0% { transform: translateY(-7px); opacity: 0; } 60% { transform: translateY(1px); opacity: 1; } 100% { transform: none; } }

.fd-reel .fd-pt.fd-vide.on.fdx-vol { animation: fdx-pouls 2.6s ease-in-out infinite; animation-delay: calc(var(--ph, 0) * -2.6s); }
.fd-reel .fd-pt.fd-vide.on.fdx-vol::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid transparent;
  border-top-color: var(--ink); border-right-color: rgba(14,14,12,.22); animation: fdx-orbite 1.5s linear infinite; animation-delay: calc(var(--ph, 0) * -1.5s); opacity: .75; }
.fd-reel .n1 .fd-pt.fd-vide.on.fdx-vol::before { opacity: .55; animation-duration: 1.9s; }
.fd-reel .n2 .fd-pt.fd-vide.on.fdx-vol::before { inset: -3px; border-width: 1px; opacity: .38; animation-duration: 2.6s; }
.fd-reel .n2 .fd-pt.fd-vide.on.fdx-vol { animation: none; }
@keyframes fdx-orbite { to { transform: rotate(360deg); } }
@keyframes fdx-pouls { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1); } }
.fd-reel .fd-pt.fdx-resout { animation: fdx-verrou .34s cubic-bezier(.2,.9,.3,1.25); }
@keyframes fdx-verrou { 0% { transform: scale(1); background-color: #F2F2EE; color: transparent; } 35% { transform: scale(1.14); background-color: #F2F2EE; color: transparent; } 70% { transform: scale(.97); } 100% { transform: scale(1); } }
/* l'onde de départ : une seule, depuis le centre, qui traverse la carte */
.fd-onde { position: absolute; left: 50%; top: calc(50% + 6px); width: 0; aspect-ratio: 1 / 1; border-radius: 50%; border: 1.5px solid rgba(14,14,12,.3); transform: translate(-50%, -50%); pointer-events: none; z-index: 1; animation: fdx-onde 1.9s cubic-bezier(.25,.6,.3,1) forwards; }
@keyframes fdx-onde { 0% { width: 0; opacity: .9; } 100% { width: 170%; opacity: 0; } }

/* MOUVEMENT RÉDUIT : pas d'arc, pas de voile, pas d'onde ; une pulsation d'opacité légère ; révélation instantanée */
@media (prefers-reduced-motion: reduce) {
  .fd-reel .fd-pt.fd-vide.on.fdx-vol { animation: fd-respire 2s ease-in-out infinite alternate !important; transform: none !important; }
  .fd-reel .fd-pt.fd-vide.on::before, .fd-reel .fd-pt.fd-vide.on::after,
  .fd-onde { display: none !important; }
  .fd-reel .fd-pt.fdx-resout, .fd-reel .fd-compte.fdx-bump { animation: none !important; }
}

/* LA LIGNE SYSTÈME : petite, secondaire, vivante. Un point qui pulse, trois points de suspension
   qui s'allument l'un après l'autre, un fondu vertical court entre deux messages. Rien ne bouge une fois le relevé fini. */
.fd-reel .fdx-sys { display: flex; align-items: center; gap: 7px; min-height: 1.55em; font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .01em; line-height: 1.5; color: var(--dim); white-space: nowrap; overflow: hidden; }
.fd-reel .fdx-cpt { display: block; }
.fd-reel .fdx-cpt[hidden] { display: none; }
.fdx-puce { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: fdx-puce 1.6s ease-in-out infinite; }
@keyframes fdx-puce { 0%, 100% { opacity: .22; } 50% { opacity: 1; } }
.fdx-sys-txt { display: inline-block; transition: opacity .18s ease, transform .18s ease; }
.fdx-sys-txt.fdx-sort { opacity: 0; transform: translateY(-3px); }
.fdx-sys-txt.fdx-entre { animation: fdx-sys-entre .3s ease-out; }
@keyframes fdx-sys-entre { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.fdx-ellipse { margin-left: -6px; letter-spacing: .06em; flex: none; }
.fdx-ellipse i { font-style: normal; animation: fdx-point 1.8s ease-in-out infinite; opacity: .15; }
.fdx-ellipse i:nth-child(2) { animation-delay: .3s; } .fdx-ellipse i:nth-child(3) { animation-delay: .6s; }
@keyframes fdx-point { 0%, 60%, 100% { opacity: .15; } 30% { opacity: 1; } }
.fdx-sys.fdx-fini .fdx-puce { animation: none; opacity: 1; }
.fdx-sys.fdx-fini .fdx-ellipse { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fdx-puce { animation: none; opacity: .7; }
  .fdx-ellipse i { animation: none; opacity: .5; }
  .fdx-sys-txt.fdx-sort { transform: none; } .fdx-sys-txt.fdx-entre { animation: fdx-fondu .2s ease-out; }
  @keyframes fdx-fondu { from { opacity: 0; } to { opacity: 1; } }
}

/* LE BOUTON PENDANT LE SCAN : lisible, calme, visiblement « en attente », jamais « cassé » ; mêmes trois points que la
   ligne système ; puis un fondu court quand il redevient « Voir mon marché » */
.fd-cta .btn.fdx-cta-scan, .fd-cta .btn.fdx-cta-scan:disabled { opacity: .72; cursor: default; pointer-events: none; }
.btn.fdx-cta-scan .fdx-ellipse { margin-left: 1px; }
.btn.fdx-cta-pret { animation: fdx-cta-pret .38s ease-out; }
@keyframes fdx-cta-pret { from { opacity: .72; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .btn.fdx-cta-pret { animation: none; } }

/* PANNE SANS AUCUN POINT : la carte se replie, pas de grand cadre vide ; le bouton Réessayer dans la DA des liens */
.fd-sans-carte .fd-gauche { display: none !important; }
@container (min-width: 620px) { .fd-sans-carte .fd-grille { grid-template-columns: 1fr; } }
.fd-reessayer { order: 4; align-self: flex-start; margin: 8px 0 4px; padding: 0; background: none; border: 0; border-bottom: 1.5px solid currentColor; font: 600 13px/1.4 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--ink, #111); cursor: pointer; }
.fd-reessayer:focus-visible { outline: 2px solid var(--ink, #111); outline-offset: 3px; }