body { margin: 0; font-family: Georgia, serif; }

/* =========================================================================
   IMAGE DU HAUT
   ========================================================================= */
#zone_img .header-img {
  width: 100%;
  height: 42vw;
  min-height: 320px;
  max-height: 950px;
  object-fit: cover;
  display: block;
}

/* =========================================================================
   SECTION "LIVRE OUVERT"

   Les 2 colonnes partagent tout (masque, positionnement, tailles) : seules
   diffèrent l'image du masque (gauche/droite) et le fond (couleur/photo).

   Le masque combine 2 calques :
     1. le SVG de la courbe en haut, sur la hauteur du "chapeau"
     2. un aplat plein en dessous, pour garder la zone opaque

   --chapeau = hauteur du chapeau. Tout en dépend (remontée du bloc, coupure
   du dégradé, taille du masque, padding haut du texte) : une seule valeur à
   changer par palier.

   Le graphiste a fourni 4 dessins de courbe (mobile / 1080 / 1440 / 1920).
   Chacun a son propre rapport hauteur/largeur, d'où un --chapeau différent
   par palier, exprimé en vw pour que la courbe garde sa forme quand la
   fenêtre bouge à l'intérieur d'un palier :
     mobile : 110.6 / 393     = 28.14 % de la largeur de colonne (= 100vw)
     1080   : 116.7 / 540.1   = 21.61 % (colonne = 50vw) -> 10.80vw
     1440   : 144   / 719.7   = 20.01 % (colonne = 50vw) -> 10.00vw
     1920   : 243.1 / 960     = 25.32 % (colonne = 50vw) -> 12.66vw

   NB : les padding de .text-col .container sont ici (et pas dans other.css)
   car ils dépendent directement de la hauteur du chapeau : ils servent à
   dégager la courbe, pas à mettre en forme le texte.

   NB2 : volontairement PAS de calc() dépendant de la hauteur de l'élément
   dans mask-size (Safari le résolvait parfois trop tôt, laissant le bas de
   la colonne transparent). Le 2e calque reste en 100% 100%.
   ========================================================================= */

#zone_columne { position: relative; }

section.MCB-txt-img-claque-livre {
  overflow: inherit;
}
#zone_img {
/*  margin-bottom: -55px;*/
}
.txt_agenda_une_home .title_text {
  font-family: 'RethinkSans-Bold';
  
}
.text-col,
.image-col {
  position: relative;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: top, top;
  mask-position: top, top;
  /* +1px : le SVG déborde d'un pixel sur le dégradé, sinon un liseré
     transparent apparaît à la jonction des 2 calques (trait horizontal
     sur toute la largeur). Le débordement se fait dans la bande basse du
     dessin, qui est pleine largeur : la courbe n'est pas modifiée. */
  -webkit-mask-size: 100% calc(var(--chapeau) + 1px), 100% 100%;
  mask-size: 100% calc(var(--chapeau) + 1px), 100% 100%;
}

/* ---- Ce qui distingue les 2 colonnes : masque miroir + fond ----
   Le 2e calque du masque est un dégradé à coupure nette : transparent
   au-dessus de la hauteur du chapeau, opaque en dessous. C'est lui qui
   garde la zone sous la courbe visible. ---- */
.text-col {
  background-color: var(--color-brand-anis);
}
.image-col {
/*  background-image: url('./image-test.jpg');*/
  background-size: cover;
  background-position: center;
}
.image-col::after {
/*  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-brand-red);
  mix-blend-mode: multiply;
  opacity: 0.55;*/
}

/* =========================================================================
   PALIERS — un dessin de courbe par palier

   En empilé (< 768px), .image-col remonte elle-même sur le bloc texte et
   celui-ci réserve la place en padding-bottom.
   En côte à côte (>= 768px), ces 2 règles sont annulées : les colonnes
   Bootstrap s'étirent alors naturellement à la même hauteur (align-items
   stretch par défaut), donc aucune hauteur minimale n'est imposée.
   ========================================================================= */

/* --- Base : < 768px, courbe MOBILE, colonne pleine largeur --- */
:root { --chapeau: 28.14vw; }

.text-col {
  -webkit-mask-image: url('../images/masques/masque-courbe-mobile-gauche.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
  mask-image: url('../images/masques/masque-courbe-mobile-gauche.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
}
.image-col {
  -webkit-mask-image: url('../images/masques/masque-courbe-mobile-droite.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
  mask-image: url('../images/masques/masque-courbe-mobile-droite.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
}

#zone_columne {
  margin-top: calc(-1 * var(--chapeau));
}
.text-col .txt_agenda_une_home {
  padding-bottom: calc(var(--chapeau) * 0.6 + 18px);
  padding-top: calc(var(--chapeau) + 18px);
}
@media (max-width: 767px) {
  .text-col .txt_agenda_une_home {
    padding-top: calc(var(--chapeau) * 0.6 + 24px);
    padding-bottom: calc(var(--chapeau) + 24px);
  }
}
.image-col { margin-top: calc(-1 * var(--chapeau)); min-height: 460px; }

/* --- >= 768px : côte à côte (col-md-6), courbe 1080 --- */
@media (min-width: 768px) {
  :root { --chapeau: 10.80vw; }
  .text-col {
    -webkit-mask-image: url('../images/masques/masque-courbe-1080-gauche.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
    mask-image: url('../images/masques/masque-courbe-1080-gauche.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
  }
  .image-col {
    -webkit-mask-image: url('../images/masques/masque-courbe-1080-droite.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
    mask-image: url('../images/masques/masque-courbe-1080-droite.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
  }
  /* côte à côte : plus de remontée ni de hauteur mini, les colonnes
     s'alignent d'elles-mêmes sur la plus haute des deux */
  .image-col { margin-top: 0; min-height: 0; }
  #zone_img .header-img { min-height: 460px; }
}

/* --- >= 1200px : courbe 1440 --- */
@media (min-width: 1200px) {
  :root { --chapeau: 10.00vw; }
  .text-col {
    -webkit-mask-image: url('../images/masques/masque-courbe-1440-gauche.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
    mask-image: url('../images/masques/masque-courbe-1440-gauche.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
  }
  .image-col {
    -webkit-mask-image: url('../images/masques/masque-courbe-1440-droite.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
    mask-image: url('../images/masques/masque-courbe-1440-droite.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
  }
  #zone_img .header-img { min-height: 520px; }
}

/* --- >= 1600px : courbe 1920 --- */
@media (min-width: 1600px) {
  :root { --chapeau: 12.66vw; }
  .text-col {
    -webkit-mask-image: url('../images/masques/masque-courbe-1920-gauche.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
    mask-image: url('../images/masques/masque-courbe-1920-gauche.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
  }
  .image-col {
    -webkit-mask-image: url('../images/masques/masque-courbe-1920-droite.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
    mask-image: url('../images/masques/masque-courbe-1920-droite.svg'), linear-gradient(transparent var(--chapeau), #000 var(--chapeau));
  }
  #zone_img .header-img { min-height: 600px; }
}

/* =========================================================================
   ALIGNEMENT DU TEXTE SUR LA GRILLE DU SITE (.container.container_wide)

   Volontairement séparé du bloc "PALIERS" ci-dessus : ici on ne gère QUE le
   padding horizontal, pour que le texte tombe pile sur la même colonne que
   le reste du site. Le padding-top / padding-bottom (dégagement de la
   courbe, basé sur --chapeau) n'est pas touché, il reste défini plus haut.

   Principe : .text-col part du bord gauche de l'écran (0), alors que le
   .container_wide du site est centré avec une largeur donnée par palier.
   L'écart entre le bord de l'écran et le bord du texte du reste du site
   vaut donc : (100vw - largeur_du_container) / 2  +  le gutter (0.75rem).

   Quand .container_wide est en %, cet écart est un simple % de 100vw des 2
   côtés (ex. max-width: 90% -> 5vw de marge de chaque côté), pas besoin de
   calc() avec une largeur en px pour ces paliers-là.

   Paliers et largeurs = ceux de .container.container_wide (fournis par
   l'utilisateur) : 576/768/992px -> 90%, 1200px -> 1130px, 1300px ->
   1230px, 1500px -> 1430px, 1600px -> 1530px. Si ces valeurs changent dans
   la grille perso, les reporter ici à l'identique.
   ========================================================================= */

.text-col .txt_agenda_une_home {
  /* < 576px : .container_wide ne redéfinit rien, container fluide, seul
     le gutter compte */
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
@media (min-width: 576px) {
  .text-col .txt_agenda_une_home {
    /* max-width: 90% -> (100vw - 90vw)/2 = 5vw de chaque côté */
    padding-left: calc(5vw + 0.75rem);
    padding-right: calc(5vw + 0.75rem);
  }
}
@media (min-width: 768px) {
  .text-col .txt_agenda_une_home {
    /* toujours 90% à ce palier */
    padding-left: calc(5vw + 0.75rem);
    padding-right: calc(5vw + 0.75rem);
  }
}
@media (min-width: 992px) {
  .text-col .txt_agenda_une_home {
    /* toujours 90% à ce palier */
    padding-left: calc(5vw + 0.75rem);
    padding-right: calc(5vw + 0.75rem);
  }
}
@media (min-width: 1200px) {
  .text-col .txt_agenda_une_home {
    padding-left: calc((100vw - 1130px) / 2 + 0.75rem);
    padding-right: calc((100vw - 1130px) / 2 + 0.75rem);
  }
}
@media (min-width: 1300px) {
  .text-col .txt_agenda_une_home {
    padding-left: calc((100vw - 1230px) / 2 + 0.75rem);
    padding-right: calc((100vw - 1230px) / 2 + 0.75rem);
  }
}
@media (min-width: 1500px) {
  .text-col .txt_agenda_une_home {
    padding-left: calc((100vw - 1430px) / 2 + 0.75rem);
    padding-right: calc((100vw - 1430px) / 2 + 0.75rem);
  }
}
@media (min-width: 1600px) {
  .text-col .txt_agenda_une_home {
    padding-left: calc((100vw - 1530px) / 2 + 0.75rem);
    padding-right: calc((100vw - 1530px) / 2 + 0.75rem);
  }
}
@media (min-width: 2000px) {
  .text-col .txt_agenda_une_home {
    padding-right: calc(235px + 0.75rem);
  }
}