/* Composants partagés par les pages publiques.
   index.html, heritage.html et retraite-lpp.html dupliquaient
   ces règles dans leur <style> ; elles vivent ici désormais. */

/* Plus de bande d'en-tête. Une barre blanche au-dessus du hero coupait la
   page en deux avant qu'elle ait rien dit, et coûtait 81px de hauteur sur
   des écrans où chaque ligne compte. Le lockup vit maintenant dans le
   hero, au fer à gauche au-dessus du titre. */

/* Le mark hérite de currentColor, donc il suit la couleur du contexte —
   terracotta sur fond clair, blanc sur fond sombre. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
  justify-self: start;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--terracotta);
  letter-spacing: -0.03em;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.logo:hover {
  color: var(--terracotta-dark);
}

.logo-mark {
  width: 46px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .logo-mark {
    width: 36px;
  }
}

/* Hero */
/* Fond plat : un dégradé d'ambiance est une décoration de fond, ce que la
   direction artistique exclut. La matière vient du papier chaud, du grain
   et de la trame ci-dessous, pas d'un délavé diagonal. */
.hero {
  position: relative;
  padding: clamp(1.5rem, 5vw, 3.5rem) var(--spacing-md) clamp(3rem, 10vw, 6rem);
  background-color: var(--paper);
}

/* Papier millimétré, très pâle. Une trame réglée n'est pas un décor posé
   sur le fond : c'est la surface sur laquelle on calcule. Elle donne au
   hero une matière que l'aplat n'a pas, et elle est la même sur les trois
   pages d'entrée. Le dégradé ne sert qu'à l'effacer vers le bas — il ne
   peint aucune couleur. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='%23241A15' stroke-width='1' stroke-opacity='0.07'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

.hero-content {
  /* Au-dessus de la trame et de la courbe */
  position: relative;
  z-index: 1;
  /* Assez large pour que le titre display tienne en deux ou trois lignes :
     à 700px il en prenait quatre. */
  max-width: 920px;
  margin: 0 auto;
}

.hero h1 {
  font-size: var(--display-size);
  font-weight: 600;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
  letter-spacing: var(--display-track);
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text2);
  line-height: 1.5;
  max-width: var(--measure);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* CTA — pages d'atterrissage */
.cta-section {
  padding: clamp(2rem, 8vw, 4rem) var(--spacing-md);
  background-color: var(--bg-card);
  text-align: center;
}

.cta-container {
  max-width: 600px;
  margin: 0 auto;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
  background-color: var(--terracotta);
  color: var(--bg-card);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 550;
  border: none;
  border-radius: var(--r-input);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  min-width: 250px;
}

/* Pas d'ombre au survol : elle ne peut pas être animée sans coûter un
   repaint, et une ombre qui apparaît d'un coup se voit plus qu'elle
   n'aide. L'assombrissement et le décalage suffisent. */
.btn-cta:hover {
  background-color: var(--terracotta-dark);
  transform: translateY(-2px);
}

/* Section explicative — pages d'atterrissage */
.why-section {
  padding: clamp(2rem, 8vw, 4rem) var(--spacing-md);
  background-color: var(--bg);
}

.why-container {
  max-width: 700px;
  margin: 0 auto;
}

.why-section h2 {
  font-size: var(--title-size);
  font-weight: 600;
  letter-spacing: var(--title-track);
  color: var(--text);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.why-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.why-text p {
  font-size: var(--font-size-base);
  color: var(--text2);
  line-height: 1.6;
  max-width: var(--measure);
  margin-bottom: 0;
}

.why-text strong {
  color: var(--terracotta);
  font-weight: 600;
}

/* Réassurance.
   Le fond reste défini par la page : la section alterne avec celle
   qui la précède, qui n'est pas la même partout. */
.reassurance {
  padding: clamp(4rem, 8vw, 6rem) var(--spacing-lg);
}

.reassurance-container {
  max-width: 1200px;
  margin: 0 auto;
}

.reassurance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

@media (max-width: 800px) {
  .reassurance-grid {
    grid-template-columns: 1fr;
  }
}

/* Même filet que les cartes de la grille d'accueil. Il reste en --border :
   ces blocs ne sont pas cliquables, et l'accent ne sert qu'à signaler
   une action ou un état actif, jamais à décorer. */
.reassurance-item {
  border-top: 2px solid var(--border);
  padding-top: var(--spacing-lg);
}

.reassurance-item h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-sm);
  line-height: 1.35;
}

.reassurance-item p {
  font-size: 0.9375rem;
  color: var(--text2);
  margin: 0;
  line-height: 1.55;
}

/* Formulaires */
.form-group {
  margin-bottom: var(--spacing-lg);
}

/* Footer */
.footer {
  background-color: var(--text);
  color: var(--bg-card);
  padding: clamp(2rem, 5vw, 3rem) var(--spacing-md) clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2rem, 8vw, 4rem);
}

.footer-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: clamp(1.5rem, 4vw, 2rem);
}

@media (max-width: 640px) {
  .footer-content-wrapper {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
}

.footer-section {
  font-size: var(--font-size-sm);
}

.footer-section h4 {
  font-size: var(--font-size-base);
  color: var(--bg-card);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.footer-section p,
.footer-section a {
  color: var(--text3);
  margin-bottom: var(--spacing-xs);
  line-height: 1.6;
}

.footer-section a {
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-section a:hover {
  color: var(--bg-card);
}

.footer-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: clamp(1rem, 3vw, 1.5rem);
  margin-top: clamp(1rem, 3vw, 1.5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.footer-bottom-text {
  font-size: var(--font-size-micro);
  color: var(--text3);
}

.footer-regulation {
  text-align: right;
  font-size: var(--font-size-micro);
  color: var(--text3);
}

@media (max-width: 640px) {
  .footer-regulation {
    text-align: left;
  }
}