/* ==========================================================================
   BANDEAUX EN TEXTE RÉEL
   Ces deux bandeaux étaient auparavant de simples images avec le texte
   incrusté : il n'était ni traduisible ni lu par Google. Les photos et les
   icônes d'origine sont conservées, seules les écritures deviennent du texte.
   ========================================================================== */

:root{
  --ocre:#8A4E18;              /* le brun des icônes et des mots mis en avant */
}

/* Icône posée depuis un masque : la couleur se pilote en CSS.
   Les chemins sont relatifs à CE fichier, donc au dossier css/. */
.ico-masque{
  display:block; background-color:currentColor;
  -webkit-mask:var(--ico) center / contain no-repeat;
          mask:var(--ico) center / contain no-repeat;
}
.ico-tournage      {--ico:url("../images/icones/tournage.png");}
.ico-reunion       {--ico:url("../images/icones/reunion.png");}
.ico-evenement     {--ico:url("../images/icones/evenement.png");}
.ico-relogement    {--ico:url("../images/icones/relogement.png");}
.ico-appareil-photo{--ico:url("../images/icones/appareil-photo.png");}
.ico-canape        {--ico:url("../images/icones/canape.png");}
.ico-localisation  {--ico:url("../images/icones/localisation.png");}

/* ==========================================================================
   1. « Un lieu pour vos projets »  (page d'accueil)
   ========================================================================== */
/* Le fond EST votre image d'origine, affichee en entier : une seule image,
   avec le parasol au bord de la pancarte et la photo visible en haut et a
   gauche. La pancarte en HTML est posee pile sur celle qui y est incrustee
   (mesuree a 2,33 % du bord, 38,46 % de large, de 1,61 % du haut au bas).
   padding:0 est indispensable : les <section> de la page en ont 52 px.   */
.bandeau-projets{
  position:relative; display:block; overflow:hidden; padding:0;
  aspect-ratio:1672 / 872;
  color:inherit; text-decoration:none;
}
.bandeau-projets-fond{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:fill;            /* le format est verrouille : aucune deformation */
  display:block;
}
.bandeau-projets .wrap{
  position:absolute; inset:0; z-index:2;
  max-width:none; width:100%; margin:0; padding:0;
}

/* ---- La pancarte --------------------------------------------------------
   Tailles definies UNE SEULE FOIS, calibrees sur l'allemand et l'espagnol.
   Aucune cesure : les mots ne sont jamais coupes par un tiret.            */
.bpc{
  position:absolute;
  left:2.1%; width:37.2%;
  top:50%; transform:translateY(-50%);
  max-height:94%;                   /* la hauteur suit le contenu */
  box-sizing:border-box;
  background:#FAFAF8;
  border-radius:26px;               /* les quatre coins sont arrondis */
  box-shadow:0 18px 48px rgba(20,20,20,.22);
  padding:4.4% clamp(14px, 1.9vw, 30px);
  display:flex; flex-direction:column; justify-content:center;
  text-align:center;
  container-type:inline-size;   /* reference pour la ligne du bas */
  hyphens:none; -webkit-hyphens:none; overflow-wrap:normal; word-break:normal;
}

.bpc-logo{display:flex; align-items:center; justify-content:center; gap:4%; margin-bottom:3%;}
.bpc-logo img{width:33%; min-width:84px; height:auto; display:block;}
.bpc-logo .trait{flex:1; height:1px; background:rgba(20,20,20,.22); max-width:26%;}

.bpc-sur{
  font-family:'Karla',sans-serif; font-size:clamp(.76rem, 1.14vw, 1.2rem);
  font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--encre);
}
.bpc-titre{
  font-size:clamp(1.3rem, 2.62vw, 2.5rem); line-height:1.08;
  margin:2.5% 0 3.5%; color:var(--jungle); text-transform:uppercase;
  letter-spacing:.01em;
}
.bpc-intro{font-size:clamp(.88rem, 1.36vw, 1.42rem); line-height:1.58; color:var(--encre);}
.bpc-intro strong{color:var(--ocre); font-weight:700;}

.bpc-usages{
  display:grid; grid-template-columns:repeat(4,1fr);
  list-style:none; padding:0; margin:5% 0 0;
}
.bpc-usages li{
  min-width:0; padding:0 2%;
  display:flex; flex-direction:column; align-items:center;
  border-left:1px solid rgba(20,20,20,.14);
}
.bpc-usages li:first-child{border-left:none;}
.bpc-usages .ico-masque{width:clamp(30px, 3.5vw, 48px); height:42px; color:var(--ocre); margin-bottom:8%;}
.bpc-usages span{
  font-family:'Karla',sans-serif; font-size:clamp(.56rem, .88vw, .96rem);
  font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  line-height:1.3; color:var(--encre);
}

.bpc-valeurs{
  margin-top:5%; padding-top:4%; border-top:1px solid rgba(20,20,20,.14);
  font-size:clamp(.62rem, .95vw, 1.02rem); color:var(--encre); line-height:1.65;
}
.bpc-valeurs b{font-weight:400;}
.bpc-valeurs i{font-style:normal; opacity:.45; margin:0 .35em;}

.bpc-cta{
  display:flex; align-items:center; justify-content:center; gap:3%;
  margin-top:5%; padding:3.5% 3%; border-radius:11px;
  background:#141414; color:#fff; text-decoration:none;
  font-family:'Karla',sans-serif; font-size:clamp(.66rem, 1.04vw, 1.14rem);
  font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  transition:background .2s ease;
}
.bpc-cta:hover{background:#2E2E2E;}
.bpc-cta::after{
  content:''; width:15px; height:9px; flex:0 0 15px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h14M10 1l4 3.5-4 3.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h14M10 1l4 3.5-4 3.5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
}


/* ==========================================================================
   2. « Location idéale pour vos tournages de films »  (page Vos projets)
   ========================================================================== */
.bandeau-tournages{position:relative; display:block; overflow:hidden; padding:0;}
/* Dimensions naturelles de la photo, exactement comme l'ancienne image. */
.bandeau-tournages-fond{width:100%; height:auto; display:block;}
/* Voile très léger et progressif : il ne doit jamais former d'aplat ni de
   bord visible, la lisibilité vient surtout de l'ombre portée du texte. */
.bandeau-tournages::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,
    rgba(8,8,8,.46) 0%, rgba(8,8,8,.30) 20%,
    rgba(8,8,8,.12) 40%, rgba(8,8,8,0) 64%);
}

.bt-contenu{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:0 max(28px, calc((100vw - 1180px)/2 + 28px)) 30px;
  color:#fff;
  /* l'ombre portée remplace le bandeau opaque d'autrefois */
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.55);
}
.bt-titre{
  font-family:'Karla',sans-serif; font-weight:800;
  font-size:clamp(1.15rem, 2.5vw, 2rem); line-height:1.15;
  text-transform:uppercase; letter-spacing:.005em; margin:0 0 20px; color:#fff;
}
.bt-points{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 34px;
  list-style:none; padding:0; margin:0;
}
.bt-points li{display:flex; align-items:center; gap:13px; font-size:.97rem; line-height:1.4;}
.bt-points .ico-masque{width:38px; height:34px; flex:0 0 38px; color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));}
.bt-points .bt-contact{
  padding-left:34px; border-left:1px solid rgba(255,255,255,.45);
}

@media (max-width:760px){
  .bandeau-projets{aspect-ratio:auto;}
  .bandeau-projets-fond{position:static; height:260px; object-fit:cover;}
  .bandeau-projets .wrap{position:static;}
  .bpc{position:static; width:auto; border-radius:0;}
  .bpc{padding:26px 22px 22px;}
  .bpc-usages{grid-template-columns:repeat(2,1fr); gap:18px 0;}
  .bpc-usages li:nth-child(odd){border-left:none;}
  .bpc-usages{grid-template-columns:repeat(2,1fr); gap:22px 0;}
  .bpc-usages li:nth-child(odd){border-left:none;}
  .bt-contenu{padding-bottom:24px;}
  .bt-points{gap:12px 24px;}
  .bt-points li{font-size:.88rem;}
  .bt-points .bt-contact{padding-left:0; border-left:none; padding-top:12px;
    border-top:1px solid rgba(255,255,255,.4); width:100%;}
}

/* Le bloc de marque du menu est devenu un lien : il garde son allure. */
a.brand{text-decoration:none;}
a.brand:hover{opacity:.85;}

/* Les quatre valeurs, chacune a SON maximum : la longueur du texte varie
   d'une langue a l'autre, donc la taille aussi. Maximums mesures, en % de
   la largeur de la pancarte : fr 3,455 | en 3,402 | de 3,402 | es 3,105.
   On retient 98 % de chaque maximum pour garder une marge de securite.   */
@supports (font-size: 1cqw) {
  .bpc-valeurs             {font-size:3.33cqw;}
  html[lang="fr"] .bpc-valeurs{font-size:3.38cqw;}
  html[lang="en"] .bpc-valeurs{font-size:3.33cqw;}
  html[lang="de"] .bpc-valeurs{font-size:3.33cqw;}
  html[lang="es"] .bpc-valeurs{font-size:3.04cqw;}
}

/* Entre 760 et 1024 px (tablettes), la pancarte est trop etroite pour
   quatre colonnes : les mots longs de l'allemand et de l'espagnol
   debordaient. On passe a deux colonnes sur cette plage. */
@media (min-width:761px) and (max-width:1024px){
  .bpc-usages{grid-template-columns:repeat(2,1fr); gap:16px 0;}
  .bpc-usages li{border-left:none;}
  .bpc-usages li:nth-child(even){border-left:1px solid rgba(20,20,20,.14);}
}

/* ==========================================================================
   CORRECTIF D'ADAPTATION — 6 octobre 2026
   Sur telephone, la photo du bandeau tournages ne fait plus que 200 px de
   haut alors que le texte pose dessus en demande le double : les lignes se
   chevauchaient. En dessous de 860 px le texte passe donc SOUS la photo,
   sur un fond sombre, au lieu d'etre pose dessus.
   ========================================================================== */
@media (max-width:860px){
  .bandeau-tournages{background:#141414;}
  .bandeau-tournages::after{display:none;}
  .bandeau-tournages-fond{height:clamp(190px, 46vw, 300px); object-fit:cover;}
  .bt-contenu{
    position:static; padding:22px 22px 26px; text-shadow:none;
  }
  .bt-titre{font-size:clamp(1.05rem, 4.4vw, 1.5rem); margin-bottom:16px;}
  .bt-points{flex-direction:column; align-items:flex-start; gap:14px;}
  .bt-points li{font-size:clamp(.88rem, 3.6vw, 1rem); width:100%;}
  .bt-points .ico-masque{filter:none;}
  .bt-points .bt-contact{
    padding-left:0; padding-top:14px; border-left:none;
    border-top:1px solid rgba(255,255,255,.35); width:100%;
  }
}