/* =========================================================
   PCR Énergie — MAIN (base + layout) — CORRIGÉ & OPTIMISÉ
   Fichier : assets/css/main.css
   Dépend : assets/css/variables.css
   Objectifs :
   - Reset propre
   - Typo : Titres/boutons/nav = Poppins ; texte = Inter (via tokens)
   - Accessibilité (focus-visible + skip link)
   - Composants de base (cards, badges, boutons, forms)
   - Zéro doublon inutile
   - Fix bug accolades + responsive headings
   ========================================================= */

/* =========================================================
   RESET / BASE
   ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html{
  font-size: var(--pcr-text-md);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  margin: 0;
  min-height: 100vh;
  background: var(--pcr-color-bg);
  color: var(--pcr-color-text);

  /* ✅ Body = Inter (texte long) */
  font-family: var(--pcr-font-body, var(--pcr-font-sans));
  font-weight: var(--pcr-weight-regular);
  line-height: var(--pcr-leading-normal);

  /* rendu plus net */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Médias */
img, video, svg, canvas{
  max-width: 100%;
  height: auto;
}
img{ display:block; }

/* =========================================================
   LIENS
   ========================================================= */

a{
  color: var(--pcr-link-color);
  text-decoration: none;
  text-underline-offset: 3px;
}

a:hover{
  color: var(--pcr-link-hover);
  text-decoration: underline;
}

/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.pcr-skip-link:focus{
  position: fixed;
  left: var(--pcr-space-4);
  top: var(--pcr-space-4);
  padding: var(--pcr-space-3) var(--pcr-space-4);
  background: var(--pcr-color-surface);
  border: var(--pcr-border);
  border-radius: var(--pcr-radius-sm);
  z-index: calc(var(--pcr-z-adminbar) + 1);
  box-shadow: var(--pcr-shadow-sm);
  outline: none;
}

/* Focus visible (clavier) */
:focus-visible{
  outline: none;
  box-shadow: var(--pcr-focus-ring);
  border-radius: var(--pcr-radius-sm);
}

/* =========================================================
   TYPOGRAPHIE — LOGIQUE (Poppins / Inter)
   ========================================================= */

/* Titres = Poppins */
h1, h2, h3, h4, h5, h6{
  margin: 0 0 var(--pcr-space-4);
  color: var(--pcr-color-heading);
  line-height: var(--pcr-leading-tight);
  font-weight: var(--pcr-weight-bold);

  font-family: var(--pcr-font-heading, var(--pcr-font-sans));
  letter-spacing: -0.015em;
}

h1{ font-size: var(--pcr-text-3xl); }
h2{ font-size: var(--pcr-text-2xl); }
h3{ font-size: var(--pcr-text-xl); }
h4{ font-size: var(--pcr-text-lg); }
h5{ font-size: var(--pcr-text-md); }
h6{ font-size: var(--pcr-text-sm); }

/* Texte courant = Inter (hérité du body) */
p{
  margin: 0 0 var(--pcr-space-4);
  color: var(--pcr-color-text);
}

/* Texte secondaire */
small{
  font-size: var(--pcr-text-sm);
  color: var(--pcr-color-muted);
}

/* Listes */
ul, ol{
  margin: 0 0 var(--pcr-space-4);
  padding-left: 1.25em;
}

/* Séparateur */
hr{
  border: 0;
  border-top: 1px solid var(--pcr-color-divider);
  margin: var(--pcr-space-7) 0;
}

/* =========================================================
   LAYOUT GLOBAL
   ========================================================= */

.pcr-main{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* =========================================================
   COMPOSANTS (base)
   ========================================================= */

.pcr-card{
  background: var(--pcr-color-surface);
  border: 1px solid var(--pcr-color-border);
  border-radius: var(--pcr-radius-lg);
  padding: var(--pcr-space-5);
  box-shadow: var(--pcr-shadow-sm);
}

/* Badge */
.pcr-badge{
  display: inline-flex;
  align-items: center;
  gap: var(--pcr-space-2);
  padding: 6px 10px;
  border-radius: var(--pcr-radius-pill);
  font-size: var(--pcr-text-sm);

  background: var(--pcr-color-primary-soft);
  color: var(--pcr-color-primary);

  /* ✅ utilise ton token border, pas de couleur “hardcodée” bleue */
  border: 1px solid rgba(64,196,255,.22);
}

/* =========================================================
   BOUTONS (tokens)
   - Boutons = Poppins (cohérence CTA)
   ========================================================= */

.pcr-btn{
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pcr-space-2);

  font-size: var(--pcr-btn-font-size);
  font-weight: var(--pcr-btn-font-weight);

  font-family: var(--pcr-font-heading, var(--pcr-font-sans));
  letter-spacing: 0.01em;

  padding: var(--pcr-btn-pad-y) var(--pcr-btn-pad-x);
  border-radius: var(--pcr-btn-radius);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  text-decoration: none;

  transition: background var(--pcr-dur-fast) var(--pcr-ease),
              color var(--pcr-dur-fast) var(--pcr-ease),
              border-color var(--pcr-dur-fast) var(--pcr-ease),
              transform var(--pcr-dur-fast) var(--pcr-ease),
              filter var(--pcr-dur-fast) var(--pcr-ease);
}

.pcr-btn:active{ transform: translateY(1px); }

.pcr-btn--primary{
  background: var(--pcr-btn-primary-bg);
  color: #fff;
}
.pcr-btn--primary:hover{
  background: var(--pcr-btn-primary-bg-hover);
  text-decoration: none;
  color: #fff;
}

.pcr-btn--secondary{
  background: var(--pcr-btn-secondary-bg);
  color: #fff;
}
.pcr-btn--secondary:hover{
  background: var(--pcr-btn-secondary-bg-hover);
  text-decoration: none;
  color: #fff;
}

.pcr-btn--ghost{
  background: var(--pcr-btn-ghost-bg);
  color: #fff;
  border-color: var(--pcr-btn-ghost-border);
}
.pcr-btn--ghost:hover{
  background: var(--pcr-btn-ghost-bg-hover);
  text-decoration: none;
}

/* =========================================================
   FORMS (base)
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea,
select{
  width: 100%;
  max-width: 100%;

  background: var(--pcr-input-bg);
  color: var(--pcr-input-fg);

  border: 1px solid var(--pcr-input-border);
  border-radius: var(--pcr-input-radius);

  padding: var(--pcr-input-pad-y) var(--pcr-input-pad-x);

  font: inherit;
}

textarea{
  min-height: 120px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder{
  color: var(--pcr-color-muted);
}

/* =========================================================
   FORMS — Select dropdown (options)
   Fix : liste déroulante "blanc sur blanc" en thème dark
   NOTE : les <option> sont rendues par l’UI native du navigateur/OS,
          mais ces règles corrigent la majorité des cas (Chrome/Edge/Firefox).
   ========================================================= */

/* Le select lui-même est déjà stylé (bg/fg/border via tokens).
   On renforce le contraste et le focus. */
select{
  color-scheme: dark; /* aide certains navigateurs à rendre le menu natif en dark */
}

html[data-theme="light"] select{
  color-scheme: light;
}

/* Options (liste déroulante) */
select option,
select optgroup{
  background-color: var(--pcr-color-surface);
  color: var(--pcr-color-text);
}

/* Option sélectionnée (quand supportée) */
select option:checked{
  background-color: color-mix(in srgb, var(--pcr-color-primary) 22%, var(--pcr-color-surface));
  color: var(--pcr-color-text);
}

/* Hover (support partiel selon navigateur) */
select option:hover{
  background-color: color-mix(in srgb, var(--pcr-color-primary) 14%, var(--pcr-color-surface));
}

/* Focus ring cohérent (au cas où :focus-visible ne s'applique pas bien sur select) */
select:focus,
select:focus-visible{
  outline: none;
  box-shadow: var(--pcr-focus-ring);
  border-color: color-mix(in srgb, var(--pcr-color-primary) 55%, var(--pcr-input-border));
}


/* =========================================================
   BONUS — COHÉRENCE TYPO SUR NAV / LIENS / CTA
   (sans casser tes fichiers header/footer)
   ========================================================= */

.pcr-nav__menu a,
.pcr-offcanvas__menu a,
.pcr-footer__menu a,
.pcr-offcanvas__btn,
.pcr-footerCta__title,
.pcr-reassurance__txt strong{
  font-family: var(--pcr-font-heading, var(--pcr-font-sans));
}

/* Paragraphes UI */
.pcr-footerCta__text,
.pcr-reassurance__txt span,
.pcr-footer__note{
  font-family: var(--pcr-font-body, var(--pcr-font-sans));
}

/* =========================================================
   RESPONSIVE
   - ✅ Fix de ton bug : accolades + headings bien dans media query
   ========================================================= */

@media (max-width: 768px){
  .pcr-main{ padding: 0; }

  /* tailles mobile lisibles */
  h1{ font-size: 32px; }
  h2{ font-size: 24px; }
  h3{ font-size: 20px; }
}