/* ============================================================================
   LAYOUT — conteneurs, sections et grilles réutilisables.
   ========================================================================= */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}

.section {
  padding-block: var(--esp-section);
}

.section--douce {
  background: var(--fond-doux);
}

.section--sombre {
  position: relative;
  background: var(--fond-sombre);
  color: var(--texte-sur-sombre);
}

/* Une vague (turquoise clair puis pétrole) coiffe chaque bandeau sombre,
   comme en bas des pages de la plaquette. */
.section--sombre::before {
  content: "";
  position: absolute;
  inset: auto 0 100%;
  height: clamp(28px, 4vw, 56px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34C360 4 720 6 1080 24s300 16 360 8v28H0z' fill='%23a2d4d5'/%3E%3Cpath d='M0 50c420-26 800-22 1120-8 160 7 260 6 320 2v16H0z' fill='%23173f53'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.section--sombre .texte-doux {
  color: var(--texte-doux-sur-sombre);
}

/* En-tête de section : sur-titre + titre + intro */
.section__tete {
  max-width: 44ch;
  margin-bottom: var(--esp-6);
}

.section__tete h2 {
  letter-spacing: -0.01em;
}

.section__tete p {
  max-width: 58ch;
}

.section__tete--centre {
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
}

.section__tete--centre p {
  margin-inline: auto;
}

.surtitre {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
  font-family: var(--police-texte);
  font-size: var(--taille-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Le petit trait terminé par un point, repris de la plaquette : « —• Devenir partenaire » */
.surtitre::before {
  content: "";
  flex: none;
  width: 30px;
  height: 7px;
  background:
    radial-gradient(circle, currentColor 3px, transparent 3.5px) right center / 7px 7px no-repeat,
    linear-gradient(currentColor, currentColor) left center / 24px 1.5px no-repeat;
}

.section__tete--centre .surtitre {
  justify-content: center;
}

.section--sombre .surtitre,
.page-tete .surtitre {
  color: var(--lagon);
}

/* Sur la photo d'accueil, on passe en blanc pour rester lisible */
.hero .surtitre {
  color: #fff;
  text-shadow: 0 1px 12px rgba(23, 63, 83, 0.7);
}

.section__tete p {
  margin-top: var(--esp-3);
}

.texte-doux {
  color: var(--texte-doux);
}

/* Grilles : se replient toutes seules sur mobile */
.grille {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.grille--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

/* Deux colonnes texte + visuel */
.duo {
  display: grid;
  gap: var(--esp-5);
  align-items: center;
}

@media (min-width: 900px) {
  .duo {
    grid-template-columns: 1fr 1fr;
  }
  .duo--inverse > :first-child {
    order: 2;
  }
}

/* Le contenu principal commence sous le header fixe */
main {
  display: block;
}

.page-interieure main {
  padding-top: var(--hauteur-header);
}

.grille--compacte {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}

/* Quatre cartes (le bureau) : 2 × 2, puis une seule rangée sur grand écran */
.grille--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
  .grille--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}