/* =====================================================================
   index_alt.css — homepage "V8" (mix V6 + V7)
   - Hero plus grand (≈440px) façon V6
   - Plaque blanche calée à gauche avec liseré rouge (façon V7)
   - Tuiles SANS bordure (façon V6) + filet rouge sous l'image
   - Légende avec flèche script à droite (façon V7)
   - Grille en Bootstrap 3 (.row + .col-lg-* etc.)
   Dépend de web.css (variables --lo-red, --lo-ink, fonts Lato + IndieFlower)
   À déposer dans web/static/css/index_alt.css
   ===================================================================== */

.alt *{box-sizing:border-box}
.alt {
  font-family:var(--font-sans,'Lato',Helvetica,Arial,sans-serif);
  color:var(--lo-ink,#333);
  background:#fff;
  line-height:1.45;
  -webkit-font-smoothing:antialiased
}

.alt img{max-width:100%;display:block}
.alt a{color:var(--lo-red,#d8232a);text-decoration:none}
.alt h1,.alt h2,.alt h3{font-weight:700;margin:0;line-height:1.15}
.alt .surtitre {
  font-family:var(--font-script,'IndieFlower',cursive);
  color:var(--lo-red,#d8232a);
  margin:0
}

/* Hero ----------------------------------------------------------------- */
/* Plus petit qu'en V7 (≈440px) ; plaque calée à gauche, liseré rouge      */
.v8 .hero {position:relative;height:240px;overflow:hidden;background:#000}
.v8 .hero img {width:100%;height:100%;object-fit:cover}
.v8 .hero .plate {
  position:absolute;
  left: 60px;
  bottom: 44px;
  background: #fff;
  padding: 22px 34px;
  border-left: 6px solid var(--lo-red,#d8232a);
  white-space: nowrap;
  max-width:calc(100% - 120px)
}
.v8 .hero .plate .surtitre {font-size:26px; line-height:1}
.v8 .hero .plate h1 {
  font-size:30px; 
  margin-top:6px; 
  letter-spacing:-.005em;
  line-height:1.05;
  white-space:nowrap
}
.v8 .hero .plate h1 em {
  font-family:var(--font-script,'IndieFlower',cursive);
  font-style:normal;
  font-weight:400;
  color:var(--lo-red,#d8232a)
}

/* Grille (Bootstrap 3) ------------------------------------------------- */
.v8 .grid-wrap{padding:46px 0 60px}
.v8 .row3 {margin-bottom:30px}
.v8 .row3 > [class*="col-"]{margin-bottom:24px}
.v8 .row4 > [class*="col-"]{margin-bottom:20px}

/* Tile (sans bordure, façon V6) --------------------------------------- */
.v8 .tile{display:block;text-decoration:none;color:var(--lo-ink,#333);
          background:#fff;height:100%}
.v8 .tile .img{position:relative;overflow:hidden;background:#eee}
.v8 .tile .img img{width:100%;height:100%;object-fit:cover;
                   transition:transform .35s ease}
.v8 .row3 .tile .img{aspect-ratio:16/10}
.v8 .row4 .tile .img{aspect-ratio:4/3}
.v8 .tile:hover .img img{transform:scale(1.04)}
.v8 .tile .ruler{height:4px;background:var(--lo-red,#d8232a)}
.v8 .tile .cap{padding:0.5em 0 0;font-weight:700;text-transform:uppercase;
               letter-spacing:.04em;font-size:13px;color:var(--lo-ink,#333);
               display:flex;justify-content:space-between;align-items:center;
               gap:10px}
.v8 .row3 .tile .cap{font-size:18px;padding-top:0.33em;letter-spacing:.02em}
.v8 .tile .cap .arrow{color:var(--lo-red,#d8232a);
                      font-family:var(--font-script,'IndieFlower',cursive);
                      font-size:22px;font-weight:400;line-height:1;
                      flex:0 0 auto}
.v8 .row3 .tile .cap .arrow{font-size:26px}
.v8 .tile:hover .cap{color:var(--lo-red,#d8232a)}

/* Responsive — sur petit écran on garde le hero "cover" plein,
   et on ramène la plaque dans le cadre.                              */
@media (max-width: 900px){
  .v8 .hero{height:340px}
  .v8 .hero .plate{left:20px;right:20px;bottom:20px;
                   white-space:normal;padding:16px 20px;max-width:none}
  .v8 .hero .plate h1{white-space:normal;font-size:22px}
  .v8 .hero .plate .surtitre{font-size:20px}
}
@media (max-width: 560px){
  .v8 .hero{height:280px}
  .v8 .hero .plate{padding:14px 16px}
  .v8 .hero .plate h1{font-size:19px}
  .v8 .hero .plate .surtitre{font-size:18px}
}

/* Sous 768px, la légende n'est plus collée au bord de l'écran. */
@media (max-width: 767px){
  .v8 .tile .cap,
  .v8 .row3 .tile .cap{
    padding-left:12px;
    padding-right:12px;
  }
  .arrow {display: none;}
}