/* Contrôle technique de site — v1.0.0 (18/08/2026)
   Hérite des tokens du thème. Aucune couleur nouvelle : la page doit appartenir au site.
   Signature reprise du hero : la plaque signalétique navy, ici en plaque de contrôle. */

.cdct {
  background: var(--cd-navy);
  color: var(--cd-white);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}
.cdct__in {
  width: min(100% - (var(--cd-gutter) * 2), 780px);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.cdct__eyebrow {
  font-size: var(--cd-fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cd-yellow);
  margin: 0 0 .75rem;
}
.cdct__titre {
  /* Le thème pose une couleur d'encre sur h1 : on la reprend, le fond est navy. */
  color: var(--cd-white);
  font-size: clamp(2rem, 6.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
}
.cdct__chapo {
  font-size: var(--cd-fs-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 2rem;
  max-width: 52ch;
}

/* ---- Formulaire ---- */
.cdct__label {
  display: block;
  font-size: var(--cd-fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
  margin-bottom: .5rem;
}
.cdct__champ {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.cdct__champ input {
  flex: 1 1 16rem;
  min-width: 0;
  font: inherit;
  font-size: var(--cd-fs-md);
  padding: .95rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: var(--cd-white);
  transition: border-color .2s ease-out, background .2s ease-out;
}
.cdct__champ input::placeholder { color: rgba(255, 255, 255, .42); }
.cdct__champ input:focus-visible {
  outline: 2px solid var(--cd-yellow);
  outline-offset: 2px;
  border-color: transparent;
  background: rgba(255, 255, 255, .1);
}
.cdct__go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: inherit;
  font-weight: 700;
  font-size: var(--cd-fs-sm);
  padding: .95rem 1.5rem;
  border: 0;
  border-radius: 10px;
  background: var(--cd-yellow);
  color: var(--cd-ink);
  cursor: pointer;
  transition: background .2s ease-out, transform .12s ease-out;
}
@media (hover: hover) {
  .cdct__go:hover { background: var(--cd-yellow-hover); }
}
.cdct__go:active { transform: translateY(1px); }
.cdct__go:focus-visible { outline: 2px solid var(--cd-white); outline-offset: 3px; }
.cdct__go[disabled] { opacity: .55; cursor: progress; }
.cdct__go-fleche { transition: transform .2s ease-out; }
@media (hover: hover) {
  .cdct__go:hover .cdct__go-fleche { transform: translateX(2px); }
}
.cdct__aide {
  font-size: var(--cd-fs-xs);
  color: rgba(255, 255, 255, .58);
  margin: .75rem 0 0;
}

/* ---- Attente : l'API met une dizaine de secondes ---- */
.cdct__attente { margin-top: 2.25rem; }
.cdct__jauge {
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.cdct__jauge span {
  display: block;
  height: 100%;
  width: 30%;
  border-radius: 3px;
  background: var(--cd-yellow);
  animation: cdct-glisse 1.6s var(--cd-ease-out, cubic-bezier(.22, .61, .36, 1)) infinite;
}
@keyframes cdct-glisse {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(333%); }
}
.cdct__attente-txt {
  font-size: var(--cd-fs-sm);
  color: rgba(255, 255, 255, .72);
  margin: .85rem 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .cdct__jauge span { animation: none; width: 100%; opacity: .5; }
}

/* ---- Erreur ---- */
.cdct__erreur {
  margin-top: 2.25rem;
  padding: 1.25rem 1.4rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  border-left: 3px solid var(--cd-yellow);
}
.cdct__erreur-titre { font-weight: 700; margin: 0 0 .35rem; color: var(--cd-yellow); }
.cdct__erreur-aide { margin: .7rem 0 0; font-size: var(--cd-fs-sm); }
.cdct__erreur-aide a {
  color: var(--cd-yellow);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cdct__erreur-aide a:focus-visible { outline: 2px solid var(--cd-yellow); outline-offset: 3px; border-radius: 4px; }
.cdct__erreur-txt { margin: 0; font-size: var(--cd-fs-sm); color: rgba(255, 255, 255, .78); }

/* ---- Résultats ---- */
.cdct__res { margin-top: 2.5rem; }

.cdct__verdict {
  padding: 1.5rem 1.6rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  margin-bottom: 1.25rem;
}
.cdct__verdict-label {
  font-size: var(--cd-fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin: 0 0 .4rem;
}
.cdct__verdict-txt {
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}
.cdct__verdict-site {
  font-size: var(--cd-fs-xs);
  color: rgba(255, 255, 255, .55);
  margin: .5rem 0 0;
  word-break: break-all;
}
.cdct__verdict[data-etat="bon"]     .cdct__verdict-txt { color: #7DE38B; }
.cdct__verdict[data-etat="moyen"]   .cdct__verdict-txt { color: var(--cd-yellow); }
.cdct__verdict[data-etat="mauvais"] .cdct__verdict-txt { color: #FF9B8A; }

/* La plaque, signature reprise du hero */
.cdct__plaque {
  margin: 0 0 1.25rem;
  background: var(--cd-navy-dark);
  border-radius: 14px;
  padding: .35rem 1.4rem;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .55);
}
.cdct__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cdct__ligne:last-child { border-bottom: 0; }
.cdct__ligne dt {
  font-size: var(--cd-fs-sm);
  color: rgba(255, 255, 255, .72);
  margin: 0;
}
.cdct__ligne dd {
  margin: 0;
  font-size: var(--cd-fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cdct__ligne dd[data-etat="bon"]     { color: #7DE38B; }
.cdct__ligne dd[data-etat="moyen"]   { color: var(--cd-yellow); }
.cdct__ligne dd[data-etat="mauvais"] { color: #FF9B8A; }

/* Points de contrôle */
.cdct__points { display: grid; gap: .5rem; margin-bottom: 1.75rem; }
.cdct__point {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .8rem 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  font-size: var(--cd-fs-sm);
  line-height: 1.5;
}
.cdct__point::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: .5em;
  background: currentColor;
}
.cdct__point[data-etat="ok"]     { color: rgba(255, 255, 255, .62); }
.cdct__point[data-etat="alerte"] { color: var(--cd-yellow); background: rgba(255, 208, 0, .07); }

/* Suite : la conversion */
.cdct__suite {
  /* Fond bleu propre : les couleurs y sont posées explicitement, pas héritées,
     sinon une règle du thème sur p reprend la main et rend le texte illisible. */
  color: var(--cd-white);
  padding: 1.6rem 1.6rem 1.75rem;
  border-radius: 14px;
  background: var(--cd-blue);
}
.cdct__suite .cdct__suite-txt {
  color: var(--cd-white);
  font-size: var(--cd-fs-md);
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 1.1rem;
}
.cdct__suite-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: var(--cd-fs-sm);
  padding: .85rem 1.4rem;
  border-radius: 10px;
  background: var(--cd-white);
  color: var(--cd-navy);
  text-decoration: none;
  transition: transform .12s ease-out;
}
.cdct__suite-cta:focus-visible { outline: 2px solid var(--cd-yellow); outline-offset: 3px; }
.cdct__suite-cta:active { transform: translateY(1px); }
.cdct__suite .cdct__suite-note {
  color: rgba(255, 255, 255, .82);
  font-size: var(--cd-fs-xs);
  color: rgba(255, 255, 255, .78);
  margin: 1rem 0 0;
  max-width: 54ch;
}

/* ---- Spécifique à l'outil fiche Google ---- */
.cdct__champ--double input { flex: 1 1 12rem; }

/* Le duel : c'est l'écart avec le leader qui parle, pas le score absolu.
   Bandeau jaune assumé, c'est le seul endroit de la page où l'on hausse la voix. */
.cdfg-duel {
  margin: 0 0 1.25rem;
  padding: 1.35rem 1.5rem;
  border-radius: 14px;
  background: var(--cd-yellow);
  color: var(--cd-ink);
}
.cdfg-duel .cdfg-duel__label {
  color: var(--cd-ink);
  font-size: var(--cd-fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0 0 .5rem;
  opacity: .72;
}
.cdfg-duel .cdfg-duel__chiffre {
  color: var(--cd-ink);
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 .5rem;
  font-variant-numeric: tabular-nums;
}
.cdfg-duel .cdfg-duel__txt {
  color: var(--cd-ink);
  font-size: var(--cd-fs-sm);
  line-height: 1.55;
  margin: 0;
  max-width: 52ch;
}

/* ---- Contenu éditorial des pages outils ----
   Fond clair après le bloc navy : la respiration marque le passage de l'outil au propos. */
.cdto { background: var(--cd-white); padding: clamp(3rem, 7vw, 5rem) 0; }
.cdto__in { width: min(100% - (var(--cd-gutter) * 2), 780px); margin-inline: auto; }
.cdto__h2 {
  font-size: clamp(1.4rem, 3.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--cd-ink);
  margin: 0 0 .85rem;
}
.cdto__h2:not(:first-child) { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.cdto__p {
  font-size: var(--cd-fs-md);
  line-height: 1.65;
  color: var(--cd-muted);
  margin: 0 0 1.5rem;
  max-width: 62ch;
}
.cdto__grille { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cdto__grille { grid-template-columns: 1fr 1fr; } }
.cdto__bloc {
  padding: 1.25rem 1.35rem;
  border-radius: 12px;
  background: var(--cd-bg-soft);
  border-left: 3px solid var(--cd-blue);
}
.cdto__bloc-t { font-weight: 700; color: var(--cd-ink); margin: 0 0 .4rem; font-size: var(--cd-fs-sm); }
.cdto__bloc-p { margin: 0; font-size: var(--cd-fs-sm); line-height: 1.6; color: var(--cd-muted); }

.cdto__liste { margin: 0; padding-left: 1.1rem; display: grid; gap: .75rem; }
.cdto__liste li { font-size: var(--cd-fs-sm); line-height: 1.65; color: var(--cd-muted); }
.cdto__liste strong { color: var(--cd-ink); }

.cdto__faq { display: grid; gap: .5rem; }
.cdto__q {
  border: 1px solid var(--cd-line);
  border-radius: 12px;
  padding: 0 1.15rem;
  background: var(--cd-white);
}
.cdto__q summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.75rem 1rem 0;
  font-weight: 700;
  font-size: var(--cd-fs-sm);
  color: var(--cd-ink);
  position: relative;
}
.cdto__q summary::-webkit-details-marker { display: none; }
.cdto__q summary::after {
  content: "";
  position: absolute;
  right: .2rem; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--cd-blue);
  border-bottom: 2px solid var(--cd-blue);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease-out;
}
.cdto__q[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.cdto__q summary:focus-visible { outline: 2px solid var(--cd-blue); outline-offset: 2px; border-radius: 6px; }
.cdto__q p { margin: 0 0 1.1rem; font-size: var(--cd-fs-sm); line-height: 1.65; color: var(--cd-muted); max-width: 64ch; }

.cdto__suite {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cd-line);
  font-size: var(--cd-fs-sm);
  line-height: 1.65;
  color: var(--cd-muted);
}
.cdto__suite a { color: var(--cd-blue); font-weight: 700; }

/* Remplissage automatique du navigateur.
   Sans cela, Chrome impose son fond bleu pâle et un texte sombre sur nos champs foncés,
   ce qui rend la saisie illisible et casse la cohérence du bloc. */
.cdct__champ input:-webkit-autofill,
.cdct__champ input:-webkit-autofill:hover,
.cdct__champ input:-webkit-autofill:focus,
.cdrap__champ input:-webkit-autofill,
.cdrap__champ input:-webkit-autofill:hover,
.cdrap__champ input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF;
  caret-color: #FFFFFF;
  transition: background-color 100000s ease-in-out 0s;
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, .06);
}