/* ============================================
   Page « Audit SEO + visibilité IA offert »
   Page autonome : audit-seo-ia.html
   S'appuie sur css/style.css (tokens, boutons, champs du formulaire).
   Classes préfixées .au- pour ne rien casser ailleurs.
   Mobile-first : les media queries agrandissent ensuite.
   ============================================ */

/* Les lignes de couleur font 100vw de large, barre de défilement comprise */
html {
  overflow-x: clip;
}

/* Repère clavier : style.css le retire sur les cases du formulaire */
.au-page a:focus-visible,
.au-page button:focus-visible,
.au-page summary:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 3px;
}

.au-panel a:focus-visible,
.au-panel button:focus-visible,
.au-panel summary:focus-visible,
.au-form input[type="radio"]:focus-visible,
.au-form input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent-green);
  outline-offset: 3px;
}

/* Le bouton mobile glisse jusqu'au formulaire */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.au-page {
  background: var(--color-bg);
}

/* En-tête aligné sur la largeur de cette page (820 px sur les pages légales) */
.au-page .legal-header {
  max-width: var(--container-max);
  padding: 12px 20px 0;
}

.au-page .legal-header__logo img {
  height: 64px;
}

/* Zone de toucher de 44 px, sans bouger la mise en page */
.au-page .legal-header__back {
  padding: 13px 0;
}

/* Pied de page plus lisible que le gris des pages légales */
/* Mini footer : couleurs gérées dans style.css (fond noir) */

.au-main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 12px 20px 60px;
}

/* Évite la coupure « est- / il » dans le titre */
.au-nowrap {
  white-space: nowrap;
}

.au-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
}

/* ---------- Haut de page ---------- */
.au-hero {
  display: grid;
  gap: 28px;
}

.au-badge {
  font-size: clamp(22px, 4vw, 28px);
  margin-bottom: 0;
}

.au-title {
  margin: 18px 0 16px;
  font-family: var(--font-sans);
  font-size: clamp(34px, 7vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-black);
  text-wrap: balance;
}

/* Bouton mobile sous le titre : le formulaire arrive après l'aperçu */
.au-jump {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.au-lede {
  max-width: 520px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-dark);
}

/* ---------- Exemple de rapport, avec les formes de la home ---------- */
.au-report {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding: 8px 8px 0;
}

.au-report__thumb {
  position: relative;
  display: block;
  width: min(62%, 210px);
  margin-left: 16px;
  transform: rotate(-3deg);
}

.au-report__thumb img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border: 5px solid var(--color-off-white);
  border-radius: var(--radius-s);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 14px 30px rgba(0, 0, 0, 0.1);
}

.au-report__tag {
  position: absolute;
  z-index: 2;
  right: -12px;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: var(--radius-l);
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  transform: rotate(3deg);
}

.au-deco-circle {
  top: auto;
  bottom: -20px;
  left: -14px;
  transform: rotate(180deg);
}

.au-deco-arch {
  left: auto;
  right: -30px;
  top: -24px;
  transform: rotate(14deg);
}

.au-report__text {
  position: relative;
  max-width: 300px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-dark);
}

.au-deco-arrow {
  display: none;
}

/* ---------- Panneau du formulaire ---------- */
.au-panel {
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-m);
  padding: 24px 20px;
  scroll-margin-top: 16px;
}

.au-panel__title {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.au-panel__title {
  overflow-wrap: anywhere;
}

.au-panel__title:focus {
  outline: none;
}

.au-panel__lede {
  margin: 4px 0 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* Réassurance sous le bouton d'envoi */
.au-reassure {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
  color: rgba(255, 255, 255, 0.75);
}

.au-noscript {
  margin-bottom: 16px;
  font-size: 14px;
}

.au-noscript a {
  color: var(--color-white);
  text-decoration: underline;
}

/* Formulaire resserré : moins haut, plus léger à parcourir */
.au-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 50 % sur tous les écrans */
  gap: 12px;
  align-items: end; /* champs alignés si un libellé passe sur 2 lignes */
}

.au-form .contact-form__field {
  gap: 4px;
}

.au-form .contact-form__field--half {
  grid-column: span 1;
}

/* 16 px : en dessous, iOS zoome sur le champ au toucher */
.au-form input[type="text"],
.au-form input[type="email"] {
  padding: 10px 14px;
  font-size: 16px;
}

/* Bouton pendant l'envoi : le visiteur voit que ça travaille */
.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Mention (facultatif) : plus discrète que le libellé */
.au-optional {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
}

/* Un champ refusé par le contrôle */
.au-form input[aria-invalid="true"] {
  border-color: #ff8a8a;
}

.au-market {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  border: 0;
  padding: 0;
  margin: 0;
}

.au-market legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.au-market .req {
  color: var(--color-accent-green);
}

.au-market__option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.au-form .au-market__option input {
  width: 18px;
  height: 18px;
  padding: 0;
  accent-color: var(--color-accent-green);
  cursor: pointer;
}

/* L'attribut hidden doit gagner sur le display:flex du champ */
.au-city[hidden],
.au-success[hidden],
.au-panel__form[hidden] {
  display: none;
}

/* Champ piège : hors écran plutôt que display:none, que certains robots repèrent */
.au-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Confirmation après envoi */
.au-success p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.au-success .au-success__note {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.au-success a {
  color: var(--color-white);
  text-decoration: underline;
}

/* ---------- Sections ---------- */
/* padding à zéro : style.css en met un sur toutes les sections */
.au-section,
.au-hero {
  padding: 0;
}

.au-section {
  margin-top: 56px;
}

/* Les lignes de couleur passent derrière le contenu */
.au-section--flow,
.au-section--faq {
  position: relative;
}

.au-section--flow > :not(svg),
.au-section--faq > :not(svg) {
  position: relative;
  z-index: 1;
}

.au-section__title {
  font-family: var(--font-sans);
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-black);
  text-wrap: balance;
}

.au-section__lede {
  margin-top: 8px;
  font-size: 15px;
  color: var(--color-dark);
}

.au-grid {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.au-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 14px 30px rgba(0, 0, 0, 0.05);
}

.au-card h3 {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-black);
}

.au-card p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-dark);
}

/* ---------- Déroulé et mot de Frédéric ---------- */
.au-how {
  display: grid;
  gap: 24px;
}

.au-steps {
  max-width: 72ch;
  margin-top: 24px;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.au-steps li {
  position: relative;
  padding: 18px 0 18px 58px;
  min-height: 78px;
  counter-increment: etape;
  border-top: 1px solid var(--color-border);
  font-size: 17px; /* +2px pour la lisibilité */
  line-height: 1.6;
  color: var(--color-dark);
}

.au-steps li:first-child {
  border-top: 0;
}

.au-steps li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 42px;
  text-align: center;
}

.au-steps strong {
  color: var(--color-black);
}

.au-honest {
  max-width: 72ch;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-dark);
}

.au-person {
  align-self: start;
  background: var(--color-white);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 14px 30px rgba(0, 0, 0, 0.05);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-dark);
}

.au-person img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.au-person__cred {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-black);
}

.au-person__cred + p {
  margin-top: 10px;
}

.au-person__link {
  margin-top: 10px;
}

.au-person__link a {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-black);
  text-decoration: underline;
}

.au-person__hello {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  color: var(--color-black);
}

/* ---------- FAQ ---------- */
.au-faq {
  background: var(--color-white);
  border-radius: var(--radius-m);
  padding: 28px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 14px 30px rgba(0, 0, 0, 0.05);
}

.au-faq .faq__list {
  margin-top: 20px;
}

/* Toute la barre de question fait 44 px de haut au toucher */
.au-faq .faq-item {
  padding: 10px 20px;
}

.au-faq .faq-item summary {
  padding: 5px 0;
}

.au-faq .faq-item p {
  max-width: 72ch;
  margin-top: 8px;
  padding-bottom: 5px;
  font-size: 14px;
  color: var(--color-dark);
}

.au-faq .faq-item a {
  text-decoration: underline;
}

/* ---------- Tablette et plus ---------- */
@media (min-width: 640px) {
  .au-main {
    padding-left: 24px;
    padding-right: 24px;
  }

  .au-page .legal-header {
    padding-left: 24px;
    padding-right: 24px;
  }

  .au-jump {
    display: none;
  }

  /* Tablette : formulaire d'abord, aperçu ensuite */
  .au-hero {
    display: flex;
    flex-direction: column;
  }

  .au-hero__intro { order: 1; }
  .au-panel { order: 2; }
  .au-report { order: 3; }

  .au-panel {
    padding: 32px;
  }

  .au-report {
    flex-direction: row;
    align-items: center;
    gap: 44px;
  }

  .au-report__thumb {
    width: 190px;
    flex-shrink: 0;
  }

  .au-deco-arrow {
    display: block;
    top: -46px;
    left: -30px;
    right: auto;
    transform: scaleX(-1) rotate(10deg);
    width: 60px;
  }

  .au-faq {
    padding: 36px 32px;
  }


  .au-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Grand écran : texte à gauche, formulaire à droite ---------- */
@media (min-width: 960px) {
  .au-page .legal-header {
    padding: 16px 24px 0;
  }

  .au-main {
    padding: 16px 24px 80px;
  }

  .au-hero {
    display: grid;
    grid-template-columns: 1fr 460px;
    grid-template-areas: "intro panel" "report panel";
    grid-template-rows: auto 1fr;
    column-gap: 48px;
    row-gap: 12px;
    align-items: start;
  }

  .au-hero__intro { grid-area: intro; }
  .au-panel { grid-area: panel; }
  .au-report { grid-area: report; }

  .au-hero__intro {
    padding-top: 8px;
  }

  .au-section {
    margin-top: 72px;
  }

  .au-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .au-how {
    grid-template-columns: 1fr 320px;
    gap: 48px;
  }
}

/* Fin de page : proposer l'Audit Complet */
.au-next {
  text-align: center;
}
.au-next .btn {
  margin-top: 8px;
}

/* Carte « Bonjour, c'est Frédéric » : halo dégradé derrière + léger dégradé dedans
   (même idée graphique que « C'est pour vous si » sur l'accueil) */
.au-person-wrap {
  position: relative;
  isolation: isolate;
  align-self: start;
}

.au-person-wrap::before {
  content: "";
  position: absolute;
  inset: -50px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 25% 30%, rgba(58, 242, 123, 0.45), transparent 75%),
    radial-gradient(60% 60% at 75% 70%, rgba(127, 179, 232, 0.55), transparent 75%);
  -webkit-mask-image: radial-gradient(closest-side, #000 65%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 65%, transparent 100%);
}

.au-person {
  background:
    radial-gradient(90% 55% at 50% 100%, rgba(58, 242, 123, 0.16), transparent 70%),
    linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--color-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 18px 40px rgba(0, 0, 0, 0.08);
}

/* Halo plus large : la carte en cachait presque tout */
.au-person-wrap::before {
  inset: -90px -100px;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}

/* « Ce que vous recevez » : pictos en couleurs (palette des piliers de l'accueil) */
.au-grid .au-card:nth-child(1) .feature-card__icon { color: var(--color-green-dot); }
.au-grid .au-card:nth-child(2) .feature-card__icon { color: #f2a13a; }
.au-grid .au-card:nth-child(3) .feature-card__icon { color: #4f9be8; }
.au-grid .au-card:nth-child(4) .feature-card__icon { color: #e6b422; }

/* « Envie d'aller plus loin ? » : plus d'air entre titre, texte et bouton,
   texte resserré au centre au lieu d'une ligne très longue */
.au-next {
  padding: 24px 0 40px;
}

.au-next .au-section__lede {
  max-width: 60ch;
  margin: 16px auto 0;
  line-height: 1.6;
}

.au-next .btn {
  margin-top: 28px;
}

/* Bouton de rappel « Demander mon audit » avant la FAQ */
.au-cta {
  margin-top: 56px;
  text-align: center;
}

html {
  scroll-behavior: smooth;
}

#formulaire {
  scroll-margin-top: 24px;
}

/* Logo plus grand (page tunnel : plus de bouton retour) */
.au-page .legal-header__logo img {
  height: 80px;
}

/* Témoignages repris de l'accueil */
.au-testimonials .quote-list {
  margin-top: 24px;
}

.au-testimonials .quote-list {
  max-width: none;
  margin: 24px 0 0;
}

/* « Ils en parlent » : titre centré, placé sous le bouton « Demander mon audit » */
.au-testimonials__title {
  text-align: center;
}

/* Carte Frédéric : paragraphe 2px plus petit (15 → 13px) */
.au-person .au-person__text {
  font-size: 13px;
}