@charset "UTF-8";
/*------------------------------------*\
///////////////////////////////////////
///////////////////////////////////////

    ANALYSEUR PUBLIC

///////////////////////////////////////
///////////////////////////////////////
\*------------------------------------*/
/*
 * Pages « Analyser un site » (page_analyseur.php) et « Le barème de la note »
 * (page_bareme.php), chargée sur elles seules (inc/analyseur.php).
 *
 * Compilée à part en css/analyseur.css (npx sass --no-source-map
 * sass/analyseur.scss css/analyseur.css) : style.css n'est pas touché. Couleurs et
 * polices du thème (sass/common.scss) : bleu nuit #112138, jaune #F9B964,
 * Satoshi. Les panneaux clairs reprennent le crème et le bleu clair des
 * pages du site.
 *
 * Mécanique reprise de l'analyseur de hauban.net : un seul état affiché,
 * porté par data-etat sur <main> ; jauge pilotée par data-jauge.
 *
 * Points de rupture : 600, 768 (celui du thème), 960 (la jauge), 1024, 1280.
 */
#primary.analyseur {
  --nuit: #112138;
  --panneau: #182A47;
  --case: #2B3F60;
  --filet_sombre: #2E4263;
  --jaune: #F9B964;
  --jaune_survol: #F8AD4A;
  --creme: #F7F6F2;
  --bleu_clair: #E8EEF8;
  --filet_clair: #E4E1D6;
  --encre: #112138;
  --encre_douce: #55607A;
  --clair_fort: #DCE2EC;
  --clair_doux: #A9B4C6;
  --erreur_sombre: #FFC9A8;
  --erreur_claire: #A33124;
  /* Couleurs des notes, de A à E, et de leur lettre. */
  --note_a: #1E6E46;
  --note_b: #5E9C55;
  --note_c: #E3B23C;
  --note_d: #F2762E;
  --note_e: #A33124;
  --rayon: 24px;
  --rayon_petit: 16px;
  --curseur: url(../images/pixel.svg) 7.5 7.5, pointer;
  display: block;
  padding-top: 112px;
  color: #fff;
  font-family: "Satoshi-Regular", sans-serif;
  font-weight: 400;
  /* Le bandeau démarre sous l'en-tête fixe du thème. */
}
@media (min-width: 769px) {
  #primary.analyseur {
    padding-top: 140px;
  }
}

/* Le thème espace chaque paragraphe et grossit les intertitres : la page
   règle les siens. Les règles commencent par l'identifiant de <main>, qui
   prime sur celles du thème (body main …). */
#primary.analyseur p,
#primary.analyseur h1,
#primary.analyseur h2,
#primary.analyseur h3,
#primary.analyseur dl,
#primary.analyseur dd,
#primary.analyseur ol,
#primary.analyseur ul {
  margin: 0;
}

#primary.analyseur h2 {
  font-size: inherit;
  font-family: inherit;
}

/* Les listes du thème (body main ul li, body main ol li) ont une puce carrée
   ou un numéro, un retrait et un intervalle : la page dessine les siennes.
   L'identifiant de <main> prime sur leurs quatre :not(). */
#primary.analyseur li {
  display: block;
  margin-top: 0;
  padding-left: 0;
}
#primary.analyseur li::before {
  content: none;
}

#primary.analyseur ol {
  padding: 0;
}

@media (max-width: 768px) {
  #primary.analyseur .wrapper {
    width: calc(100% - 32px);
  }
}

/* Un seul état de la page est affiché : celui que porte data-etat sur
   <main>. Les blocs propres à un ou plusieurs états les nomment dans
   data-pour. */
#primary.analyse[data-etat=formulaire] [data-pour]:not([data-pour~=formulaire]),
#primary.analyse[data-etat=attente] [data-pour]:not([data-pour~=attente]),
#primary.analyse[data-etat=resultat] [data-pour]:not([data-pour~=resultat]),
#primary.analyse[data-etat=sans_note] [data-pour]:not([data-pour~=sans_note]),
#primary.analyse[data-etat=echec] [data-pour]:not([data-pour~=echec]) {
  display: none;
}

#primary.analyse[data-etat=echec] {
  padding-bottom: 96px;
}

/*------------------------------------*\
    TITRES ET BOUTONS
\*------------------------------------*/
/* Deux graisses : la première ligne en appui, la seconde en jaune sur le
   bleu nuit, en léger sur les panneaux clairs. */
#primary.analyseur .fort {
  font-family: "Satoshi-Bold", sans-serif;
  font-weight: 700;
}

#primary.analyseur .doux {
  font-family: "Satoshi-Light", sans-serif;
  font-weight: 300;
}

#primary.analyseur .analyse_h2 {
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.15;
  color: inherit;
}
#primary.analyseur .analyse_h2 span {
  display: block;
}

#primary.analyseur .analyse_h2.moyen {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
}

/* Sur le bleu nuit, la seconde ligne passe au jaune, en graisse moyenne. */
#primary.analyseur .analyse_titre .doux,
#primary.analyseur .analyse_points .doux,
#primary.analyseur .analyse_volets_formulaire .doux,
#primary.analyseur .bareme_criteres > .wrapper > .analyse_h2 .doux {
  font-family: "Satoshi-Medium", sans-serif;
  font-weight: 500;
  color: var(--jaune);
}

/* Bouton jaune du thème (.bouton.jaune) : texte bleu nuit, flèche à droite. */
#primary.analyseur .analyse_bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 56px;
  padding: 12px 28px;
  border: 0;
  border-radius: 2px;
  background: var(--jaune);
  color: var(--nuit);
  font-family: "Satoshi-Medium", sans-serif;
  font-size: 17px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: var(--curseur);
  transition: background-color 0.3s;
  /* En attente du jeton anti-robot ou de la réponse de l'API : le libellé
     devient « Vérification… ». */
}
#primary.analyseur .analyse_bouton::after {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: url(../images/arrow_bouton.svg) 50% 50% no-repeat;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
#primary.analyseur .analyse_bouton:hover {
  background: var(--jaune_survol);
  color: var(--nuit);
}
#primary.analyseur .analyse_bouton:hover::after {
  transform: rotate(45deg);
}
#primary.analyseur .analyse_bouton:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
#primary.analyseur .analyse_bouton[aria-disabled=true] {
  opacity: 0.7;
  cursor: progress;
}
#primary.analyseur .analyse_bouton[aria-disabled=true]::after {
  display: none;
}

/* Lien dans un texte courant. */
#primary.analyseur a.lien_texte {
  color: inherit;
  font-family: "Satoshi-Medium", sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#primary.analyseur a.lien_texte:hover {
  color: inherit;
  text-decoration-thickness: 2px;
}

/* Liens seuls, sur le bleu nuit : soulignés de jaune. Le bouton « Analyser
   un autre site » est habillé comme eux. */
#primary.analyseur .lien_souligne {
  display: inline-block;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: "Satoshi-Medium", sans-serif;
  font-size: 17px;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: var(--jaune);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  cursor: var(--curseur);
}
#primary.analyseur .lien_souligne:hover {
  color: var(--jaune);
}
#primary.analyseur .lien_souligne:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/*------------------------------------*\
    BANDEAU
\*------------------------------------*/
/* Panneau à grands coins arrondis, un ton au-dessus du bleu nuit de la page.
   La jauge se mesure au panneau : cqw. */
#primary.analyseur .analyse_panneau {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  padding: 40px 22px 36px;
  border-radius: var(--rayon_petit);
  background: var(--panneau);
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_panneau {
    padding: 56px 48px 52px;
    border-radius: var(--rayon);
  }
}
@media (min-width: 960px) {
  #primary.analyseur .analyse_panneau {
    min-height: 560px;
    padding: 72px 64px 72px;
  }
}

@media (min-width: 960px) {
  #primary.bareme .analyse_panneau {
    min-height: 480px;
  }
}

/* Le texte passe devant la jauge. */
#primary.analyseur .analyse_contenu {
  position: relative;
  z-index: 1;
}

/* Le texte et le formulaire s'arrêtent 24 px avant le bord gauche du cadran.
   La jauge a la largeur du contenu (100cqw) et s'ancre au bord droit du
   panneau : elle commence donc 64 px (la marge) après le bord gauche du
   contenu, et le cadran occupe ses 43 % de droite ((1280 - 1060 + 330) /
   1280). */
@media (min-width: 960px) {
  #primary.analyseur .bandeau_etat {
    max-width: min(640px, 57cqw + 64px - 24px);
  }
}

#primary.analyseur .analyse_titre {
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.06;
  color: #fff;
  /* Le titre reçoit le focus quand l'état change. */
}
#primary.analyseur .analyse_titre span {
  display: block;
}
#primary.analyseur .analyse_titre:focus {
  outline: none;
}
#primary.analyseur .analyse_titre:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 6px;
  border-radius: 4px;
}

#primary.analyseur .analyse_intro {
  max-width: 560px;
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--clair_fort);
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_intro {
    margin-top: 24px;
    font-size: 19px;
  }
}

#primary.analyseur .analyse_surtitre {
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--clair_doux);
}

#primary.analyseur .bareme_appel,
#primary.analyseur .echec_appel {
  margin-top: 30px;
}

/*------------------------------------*\
    JAUGE
\*------------------------------------*/
/* Ancrée en bas à droite du panneau, qui la coupe. Elle rétrécit avec lui :
   son panneau est un conteneur de requêtes. */
#primary.analyseur .jauge {
  display: none;
}
@media (min-width: 960px) {
  #primary.analyseur .jauge {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(100cqw, 1280px);
    height: auto;
    pointer-events: none;
  }
}

#primary.analyseur .jauge_fond {
  fill: #1F3456;
}

#primary.analyseur .jauge_case {
  fill: var(--case);
  transition: fill 0.4s;
}

#primary.analyseur .jauge_lettre {
  font-family: "Satoshi-Bold", sans-serif;
  font-weight: 700;
  fill: #fff;
  transition: fill 0.4s;
}

/* La case de la note prend sa couleur ; en légende, les cinq. */
#primary.analyseur .jauge:is([data-jauge=a], [data-jauge=legende]) .jauge_case[data-note=A] {
  fill: var(--note_a);
}

#primary.analyseur .jauge:is([data-jauge=b], [data-jauge=legende]) .jauge_case[data-note=B] {
  fill: var(--note_b);
}

#primary.analyseur .jauge:is([data-jauge=c], [data-jauge=legende]) .jauge_case[data-note=C] {
  fill: var(--note_c);
}

#primary.analyseur .jauge:is([data-jauge=d], [data-jauge=legende]) .jauge_case[data-note=D] {
  fill: var(--note_d);
}

#primary.analyseur .jauge:is([data-jauge=e], [data-jauge=legende]) .jauge_case[data-note=E] {
  fill: var(--note_e);
}

/* Sur le jaune et l'orange, la lettre passe en bleu nuit. */
#primary.analyseur .jauge:is([data-jauge=c], [data-jauge=legende]) .jauge_lettre[data-note=C],
#primary.analyseur .jauge:is([data-jauge=d], [data-jauge=legende]) .jauge_lettre[data-note=D] {
  fill: var(--nuit);
}

/* L'aiguille tourne autour du moyeu. Au repos, elle est couchée contre la
   butée ; sur une note, elle se pose au milieu de la case. */
#primary.analyseur .jauge_aiguille {
  transform-box: view-box;
  transform-origin: var(--moyeu);
  transform: rotate(var(--repos));
  transition: transform 1s cubic-bezier(0.45, 0, 0.25, 1);
}

#primary.analyseur .jauge[data-jauge=a] .jauge_aiguille {
  transform: rotate(var(--a));
}

#primary.analyseur .jauge[data-jauge=b] .jauge_aiguille {
  transform: rotate(var(--b));
}

#primary.analyseur .jauge[data-jauge=c] .jauge_aiguille {
  transform: rotate(var(--c));
}

#primary.analyseur .jauge[data-jauge=d] .jauge_aiguille {
  transform: rotate(var(--d));
}

#primary.analyseur .jauge[data-jauge=e] .jauge_aiguille {
  transform: rotate(var(--e));
}

/* Pendant l'analyse, l'aiguille balaie l'échelle. Elle quitte d'abord la
   butée. */
#primary.analyseur .jauge[data-jauge=mesure] .jauge_aiguille {
  animation: jauge_depart 0.6s cubic-bezier(0.45, 0, 0.25, 1), jauge_mesure 5s cubic-bezier(0.45, 0, 0.25, 1) 0.6s infinite;
}

/* La butée n'est dessinée qu'au repos. */
#primary.analyseur .jauge_butee {
  transition: opacity 0.3s;
}

#primary.analyseur .jauge:not([data-jauge=repos]):not([data-jauge=legende]) .jauge_butee {
  opacity: 0;
}

/* Sans mouvement : pas de balayage ni de transition. L'aiguille reste au
   repos pendant l'analyse, puis se pose directement sur la note. */
@media (prefers-reduced-motion: reduce) {
  #primary.analyseur .jauge_aiguille,
  #primary.analyseur .jauge[data-jauge=mesure] .jauge_aiguille {
    animation: none;
    transition: none;
  }
  #primary.analyseur .jauge_case,
  #primary.analyseur .jauge_lettre,
  #primary.analyseur .jauge_butee {
    transition: none;
  }
}
@keyframes jauge_depart {
  from {
    transform: rotate(var(--repos));
  }
  to {
    transform: rotate(var(--m1));
  }
}
@keyframes jauge_mesure {
  0%, 100% {
    transform: rotate(var(--m1));
  }
  20% {
    transform: rotate(var(--m2));
  }
  36% {
    transform: rotate(var(--m3));
  }
  55% {
    transform: rotate(var(--m4));
  }
  72% {
    transform: rotate(var(--m5));
  }
  88% {
    transform: rotate(var(--m6));
  }
}
/*------------------------------------*\
    TUILE D'UNE NOTE
\*------------------------------------*/
/* La lettre sur sa couleur ; « ? » sur le bleu clair sans note. */
#primary.analyseur .note_tuile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--bleu_clair);
  color: var(--encre_douce);
  font-family: "Satoshi-Bold", sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
}
#primary.analyseur .note_tuile[data-note=A] {
  background: var(--note_a);
  color: #fff;
}
#primary.analyseur .note_tuile[data-note=B] {
  background: var(--note_b);
  color: #fff;
}
#primary.analyseur .note_tuile[data-note=C] {
  background: var(--note_c);
  color: var(--nuit);
}
#primary.analyseur .note_tuile[data-note=D] {
  background: var(--note_d);
  color: var(--nuit);
}
#primary.analyseur .note_tuile[data-note=E] {
  background: var(--note_e);
  color: #fff;
}

/*------------------------------------*\
    FORMULAIRES
\*------------------------------------*/
/* Champ et bouton sur le bleu nuit du bandeau : adresse du site, et email
   sous la note. */
#primary.analyseur .analyse_form {
  margin-top: 32px;
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_form {
    margin-top: 36px;
  }
}
#primary.analyseur .analyse_form label {
  display: block;
  margin-bottom: 10px;
  font-family: "Satoshi-Medium", sans-serif;
  font-size: 15px;
  color: #fff;
}

#primary.analyseur .analyse_form_ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
#primary.analyseur .analyse_form_ligne input {
  flex: 1 1 260px;
  min-width: 0;
  height: 60px;
  padding: 0 22px;
  border: 0;
  border-radius: 2px;
  background: #fff;
  color: var(--nuit);
  font-family: "Satoshi-Regular", sans-serif;
  font-size: 18px;
}
#primary.analyseur .analyse_form_ligne input::placeholder {
  color: var(--encre_douce);
}
#primary.analyseur .analyse_form_ligne input:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 3px;
}
#primary.analyseur .analyse_form_ligne .analyse_bouton {
  flex: 1 0 auto;
  min-height: 60px;
}
@media (min-width: 600px) {
  #primary.analyseur .analyse_form_ligne .analyse_bouton {
    flex-grow: 0;
  }
}

#primary.analyseur .analyse_mention {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--clair_doux);
}

/* Vérification anti-robot, sous le bouton. Le widget Turnstile est invisible
   tant que Cloudflare n'a pas besoin du visiteur : le bloc ne prend de place
   que s'il faut cocher la case (classe posée par analyseur.js). */
#primary.analyseur .analyse_verification {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
#primary.analyseur .analyse_verification.visible {
  margin-top: 16px;
}

#primary.analyseur .analyse_consigne {
  font-family: "Satoshi-Medium", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: #fff;
}
#primary.analyseur .analyse_consigne:empty {
  display: none;
}

#primary.analyseur .analyse_robot {
  max-width: 100%;
}

/* Message d'un refus, tel que l'API l'écrit, sous le champ concerné. */
#primary.analyseur .analyse_erreur {
  margin-top: 12px;
  font-family: "Satoshi-Medium", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--erreur_sombre);
}
#primary.analyseur .analyse_erreur[hidden] {
  display: none;
}

/*------------------------------------*\
    EN COURS
\*------------------------------------*/
/* L'adresse demandée : une seule graisse, coupée où il faut si elle est
   longue. */
#primary.analyseur .analyse_titre.adresse {
  font-family: "Satoshi-Bold", sans-serif;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

#primary.analyseur .etat_attente .analyse_intro {
  margin-top: 16px;
  font-size: 17px;
}

#primary.analyseur .attente_ordre {
  margin-top: 26px;
  font-size: 15px;
  color: var(--clair_doux);
}

#primary.analyseur .attente_etapes {
  max-width: 560px;
  margin-top: 8px;
  padding: 0;
  list-style: none;
}
#primary.analyseur .attente_etapes li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 0;
}
#primary.analyseur .attente_etapes li + li {
  border-top: 1px solid var(--filet_sombre);
}

#primary.analyseur .etape_titre {
  font-family: "Satoshi-Bold", sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
}

#primary.analyseur .etape_texte {
  font-size: 15px;
  line-height: 1.5;
  color: var(--clair_fort);
}

#primary.analyseur .analyse_attente {
  padding: 48px 0 96px;
}
#primary.analyseur .analyse_attente p {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--clair_fort);
}

/*------------------------------------*\
    RÉSULTAT, DANS LE BANDEAU
\*------------------------------------*/
/* Sous 960 px : la tuile et la date côte à côte, puis le titre. Au-delà : la
   date, puis la tuile à gauche du titre. */
#primary.analyseur .resultat_tete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "note date" "titre titre";
  align-items: center;
  gap: 22px 18px;
}
@media (min-width: 960px) {
  #primary.analyseur .resultat_tete {
    grid-template-areas: "date date" "note titre";
    gap: 22px 32px;
  }
}

#primary.analyseur .resultat_date {
  grid-area: date;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--clair_doux);
}
@media (min-width: 960px) {
  #primary.analyseur .resultat_date {
    font-size: 16px;
  }
}

#primary.analyseur .resultat_note {
  grid-area: note;
}

#primary.analyseur .note_tuile.grande {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  font-size: 64px;
}
@media (min-width: 960px) {
  #primary.analyseur .note_tuile.grande {
    width: 120px;
    height: 120px;
    border-radius: 26px;
    font-size: 80px;
  }
}
@media (min-width: 1280px) {
  #primary.analyseur .note_tuile.grande {
    width: 140px;
    height: 140px;
    border-radius: 30px;
    font-size: 96px;
  }
}

/* En mobile, les deux graisses se suivent sur la même ligne. */
#primary.analyseur .resultat_titre {
  grid-area: titre;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
}
#primary.analyseur .resultat_titre span {
  display: inline;
}
@media (min-width: 960px) {
  #primary.analyseur .resultat_titre span {
    display: block;
  }
}

#primary.analyseur .resultat_echelle,
#primary.analyseur .resultat_verdict {
  max-width: 620px;
  margin-top: 24px;
  font-size: 16.5px;
}
@media (min-width: 960px) {
  #primary.analyseur .resultat_echelle,
  #primary.analyseur .resultat_verdict {
    margin-top: 28px;
    font-size: 17px;
  }
}

/* Sous 960 px, la barre de A à E dit la même chose que la phrase de
   l'échelle : la phrase ne reste que pour les lecteurs d'écran. */
@media (max-width: 959px) {
  #primary.analyseur .resultat_echelle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* Barre de A à E : remplace la jauge quand elle n'est pas affichée. */
#primary.analyseur .resultat_barre {
  margin-top: 26px;
}
@media (min-width: 960px) {
  #primary.analyseur .resultat_barre {
    display: none;
  }
}

#primary.analyseur .barre_cases {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  /* La note du site : plus haute, sur sa couleur. */
}
#primary.analyseur .barre_cases span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  height: 36px;
  border-radius: 10px;
  background: var(--case);
  font-family: "Satoshi-Bold", sans-serif;
  font-size: 15px;
  line-height: 1;
  color: var(--clair_fort);
}
#primary.analyseur .barre_cases span.courante {
  height: 50px;
  border-radius: 12px;
  font-size: 22px;
}
#primary.analyseur .barre_cases span[data-note=A].courante {
  background: var(--note_a);
  color: #fff;
}
#primary.analyseur .barre_cases span[data-note=B].courante {
  background: var(--note_b);
  color: #fff;
}
#primary.analyseur .barre_cases span[data-note=C].courante {
  background: var(--note_c);
  color: var(--nuit);
}
#primary.analyseur .barre_cases span[data-note=D].courante {
  background: var(--note_d);
  color: var(--nuit);
}
#primary.analyseur .barre_cases span[data-note=E].courante {
  background: var(--note_e);
  color: #fff;
}

#primary.analyseur .barre_legende {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--clair_doux);
}
#primary.analyseur .barre_legende span:last-child {
  text-align: right;
}

/* Demande du rapport par email, sous la note. La confirmation prend la place
   du formulaire, sur fond blanc comme le champ. */
#primary.analyseur .resultat_rapport_haut .analyse_form[hidden] {
  display: none;
}
#primary.analyseur .resultat_rapport_haut .rapport_envoye {
  max-width: 560px;
  margin-top: 32px;
  padding: 18px 20px;
  border-radius: 2px;
  background: #fff;
  font-family: "Satoshi-Medium", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--nuit);
}
#primary.analyseur .resultat_rapport_haut .rapport_envoye[hidden] {
  display: none;
}

/*------------------------------------*\
    SOUS LE FORMULAIRE
\*------------------------------------*/
/* Les quatre points notés, puis les cinq volets sans note : sur le bleu nuit,
   titre à gauche, liste à droite. */
#primary.analyseur .analyse_points,
#primary.analyseur .analyse_volets_formulaire {
  padding: 72px 0 56px;
}
@media (min-width: 1024px) {
  #primary.analyseur .analyse_points,
  #primary.analyseur .analyse_volets_formulaire {
    padding: 104px 0 72px;
  }
}
#primary.analyseur .analyse_points .points_grille,
#primary.analyseur .analyse_volets_formulaire .points_grille {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 72px;
}
#primary.analyseur .analyse_points .points_intro,
#primary.analyseur .analyse_volets_formulaire .points_intro {
  flex: 1 1 340px;
}
#primary.analyseur .analyse_points .points_texte,
#primary.analyseur .analyse_volets_formulaire .points_texte {
  margin: 22px 0 10px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--clair_fort);
}
#primary.analyseur .analyse_points .points_liste,
#primary.analyseur .analyse_volets_formulaire .points_liste {
  flex: 1.5 1 460px;
  border-top: 2px solid var(--jaune);
}
#primary.analyseur .analyse_points .points_liste div,
#primary.analyseur .analyse_volets_formulaire .points_liste div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--filet_sombre);
}
#primary.analyseur .analyse_points .points_liste dt,
#primary.analyseur .analyse_volets_formulaire .points_liste dt {
  flex: 0 0 230px;
  font-family: "Satoshi-Bold", sans-serif;
  font-size: 20px;
  line-height: 1.3;
  color: #fff;
}
#primary.analyseur .analyse_points .points_liste dd,
#primary.analyseur .analyse_volets_formulaire .points_liste dd {
  flex: 1 1 280px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--clair_fort);
}

#primary.analyseur .analyse_volets_formulaire {
  padding-top: 0;
}
@media (min-width: 1024px) {
  #primary.analyseur .analyse_volets_formulaire {
    padding-top: 0;
  }
}

/*------------------------------------*\
    PANNEAU CRÈME
\*------------------------------------*/
/* « Les limites de l'analyse », « La note du site » : titre à gauche, texte
   courant à droite. */
#primary.analyseur .analyse_clair {
  padding-bottom: 72px;
}
#primary.analyseur .analyse_clair .panneau_clair {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 64px;
  padding: 32px 24px;
  border-radius: var(--rayon_petit);
  background: var(--creme);
  color: var(--encre);
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_clair .panneau_clair {
    padding: 44px 48px;
    border-radius: var(--rayon);
  }
}
#primary.analyseur .analyse_clair .analyse_h2 {
  flex: 1 1 260px;
}
#primary.analyseur .analyse_clair .panneau_textes {
  flex: 2 1 480px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#primary.analyseur .analyse_clair .panneau_textes p {
  font-size: 17px;
  line-height: 1.6;
}
#primary.analyseur .analyse_clair .panneau_textes .panneau_mention {
  font-size: 15px;
  line-height: 1.55;
  color: var(--encre_douce);
}
#primary.analyseur .analyse_clair a.lien_texte:focus-visible {
  outline: 3px solid var(--nuit);
  outline-offset: 3px;
}

#primary.analyseur .analyse_limites {
  padding-bottom: 104px;
}

/*------------------------------------*\
    RÉSULTAT, SOUS LE BANDEAU
\*------------------------------------*/
/* La note critère par critère sur le crème, le rapport complet par email sur
   le bleu clair, côte à côte. */
#primary.analyseur .analyse_resultat {
  padding: 32px 0 18px;
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_resultat {
    padding: 48px 0 32px;
  }
}
#primary.analyseur .analyse_resultat .resultat_grille {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_resultat .resultat_grille {
    gap: 32px;
  }
}

#primary.analyseur .resultat_criteres,
#primary.analyseur .resultat_rapport {
  min-width: 0;
  padding: 28px 22px 26px;
  border-radius: var(--rayon_petit);
  color: var(--encre);
}
@media (min-width: 769px) {
  #primary.analyseur .resultat_criteres,
  #primary.analyseur .resultat_rapport {
    padding: 40px 44px 36px;
    border-radius: var(--rayon);
  }
}

#primary.analyseur .resultat_criteres {
  flex: 1.25 1 440px;
  background: var(--creme);
}
#primary.analyseur .resultat_criteres .analyse_h2 {
  margin-bottom: 8px;
}

#primary.analyseur .criteres_liste li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
}
@media (min-width: 769px) {
  #primary.analyseur .criteres_liste li {
    gap: 18px;
    padding: 18px 0;
  }
}
#primary.analyseur .criteres_liste li + li {
  border-top: 1px solid var(--filet_clair);
}
#primary.analyseur .criteres_liste li .note_tuile {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 20px;
}
@media (min-width: 769px) {
  #primary.analyseur .criteres_liste li .note_tuile {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 23px;
  }
}

#primary.analyseur .critere_nom {
  font-family: "Satoshi-Bold", sans-serif;
  font-size: 16.5px;
  line-height: 1.35;
}
@media (min-width: 769px) {
  #primary.analyseur .critere_nom {
    font-size: 18px;
  }
}

#primary.analyseur .critere_texte {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--encre_douce);
}
@media (min-width: 769px) {
  #primary.analyseur .critere_texte {
    font-size: 16px;
  }
}

/* « Non vérifié » porte plusieurs phrases de l'API (not_seen) : la tuile
   s'aligne sur la première. */
#primary.analyseur .criteres_liste li.non_verifie {
  align-items: flex-start;
}
#primary.analyseur .criteres_liste li.non_verifie .critere_texte + .critere_texte {
  margin-top: 6px;
}

#primary.analyseur .criteres_note {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--encre_douce);
}
#primary.analyseur .criteres_note a.lien_texte {
  color: var(--encre);
}

#primary.analyseur .resultat_rapport {
  flex: 1 1 380px;
  background: var(--bleu_clair);
}

#primary.analyseur .rapport_texte {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.55;
}
@media (min-width: 769px) {
  #primary.analyseur .rapport_texte {
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.6;
  }
}

#primary.analyseur .rapport_form {
  margin-top: 20px;
  /* Sur le bleu clair, la consigne passe en bleu nuit et le widget prend la
     largeur du panneau. */
}
@media (min-width: 769px) {
  #primary.analyseur .rapport_form {
    margin-top: 26px;
  }
}
#primary.analyseur .rapport_form[hidden] {
  display: none;
}
#primary.analyseur .rapport_form label {
  display: block;
  margin-bottom: 8px;
  font-family: "Satoshi-Medium", sans-serif;
  font-size: 15px;
}
#primary.analyseur .rapport_form input {
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 2px solid var(--nuit);
  border-radius: 2px;
  background: #fff;
  color: var(--nuit);
  font-family: "Satoshi-Regular", sans-serif;
  font-size: 17px;
}
#primary.analyseur .rapport_form input::placeholder {
  color: var(--encre_douce);
}
#primary.analyseur .rapport_form input:focus-visible {
  outline: 3px solid var(--nuit);
  outline-offset: 3px;
}
#primary.analyseur .rapport_form .analyse_bouton {
  width: 100%;
  margin-top: 12px;
}
#primary.analyseur .rapport_form .analyse_bouton:focus-visible {
  outline-color: var(--nuit);
}
#primary.analyseur .rapport_form .analyse_verification {
  align-items: stretch;
}
#primary.analyseur .rapport_form .analyse_verification.visible {
  margin-top: 14px;
}
#primary.analyseur .rapport_form .analyse_consigne {
  color: var(--nuit);
}
#primary.analyseur .rapport_form .analyse_erreur {
  margin-top: 10px;
  font-size: 15.5px;
  color: var(--erreur_claire);
}

#primary.analyseur .resultat_rapport .rapport_envoye {
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 2px;
  background: #fff;
  font-family: "Satoshi-Medium", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--nuit);
}
#primary.analyseur .resultat_rapport .rapport_envoye[hidden] {
  display: none;
}

#primary.analyseur .rapport_envoye:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 3px;
}

#primary.analyseur .rapport_mention {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--encre_douce);
}

/*------------------------------------*\
    VOLETS
\*------------------------------------*/
/* Panneau crème sur toute la largeur : une ligne par volet, avec la pastille
   de son état, son nom et sa phrase (écrites par analyseur.js). Masqué sans
   volet. Non vérifié, mesure en cours et tout état inconnu : couleurs
   neutres. */
#primary.analyseur .analyse_volets {
  padding-bottom: 18px;
  /* Titre à gauche, phrase à droite ; l'un sous l'autre sur téléphone. */
  /* Une ligne : pastille, nom (220 px), phrase. Sur téléphone, la pastille
     et le nom sur une ligne, la phrase dessous. En bureau, les lignes
     partagent les colonnes de la liste. */
  /* L'état se lit dans le texte de la pastille ; la couleur l'accompagne. */
  /* Mesure en cours : un anneau ouvert, qui tourne tant que la page relit
     l'analyse. */
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_volets {
    padding-bottom: 32px;
  }
}
#primary.analyseur .analyse_volets[hidden] {
  display: none;
}
#primary.analyseur .analyse_volets .volets_panneau {
  padding: 28px 22px 24px;
  border-radius: var(--rayon_petit);
  background: var(--creme);
  color: var(--encre);
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_volets .volets_panneau {
    padding: 40px 44px 32px;
    border-radius: var(--rayon);
  }
}
#primary.analyseur .analyse_volets .volets_entete {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--filet_clair);
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_volets .volets_entete {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 48px;
    padding-bottom: 24px;
  }
  #primary.analyseur .analyse_volets .volets_entete .analyse_h2 {
    flex: 0 0 auto;
  }
  #primary.analyseur .analyse_volets .volets_entete .analyse_h2 span {
    display: inline;
  }
}
#primary.analyseur .analyse_volets .volets_texte {
  font-size: 15px;
  line-height: 1.55;
  color: var(--encre_douce);
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_volets .volets_texte {
    flex: 0 1 470px;
    font-size: 14.5px;
  }
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_volets .volets_liste {
    display: grid;
    grid-template-columns: minmax(112px, max-content) 220px minmax(0, 1fr);
    column-gap: 24px;
  }
}
#primary.analyseur .analyse_volets .volets_liste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--filet_clair);
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_volets .volets_liste li {
    grid-column: 1/-1;
    grid-template-columns: 112px 220px minmax(0, 1fr);
    grid-template-columns: subgrid;
    gap: 0 24px;
    padding: 20px 0;
  }
}
#primary.analyseur .analyse_volets .volet_etat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bleu_clair);
  font-family: "Satoshi-Bold", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  color: #44546A;
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_volets .volet_etat {
    justify-self: start;
    min-width: 112px;
    min-height: 34px;
    padding: 4px 14px;
    white-space: nowrap;
  }
}
#primary.analyseur .analyse_volets .volet_etat[data-etat=priority] {
  background: #F5D7D3;
  color: #A33124;
}
#primary.analyseur .analyse_volets .volet_etat[data-etat=to_fix] {
  background: #FDE3D2;
  color: #9A4310;
}
#primary.analyseur .analyse_volets .volet_etat[data-etat=to_improve], #primary.analyseur .analyse_volets .volet_etat[data-etat=to_review] {
  background: #FAF0D2;
  color: #6F530C;
}
#primary.analyseur .analyse_volets .volet_etat[data-etat=good] {
  background: #DCEBE2;
  color: #1E6E46;
}
#primary.analyseur .analyse_volets .volet_indicateur {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
}
#primary.analyseur .analyse_volets .volets_liste.en_relecture .volet_indicateur {
  animation: volet_mesure 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  #primary.analyseur .analyse_volets .volets_liste.en_relecture .volet_indicateur {
    animation: none;
  }
}
#primary.analyseur .analyse_volets .volet_nom {
  font-family: "Satoshi-Bold", sans-serif;
  font-size: 16.5px;
  line-height: 1.35;
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_volets .volet_nom {
    font-size: 18px;
  }
}
#primary.analyseur .analyse_volets .volet_texte {
  grid-column: 1/-1;
  font-size: 15px;
  line-height: 1.5;
  color: var(--encre_douce);
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_volets .volet_texte {
    grid-column: auto;
    font-size: 16px;
  }
}
#primary.analyseur .analyse_volets .volets_pied {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--encre_douce);
}

@keyframes volet_mesure {
  to {
    transform: rotate(360deg);
  }
}
/*------------------------------------*\
    INVITATION À L'AUDIT
\*------------------------------------*/
/* La seule grande surface jaune de la page : l'offre. Photo de l'équipe à
   gauche, titre, texte et bouton bleu nuit à droite. Masquée par
   analyseur.js quand le site n'est pas un WordPress. */
#primary.analyseur .analyse_audit {
  padding-bottom: 32px;
  /* Sur le jaune, le bouton passe en bleu nuit, texte blanc. */
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_audit {
    padding-bottom: 48px;
  }
}
#primary.analyseur .analyse_audit[hidden] {
  display: none;
}
#primary.analyseur .analyse_audit .audit_panneau {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 64px;
  padding: 30px 22px 28px;
  border-radius: var(--rayon_petit);
  background: var(--jaune);
  color: var(--nuit);
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_audit .audit_panneau {
    gap: 24px 64px;
    padding: 44px 48px;
    border-radius: var(--rayon);
  }
}
@media (min-width: 1024px) {
  #primary.analyseur .analyse_audit .audit_panneau.avec_photo {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    grid-template-areas: "photo titre" "photo textes";
    align-content: center;
    gap: 20px 56px;
  }
}
#primary.analyseur .analyse_audit .audit_panneau.avec_photo .audit_photo {
  grid-area: photo;
}
#primary.analyseur .analyse_audit .audit_panneau.avec_photo .analyse_h2 {
  grid-area: titre;
  align-self: end;
}
#primary.analyseur .analyse_audit .audit_panneau.avec_photo .audit_textes {
  grid-area: textes;
}
#primary.analyseur .analyse_audit .audit_photo {
  flex: 1 1 100%;
  overflow: hidden;
  border-radius: var(--rayon_petit);
  /* En grand écran, la photo prend la hauteur du texte d'à côté, sans
     l'imposer. */
}
#primary.analyseur .analyse_audit .audit_photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
}
@media (min-width: 1024px) {
  #primary.analyseur .analyse_audit .audit_photo {
    position: relative;
    min-height: 300px;
  }
  #primary.analyseur .analyse_audit .audit_photo img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: center 30%;
  }
}
#primary.analyseur .analyse_audit .analyse_h2 {
  flex: 1 1 260px;
  font-size: clamp(28px, 3vw, 38px);
}
#primary.analyseur .analyse_audit .audit_textes {
  flex: 2 1 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
#primary.analyseur .analyse_audit .audit_textes p {
  font-size: 16px;
  line-height: 1.6;
}
@media (min-width: 769px) {
  #primary.analyseur .analyse_audit .audit_textes p {
    font-size: 17px;
  }
}
#primary.analyseur .analyse_audit .analyse_bouton {
  background: var(--nuit);
  color: #fff;
}
#primary.analyseur .analyse_audit .analyse_bouton::after {
  filter: invert(1);
}
#primary.analyseur .analyse_audit .analyse_bouton:hover {
  background: #233656;
  color: #fff;
}
#primary.analyseur .analyse_audit .analyse_bouton:focus-visible {
  outline-color: var(--nuit);
}
@media (max-width: 768px) {
  #primary.analyseur .analyse_audit .analyse_bouton {
    width: 100%;
  }
}

/*------------------------------------*\
    SUITE
\*------------------------------------*/
#primary.analyseur .analyse_suite {
  padding: 0 0 104px;
}
#primary.analyseur .analyse_suite .suite_liens {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px 32px;
}
@media (min-width: 600px) {
  #primary.analyseur .analyse_suite .suite_liens {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/*------------------------------------*\
    BARÈME DE LA NOTE
\*------------------------------------*/
#primary.bareme .bareme_criteres {
  padding: 72px 0 40px;
  /* Un critère : ce qu'il regarde à gauche, ce que vaut chaque lettre à
     droite, sur le crème. */
}
@media (min-width: 1024px) {
  #primary.bareme .bareme_criteres {
    padding: 104px 0 56px;
  }
}
#primary.bareme .bareme_criteres > .wrapper > .analyse_h2 {
  margin-bottom: 32px;
}
@media (min-width: 1024px) {
  #primary.bareme .bareme_criteres > .wrapper > .analyse_h2 {
    margin-bottom: 40px;
  }
}
#primary.bareme .bareme_criteres .bareme_critere {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 72px;
  padding: 32px 0;
  border-top: 1px solid var(--filet_sombre);
}
@media (min-width: 1024px) {
  #primary.bareme .bareme_criteres .bareme_critere {
    padding: 40px 0;
  }
}
#primary.bareme .bareme_criteres .bareme_critere:first-of-type {
  border-top: 2px solid var(--jaune);
}
#primary.bareme .bareme_criteres .critere_intro {
  flex: 1 1 320px;
}
@media (min-width: 1024px) {
  #primary.bareme .bareme_criteres .critere_intro {
    max-width: 400px;
  }
}
#primary.bareme .bareme_criteres .critere_intro h3 {
  font-family: "Satoshi-Bold", sans-serif;
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.2;
  color: #fff;
}
#primary.bareme .bareme_criteres .critere_intro p {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--clair_fort);
}
#primary.bareme .bareme_criteres .critere_intro .critere_precision {
  font-size: 15px;
  line-height: 1.55;
  color: var(--clair_doux);
}
#primary.bareme .bareme_criteres .critere_notes {
  flex: 1.4 1 420px;
  min-width: 0;
  padding: 10px 20px;
  border-radius: var(--rayon_petit);
  background: var(--creme);
}
@media (min-width: 769px) {
  #primary.bareme .bareme_criteres .critere_notes {
    padding: 10px 28px;
  }
}
#primary.bareme .bareme_criteres .critere_notes li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--encre);
}
@media (min-width: 769px) {
  #primary.bareme .bareme_criteres .critere_notes li {
    font-size: 17.5px;
  }
}
#primary.bareme .bareme_criteres .critere_notes li + li {
  border-top: 1px solid var(--filet_clair);
}

#primary.bareme .bareme_note {
  padding-bottom: 56px;
}

#primary.bareme .bareme_sources {
  padding-bottom: 104px;
}
#primary.bareme .bareme_sources .sources_grille {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 64px;
}
#primary.bareme .bareme_sources h2 {
  flex: 1 1 260px;
  font-family: "Satoshi-Bold", sans-serif;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
}
#primary.bareme .bareme_sources div {
  flex: 2 1 480px;
}
#primary.bareme .bareme_sources p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--clair_fort);
}
#primary.bareme .bareme_sources .sources_date {
  margin-top: 22px;
  font-size: 14.5px;
  color: var(--clair_doux);
}