/* ==========================================================================
   Module d'audit offert : habillage partage
   --------------------------------------------------------------------------
   Extrait du <style> en ligne de index.html le 2026-09-04, pour que l'accueil
   et la page d'atterrissage de prospection (/audit/) affichent EXACTEMENT le
   meme module. Avant cette extraction, le module n'existait qu'a un seul
   endroit ; en recopier 300 lignes pour la seconde page aurait garanti que
   les deux versions divergent au premier correctif.

   Ce fichier est autonome : il porte lui-meme la palette, les animations et
   les boutons dont le module a besoin. Une page hote qui definit deja ces
   variables aux memes valeurs (c'est le cas de index.html) n'est pas
   affectee, les declarations sont identiques.

   Le markup correspondant vit dans scripts/site-shell/audit-module.html et
   se synchronise par scripts/sync_site_shell.py. Le comportement vit dans
   assets/js/audit-module.js.
   ========================================================================== */

:root {
  --navy: #1B2440;
  --or: #B99044;
  --ivoire: #FAF6EE;
  --pierre: #8A8578;
  /* Variantes pour le TEXTE. Sur l'ivoire, --or ne donne que 2,73:1 et
     --pierre 3,41:1, la ou WCAG demande 4,5:1. Les couleurs de marque
     restent pour les filets, les fonds et le monogramme ; le texte prend
     ces deux variantes, a 5,03:1 et 4,78:1. Audit du 2026-09-04. */
  --or-texte: #87641F;
  --pierre-texte: #726D61;
  --or-soft: rgba(185, 144, 68, .14);
  --navy-soft: rgba(27, 36, 64, .08);
  --ease: cubic-bezier(.22, .8, .24, 1);
}

/* ---------- Animations utilisees par le module ---------- */
@keyframes stepIn {
  from { opacity: 0; transform: translateY(16px) }
  to   { opacity: 1; transform: none }
}
@keyframes fadeIn { to { opacity: 1 } }

/* ---------- Boutons ----------
   Le module contient deux boutons (Analyser, Me l'envoyer par email). La
   famille .btn n'etait definie que dans le <style> de l'accueil : elle
   descend ici, sinon le module serait nu sur toute autre page. */
.btn {
  display: inline-flex; align-items: center; gap: .7rem; text-decoration: none;
  font-size: .86rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  padding: 1rem 1.9rem; border-radius: 999px; position: relative; overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease);
}
.btn--primary { background: var(--navy); color: var(--ivoire) }
.btn--primary::before {
  content: ""; position: absolute; inset: 0; background: var(--or); z-index: -1;
  transform: translateY(101%); transition: transform .4s var(--ease);
}
.btn--primary:hover::before { transform: translateY(0) }
.btn--ghost { border: 1px solid var(--navy-soft); color: var(--navy) }
.btn--ghost:hover { border-color: var(--or-texte) }
.btn .arrow { transition: transform .35s var(--ease) }
.btn:hover .arrow { transform: translateX(5px) }

/* ---------- Le cadre du module ---------- */
.diag__module {
  background: var(--ivoire); color: var(--navy); border-radius: 22px;
  padding: 2.2rem 2rem 2.6rem; position: relative; overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .5);
}
/* Le module garde un fond : c'est une zone de saisie posee sur le hero, ou
   passe l'objet en verre. Sans lui, les champs deviendraient illisibles.
   Il est seulement adouci. */
.hero__audit .diag__module,
.diag__module {
  border: 1px solid rgba(27, 36, 64, 0.08);
  box-shadow: 0 26px 60px -44px rgba(27, 36, 64, 0.32);
}

/* ---------- Questions et champs ---------- */
.diag__q { font-size: 1.15rem; font-weight: 400; margin-bottom: 1.4rem; line-height: 1.4 }
.diag__q span {
  display: block; font-size: .72rem; letter-spacing: .22em;
  color: var(--or-texte); margin-bottom: .5rem;
}
.diag__q .l {
  display: block; font-size: inherit; letter-spacing: normal; color: inherit; margin-bottom: 0;
}
.diag__input {
  font-family: inherit; font-weight: 300; font-size: .95rem; color: var(--navy);
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--navy-soft);
  padding: .8rem 0; margin-bottom: .4rem; outline: none; transition: border-color .3s var(--ease);
}
.diag__input:focus { border-color: var(--or-texte) }
.diag__consent {
  display: flex; gap: .6rem; align-items: flex-start; font-size: .78rem; color: var(--pierre-texte);
  margin: 1rem 0 1.5rem; cursor: pointer;
}
.diag__consent input { accent-color: var(--or-texte); margin-top: .2rem }
.diag__done-title { font-size: 1.05rem; font-weight: 400; margin-bottom: 1.2rem }
.diag__done-title em { font-style: normal; font-size: .8rem; color: var(--pierre-texte) }
.diag__report { display: grid; gap: .9rem; border-left: 2px solid var(--or); padding-left: 1.2rem }
.diag__report p { font-size: .9rem; color: var(--navy) }
.diag__report b { font-weight: 400 }

/* ---------- Les 4 etapes du module ---------- */
.audit__state { display: none; animation: stepIn .5s var(--ease) }
.audit__state.is-active { display: block }
.audit__row { display: flex; gap: .7rem; align-items: stretch; flex-wrap: wrap }
.audit__row .diag__input { flex: 1; min-width: 200px; margin-bottom: 0 }
.audit__go, .audit__row .btn { border: none; cursor: pointer; font-family: inherit }
.audit__hint { font-size: .78rem; color: var(--pierre-texte); margin-top: .9rem; text-wrap: balance }
/* A l'etape 1, le module est centre : la question et la mention sous le champ
   doivent l'etre aussi. Ces deux selecteurs vont ensemble, l'un sans l'autre
   fait passer le titre a gauche. */
.audit__state[data-state="start"] .diag__q,
.audit__state[data-state="start"] .audit__hint { text-align: center }

/* Mention d'information sous le formulaire, exigee par le RGPD : le visiteur
   doit savoir a quoi sert son adresse avant de la donner.
   Corrige le 2026-09-04 : ces deux regles etaient tombees DANS la media
   query max-width:479px, donc la mention s'affichait en 16px navy sur
   desktop, au meme poids que le texte du formulaire. Verifie au navigateur
   avant et apres. */
.audit__mention {
  margin-top: .6rem; font-size: .78rem; line-height: 1.5; color: var(--pierre-texte);
}
.audit__mention a {
  color: var(--or-texte); text-decoration: underline; text-underline-offset: .15em;
}

@media (max-width: 479px) {
  .audit__state[data-state="start"] { text-align: center }
  .audit__state[data-state="start"] .audit__url { text-align: center }
  .audit__state[data-state="start"] .audit__row { justify-content: center }
  .audit__state[data-state="start"] .diag__q { font-size: .98rem }
}

/* ---------- Etape 2 : l'analyse en cours ---------- */
.audit__steps { display: grid; gap: .55rem; margin: 1.2rem 0 1.4rem }
.audit__step {
  font-size: .88rem; color: var(--pierre-texte); opacity: .35;
  transition: opacity .4s var(--ease); padding-left: 1.3rem; position: relative;
}
.audit__step::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 8px; height: 8px;
  border: 1.5px solid var(--or); border-radius: 50%;
}
.audit__step.is-on { opacity: 1; color: var(--navy) }
.audit__step.is-done { opacity: .75 }
.audit__step.is-done::before { background: var(--or) }
.audit__loader { display: flex; justify-content: center; padding: .2rem 0 }

/* ---------- Etape 3 : le score ---------- */
.audit__score { position: relative; width: 100%; max-width: 212px; margin: 0 auto .6rem }
.audit__score svg { width: 100%; height: auto; display: block; overflow: visible }
.gauge__zone { fill: none; stroke-width: 9; stroke-linecap: butt }
.gauge__zone.is-bas { stroke: rgba(139, 58, 34, .34) }
.gauge__zone.is-moyen { stroke: rgba(185, 144, 68, .42) }
.gauge__zone.is-haut { stroke: rgba(31, 91, 58, .32) }
.audit__score-zone {
  text-align: center; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  margin-top: .25rem; color: var(--pierre-texte); min-height: 1em;
}
.audit__ring {
  fill: none; stroke: var(--or); stroke-width: 4; stroke-linecap: round;
  transition: stroke-dashoffset 1.4s var(--ease), stroke .4s;
}
.gauge__ticks line { stroke: var(--pierre); stroke-width: 1.4; opacity: .5 }
.gauge__ticks line.is-major { stroke: var(--navy); stroke-width: 2; opacity: .65 }
/* L'aiguille depasse legerement sa cible puis revient : c'est un cadran
   physique, pas une barre de progression. Ne pas remplacer par --ease. */
.gauge__needle {
  fill: var(--navy); transform-box: view-box; transform-origin: 100px 104px;
  transform: rotate(-90deg); transition: transform 1.5s cubic-bezier(.28, 1.12, .42, 1);
}
.gauge__pivot { fill: var(--navy) }
.gauge__pivot-dot { fill: var(--or) }
.audit__score-num {
  display: flex; align-items: baseline; justify-content: center; gap: .15rem; margin-top: .1rem;
}
.audit__score-num b { font-weight: 400; font-size: 2rem; color: var(--navy); line-height: 1 }
.audit__score-num small { color: var(--pierre-texte); font-size: .8rem }
.audit__verdict { text-align: center; font-size: .95rem; margin-bottom: 1.2rem }
.audit__bars { display: grid; gap: .55rem; margin-bottom: 1.2rem }
.audit__bar-row {
  display: grid; grid-template-columns: 9.5rem 1fr 2.2rem; gap: .7rem;
  align-items: center; font-size: .82rem;
}
.audit__bar-row i {
  display: block; height: 7px; background: var(--navy-soft);
  border-radius: 99px; overflow: hidden; font-style: normal;
}
.audit__bar-row b {
  display: block; height: 100%; width: 0; border-radius: 99px; transition: width .9s var(--ease);
}
.audit__bar-row em { font-style: normal; font-weight: 400; text-align: right }
.audit__prio { margin-bottom: 1.3rem }
.audit__prio-title {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--or-texte); margin-bottom: .5rem;
}
.audit__prio-title span {
  display: block; margin-top: .3rem; color: var(--pierre-texte);
  letter-spacing: .06em; text-transform: none; font-size: .95em;
}
.audit__prio-item { font-size: .88rem; margin: .3rem 0; display: flex; gap: .6rem; align-items: baseline }
.audit__prio-item i {
  width: 8px; height: 8px; border: 1.5px solid var(--or); border-radius: 50%;
  flex: none; translate: 0 -1px;
}
.audit__prio-item span { color: var(--pierre-texte); font-size: .78rem }
.audit__mail-title { font-size: .92rem; margin-bottom: .8rem }
.audit__mail-input { width: 100% }
.audit__mail-go { width: 100%; justify-content: center }

/* ---------- Test 2 : la mesure Google ---------- */
.audit__phase2-note {
  font-size: .82rem; color: var(--pierre-texte); margin-bottom: .8rem; line-height: 1.5;
}
.audit__psi { margin-bottom: 1.3rem }
.audit__psi-wait { opacity: 0; animation: fadeIn .6s var(--ease) forwards }
.audit__psi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem }
.audit__psi-cell {
  text-align: center; border: 1px solid var(--navy-soft); border-radius: 12px; padding: .7rem .3rem;
  opacity: 0; transform: translateY(7px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.audit__psi-cell.is-on { opacity: 1; transform: none }
.audit__psi-cell b { display: block; font-weight: 400; font-size: 1.35rem }
.audit__psi-cell span { font-size: .68rem; color: var(--pierre-texte) }

@media (max-width: 560px) {
  .audit__psi-grid { grid-template-columns: repeat(2, 1fr) }
  .audit__bar-row { grid-template-columns: 7rem 1fr 2rem }
}

@media (prefers-reduced-motion: reduce) {
  .audit__ring, .gauge__needle { transition-duration: .01ms }
  .audit__psi-cell { transition-duration: .01ms }
}