/* Calife Astra : styles des pages (repris de la maquette) */
/* ---- page accueil ---- */



.hero-tall{display:none}
@media (max-width: 767px){.hero-wide{display:none !important}.hero-tall{display:block !important}}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:330px 100px 270px;column-gap:16px}
.collage .c-title{grid-column:1 / 4;grid-row:1}
.collage .c-main{grid-column:4 / 9;grid-row:1 / 3;z-index:2}
.collage .c-left{grid-column:1 / 5;grid-row:2 / 4;z-index:1}
.collage .c-right{grid-column:7 / 13;grid-row:2 / 4;z-index:1}
.collage .c-btn{grid-column:5 / 7;grid-row:3;align-self:center;justify-self:center;z-index:3}
@media (max-width: 900px){
  .collage{grid-template-columns:1fr;grid-template-rows:none;row-gap:16px}
  .collage .c-title,.collage .c-main,.collage .c-left,.collage .c-right,.collage .c-btn{grid-column:1;grid-row:auto}
  .collage img{height:260px !important}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1025px){
  @supports (animation-timeline: view()){
    .fx-up{animation:fxUp linear both;animation-timeline:view()}
    .fx-zoom{animation:fxZoom linear both;animation-timeline:view()}
    .fx-left{animation:fxLeft linear both;animation-timeline:view();animation-range:entry 0% cover 56%}
    .fx-right{animation:fxRight linear both;animation-timeline:view();animation-range:entry 0% cover 56%}
    .fx-fade{animation:fxFade ease-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}




.hero-tall{display:none}
@media (max-width: 767px){.hero-wide{display:none !important}.hero-tall{display:block !important}}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:330px 100px 270px;column-gap:16px}
.collage .c-title{grid-column:1 / 4;grid-row:1}
.collage .c-main{grid-column:4 / 9;grid-row:1 / 3;z-index:2}
.collage .c-left{grid-column:1 / 5;grid-row:2 / 4;z-index:1}
.collage .c-right{grid-column:7 / 13;grid-row:2 / 4;z-index:1}
.collage .c-btn{grid-column:5 / 7;grid-row:3;align-self:center;justify-self:center;z-index:3}
@media (max-width: 900px){
  .collage{grid-template-columns:1fr;grid-template-rows:none;row-gap:16px}
  .collage .c-title,.collage .c-main,.collage .c-left,.collage .c-right,.collage .c-btn{grid-column:1;grid-row:auto}
  .collage img{height:260px !important}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1025px){
  @supports (animation-timeline: view()){
    .fx-up{animation:fxUp linear both;animation-timeline:view()}
    .fx-zoom{animation:fxZoom linear both;animation-timeline:view()}
    .fx-left{animation:fxLeft linear both;animation-timeline:view();animation-range:entry 0% cover 56%}
    .fx-right{animation:fxRight linear both;animation-timeline:view();animation-range:entry 0% cover 56%}
    .fx-fade{animation:fxFade ease-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}

/* ---- page formules ---- */



.hero-tall{display:none}
@media (max-width: 767px){.hero-wide{display:none !important}.hero-tall{display:block !important}}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:330px 100px 270px;column-gap:16px}
.collage .c-title{grid-column:1 / 4;grid-row:1}
.collage .c-main{grid-column:4 / 9;grid-row:1 / 3;z-index:2}
.collage .c-left{grid-column:1 / 5;grid-row:2 / 4;z-index:1}
.collage .c-right{grid-column:7 / 13;grid-row:2 / 4;z-index:1}
.collage .c-btn{grid-column:5 / 7;grid-row:3;align-self:center;justify-self:center;z-index:3}
@media (max-width: 900px){
  .collage{grid-template-columns:1fr;grid-template-rows:none;row-gap:16px}
  .collage .c-title,.collage .c-main,.collage .c-left,.collage .c-right,.collage .c-btn{grid-column:1;grid-row:auto}
  .collage img{height:260px !important}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1025px){
  @supports (animation-timeline: view()){
    .fx-up{animation:fxUp linear both;animation-timeline:view()}
    .fx-zoom{animation:fxZoom linear both;animation-timeline:view()}
    .fx-left{animation:fxLeft linear both;animation-timeline:view();animation-range:entry 0% cover 56%}
    .fx-right{animation:fxRight linear both;animation-timeline:view();animation-range:entry 0% cover 56%}
    .fx-fade{animation:fxFade ease-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
.ftxt p{margin:0 0 14.4px}
.ftxt p:last-child{margin-bottom:0}
.fcar{position:relative;overflow:hidden}
.fcar-track{display:flex;width:300%}
.fcar-track img{flex:0 0 11.1111%;width:11.1111%;aspect-ratio:1 / 1;object-fit:cover;display:block}
@media (max-width: 767px){.fcar-track{width:900%}}
@media (prefers-reduced-motion: no-preference){
  .fcar-track{animation:fcarSlide 30s ease-in-out infinite}
  .fcar-dot{animation:fcarDot 30s step-end infinite}
  .fcar-wrap:hover .fcar-track,.fcar-wrap:hover .fcar-dot{animation-play-state:paused}
}
@keyframes fcarSlide{
  0%,15%{transform:translateX(0)}
  16.667%,31.667%{transform:translateX(-11.1111%)}
  33.333%,48.333%{transform:translateX(-22.2222%)}
  50%,65%{transform:translateX(-33.3333%)}
  66.667%,81.667%{transform:translateX(-44.4444%)}
  83.333%,98.333%{transform:translateX(-55.5556%)}
  100%{transform:translateX(-66.6667%)}
}
@keyframes fcarDot{0%{opacity:1}16.667%{opacity:.2}100%{opacity:.2}}

.cal-top-fade{background:linear-gradient(#080641 55px, rgba(255,255,255,0) 182px) no-repeat}

/* ---- page bateaux ---- */



.hero-tall{display:none}
@media (max-width: 767px){.hero-wide{display:none !important}.hero-tall{display:block !important}}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:330px 100px 270px;column-gap:16px}
.collage .c-title{grid-column:1 / 4;grid-row:1}
.collage .c-main{grid-column:4 / 9;grid-row:1 / 3;z-index:2}
.collage .c-left{grid-column:1 / 5;grid-row:2 / 4;z-index:1}
.collage .c-right{grid-column:7 / 13;grid-row:2 / 4;z-index:1}
.collage .c-btn{grid-column:5 / 7;grid-row:3;align-self:center;justify-self:center;z-index:3}
@media (max-width: 900px){
  .collage{grid-template-columns:1fr;grid-template-rows:none;row-gap:16px}
  .collage .c-title,.collage .c-main,.collage .c-left,.collage .c-right,.collage .c-btn{grid-column:1;grid-row:auto}
  .collage img{height:260px !important}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1025px){
  @supports (animation-timeline: view()){
    .fx-up{animation:fxUp linear both;animation-timeline:view()}
    .fx-zoom{animation:fxZoom linear both;animation-timeline:view()}
    .fx-left{animation:fxLeft linear both;animation-timeline:view();animation-range:entry 0% cover 56%}
    .fx-right{animation:fxRight linear both;animation-timeline:view();animation-range:entry 0% cover 56%}
    .fx-fade{animation:fxFade ease-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
.car{--per:3}
@media (max-width: 1024px){.car{--per:2}}
@media (max-width: 767px){.car{--per:1}}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;padding:0;border:0;background:transparent;color:#ffffff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.car-dot{width:20px;height:20px;padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
@media (prefers-reduced-motion: reduce){.car-track{transition:none !important}}

/* ---- page cgv ---- */



.hero-tall{display:none}
@media (max-width: 767px){.hero-wide{display:none !important}.hero-tall{display:block !important}}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:330px 100px 270px;column-gap:16px}
.collage .c-title{grid-column:1 / 4;grid-row:1}
.collage .c-main{grid-column:4 / 9;grid-row:1 / 3;z-index:2}
.collage .c-left{grid-column:1 / 5;grid-row:2 / 4;z-index:1}
.collage .c-right{grid-column:7 / 13;grid-row:2 / 4;z-index:1}
.collage .c-btn{grid-column:5 / 7;grid-row:3;align-self:center;justify-self:center;z-index:3}
@media (max-width: 900px){
  .collage{grid-template-columns:1fr;grid-template-rows:none;row-gap:16px}
  .collage .c-title,.collage .c-main,.collage .c-left,.collage .c-right,.collage .c-btn{grid-column:1;grid-row:auto}
  .collage img{height:260px !important}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1025px){
  @supports (animation-timeline: view()){
    .fx-up{animation:fxUp linear both;animation-timeline:view()}
    .fx-zoom{animation:fxZoom linear both;animation-timeline:view()}
    .fx-left{animation:fxLeft linear both;animation-timeline:view();animation-range:entry 0% cover 56%}
    .fx-right{animation:fxRight linear both;animation-timeline:view();animation-range:entry 0% cover 56%}
    .fx-fade{animation:fxFade ease-out both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}