@charset "UTF-8";

/* ==========================================================
   TOM WAGNER — RESET CIBLÉ (ANTI-CHEVAUCHEMENT)
   Objectif : empêcher le CSS global de flotter / positionner
   les blocs et provoquer du chevauchement texte/images.
   ========================================================== */

/* Scope strict : uniquement dans ton article */
.tw-article,
.tw-article *{
  box-sizing: border-box !important;
}

/* Conteneur article */
.tw-article{
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 14px !important;
}

/* Séparateur */
.tw-sep{
  border: 0 !important;
  height: 1px !important;
  background: rgba(0,0,0,.18) !important;
  margin: 18px 0 !important;
}

/* =========================
   1) RESET des blocs (le cœur du fix)
   ========================= */

/* Bloc texte : on l’empêche de devenir overlay */
.tw-article .TextTomodori{
  position: relative !important;
  z-index: 2 !important;

  float: none !important;
  clear: both !important;

  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 14px 16px !important;

  background: #fff !important;      /* IMPORTANT : opaque */
  opacity: 1 !important;           /* au cas où un opacity global traîne */
}

/* Paragraphes : évite les marges énormes cumulées */
.tw-article .TextTomodori p{
  margin: 8px 0 !important;
}

/* Image container : on interdit l’absolu / float du CSS global */
.tw-article .image-container{
  position: relative !important;
  z-index: 1 !important;

  float: none !important;
  clear: none !important;

  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
}

/* Les images : aucune limite globale */
.tw-article img.thumbnail{
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: auto !important;
  max-height: none !important;

  border: 0px !important;
}

/* =========================
   2) Layout chapitres
   ========================= */

.tw-row{
  display: flex !important;
  gap: 18px !important;
  align-items: flex-start !important;
  margin: 18px 0 !important;

  float: none !important;
  clear: both !important;
}

.tw-col-text{
  flex: 0 1 460px !important;
  max-width: 520px !important;
  min-width: 280px !important;

  margin: 0 !important;
  padding: 0 !important;
}

.tw-col-media{
  flex: 1 1 0 !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* =========================
   3) Galeries images (grandes + adaptées écran)
   ========================= */

.tw-media{
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
}

/* 1, 2, 3 images */
.tw-media.tw-1{ grid-template-columns: 1fr !important; }
.tw-media.tw-2{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.tw-media.tw-3{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* Tuiles homogènes, mais surtout : PAS de chevauchement */
.tw-media .image-container{
  overflow: hidden !important;
  border-radius: 12px !important;
  aspect-ratio: 16 / 10 !important;
}

/* Remplissage propre */
.tw-media .image-container img.thumbnail{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* =========================
   4) Mobile : on empile, zéro trous
   ========================= */

@media (max-width: 980px){
  .tw-row{
    display: block !important;      /* <— plus simple, zéro surprise */
    margin: 12px 0 !important;
  }

  .tw-col-text,
  .tw-col-media{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .tw-col-media{ margin-top: 10px !important; }

  .tw-media.tw-2,
  .tw-media.tw-3{
    grid-template-columns: 1fr !important;
  }

  .tw-media .image-container{
    aspect-ratio: 4 / 3 !important;
  }

  .tw-sep{ margin: 12px 0 !important; }
}

/* Lien final */
.tw-footerlink{
  margin: 26px 0 10px 0 !important;
  padding: 14px 0 6px 0 !important;
  text-align: center !important;
  border-top: 1px solid rgba(0,0,0,.18) !important;

  float: none !important;
  clear: both !important;
}
.tw-footerlink a{
  display: inline-block !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  background: rgba(255,255,255,.55) !important;
  text-decoration: none !important;
}
/* Desktop : ratio proche des photos => quasi pas de recadrage */
@media (min-width: 601px){
  .tw-media .image-container{ aspect-ratio: 4 / 3; }
  .tw-media .image-container img{ object-fit: cover; } /* tu peux garder cover */
}

/* =========================
   TOM WAGNER — OVERRIDE HARD
   (à coller tout en bas)
   Objectif : image ENTIEREMENT visible (zéro crop)
   ========================= */

/* On cible large + fort */
.tw-article .tw-media .image-container{
  aspect-ratio: 16 / 10 !important;   /* garde ton format si tu veux */
  overflow: hidden !important;
  background: rgba(0,0,0,.10) !important; /* bandes discrètes si besoin */
}

/* IMPORTANT : on force SUR LA CLASSE thumbnail aussi */
.tw-article .tw-media .image-container > img,
.tw-article .tw-media .image-container > img.thumbnail{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;     /* <-- ENTIER, pas de crop */
  object-position: center center !important;
  display: block !important;
  border: 0px !important;
}

/* Mobile : ratio plus "photo" */
@media (max-width: 600px){
  .tw-article .tw-media .image-container{
    aspect-ratio: 4 / 3 !important;
  }
}

/* ===== TW CTA (nettoyé / sans doublons) ===== */

/* Conteneur : 2 blocs si place, sinon empilé */
.tw-ctas{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:18px;
  margin:18px 0 8px;
}

/* Carte CTA */
.tw-cta{
  text-align:center;
  padding:16px 18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.25);
  border-radius:12px;
  box-shadow:0 10px 18px rgba(0,0,0,.12);
  margin:16px 0 10px;
}

/* Variante compacte (si besoin) */
.tw-cta-small{ padding:16px 18px; }

/* Titre */
.tw-cta-title{
  font-weight:bold;
  font-size:16px;
  margin-bottom:12px;
}

/* Lien CTA (bloc cliquable) */
.tw-cta-link{
  display:inline-block;
  padding:10px 12px;
  text-decoration:none;
}

/* Texte CTA */
.tw-cta-text{
  font-size:16px;
  line-height:1.25;
}

/* Zone boutons */
.tw-cta-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

/* Boutons */
.tw-cta-btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.25);
  background:#f7f7f7;
  text-decoration:none;
  font-weight:bold;
  transition:transform .12s ease;
}

.tw-cta-btn:hover{ transform:translateY(-1px); }

/* Texte alternatif (Option 2) */
.tw-cta-alt{
  margin-top:4px;
  font-size:13px;
  opacity:.9;
}

/* Lignes décoratives */
.tw-cta-lines{
  max-width:520px;
  margin:10px auto 0;
}

.tw-cta-line{
  display:block;
  height:3px;
  border-radius:999px;
  margin:6px auto;
}

.tw-cta-line.orange{ width:62%; background:#e09a28; }
.tw-cta-line.green{  width:78%; background:#2f9a44; }

/* Petit hover subtil sur les liens-blocs */
.tw-cta-link:hover{ transform:translateY(-1px); }