@import url("/templates/joomspirit_134/css/custom/BLOC 20_PAGE BIO.css");

/* =========================================
   PATCH FINAL — Page BIO
   Bandeau réduit NON tronqué + encart discret
   ========================================= */

/* Bandeau : image réduite, non recadrée */
.bio-hero-boat {
  max-width: 75ch;               /* largeur alignée sur la bio */
  margin: 0 auto 1.5rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}

.bio-hero-boat img {
  display: block;
  width: 100%;
  height: auto !important;       /* conserve les proportions : PAS de coupe */
}

/* Encart du carnet intime : encore plus discret */
.bio-article .bio-boat-inline {
  max-width: 220px;              /* 20% plus petit que la version actuelle */
  margin: 0.25rem auto 1rem;     /* centré, respiration */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.bio-article .bio-boat-inline img {
  display: block;
  width: 100%;
  height: auto !important;       /* jamais tronqué */
}

/* Mobile */
@media (max-width: 768px) {
  .bio-hero-boat { max-width: 100%; }
  .bio-article .bio-boat-inline { max-width: 65%; }
}


/* =========================================
   PATCH 2025-11-17 — Page BIO
   Bandeau bateau (image 1600x800, sans recadrage)
   ========================================= */

.bio-hero-boat {
  max-width: 75ch;              /* même largeur visuelle que la bio */
  margin: 0 auto 1.2rem;        /* centré, petit espace sous le bandeau */
  height: auto !important;      /* annule les hauteurs fixes précédentes */
  aspect-ratio: auto !important;/* annule les aspect-ratio précédents */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}

.bio-hero-boat img {
  display: block;
  width: 100%;
  height: auto !important;      /* conserve le ratio 2:1 sans coupe */
}

/* =========================================
   PAGE BIO — Insert bateau dans le texte
   Version forcée (JCE + float)
   ========================================= */

.bio-article img.bio-boat-left{
  float: left !important;
  max-width: 150px !important;   /* avant 160 */
  height: auto !important;
  display: block;
   margin: 0.35rem 1.5rem 0.8rem 0 !important;  /* un peu plus bas */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Variante droite si un jour tu en as besoin */
.bio-article img.bio-boat-right{
  float: right !important;
  max-width: 160px !important;
  height: auto !important;
  display: block;
  margin: 0.1rem 0 0.8rem 1.5rem !important;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Mobile : on casse le float pour garder une bonne lisibilité */
@media (max-width: 768px){
  .bio-article img.bio-boat-left,
  .bio-article img.bio-boat-right{
    float: none !important;
    max-width: 70% !important;
    margin: 0.5rem auto 0.8rem !important;
  }
}

/* =========================================
   PAGE BIO — Fil conducteur / clé de lecture
   ========================================= */

.bio-fil-conducteur{
  max-width: 72ch;
  margin: 2rem auto 2.2rem;
  padding: 1.45rem 1.6rem;
  border-left: 5px solid rgba(117, 92, 62, .55);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,244,236,.92));
  box-shadow: 0 10px 26px rgba(31, 46, 59, .08);
}

.bio-fil-conducteur p{
  margin: 0 0 .85rem;
  font-size: 1.04rem;
  line-height: 1.75;
}

.bio-fil-conducteur p:last-child{
  margin-bottom: 0;
}

.bio-fil-conducteur strong{
  color: #1f2e3b;
  font-size: 1.12em;
}

.bio-fil-conducteur__note{
  margin-top: 1.05rem !important;
  padding-top: .9rem;
  border-top: 1px solid rgba(31, 46, 59, .12);
  color: rgba(31, 46, 59, .82);
  font-style: italic;
}

/* Mobile */
@media (max-width: 768px){
  .bio-fil-conducteur{
    margin: 1.5rem auto 1.8rem;
    padding: 1.15rem 1.1rem;
    border-left-width: 4px;
    border-radius: 14px;
  }

  .bio-fil-conducteur p{
    font-size: 1rem;
    line-height: 1.65;
  }
}