/* =====================================================================
   PAGE LA MAISON (page à part entière, 21/10/2026)
   Texte repris de l'ancienne page « Notre société » du site AppDrag.
   ===================================================================== */

/* ----- Ouverture ----- */
.maison-ouverture { position: relative; min-height: 78vh; display: flex; align-items: flex-end; color: var(--creme); overflow: hidden; }
.maison-ouverture__fond {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, .3) 40%, rgba(10, 10, 10, .88) 100%),
    url('../../images/ambiance/vignes-tabor.jpg') center 55% / cover;
}
.maison-ouverture__contenu { position: relative; width: 100%; padding-top: calc(var(--hauteur-entete) + 60px); padding-bottom: 72px; }
.maison-ouverture h1 { font-size: clamp(44px, 7vw, 96px); line-height: 1.02; margin-bottom: 24px; color: var(--creme); }
.maison-ouverture__chapo { font-size: clamp(18px, 1.6vw, 22px); max-width: 640px; color: rgba(245, 240, 232, .85); }

/* ----- Chiffres ----- */
.maison-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: -48px; position: relative; padding: 36px 40px; border-radius: 20px; background: var(--blanc); box-shadow: var(--ombre-m); }
.maison-chiffres li { font-size: 14px; color: var(--gris); }
.maison-chiffres strong { display: block; font-family: var(--police-titre); font-size: clamp(34px, 3.6vw, 48px); font-weight: 600; color: var(--bordeaux); line-height: 1.1; margin-bottom: 6px; }

/* ----- Récit ----- */
.maison-recit { max-width: 900px; padding-top: 110px; display: grid; gap: 64px; }
.maison-chapitre { display: grid; grid-template-columns: 96px 1fr; gap: 32px; }
.maison-chapitre__numero { font-family: var(--police-titre); font-size: 56px; line-height: 1; color: var(--or); }
.maison-chapitre h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 16px; }
.maison-chapitre p { font-size: 17px; line-height: 1.75; color: var(--texte-doux); margin-bottom: 12px; }

/* ----- Notre métier ----- */
.maison-metier { margin-top: 110px; padding: 100px 0; background: var(--creme-fonce); }
.maison-metier__grille { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; }
.maison-metier__photo img { width: 100%; border-radius: 20px; aspect-ratio: 4 / 5; object-fit: cover; }
.maison-metier__blocs { display: grid; gap: 24px; margin: 28px 0 32px; }
.maison-metier__blocs h3 { font-family: var(--police-titre); font-size: 22px; margin-bottom: 6px; }
.maison-metier__blocs p { color: var(--texte-doux); }
.maison-metier__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ----- Dates clés ----- */
.maison-dates { padding-top: 110px; }
.maison-dates__tete { margin-bottom: 40px; }
.maison-frise { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--or); }
.maison-frise li { position: relative; padding: 28px 18px 0 0; font-size: 14px; color: var(--texte-doux); }
.maison-frise li::before { content: ''; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--or); }
.maison-frise strong { display: block; font-family: var(--police-titre); font-size: 24px; color: var(--bordeaux); margin-bottom: 8px; }

/* ----- Nous rencontrer ----- */
.maison-contact { margin: 110px 0 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; padding: 56px; border-radius: 24px; background: var(--noir-doux); color: var(--creme); }
.maison-contact h2 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 14px; color: var(--creme); }
.maison-contact p { color: rgba(245, 240, 232, .75); max-width: 520px; }
.maison-contact__actions { margin-top: 24px; }
.maison-contact__adresse { font-style: normal; display: grid; gap: 6px; padding-left: 32px; border-left: 1px solid var(--ligne-claire); color: rgba(245, 240, 232, .85); }
.maison-contact__adresse strong { color: var(--or); font-weight: 600; margin-bottom: 4px; }
.maison-contact__adresse a { color: var(--creme); }

/* ----- Réactif ----- */
@media (max-width: 1024px) {
  .maison-chiffres { grid-template-columns: repeat(2, 1fr); }
  .maison-metier__grille, .maison-contact { grid-template-columns: 1fr; }
  .maison-frise { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .maison-contact { padding: 32px; }
  .maison-contact__adresse { padding-left: 0; border-left: none; padding-top: 24px; border-top: 1px solid var(--ligne-claire); }
}
@media (max-width: 720px) {
  .maison-ouverture { min-height: 64vh; }
  .maison-chiffres { padding: 24px; margin-top: -32px; }
  .maison-chapitre { grid-template-columns: 1fr; gap: 8px; }
  .maison-chapitre__numero { font-size: 40px; }
  .maison-frise { grid-template-columns: 1fr; border-top: none; border-left: 1px solid var(--or); row-gap: 0; }
  .maison-frise li { padding: 0 0 22px 24px; }
  .maison-frise li::before { left: -5px; top: 8px; }
}