/* =========================================================
   BLOCK — Texte - Image Full
   Objectif:
   - Hauteur du bloc pilotée par la colonne texte (contenu + bouton)
   - +40px de padding vertical (20px haut / 20px bas) sur la colonne texte
   - Image NE DOIT PLUS définir la hauteur : elle s’adapte en cover
   - Desktop : image full-bleed (50vw du bord -> centre), texte dans --layout-wide-size
========================================================= */

.texte-image-full{
  width: 100%;
  overflow: hidden; /* évite scroll horizontal avec marges full-bleed */
}

/* Container wide + flex */
.texte-image-full__container{
  max-width: var(--layout-wide-size);
  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  align-items: stretch; /* ✅ les 2 colonnes auront la même hauteur */
  gap: 0;
}

/* =========================================================
   MEDIA (image)
   - 50vw
   - Full-bleed via margin calc
   - L'image est en absolute pour ne jamais imposer la hauteur
========================================================= */

.texte-image-full__mediaCol{
  width: 50vw;
  flex: 0 0 50vw;
  position: relative;
  overflow: hidden; /* ✅ crop cover */
  min-height: 0;    /* ✅ sécurité */
}

/* ✅ Image hors du flow => ne définit plus la hauteur */
.texte-image-full__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Full-bleed edge -> center */
.texte-image-full.is-image-left .texte-image-full__mediaCol{
  margin-left: calc(50% - 50vw); /* colle au bord gauche */
}

.texte-image-full.is-image-right .texte-image-full__mediaCol{
  margin-right: calc(50% - 50vw); /* colle au bord droit */
}

/* Order desktop */
.texte-image-full.is-image-left  .texte-image-full__mediaCol{ order: 0; }
.texte-image-full.is-image-left  .texte-image-full__textCol { order: 1; padding-left: 60px; }

.texte-image-full.is-image-right .texte-image-full__mediaCol{ order: 1; }
.texte-image-full.is-image-right .texte-image-full__textCol { order: 0; padding-right: 60px; }

/* =========================================================
   TEXT
   - Définit la hauteur du bloc
   - +40px padding vertical total
========================================================= */

.texte-image-full__textCol{
  flex: 1 1 auto;
  min-width: 0;

  display: flex;
  align-items: center;  /* centrage vertical du contenu */
  padding: 20px 0;      /* ✅ +40px total */
}

.texte-image-full__content{
  width: 100%;
  max-width: 70ch;
  padding: 50px 0;
}

.texte-image-full__title{
  margin: 0 0 14px;
  font-size: var(--font-size-l);
  font-weight: 500;
  line-height: 1.15;
}

.texte-image-full__text{
  font-size: var(--font-size-s);
  font-weight: 400;
  line-height: 1.6;
}

.texte-image-full__text p{ margin: 0 0 12px; }
.texte-image-full__text p:last-child{ margin-bottom: 0; }

/* =========================================================
   CTA (bouton principal)
========================================================= */

.texte-image-full__cta{
  margin-top: 15px;
}

.texte-image-full__cta .btn_secondary{
  display: inline-flex;
  margin-right: 15px;
}

/* =========================================================
   EXTRA LINKS (sous la div précédente)
   - empilés verticalement
   - MODE CLAIR : noir, hover page-accent
   - MODE SOMBRE : blanc, hover page-accent
========================================================= */

.texte-image-full__extra-links{
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.texte-image-full__extra-link{
  color: var(--color-noir, #000);         /* ✅ clair = noir */
  text-decoration: none;
  transition: color .2s ease;
}

.texte-image-full__extra-link:hover{
  color: var(--page-accent, var(--color-bleu, #164194)); /* ✅ hover = accent */
}



/* Mode sombre (classes/attributs de thème - fallback) */
:root[data-theme="dark"] .texte-image-full__extra-link,
body[data-theme="dark"] .texte-image-full__extra-link,
body.is-dark .texte-image-full__extra-link,
html.is-dark .texte-image-full__extra-link{
  color: var(--color-blanc, #fff);        /* ✅ sombre = blanc */
}

:root[data-theme="dark"] .texte-image-full__extra-link:hover,
body[data-theme="dark"] .texte-image-full__extra-link:hover,
body.is-dark .texte-image-full__extra-link:hover,
html.is-dark .texte-image-full__extra-link:hover{
  color: var(--page-accent, var(--color-bleu-clair, #477FC1)); /* ✅ hover = accent */
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px){
  .texte-image-full__container{
    padding: 0 20px;
  }

  .texte-image-full__textCol{
    padding: 20px 0; /* conserve le +40px */
  }

  .texte-image-full.is-image-left .texte-image-full__textCol{ padding-left: 40px; }
  .texte-image-full.is-image-right .texte-image-full__textCol{ padding-right: 40px; }
}

@media (max-width: 680px){
  .texte-image-full__container{
    flex-direction: column;
    min-height: 0;
    padding: 0 20px;
    align-items: stretch;
  }

  /* reset full-bleed margins */
  .texte-image-full.is-image-left .texte-image-full__mediaCol{ margin-left: 0; }
  .texte-image-full.is-image-right .texte-image-full__mediaCol{ margin-right: 0; }

  /* Image toujours en premier */
  .texte-image-full__mediaCol{
    order: 0 !important;
    width: 100%;
    flex: 0 0 auto;

    margin-left: 0;
    margin-right: 0;

    aspect-ratio: 16 / 9; /* ajuste si besoin */
  }

  /* Comme l'image est absolute, on garde height:100% via inset */
  .texte-image-full__textCol{
    order: 1 !important;
    padding: 20px 0;         /* ✅ +40px total */
    align-items: flex-start; /* plus naturel en mobile */
  }

  .texte-image-full.is-image-left .texte-image-full__textCol{ padding-left: 0; }
  .texte-image-full.is-image-right .texte-image-full__textCol{ padding-right: 0; }
}