/*
 * Pheova Compétences — surcouche de marque au-dessus de Quark2.
 * Ce fichier remplace theme://css/custom.css de quark2 (résolution du
 * thème enfant en premier). La couleur d'accent, le mode clair/sombre
 * et le logo restent pilotables sans code depuis Admin > Apparence.
 */

/* Cinzel — capitale gravée façon Trajane, réservée au grand titre du hero */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cinzel/cinzel-latin-700.woff2") format("woff2");
}

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cinzel/cinzel-latin-400.woff2") format("woff2");
}

:root {
  --pheova-font-display-trajan: "Cinzel", "Cal Sans", "Inter", sans-serif;
  --pheova-blue: #111c97;
  --pheova-blue-deep: #0a136b;
  --pheova-gold: #c6a15b;
  --pheova-gold-light: #d8b870;
  --pheova-copper: #a95a2b;
  --pheova-copper-light: #c97a44;
  --pheova-ink: #2b3145;
  --pheova-ink-light: #495066;
}

:root,
:root[data-theme="light"] {
  --q2-text: var(--pheova-ink);
  --q2-text-strong: var(--pheova-blue-deep);
}

#header a,
#header .navbar-section a {
  color: var(--q2-text);
}
#header a:hover,
#header .navbar-section a:hover,
#header a.active,
#header .navbar-section a.active {
  color: var(--pheova-gold);
}

#header a.btn-pill:hover {
  color: var(--pheova-ink);
}

#header .dropmenu a.active {
  background: var(--q2-bg-muted);
}

/* Le fichier du logo a un fond blanc opaque (pas de transparence) : sans
   ceci, il resterait sur une plaque blanche visible et disgracieuse dès
   que le header passe en mode sombre. On rend cette plaque intentionnelle
   plutôt que de la laisser paraître accidentelle. */
.navbar-brand {
  background: #ffffff;
  border-radius: var(--q2-radius);
  padding: 0.25rem 0.375rem;
  display: inline-flex;
  align-items: center;
}

/* Logo : plus grand en dessous de 860px (menu burger, la place ne manque
   pas) et au-dessus de 948px (menu desktop large, la place ne manque pas
   non plus). Entre les deux (860–948px), le menu desktop est encore
   affiché mais à l'étroit : un logo trop grand le pousserait à la ligne,
   donc on garde la taille "normale" (4.5rem, réglée plus haut) dans cette
   zone intermédiaire uniquement. */
@media screen and (max-width: 860px) {
  .navbar-brand img {
    height: 4.5rem;
  }
}

@media screen and (min-width: 861px) and (max-width: 999px) {
  .navbar-brand img {
    height: 3.5rem;
  }
}

@media screen and (max-width: 1000px) {
  .dropmenu a {
    padding: 0.5rem 0.4375rem;
  }
}

@media screen and (min-width: 1000px) {
  .navbar-brand img {
    height: 4.5rem;
  }
}

/* Hero "de marque" : fond dégradé bleu institutionnel + motif décoratif,
   utilisé quand aucune photo n'est fournie (classe hero_classes: bg-brand-navy) */
.hero.bg-brand-navy {
  background:
    radial-gradient(900px circle at 82% 15%, color-mix(in oklab, var(--pheova-gold) 18%, transparent), transparent 60%),
    linear-gradient(155deg, var(--pheova-blue) 0%, var(--pheova-blue-deep) 100%);
}
.hero.bg-brand-navy::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6%;
  width: min(42rem, 60vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background-image: url("../images/pheova_logo_simple.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.4;
  pointer-events: none;
}
.hero.bg-brand-navy .container {
  position: relative;
  z-index: 1;
}
.hero.bg-brand-navy h1 {
  color: var(--pheova-gold);
  font-family: var(--pheova-font-display-trajan);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.25;
  font-size: clamp(2.5rem, 4vw, 3rem);
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
  /* max-width: 34rem; */
}
.hero.bg-brand-navy h2 {
  color: #ffffff;
}

/* Alignement à gauche (hero_align: left) : le sous-titre reste centré par
   défaut dans le thème (margin-inline: auto) — on le recale à gauche pour
   suivre le titre et laisser la place au motif doré à droite. Largeur
   limitée pour ne pas empiéter sur le visuel décoratif à droite. */
.hero.bg-brand-navy p {
  margin-inline: 0;
  /* max-width: 34rem; */
}

.hero .hero-cta {
  margin-top: 2rem;
}

/* Module "Étapes" : frise numérotée (ex. Diagnostic > Dossier >
   Accompagnement > Jury > Certification), pas de module équivalent
   dans quark2. */
.modular-steps .frame-box {
  max-width: 1100px;
  margin-inline: auto;
}
.modular-steps .steps-closing-text {
  margin-top: 2.5rem;
}

/* Bouton de téléchargement PDF optionnel (Formations, Étapes...) */
.pdf-download {
  margin-top: 2.5rem;
  text-align: center;
}
.modular-steps .steps {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem 1.5rem;
  margin-top: 3rem;
}
.modular-steps .steps::before {
  content: "";
  position: absolute;
  top: 1.75rem;
  left: 2.5rem;
  right: 2.5rem;
  height: 0;
  border-top: 2px dashed color-mix(in oklab, var(--pheova-gold) 60%, transparent);
  z-index: 0;
}
.modular-steps .step {
  position: relative;
  z-index: 1;
  flex: 1 1 140px;
  text-align: center;
}
.modular-steps .step-circle {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pheova-blue-deep);
  border: 2px solid var(--pheova-gold);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.125rem;
}
.modular-steps .step-title {
  font-weight: 600;
  color: var(--q2-text-strong);
  margin-bottom: 0.375rem;
}
.modular-steps .step-text {
  font-size: 0.875rem;
  color: var(--q2-text-muted);
  margin: 0;
}
@media (max-width: 720px) {
  .modular-steps .steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
  }
  .modular-steps .steps::before {
    top: 0;
    bottom: 0;
    left: 1.75rem;
    right: auto;
    width: 0;
    height: auto;
    border-top: 0;
    border-left: 2px dashed color-mix(in oklab, var(--pheova-gold) 60%, transparent);
  }
  .modular-steps .step {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
  .modular-steps .step-circle {
    margin: 0;
    flex-shrink: 0;
  }
}

/* Module "Chiffres clés" : repères mis en avant (icône + grand chiffre +
   libellé), pas de module équivalent dans quark2. */
.modular-stats .frame-box {
  max-width: 1100px;
  margin-inline: auto;
}
.modular-stats .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.modular-stats .stat {
  text-align: center;
  background: var(--q2-bg-elev);
  border-radius: var(--q2-radius-md);
  box-shadow: var(--q2-shadow-card);
  padding: 1.75rem 1.25rem;
}
.modular-stats .stat i {
  font-size: 1.5rem;
  color: var(--pheova-gold);
  margin-bottom: 0.75rem;
  display: block;
}
.modular-stats .stat-number {
  font-family: var(--pico-font-family-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--q2-text-strong);
  line-height: 1.1;
}
.modular-stats .stat-label {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--q2-text-muted);
}

/* Module "Contact" (form du plugin Form) : le plugin ne fournit pas de
   conteneur, on aligne sa largeur sur une taille de formulaire lisible. */
.modular-form .frame-box {
  max-width: 640px;
  margin-inline: auto;
}

/* Footer entreprise (mentions légales, SIRET, NDA, Qualiopi) remplaçant
   le footer générique "Made with Grav" de quark2. */
#footer.pheova-footer {
  background: var(--pheova-blue-deep);
  color: color-mix(in oklab, #ffffff 80%, transparent);
  padding-block: 2rem;
  text-align: left;
  border-top: 0;
}
.pheova-footer-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}
.pheova-footer-company strong {
  color: #ffffff;
}
.pheova-footer-legal-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  font-size: 0.8125rem;
}
.pheova-footer-legal-info span:not(:last-child)::after {
  content: "·";
  margin-left: 0.75rem;
  opacity: 0.6;
}
.pheova-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.8125rem;
}
#footer .pheova-footer-bottom a {
  color: var(--pheova-gold-light);
  font-weight: 500;
}
#footer .pheova-footer-bottom a:hover {
  color: var(--pheova-gold);
}

/* Bloc "Éditeur du site" de la page Mentions légales : faits issus de
   champs de page / config du thème plutôt que de texte libre. */
.legal-editor-block {
  margin-bottom: 2rem;
}
.legal-editor-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 1rem 0 0;
}
.legal-editor-list dt {
  font-weight: 600;
  color: var(--q2-text-strong);
}
.legal-editor-list dd {
  margin: 0;
  color: var(--q2-text);
}

/* Page "Site en construction" (mode maintenance) */
.maintenance-header {
  display: flex;
  justify-content: center;
  padding-block: 1.5rem;
}
.maintenance-header .container {
  display: flex;
  justify-content: center;
}
.maintenance-hero {
  min-height: calc(100vh - 6rem);
  display: flex;
  align-items: center;
  background:
    radial-gradient(900px circle at 82% 15%, color-mix(in oklab, var(--pheova-gold) 18%, transparent), transparent 60%),
    linear-gradient(155deg, var(--pheova-blue) 0%, var(--pheova-blue-deep) 100%);
}
.maintenance-hero .container {
  max-width: 640px;
  text-align: center;
}
.maintenance-hero h1 {
  font-family: var(--pheova-font-display-trajan);
  color: var(--pheova-gold);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.01em;
}
.maintenance-hero p {
  color: color-mix(in oklab, #ffffff 85%, transparent);
  font-size: 1.0625rem;
}
.maintenance-hero a {
  color: var(--pheova-gold-light);
}

/* Texte justifié pour les paragraphes de contenu (introductions de
   section, mentions légales...) — pas les textes courts des cartes,
   où la justification a plus souvent un rendu disgracieux sur 1-2
   lignes. "hyphens: none" évite les coupures de mot en fin de ligne :
   le texte revient à la ligne au niveau d'un espace, jamais au milieu
   d'un mot. Repasse en aligné à gauche sur mobile, où les grands
   espaces entre mots d'un texte justifié sur colonne étroite sont
   plus visibles et moins lisibles. */
.modular-features .frame-box > p,
.modular-steps .frame-box > p,
.modular-stats .frame-box > p,
.modular-form .frame-box > p,
#body-wrapper .container > p,
.container.grid-md > p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}
@media (max-width: 640px) {
  .modular-features .frame-box > p,
  .modular-steps .frame-box > p,
  .modular-stats .frame-box > p,
  .modular-form .frame-box > p,
  #body-wrapper .container > p,
  .container.grid-md > p {
    text-align: left;
  }
}