/* ============================================================
   NONAME.PRESTATION — Feuille de style principale
   ============================================================

   SOMMAIRE :
   1.  Variables & Reset
   2.  Éléments de base (typographie, liens, images)
   3.  Composants réutilisables (boutons, labels, titres)
   4.  Navigation
   5.  Hero
   6.  Barre de chiffres (Trust bar)
   7.  Section Positionnement
   8.  Section Domaines d'intervention
   9.  Section Galerie
   10. Section Pourquoi collaborer
   11. Section Formats de collaboration
   12. Section FAQ
   13. Section CTA final
   14. Footer
   15. Responsive (tablette et mobile)
   ============================================================ */


/* ============================================================
   1. VARIABLES & RESET
   ============================================================ */

/* Les variables CSS : modifiez ici pour changer toute la charte graphique */
:root {
  /* Couleurs principales */
  --blanc:        #ffffff;
  --noir:         #000000;
  --orange:       #d76a28;    /* Couleur accent principale */
  --orange-fonce: #b85820;    /* Orange au survol */
  --gris:         #848484;    /* Texte secondaire */
  --sombre-1:     #1a1a1a;    /* Fond sombre principal */
  --sombre-2:     #242424;    /* Fond sombre secondaire */

  /* Utilitaires */
  --bordure:      rgba(132, 132, 132, 0.2);
  --ombre:        0 6px 32px rgba(0, 0, 0, 0.1);

  /* Typographies */
  --titre:  'Montserrat', sans-serif;
  --texte:  'Manrope', sans-serif;

  /* Arrondis */
  --arrondi-petit:  8px;
  --arrondi-moyen:  16px;
  --arrondi-grand:  24px;
}

/* Reset minimal : supprime marges et paddings par défaut */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Comportement global de la page */
html {
  scroll-behavior: smooth; /* Défilement fluide au clic sur les ancres */
}

body {
  background-color: var(--sombre-1);
  color: var(--sombre-1);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased; /* Améliore le rendu des polices */
  overflow-x: hidden; /* Empêche le défilement horizontal */
}


/* ============================================================
   2. ÉLÉMENTS DE BASE
   ============================================================ */

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}


/* ============================================================
   3. COMPOSANTS RÉUTILISABLES
   ============================================================ */

/* Conteneur centré utilisé dans chaque section */
.conteneur {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Petite étiquette orange au-dessus des titres (ex: "Nos domaines") */
.label-section {
  display: inline-block;
  font-family: var(--titre);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}

/* Titres de section — 3 tailles disponibles */
.titre-section {
  font-family: var(--titre);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sombre-1);
}
.titre-section.grand  { font-size: clamp(28px, 3.5vw, 48px);text-align: left; }
.titre-section.grand2 {font-size: clamp(28px, 3.5vw, 48px); text-align: center;}
.titre-section.moyen  { font-size: clamp(22px, 2.5vw, 34px);text-align: left; }

/* Sous-titre descriptif sous les titres de section */
.sous-titre {
  font-family: var(--texte);
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--gris);
  line-height: 1.75;
  max-width: 600px;
}

/* ---- BOUTONS ---- */
/* Classe de base commune à tous les boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--titre);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: var(--arrondi-petit);
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn svg {
  width: 16px;
  height: 16px;
}

/* Bouton orange plein — action principale */
.btn-orange {
  background: var(--orange);
  color: var(--blanc);
  box-shadow: 0 4px 20px rgba(215, 106, 40, 0.3);
}
.btn-orange:hover {
  background: var(--orange-fonce);
  transform: translateY(-2px);
}
.hero-cta-bas {
  margin: 40px 0 0 0;
  display: flex;
  justify-content: center;
  padding: 0px 0 40px;
  background: transparent;
}
/* Bouton contour — action secondaire */
.btn-contour {
  margin: 0 auto;
  background: transparent;
  color: var(--orange);
  border: 1.5px solid var(--bordure);
}
.btn-contour:hover {
  background: var(--orange);
  color: var(--blanc);
  transform: translateY(-2px);
}

/* Bouton contour pour fond sombre */
.btn-contour-clair {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.btn-contour-clair:hover {
  background: var(--blanc);
  color: var(--sombre-1);
  transform: translateY(-2px);
}
.btn-contour-clair:hover img {
  filter: invert(1);
}
/* Placeholder photo (quand pas encore d'image réelle) */
.placeholder-photo {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(160deg, #2a2a2a, #1a1a1a);
}
.placeholder-photo jpg {
  width: 36px;
  height: 36px;
  opacity: 0.2;
}
.placeholder-photo span {
  font-family: var(--titre);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
}
/* Crédit photo — positionné en bas à droite de l'image hero */
.photo-credit {
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none; /* N'interfère pas avec les clics */
}
/* ============================================================
   5. HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  background: var(--sombre-1);
  display: flex;
  align-items: center;
  padding-top: 68px; /* Compense la hauteur de la nav fixe */
  overflow: hidden;
}

/* Contenu du hero : 2 colonnes (texte + visuel) */
.hero-contenu {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 150px 10px 10px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Colonne texte */
.hero-texte {
}
.hero-texte p {
  color: var(--blanc);
}

/* Petite ligne + étiquette au-dessus du H1 */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.hero-eyebrow-ligne {
  width: 32px;
  height: 2px;
  background: var(--orange);
}
.hero-eyebrow-texte {
  font-family: var(--titre);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}

/* H1 principal */
.hero-titre {
  font-family: var(--titre);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--blanc);
  margin-bottom: 28px;
}
.hero-titre em {
  font-style: normal;
  color: var(--orange); /* Mot en orange dans le H1 */
}

/* Sous-titre du hero */
.hero-sous-titre {
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 19px);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.75;
  margin-bottom: 44px;
}

/* Boutons du hero */
.hero-boutons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Colonne visuelle (photo) */
.hero-visuel {
  position: relative;
}

/* Cadre de la photo hero */
.hero-cadre-photo {
  border-radius: var(--arrondi-grand);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--sombre-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--ombre);
}
.hero-cadre-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badge "360° Technique événementielle" sur la photo */
.hero-badge {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: var(--orange);
  color: var(--blanc);
  padding: 20px 24px;
  border-radius: var(--arrondi-moyen);
  box-shadow: 0 8px 32px rgba(215, 106, 40, 0.4);
}
.hero-badge-chiffre {
  font-family: var(--titre);
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  display: block;
}
.hero-badge-texte {
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  display: block;
  margin-top: 4px;
}


/* ============================================================
   6. BARRE DE CHIFFRES (Trust bar)
   ============================================================ */

.trust-bar {
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
  padding: 36px 0;
}

.trust-bar-interieur {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chaque chiffre clé */
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 48px;
  border-right: 1px solid var(--bordure);
}
.trust-item:last-child {
  border-right: none;
}

.trust-chiffre {
  font-family: var(--titre);
  font-size: 32px;
  font-weight: 900;
  color: var(--sombre-1);
  letter-spacing: -0.03em;
  line-height: 1;
}
.trust-chiffre span {
  color: var(--orange);
}

.trust-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--gris);
  margin-top: 6px;
}


/* ============================================================
   7. SECTION POSITIONNEMENT
   ============================================================ */

.positionnement {
  background-color: var(--blanc);
  padding: 120px 0;
}

/* 2 colonnes : photo à gauche, texte à droite */
.positionnement-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

/* Cadre photo */
.positionnement-photo {
  position: relative;
  border-radius: var(--arrondi-grand);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--sombre-2);
  box-shadow: var(--ombre);
}
.positionnement-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Étiquette sur la photo */
.positionnement-etiquette {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-block;
  font-family: var(--titre);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(215, 106, 40, 0.1);
  color: var(--orange);
  padding: 5px 12px;
  border-radius: 40px;
}

/* Texte de positionnement */
.positionnement-texte {
  max-width: 520px;
}
.positionnement-texte h2 {
  margin: 8px 0 24px;
}
.positionnement-texte p {
  color: var(--gris);
  line-height: 1.8;
  margin-bottom: 14px;
}
.positionnement-texte p strong {
  color: var(--sombre-1);
  font-weight: 600;
}

/* Citation mise en avant */
.citation {
  margin-top: 36px;
  padding: 24px 28px;
  border-left: 3px solid var(--orange);
  background: rgba(215, 106, 40, 0.04);
  border-radius: 0 var(--arrondi-petit) var(--arrondi-petit) 0;
}
.citation p {
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 600;
  color: var(--sombre-1) !important;
  font-style: italic;
  line-height: 1.5;
  margin: 0 !important;
}


/* ============================================================
   8. SECTION DOMAINES D'INTERVENTION
   ============================================================ */

.domaines {
  padding: 120px 0;
  background: #fafafa;
}

.domaines-entete {
  text-align: center;
  margin-bottom: 72px;
}
.domaines-entete .sous-titre {
  margin: 16px auto 0;
}

/* Grille 3 colonnes pour les cartes */
.domaines-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Carte individuelle */
.carte-domaine {
  background: var(--blanc);
  border-radius: var(--arrondi-moyen);
  padding: 40px 36px;
  border: 1px solid var(--bordure);
  position: relative;
  overflow: hidden;
  transition: all 0.28s ease;
}

/* Barre orange au bas de la carte (apparaît au survol) */
.carte-domaine::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.carte-domaine:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre);
  border-color: transparent;
}
.carte-domaine:hover::after {
  transform: scaleX(1);
}

/* Icône de la carte */
.carte-icone {
  width: 52px;
  height: 52px;
  border-radius: var(--arrondi-petit);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.carte-icone svg {
  width: 26px;
  height: 26px;
  color: var(--orange);
}

.carte-domaine h3 {
  font-family: var(--titre);
  font-size: 18px;
  font-weight: 700;
  color: var(--sombre-1);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.carte-domaine p {
  font-size: 14px;
  color: var(--gris);
  line-height: 1.75;
}


/* ============================================================
   9. SECTION GALERIE
   ============================================================ */

.galerie {
  padding: 120px 0;
}

/* En-tête avec titre à gauche et bouton à droite */
.galerie-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}

/* Grille galerie asymétrique sur 12 colonnes */
.galerie-grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* Positionnement de chaque photo dans la grille */
.galerie-grille .photo:nth-child(1) { grid-column: span 7; aspect-ratio: 16/9; }
.galerie-grille .photo:nth-child(2) { grid-column: span 5; aspect-ratio: 4/3; }
.galerie-grille .photo:nth-child(3) { grid-column: span 4; aspect-ratio: 4/3; }
.galerie-grille .photo:nth-child(4) { grid-column: span 4; aspect-ratio: 4/3; }
.galerie-grille .photo:nth-child(5) { grid-column: span 4; aspect-ratio: 4/3; }

/* Bloc photo commun */
.photo {
  border-radius: var(--arrondi-moyen);
  overflow: hidden;
  position: relative;
  background: var(--sombre-2);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.photo:hover img {
  transform: scale(1.04);
}

/* Overlay avec le nom de la catégorie (apparaît au survol) */
.photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}
.photo:hover .photo-overlay {
  opacity: 1;
}
.photo-categorie {
  font-family: var(--titre);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}


/* ============================================================
   10. SECTION POURQUOI COLLABORER
   ============================================================ */

.pourquoi {
  padding: 120px 0;
  background: var(--sombre-1);
}

/* 2 colonnes : titre fixe à gauche, liste à droite */
.pourquoi-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Colonne gauche collante lors du défilement */
.pourquoi-gauche {
  position: sticky;
  top: 100px;
}
.pourquoi-gauche h2 {
  color: var(--blanc);
  margin: 8px 0 20px;
}
.pourquoi-gauche .sous-titre {
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 36px;
}

/* Chaque point différenciant */
.pourquoi-droite {
  display: flex;
  flex-direction: column;
}

.point {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items: flex-start;
}
.point:first-child { padding-top: 0; }

.point-numero {
  font-family: var(--titre);
  font-size: 2.5em;
  font-weight: 900;
  line-height: 1;
  color: var(--orange);
  letter-spacing: -0.04em;
  flex-shrink: 0;
  padding-top: 4px;
  min-width: 28px;

/*
  font-family: var(--titre);
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  position: absolute;
  top: 12px;
  right: 24px;
  pointer-events: none;
*/
}

.point h3 {
  font-family: var(--titre);
  font-size: 17px;
  font-weight: 700;
  color: var(--blanc);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.point p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.75;
}


/* ============================================================
   11. SECTION FORMATS DE COLLABORATION
   ============================================================ */

.formats {
  padding: 120px 0;
}

.formats-entete {
  text-align: center;
  margin-bottom: 72px;
}
.formats-entete h2 {color: var(--blanc);}

.formats-entete .sous-titre {
  margin: 16px auto 0;
}

/* Grille 2 colonnes */
.formats-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Carte de collaboration */
.carte-format {
  border-radius: var(--arrondi-moyen);
  padding: 48px 44px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bordure);
}

/* 3 variantes de couleur */
.carte-format.clair  { background: #fafafa; }
.carte-format.sombre { background: var(--sombre-1); }
.carte-format.orange { background: var(--orange); }

/* Grand numéro décoratif en arrière-plan */
.carte-numero {
  font-family: var(--titre);
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  position: absolute;
  top: 12px;
  right: 24px;
  pointer-events: none;
}
.carte-format.clair  .carte-numero { color: rgba(0, 0, 0, 0.05); }
.carte-format.sombre .carte-numero { color: rgba(255, 255, 255, 0.05); }
.carte-format.orange .carte-numero { color: rgba(255, 255, 255, 0.1); }

/* Étiquette type */
.carte-type {
  font-family: var(--titre);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}
.carte-format.clair  .carte-type { color: var(--orange); }
.carte-format.sombre .carte-type { color: rgba(215, 106, 40, 0.8); }
.carte-format.orange .carte-type { color: rgba(255, 255, 255, 0.7); }

/* Titre */
.carte-format h3 {
  font-family: var(--titre);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  line-height: 1.2;
}
.carte-format.clair  h3 { color: var(--sombre-1); }
.carte-format.sombre h3 { color: var(--blanc); }
.carte-format.orange h3 { color: var(--blanc); }

/* Description */
.carte-format p {
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 28px;
}
.carte-format.clair  p { color: var(--gris); }
.carte-format.sombre p { color: rgba(255, 255, 255, 0.45); }
.carte-format.orange p { color: rgba(255, 255, 255, 0.75); }

/* Tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag {
  font-family: var(--titre);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 40px;
}
.carte-format.clair  .tag { background: rgba(215, 106, 40, 0.1);  color: var(--orange); }
.carte-format.sombre .tag { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); }
.carte-format.orange .tag { background: rgba(255, 255, 255, 0.2);  color: var(--blanc); }


/* ============================================================
   12. SECTION FAQ
   ============================================================ */

.faq {
  padding: 120px 0;
  background: #fafafa;
}

/* 2 colonnes : titre à gauche (1/3), questions à droite (2/3) */
.faq-grille {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

.faq-gauche h2 {
  margin: 8px 0 16px;
}
.faq-intro {
  font-size: 15px;
  color: var(--gris);
  line-height: 1.75;
}

/* Liste des questions */
.faq-liste {
  display: flex;
  flex-direction: column;
}

.faq-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--bordure);
}
.faq-item:first-child {
  border-top: 1px solid var(--bordure);
}

.faq-item h3 {
  font-family: var(--titre);
  font-size: 17px;
  font-weight: 700;
  color: var(--sombre-1);
  margin-bottom: 12px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.faq-item p {
  font-size: 15px;
  color: var(--gris);
  line-height: 1.8;
}
.faq-item p strong {
  color: var(--sombre-1);
  font-weight: 600;
}


/* ============================================================
   13. SECTION CTA FINAL
   ============================================================ */

.cta-final {
  padding: 140px 0;
  background: var(--sombre-1);
  position: relative;
  overflow: hidden;
}

/* Halo lumineux centré en arrière-plan */
.cta-final::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215, 106, 40, 0.12), transparent 70%);
  pointer-events: none;
}

.cta-final-interieur {
  text-align: center;
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 40px;
}

.cta-final-titre {
  font-family: var(--titre);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  color: var(--blanc);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 16px 0 20px;
}
.cta-final-titre em {
  font-style: normal;
  color: var(--orange);
}

.cta-final-sous {
  font-size: clamp(15px, 1.5vw, 18px);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.75;
  margin-bottom: 48px;
}

.cta-final-boutons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cta-final-boutons img {
  height: 1.5em;
}

/* Petits éléments de réassurance sous les boutons */
.cta-reassurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 48px;
}
.cta-reassurance-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--titre);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.cta-reassurance-item img {
  width: 14px;
  height: 14px;
  color: var(--orange);
  flex-shrink: 0;
}


/* ============================================================
   14. FOOTER
   ============================================================ */

.footer {
  background: var(--noir);
  padding: 60px 0 32px;
}

/* Grille 4 colonnes */
.footer-grille {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 48px;
}

.footer-logo {
  font-family: var(--titre);
  font-size: 16px;
  font-weight: 800;
  color: var(--blanc);
  margin-bottom: 14px;
}
.footer-logo span {
  color: var(--orange);
}

.footer-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.7;
  max-width: 240px;
}

/* Titres de colonne */
.footer-col-titre {
  font-family: var(--titre);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 18px;
}

/* Liens */
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col ul li a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
}
.footer-col ul li a:hover {
  color: var(--blanc);
}

/* Barre inférieure */
.footer-bas {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copyright {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
}
.footer-liens {
  display: flex;
  gap: 24px;
}
.footer-liens a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
  transition: color 0.2s;
}
.footer-liens a:hover {
  color: rgba(255, 255, 255, 0.6);
}


/* ============================================================
   15. RESPONSIVE
   ============================================================ */

/* --- TABLETTE (max 1024px) --- */
@media (max-width: 1024px) {
  .conteneur,

  /* Hero : 1 colonne, on cache le visuel */
  .hero-contenu    { grid-template-columns: 1fr; gap: 0; padding: 80px 28px; }
  .hero-visuel     { display: none; }
  .hero-texte      { max-width: 100%; }

  /* Positionnement : 1 colonne */
  .positionnement-grille { grid-template-columns: 1fr; gap: 56px; }
  .positionnement-photo  { aspect-ratio: 16/9; max-height: 400px; }

  /* Domaines : 2 colonnes */
  .domaines-grille { grid-template-columns: repeat(2, 1fr); }

  /* Pourquoi : 1 colonne */
  .pourquoi-grille  { grid-template-columns: 1fr; gap: 52px; }
  .pourquoi-gauche  { position: static; }

  /* Formats : 1 colonne */
  .formats-grille { grid-template-columns: 1fr; }

  /* FAQ : 1 colonne */
  .faq-grille { grid-template-columns: 1fr; gap: 48px; }

  /* Footer : 2 colonnes */
  .footer-grille { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* Trust bar : espacement réduit */
  .trust-item { padding: 0 24px; }
}

/* --- MOBILE (max 768px) --- */
@media (max-width: 768px) {
  .conteneur,
  /* Sections : padding réduit */
  .positionnement,
  .domaines,
  .galerie,
  .pourquoi,
  .formats,
  .faq         { padding: 80px 0; }
  .cta-final   { padding: 100px 0; }

  /* Domaines : 1 colonne */
  .domaines-grille { grid-template-columns: 1fr; }

  /* Galerie : 2 colonnes simples */
  .galerie-grille { grid-template-columns: 1fr 1fr; }
  .galerie-grille .photo:nth-child(1),
  .galerie-grille .photo:nth-child(2),
  .galerie-grille .photo:nth-child(3),
  .galerie-grille .photo:nth-child(4),
  .galerie-grille .photo:nth-child(5) {
    grid-column: span 1;
    aspect-ratio: 4/3;
  }

  /* En-tête galerie : 1 colonne */
  .galerie-entete { flex-direction: column; align-items: flex-start; }

  /* Trust bar : grille 2 colonnes */
  .trust-bar-interieur { flex-wrap: wrap; gap: 24px; }
  .trust-item           { border-right: none; width: calc(50% - 12px); }

  /* Footer : 1 colonne */
  .footer-grille { grid-template-columns: 1fr; gap: 28px; }
  .footer-bas    { flex-direction: column; align-items: flex-start; }

  /* CTA réassurance : 1 colonne */
  .cta-reassurance { flex-direction: column; gap: 14px; }

  /* Boutons hero : 1 colonne */
  .hero-boutons { flex-direction: column; align-items: flex-start; }
}