/* ============================================================
   maquette-a.css — Maquette A « Institutionnelle »
   Reprise très fidèle de la plaquette : bandeaux bleus pleins, espacement
   généreux, autorité, gravité. Le standard de référence.
   ============================================================ */

/* ----- En-tête de site ----- */
.maquette-a .entete-site {
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-bordure);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.maquette-a .entete-site__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-3);
  padding-block: var(--espace-2);
}

.maquette-a .entete-site__logo {
  text-decoration: none;
  color: var(--noir-texte);
}

.maquette-a .entete-site__logo-marque {
  font-family: var(--police-titres);
  font-weight: var(--graisse-extrabold);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--bleu-signature);
}

.maquette-a .entete-site__nav {
  display: flex;
  gap: var(--espace-3);
  font-size: var(--taille-petite);
  font-weight: var(--graisse-medium);
}

.maquette-a .entete-site__nav a {
  color: var(--gris-texte);
  text-decoration: none;
}

.maquette-a .entete-site__nav a:hover,
.maquette-a .entete-site__nav a:focus-visible {
  color: var(--bleu-signature);
}

.maquette-a .entete-site__cta {
  padding: 0.5rem 1.25rem;
  font-size: var(--taille-petite);
}

@media (max-width: 768px) {
  .maquette-a .entete-site__nav { display: none; }
}

/* ----- Section Hero ----- */
.maquette-a .hero {
  padding-block: var(--espace-12) var(--espace-16);
  background: linear-gradient(180deg, var(--blanc) 0%, var(--gris-fond) 100%);
}

.maquette-a .hero__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: var(--espace-8);
}

@media (max-width: 1024px) {
  .maquette-a .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--espace-6);
  }
}

.maquette-a .hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bleu-pale);
  border-radius: var(--rayon-pilule);
  font-size: var(--taille-mini);
  font-weight: var(--graisse-semibold);
  color: var(--bleu-signature);
  letter-spacing: 0.02em;
  margin-bottom: var(--espace-3);
}

.maquette-a .hero__badge-puce {
  width: 6px;
  height: 6px;
  background: var(--bleu-signature);
  border-radius: 50%;
}

.maquette-a .hero__titre {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: var(--graisse-extrabold);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--bleu-signature);
  margin-bottom: var(--espace-3);
}

.maquette-a .hero__intro {
  font-size: var(--taille-grande);
  color: var(--noir-texte);
  line-height: var(--ligne-aerée);
  margin-bottom: var(--espace-4);
  max-width: 520px;
}

.maquette-a .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-3);
}

.maquette-a .hero__visuel img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(10, 31, 58, 0.10));
}

/* ----- Entête de section commun ----- */
.maquette-a .section__entete {
  text-align: center;
  margin-bottom: var(--espace-8);
}

.maquette-a .section__entete h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--graisse-extrabold);
  color: var(--bleu-signature);
  margin-bottom: var(--espace-2);
  letter-spacing: -0.02em;
}

.maquette-a .section__sous-titre {
  font-size: var(--taille-grande);
  color: var(--gris-texte);
  max-width: 640px;
  margin-inline: auto;
}

/* ----- Section Problème ----- */
.maquette-a .probleme {
  text-align: center;
}

.maquette-a .probleme__titre {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--graisse-bold);
  color: var(--bleu-signature);
  margin-bottom: var(--espace-4);
}

.maquette-a .probleme__texte {
  font-size: var(--taille-grande);
  line-height: var(--ligne-aerée);
  margin-bottom: var(--espace-4);
}

.maquette-a .probleme__transition {
  font-size: 1.25rem;
  color: var(--bleu-signature);
  font-weight: var(--graisse-medium);
  padding-top: var(--espace-3);
  border-top: 2px solid var(--bleu-pale);
}

/* ----- Section Risques (bandeau bleu) ----- */
.maquette-a .risques__titre {
  font-size: clamp(2rem, 4vw, 2.75rem);
  text-align: center;
  margin-bottom: var(--espace-6);
  color: var(--blanc);
  font-weight: var(--graisse-extrabold);
}

.maquette-a .risques__liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-4);
}

@media (max-width: 1024px) {
  .maquette-a .risques__liste {
    grid-template-columns: 1fr;
    gap: var(--espace-3);
  }
}

.maquette-a .risque {
  background: rgba(255, 255, 255, 0.06);
  padding: var(--espace-4);
  border-radius: var(--rayon-moyen);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.maquette-a .risque__entete {
  display: flex;
  align-items: center;
  gap: var(--espace-2);
  margin-bottom: var(--espace-2);
}

.maquette-a .risque__titre {
  color: var(--blanc);
  font-size: 1.25rem;
  font-weight: var(--graisse-bold);
}

.maquette-a .risque p {
  color: rgba(255, 255, 255, 0.92);
  line-height: var(--ligne-courante);
  font-size: var(--taille-courante);
}

/* Rendre le pictogramme visible sur fond bleu : inversion */
.maquette-a .risques .pictogramme-risque {
  background: var(--blanc);
  color: var(--bleu-signature);
}

/* ----- Section Cibles (Pour qui ?) ----- */
.maquette-a .cibles__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-4);
}

@media (max-width: 1024px) {
  .maquette-a .cibles__grille {
    grid-template-columns: 1fr;
  }
}

.maquette-a .cible {
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--rayon-moyen);
  padding: var(--espace-4);
  transition: border-color var(--transition-rapide), box-shadow var(--transition-rapide);
}

.maquette-a .cible:hover {
  border-color: var(--bleu-signature);
  box-shadow: var(--ombre-douce);
}

.maquette-a .cible__titre {
  color: var(--bleu-signature);
  font-size: 1.375rem;
  font-weight: var(--graisse-bold);
  margin-bottom: var(--espace-2);
  padding-bottom: var(--espace-1);
  border-bottom: 2px solid var(--bleu-pale);
}

/* ----- Section Méthodologie ----- */
.maquette-a .methodologie {
  background: var(--gris-fond);
}

.maquette-a .methodologie__etapes {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
  max-width: 880px;
  margin-inline: auto;
}

.maquette-a .etape {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--espace-4);
  background: var(--blanc);
  border-radius: var(--rayon-moyen);
  padding: var(--espace-4);
  border-left: 4px solid var(--bleu-signature);
}

@media (max-width: 768px) {
  .maquette-a .etape {
    grid-template-columns: 1fr;
    gap: var(--espace-2);
  }
}

.maquette-a .etape__numero {
  font-family: var(--police-titres);
  font-size: 3rem;
  font-weight: var(--graisse-extrabold);
  color: var(--bleu-signature);
  line-height: 1;
  letter-spacing: -0.03em;
}

.maquette-a .etape__titre {
  color: var(--bleu-signature);
  font-size: 1.375rem;
  font-weight: var(--graisse-bold);
  margin-bottom: 0.5rem;
}

/* ----- Section Cas concrets ----- */
.maquette-a .cas__liste {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  max-width: 820px;
  margin-inline: auto;
}

.maquette-a .cas-item {
  background: var(--blanc);
  border: 1px solid var(--gris-bordure);
  border-radius: var(--rayon-moyen);
  padding: var(--espace-4);
}

.maquette-a .cas-item__chapeau {
  font-size: var(--taille-petite);
  font-weight: var(--graisse-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bleu-signature);
  margin-bottom: var(--espace-2);
}

.maquette-a .cas-item__texte {
  line-height: var(--ligne-aerée);
}

.maquette-a .cas-item__note {
  margin-top: var(--espace-2);
  padding-top: var(--espace-1);
  border-top: 1px dashed var(--gris-bordure);
  font-size: var(--taille-petite);
  font-style: italic;
  color: var(--gris-texte);
}

/* ----- Section Tarif (bandeau bleu) ----- */
.maquette-a .tarif__inner {
  text-align: center;
}

.maquette-a .tarif__sur-titre {
  font-size: var(--taille-petite);
  font-weight: var(--graisse-bold);
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--espace-3);
}

.maquette-a .tarif__titre {
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--blanc);
  font-weight: var(--graisse-bold);
  line-height: 1.25;
  margin-bottom: var(--espace-3);
}

.maquette-a .tarif__titre strong {
  font-weight: var(--graisse-extrabold);
  color: var(--blanc);
  white-space: nowrap;
}

.maquette-a .tarif__detail {
  font-size: var(--taille-grande);
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--espace-4);
  line-height: var(--ligne-aerée);
}

.maquette-a .tarif__detail strong {
  color: var(--blanc);
  font-weight: var(--graisse-bold);
}

.maquette-a .tarif__cta {
  font-size: 1.0625rem;
  padding: 1rem 2rem;
}

/* ----- Section Qui sommes-nous ----- */
.maquette-a .qui {
  text-align: center;
  background: var(--blanc);
}

.maquette-a .qui h2 {
  font-size: 1.75rem;
  color: var(--bleu-signature);
  margin-bottom: var(--espace-3);
  font-weight: var(--graisse-bold);
}

.maquette-a .qui p {
  font-size: var(--taille-grande);
  line-height: var(--ligne-aerée);
  margin-bottom: var(--espace-3);
  color: var(--noir-texte);
}

.maquette-a .qui__adresse {
  font-style: normal;
  font-size: var(--taille-courante);
  color: var(--gris-texte);
  line-height: 1.7;
}

.maquette-a .qui__adresse a {
  font-weight: var(--graisse-semibold);
}

/* ----- Pied de site ----- */
.maquette-a .pied-site {
  background: var(--gris-fond);
  border-top: 1px solid var(--gris-bordure);
  padding-block: var(--espace-6);
  font-size: var(--taille-petite);
}

.maquette-a .pied-site__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--espace-4);
}

@media (max-width: 768px) {
  .maquette-a .pied-site__inner {
    grid-template-columns: 1fr;
  }
}

.maquette-a .pied-site__nom {
  font-family: var(--police-titres);
  font-weight: var(--graisse-extrabold);
  font-size: 1.125rem;
  color: var(--bleu-signature);
  margin-bottom: 0.25rem;
}

.maquette-a .pied-site__baseline {
  color: var(--gris-texte);
}

.maquette-a .pied-site__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-3);
}

.maquette-a .pied-site__liens a {
  color: var(--gris-texte);
  text-decoration: none;
}

.maquette-a .pied-site__liens a:hover,
.maquette-a .pied-site__liens a:focus-visible {
  color: var(--bleu-signature);
}

.maquette-a .pied-site__copyright {
  grid-column: 1 / -1;
  color: var(--gris-texte);
  font-size: var(--taille-mini);
  padding-top: var(--espace-3);
  border-top: 1px solid var(--gris-bordure);
}