/* « Rennes comme ville étudiante » : la page Vie étudiante de l'ancien site,
   reprise avec son déroulé, ses photos et ses effets. Trois bandes illustrées
   en parallaxe, deux colonnes, un damier de six vignettes. */

/* ---------- entête : le titre à gauche, le chapeau à droite ----------
   Les autres pages du site portent leur entête centré ; celle-ci reprend la
   composition d'origine, qui tient le titre et son texte côte à côte. */
.rennes-tete .wrap{position:relative;z-index:1}
.rennes-tete-duo{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:30px 64px;align-items:center;text-align:left}
/* Sans chapeau à droite, le titre rend la colonne et reprend toute la largeur. */
.rennes-tete-duo.seul{grid-template-columns:1fr}
#vue-rennes-ville-etudiante .page-head{padding:168px 0 96px}
#vue-rennes-ville-etudiante .page-rubrique{justify-content:flex-start;margin-bottom:20px}
/* Le filet d'après disparaît : à gauche d'un titre aligné à gauche, il sert ;
   à droite, il flotte. */
#vue-rennes-ville-etudiante .page-rubrique::after{display:none}
#vue-rennes-ville-etudiante .page-head h1{margin:0;max-width:none;text-align:left;
  font-size:clamp(34px,4.6vw,56px)}
#vue-rennes-ville-etudiante .page-chapeau{margin:0;max-width:none;text-align:left;
  font-family:Montserrat,sans-serif;font-size:16px;line-height:1.78}

/* ---------- deux colonnes : les évènements, puis les transports ---------- */
#vue-rennes-ville-etudiante .sec{padding:76px 0}
.rennes-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.rennes-col{background:#fff;padding:48px 46px 52px}
/* La colonne de droite est grise, comme sur l'ancienne page : les deux colonnes
   se distinguent sans qu'un trait vienne les séparer. */
.rennes-col-grise{background:var(--stone-soft)}
.rennes-col h2{margin:0 0 16px;font-family:Spectral,serif;font-weight:300;
  font-size:clamp(25px,2.6vw,32px);line-height:1.18;color:var(--ink)}
.rennes-col h2 + p{margin-top:0}
.rennes-col p{margin:0 0 18px;font-size:15.6px;line-height:1.76;color:var(--muted);
  text-align:justify;hyphens:auto}
.rennes-col p:last-child{margin-bottom:0}
.rennes-col img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  margin:0 0 30px;background:var(--stone)}
.rennes-col-grise h2:not(:first-of-type){margin-top:34px;padding-top:30px;
  border-top:1px solid var(--line)}

/* L'encart cramoisi de l'association, repris de l'ancienne page. */
.rennes-encart{margin-top:38px;background:var(--crimson);color:#fff;padding:36px 34px 38px}
.rennes-encart-icone{display:block;width:34px;height:34px;margin-bottom:18px;color:#fff}
.rennes-encart-icone svg{width:100%;height:100%;display:block}
.rennes-encart h3{margin:0 0 14px;font-family:Spectral,serif;font-weight:400;
  font-size:24px;line-height:1.2;color:#fff}
.rennes-encart p{margin:0 0 14px;font-size:15px;line-height:1.74;color:rgba(255,255,255,.92);
  text-align:left;hyphens:none}
.rennes-encart p:last-child{margin-bottom:0}

/* ---------- les bandes illustrées ----------
   La photo reste en place pendant que le texte défile : c'est l'effet de
   l'ancienne page. « background-attachment:fixed » coûte cher à composer sur
   un téléphone et n'y tient pas sur iOS : il s'arrête sous 900 px, où la photo
   redevient simplement fixée au bloc. */
.rennes-bande{position:relative;overflow:hidden;
  padding:clamp(86px,9vw,124px) 0;
  background:var(--fond) center/cover no-repeat fixed;
  background-color:#15110F}
.rennes-bande::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,12,11,.72),rgba(14,12,11,.80))}
.rennes-bande .wrap{position:relative;z-index:1}
.rennes-bande-corps{max-width:84ch;margin:0 auto;text-align:center}
.rennes-bande h2{margin:0 0 22px;font-family:Spectral,serif;font-weight:300;
  font-size:clamp(28px,3.4vw,42px);line-height:1.14;color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.4)}
.rennes-bande p{margin:0 0 16px;font-size:16.2px;line-height:1.8;
  color:rgba(255,255,255,.88);text-wrap:pretty}
.rennes-bande p:last-child{margin-bottom:0}
/* La dernière bande pose son texte dans un cadre, comme sur l'ancienne page. */
.rennes-bande-encadree .rennes-bande-corps{max-width:none;
  background:rgba(14,12,11,.62);border:1px solid rgba(255,255,255,.22);
  padding:clamp(34px,4vw,54px) clamp(28px,4vw,60px)}

/* ---------- le damier des six repères ---------- */
.rennes-damier{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 38px}
.rennes-carte img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--stone);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.rennes-carte{overflow:hidden}
.rennes-carte:hover img{transform:scale(1.03)}
.rennes-carte h2{margin:22px 0 12px;font-family:Spectral,serif;font-weight:400;
  font-size:21px;line-height:1.25;color:var(--ink)}
.rennes-carte h2::before{content:"";display:block;width:34px;height:2px;
  background:var(--crimson);margin-bottom:16px}
.rennes-carte p{margin:0;font-size:15.2px;line-height:1.74;color:var(--muted);
  text-align:justify;hyphens:auto}

@media (max-width:1040px){
  .rennes-damier{grid-template-columns:repeat(2,1fr);gap:40px 30px}
}
@media (max-width:900px){
  /* Pas de fond fixe sur un petit écran : iOS ne le compose pas et le reste
     peine à le faire défiler sans à-coups. */
  .rennes-bande{background-attachment:scroll}
  .rennes-tete-duo{grid-template-columns:1fr;gap:22px}
  .rennes-duo{grid-template-columns:1fr}
}
@media (max-width:680px){
  .rennes-damier{grid-template-columns:1fr}
  .rennes-col{padding:34px 24px 38px}
  .rennes-encart{padding:30px 24px 32px}
  #vue-rennes-ville-etudiante .page-head{padding:126px 0 64px}
  #vue-rennes-ville-etudiante .sec{padding:56px 0}
}
@media (prefers-reduced-motion:reduce){
  .rennes-bande{background-attachment:scroll}
  .rennes-carte img{transition:none}
  .rennes-carte:hover img{transform:none}
}