/* ─────────────────────────────────────────────────────────────
   Page d'audit de fiche Google.
   Reprend la charte de l'accueil (accueil.css est chargée avant)
   et n'ajoute que ce qui lui est propre.
   ───────────────────────────────────────────────────────────── */

.aud-tete {
  background: linear-gradient(180deg, #ffc02e 0%, #ffd76b 62%, #fff8e7 100%);
  padding-block: clamp(2rem, 6vw, 4rem) clamp(2.5rem, 7vw, 4.5rem);
}
/* Même rail de lecture que l'accueil : l'enveloppe garde sa pleine largeur,
   ce sont les blocs de texte qui sont bornés. */
.aud-tete h1 {
  margin-bottom: .9rem;
  max-width: 27ch;          /* le « ? » ne doit pas rester seul sur une ligne */
}
.aud-tete .chapo { max-width: 34em; }

/* ── Champ de recherche ─────────────────────────────────────── */

.recherche { position: relative; margin-top: 1.6rem; max-width: 40rem; }
.recherche__champ {
  display: flex; align-items: center; gap: .6rem;
  background: #fff; border: 2px solid #23150f; border-radius: 999px;
  padding: .55rem .7rem .55rem 1rem;
  box-shadow: 0 14px 30px -18px rgba(35, 21, 15, .55);
}
.recherche__champ:focus-within { box-shadow: 0 0 0 4px rgba(94, 31, 61, .22), 0 14px 30px -18px rgba(35, 21, 15, .55); }
.recherche__loupe { flex: none; color: #5e1f3d; display: grid; place-items: center; }
.recherche__loupe svg { width: 1.25rem; height: 1.25rem; }
.recherche input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: clamp(1rem, 2.4vw, 1.15rem); font-weight: 600;
  color: #23150f; padding: .35rem 0;
}
.recherche input::placeholder { color: #a2917f; font-weight: 400; }

.recherche__sablier {
  flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 2.5px solid rgba(94, 31, 61, .22); border-top-color: #5e1f3d;
  animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

.recherche__aide { font-size: .82rem; color: #6b4a1d; margin-top: .5rem; padding-left: .35rem; }
.recherche__note { font-size: .8rem; color: #6b4a1d; margin-top: 1.1rem; max-width: 40ch; }

/* ── Suggestions ────────────────────────────────────────────── */

.suggestions {
  list-style: none; margin: .45rem 0 0; padding: .35rem;
  position: absolute; left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid #ffe6ab; border-radius: 16px;
  box-shadow: 0 22px 44px -20px rgba(35, 21, 15, .5);
  max-height: 20rem; overflow-y: auto;
}
.suggestion {
  display: grid; gap: .1rem; padding: .6rem .75rem;
  border-radius: 11px; cursor: pointer;
}
.suggestion b { font-size: .95rem; font-weight: 700; }
.suggestion span { font-size: .8rem; color: #6b584e; }
.suggestion:hover, .suggestion.est-actif { background: #fff3d4; }
.suggestion.est-actif { box-shadow: inset 0 0 0 2px #ffc02e; }

/* ── Résultat ───────────────────────────────────────────────── */

.aud-resultat { padding-block: clamp(1.5rem, 5vw, 3rem) clamp(2.5rem, 7vw, 4rem); background: #fff8e7; }

.aud-attente {
  display: flex; align-items: center; gap: .9rem;
  background: #fff; border: 1px solid #ffe6ab; border-radius: 16px;
  padding: 1.25rem 1.4rem; font-size: 1rem;
}
.aud-attente__rond {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 3px solid rgba(94, 31, 61, .2); border-top-color: #5e1f3d;
  animation: tourne .7s linear infinite;
}
.aud-erreur {
  background: rgba(176, 58, 38, .09); border: 1px solid rgba(176, 58, 38, .3);
  color: #8d2d1e; border-radius: 12px; padding: .9rem 1.1rem;
}

.aud-carte {
  background: #fff; border: 1px solid #ffe6ab; border-radius: 18px;
  padding: clamp(1.1rem, 3vw, 1.7rem); margin-bottom: 1.1rem;
}
.aud-carte--tete { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 40rem) { .aud-carte--tete { grid-template-columns: auto 1fr; } }

/* Jauge : un simple anneau conique, pas de librairie. */
.jauge {
  position: relative; width: 7.5rem; height: 7.5rem; border-radius: 50%;
  display: grid; place-items: center; margin-inline: auto;
  background: conic-gradient(var(--teinte) calc(var(--part) * 1%), #f1e7d2 0);
}
.jauge::after {
  content: ''; position: absolute; inset: .62rem; background: #fff; border-radius: 50%;
}
.jauge--bon    { --teinte: #0e7c5a; }
.jauge--moyen  { --teinte: #e08b12; }
.jauge--faible { --teinte: #b03a26; }
.jauge__val {
  position: relative; z-index: 1;
  font-family: var(--display, inherit); font-weight: 800;
  font-size: 2.3rem; line-height: 1; letter-spacing: -.04em;
}
.jauge__sur { position: relative; z-index: 1; font-size: .75rem; font-weight: 700; color: #6b584e; }

.aud-ident__nom { font-family: var(--display, inherit); font-weight: 800; font-size: clamp(1.25rem, 3.4vw, 1.7rem); letter-spacing: -.03em; line-height: 1.1; }
.aud-ident__sous { font-size: .875rem; color: #6b584e; margin-top: .25rem; }
.aud-faits { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.aud-faits li {
  font-size: .78rem; font-weight: 700; background: #fff3d4;
  border-radius: 999px; padding: .3rem .7rem;
}

.aud-titre { margin: 1.6rem 0 .9rem; font-size: clamp(1.3rem, 3.4vw, 1.8rem); }

.aud-constats { display: grid; gap: .7rem; margin-bottom: 1.4rem; }
@media (min-width: 48rem) { .aud-constats { grid-template-columns: 1fr 1fr; } }

.constat {
  background: #fff; border: 1px solid #ffe6ab; border-left-width: 4px;
  border-radius: 12px; padding: .9rem 1.05rem;
}
.constat--critique { border-left-color: #b03a26; }
.constat--moyen    { border-left-color: #e08b12; }
.constat--ok       { border-left-color: #0e7c5a; }
.constat__titre {
  display: flex; align-items: center; gap: .5rem;
  font-size: .98rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .3rem;
}
.constat__pic {
  flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #fff;
}
.constat--critique .constat__pic { background: #b03a26; }
.constat--moyen    .constat__pic { background: #e08b12; }
.constat--ok       .constat__pic { background: #0e7c5a; }
.constat__texte { font-size: .875rem; color: #5c5048; line-height: 1.5; }

.aud-reco { background: #23150f; border-color: #23150f; color: #f6ece4; }
.aud-reco__etiq {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .13em;
  font-weight: 800; color: #ffc02e; margin-bottom: .5rem;
}
.aud-reco__ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.aud-reco__nom { font-family: var(--display, inherit); font-weight: 800; font-size: clamp(1.3rem, 3.4vw, 1.8rem); letter-spacing: -.03em; }
.aud-reco__prix { font-size: .95rem; color: #e5d3c6; }
.aud-reco__prix b { font-family: var(--display, inherit); font-weight: 800; font-size: 1.7rem; color: #ffc02e; letter-spacing: -.03em; }
.aud-reco__texte { font-size: .9rem; color: #d9c8bc; margin-top: .7rem; max-width: 52ch; line-height: 1.55; }
.aud-reco__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; }
.aud-reco .bouton--fantome { border-color: rgba(255, 255, 255, .4); color: #fff; }
.aud-reco .bouton--fantome:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.etapes-aud { margin: 1.4rem 0 0; padding-left: 1.4rem; display: grid; gap: .8rem; font-size: .95rem; line-height: 1.55; }
.etapes-aud li::marker { color: #5e1f3d; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .recherche__sablier, .aud-attente__rond { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
   Porte d'entrée : coordonnées avant affichage de l'audit
   ───────────────────────────────────────────────────────────── */
.aud-porte {
  padding: 2.5rem 0 3.5rem;
}
.aud-porte__in {
  max-width: 46rem;
  background: #fff;
  border: 1px solid #ffe6ab;
  border-radius: 1.25rem;
  padding: 2rem 1.5rem 1.75rem;
  box-shadow: 0 18px 44px -28px rgb(35 21 15 / .35);
}
.aud-porte__in .etiq {
  margin: 0 0 .5rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5e1f3d;
}
.aud-porte__in h2 {
  margin: 0 0 .5rem;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  line-height: 1.15;
  color: #23150f;
}
.aud-porte__in .chapo {
  margin: 0 0 1.5rem;
  color: #6a564a;
  max-width: 34rem;
}

.aud-form__grille {
  display: grid;
  gap: 1rem;
  margin: 0 0 1rem;
}
@media (min-width: 40rem) {
  .aud-form__grille { grid-template-columns: 1fr 1fr; }
  .champ-aud:first-child { grid-column: 1 / -1; }
}

.champ-aud {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}
.champ-aud label {
  font-size: .86rem;
  font-weight: 600;
  color: #23150f;
}
.champ-aud input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: #23150f;
  background: #fff8e7;
  border: 1.5px solid #ffe6ab;
  border-radius: .7rem;
  padding: .8rem .9rem;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.champ-aud input:hover { border-color: #ffd76b; }
.champ-aud input:focus-visible {
  outline: none;
  background: #fff;
  border-color: #5e1f3d;
  box-shadow: 0 0 0 3px rgb(94 31 61 / .16);
}
.champ-aud__err {
  min-height: 1.05rem;
  font-size: .8rem;
  font-weight: 600;
  color: #9e1f2e;
}
/* Le message d'erreur est placé après le champ : seul :has() peut remonter. */
.champ-aud:has(.champ-aud__err:not(:empty)) input {
  border-color: #9e1f2e;
  background: #fdf1f1;
}

.aud-consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0 0 1.25rem;
  font-size: .88rem;
  line-height: 1.45;
  color: #6a564a;
  cursor: pointer;
}
.aud-consent input {
  flex: none;
  margin-top: .15rem;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: #5e1f3d;
}
.aud-form__note {
  margin: .75rem 0 0;
  font-size: .82rem;
  color: #6a564a;
}
#aud-envoi[disabled] { opacity: .6; cursor: progress; }

/* ─────────────────────────────────────────────────────────────
   Performance mobile (PageSpeed), chargée après l'audit
   ───────────────────────────────────────────────────────────── */
.perf__titre {
  margin: 0 0 .9rem;
  font-size: 1.1rem;
  color: #23150f;
}
.perf__ligne {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.perf__score {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  padding: .1em .3em;
  border-radius: .6rem;
}
.perf__score--bon    { color: #0b5c43; background: #dff4ec; }
.perf__score--moyen  { color: #8a5300; background: #fff0d1; }
.perf__score--faible { color: #9e1f2e; background: #fdeaea; }
.perf__sur {
  font-size: .9rem;
  color: #6a564a;
}
.perf__metriques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .75rem;
}
.metrique {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
  padding: .75rem .85rem;
  background: #fff8e7;
  border: 1px solid #ffe6ab;
  border-radius: .8rem;
}
.metrique b {
  font-size: 1.15rem;
  color: #23150f;
}
.metrique span {
  font-size: .78rem;
  line-height: 1.3;
  color: #6a564a;
}
.metrique--faible {
  background: #fdeaea;
  border-color: #f4cccc;
}
.metrique--faible b { color: #9e1f2e; }
.perf__note {
  margin: .9rem 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: #6a564a;
}

.aud-ident__test {
  margin: .7rem 0 0;
  font-size: .82rem;
  line-height: 1.4;
  color: #6a564a;
  overflow-wrap: anywhere;
}
.aud-ident__url {
  font-weight: 600;
  color: #23150f;
}

/* Le bloc « comment ça marche » suit le même rail que le reste du site ;
   c'est le texte qui est borné, pas le conteneur. */
.etapes-aud { max-width: 52em; }
.etapes-aud + p, .bloc--pale h2 { max-width: 34ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   Parcours en trois étapes.

   Le grand titre n'a de raison d'être que sur le premier écran. Dès que le
   commerce est choisi, il laisse la place à une barre compacte : la page se
   resserre au lieu de s'empiler, et l'établissement retenu reste lisible.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fil d'étapes */
.aud-pas {
  list-style: none;
  display: flex;
  gap: 1.15rem;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: .82rem;
  font-weight: 600;
}
.aud-pas__item i { font-style: normal; }
.aud-pas__item {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: rgb(35 21 15 / .45);
  transition: color .2s ease;
}
.aud-pas__item span {
  display: grid;
  place-items: center;
  width: 1.45rem; height: 1.45rem;
  border-radius: 50%;
  background: rgb(35 21 15 / .09);
  font-size: .76rem;
  font-weight: 700;
  transition: background .2s ease, color .2s ease;
}
/* Étape courante */
body[data-etape="recherche"] .aud-pas__item[data-pas="recherche"],
body[data-etape="porte"]     .aud-pas__item[data-pas="porte"],
body[data-etape="resultat"]  .aud-pas__item[data-pas="resultat"] { color: #23150f; }
body[data-etape="recherche"] .aud-pas__item[data-pas="recherche"] span,
body[data-etape="porte"]     .aud-pas__item[data-pas="porte"] span,
body[data-etape="resultat"]  .aud-pas__item[data-pas="resultat"] span {
  background: #5e1f3d;
  color: #ffe8be;
}
/* Étapes franchies : une coche à la place du chiffre. */
body[data-etape="porte"]    .aud-pas__item[data-pas="recherche"] span,
body[data-etape="resultat"] .aud-pas__item[data-pas="recherche"] span,
body[data-etape="resultat"] .aud-pas__item[data-pas="porte"] span {
  background: #0e7c5a;
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.5 4.5L19.5 6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: .8rem .8rem;
}
body[data-etape="porte"]    .aud-pas__item[data-pas="recherche"],
body[data-etape="resultat"] .aud-pas__item[data-pas="recherche"],
body[data-etape="resultat"] .aud-pas__item[data-pas="porte"] { color: rgb(35 21 15 / .72); }

/* Le héros ne survit pas au choix du commerce. Le bloc pédagogique non plus :
   « comment ça marche » a sa place avant qu'on se lance, pas au milieu du
   tunnel — à l'étape 2 il s'intercalait entre le formulaire et le résultat. */
body:not([data-etape="recherche"]) .aud-tete__gros,
body:not([data-etape="recherche"]) .recherche,
body:not([data-etape="recherche"]) .aud-si-recherche,
body:not([data-etape="recherche"]) #explication { display: none; }

/* Le bandeau jaune se resserre : c'est un fil d'ariane, plus une affiche. */
body:not([data-etape="recherche"]) .aud-tete {
  padding-block: 1.5rem 1.6rem;
  background: linear-gradient(180deg, #ffc02e 0%, #ffd76b 78%, #ffe6ab 100%);
}

/* Barre de l'établissement retenu : collée sous l'en-tête (71 px). */
.aud-barre {
  position: sticky;
  top: 4.4rem;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid rgb(35 21 15 / .1);
  box-shadow: 0 10px 24px -22px rgb(35 21 15 / .5);
}
.aud-choisi {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-block: .7rem;
}
.aud-choisi__pic {
  flex: none;
  width: 2.1rem; height: 2.1rem;
  border-radius: .55rem;
  background: #fff8e7 no-repeat center/1.15rem 1.15rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e1f3d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgb(35 21 15 / .1);
}
.aud-choisi__txt {
  display: grid;
  gap: .1rem;
  min-width: 0;
  flex: 1;
}
.aud-choisi__txt b {
  font-size: 1rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.aud-choisi__txt span {
  font-size: .82rem;
  color: #6a564a;
  overflow-wrap: anywhere;
}
.aud-choisi__chg {
  flex: none;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: #5e1f3d;
  background: transparent;
  border: 1.5px solid rgb(94 31 61 / .3);
  border-radius: 999px;
  padding: .42rem .85rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.aud-choisi__chg:hover { background: #fff8e7; border-color: #5e1f3d; }
.aud-choisi__chg:focus-visible { outline: 2px solid #23150f; outline-offset: 2px; }

/* Le défilement doit tenir compte de l'en-tête ET de la barre collante. */
html { scroll-padding-top: 8.5rem; }

/* La porte n'a plus besoin de son propre grand titre : le fil d'étapes le dit. */
body[data-etape="porte"] .aud-porte { padding-top: 1.75rem; }
.aud-porte__in .etiq { display: none; }

/* Sur un petit écran, trois libellés ne tiennent pas sur une ligne et le
   retour à la ligne casse la bande. On ne garde donc que le libellé de
   l'étape en cours ; les autres restent lisibles par leur numéro. */
@media (max-width: 34rem) {
  .aud-pas__item i { display: none; }
  body[data-etape="recherche"] .aud-pas__item[data-pas="recherche"] i,
  body[data-etape="porte"]     .aud-pas__item[data-pas="porte"] i,
  body[data-etape="resultat"]  .aud-pas__item[data-pas="resultat"] i { display: inline; }
  .aud-pas { gap: .7rem; align-items: center; }
}
@media (max-width: 30rem) {
  .aud-pas { font-size: .76rem; }
  .aud-choisi { flex-wrap: wrap; }
  .aud-choisi__chg { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .aud-pas__item, .aud-pas__item span { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   « Votre site est déjà prêt » — le vrai site dans un cadre de téléphone.

   Le contenu de l'iframe est la page de production, rendue à 400 px de large
   puis mise à l'échelle. Ce n'est donc pas une image d'illustration : ce que
   le commerçant fait défiler est exactement ce qu'il achète.
   ═══════════════════════════════════════════════════════════════════════════ */
.aud-apercu {
  margin: 2rem 0 0;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem) clamp(1.75rem, 4vw, 2.5rem);
  background: linear-gradient(168deg, #ffd76b, #ffc02e);
  border-radius: 1.1rem;
  text-align: center;
}
.aud-apercu__etiq {
  margin: 0 0 .5rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(35 21 15 / .6);
}
.aud-apercu__titre {
  margin: 0 0 .6rem;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.08;
  color: #23150f;
}
.aud-apercu__sous {
  margin: 0 auto 1.6rem;
  max-width: 34em;
  font-size: .95rem;
  line-height: 1.55;
  color: rgb(35 21 15 / .78);
}

/* Le cadre. `--ech` est le rapport entre la largeur rendue (400 px) et la
   largeur affichée : tout le reste s'en déduit, donc une seule valeur à
   changer par palier. */
.tel-cadre {
  --large: 400px;                 /* largeur de rendu, côté iframe */
  --haut: 780px;
  --ech: .8;
  width: calc(var(--large) * var(--ech));
  margin: 0 auto;
  padding: .55rem;
  background: #23150f;
  border-radius: 2.2rem;
  box-shadow: 0 26px 50px -26px rgb(35 21 15 / .6),
              inset 0 0 0 1px rgb(255 255 255 / .12);
}
.tel-cadre__ecran {
  position: relative;
  width: calc(var(--large) * var(--ech));
  height: calc(var(--haut) * var(--ech));
  margin: 0 auto;
  overflow: hidden;
  border-radius: 1.75rem;
  background: #fff8e7;
}
.tel-cadre__site {
  position: absolute;
  top: 0; left: 0;
  width: var(--large);
  height: var(--haut);
  border: 0;
  transform: scale(var(--ech));
  transform-origin: top left;
  opacity: 0;
  transition: opacity .35s ease;
}
.tel-cadre__site.est-la { opacity: 1; }

.tel-cadre__attente {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .8rem;
  padding: 1.5rem;
  text-align: center;
  font-size: .88rem;
  color: #6a564a;
}
.tel-cadre__attente p { margin: 0; }

.aud-apercu__actions { margin: 1.5rem 0 0; }
.aud-apercu__actions .bouton {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgb(35 21 15 / .2);
}
.aud-apercu__actions .bouton:hover { box-shadow: inset 0 0 0 1.5px #23150f; }

@media (max-width: 34rem) {
  .tel-cadre { --ech: .66; border-radius: 1.7rem; padding: .4rem; }
  .tel-cadre__ecran { border-radius: 1.35rem; }
}
@media (max-width: 24rem) {
  .tel-cadre { --ech: .58; }
}