/*
 * Blocs « Annoncer mon chalet ».
 *
 * Cette feuille vient du HTML qui etait colle dans le contenu de la page : dix-
 * sept kilo-octets de style dans deux balises `<style>`, que l'editeur ne
 * pouvait ni voir ni corriger. Elle n'est chargee que si l'un des blocs est
 * present sur la page.
 *
 * Quatre regles ont ete ecartees au passage : sans aucune portee, elles
 * reecrivaient `body`, `h1`, `.cc-section` et `.cc-container` pour toute la
 * page — dont `h1 { font-size: 0 }`, qui masquait le titre.
 *
 * Tout le reste est delimite par `.cc-annonce`, que chaque bloc pose autour de
 * lui : les blocs cohabitent donc avec le reste du theme.
 */

/* =========================================================
   CHALETS CONFORT — ANNONCER MON CHALET
   PAGE COMPLÈTE
   CSS ISOLÉ — HEADER ET FOOTER INCHANGÉS
   ========================================================= */

.cc-annonce{
  --blue:#2d69a6;
  --blue-hover:#245c91;
  --blue-soft:#edf5fb;
  --navy:#173653;
  --text:#173653;
  --muted:#71859a;
  --light:#ffffff;
  --white:#ffffff;
  --border:#e1e9ef;

  position:relative;
  width:100%;
  margin:0;
  padding:0;
  color:var(--text);
  background:var(--light);
  /* `clip` et non `hidden` : les deux rognent pareil, mais `hidden` fait de ce
     bloc une zone defilable, et les revelations au defilement se reglent sur
     la plus proche zone defilable. Celle-ci ne defile jamais : chaque section
     etait donc consideree comme deja parcourue, et n'animait rien. */
  overflow:clip;
}

.cc-annonce,
.cc-annonce div,
.cc-annonce section,
.cc-annonce article,
.cc-annonce span,
.cc-annonce p,
.cc-annonce h1,
.cc-annonce h2,
.cc-annonce h3,
.cc-annonce ul,
.cc-annonce li{
  box-sizing:border-box;
}

.cc-annonce img{
  display:block;
  max-width:100%;
}

.cc-annonce a{
  text-decoration:none;
}

.cc-annonce-container{
  width:min(1160px,calc(100% - 48px));
  margin:0 auto;
}


/* =========================================================
   BOUTONS
   ========================================================= */

.cc-annonce .cc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:52px;
  padding:0 27px;
  border-radius:30px;
  font-size:13px;
  font-weight:600;
  line-height:1;
  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.cc-annonce .cc-btn:hover{
  transform:translateY(-2px);
}

.cc-annonce .cc-btn-blue{
  color:#fff !important;
  background:var(--blue);
  box-shadow:0 9px 24px rgba(31,91,143,.22);
}

.cc-annonce .cc-btn-blue:hover{
  color:#fff !important;
  background:var(--blue-hover);
}

.cc-annonce .cc-btn-white{
  color:var(--navy) !important;
  background:#fff;
}

.cc-annonce .cc-btn-white:hover{
  color:var(--navy) !important;
  background:#f7fafc;
}

.cc-annonce .cc-arrow{
  font-size:17px;
  line-height:1;
  transition:transform .3s ease;
}

.cc-annonce .cc-btn:hover .cc-arrow{
  transform:translateX(4px);
}


/* =========================================================
   HERO
   ========================================================= */

.cc-annonce .cc-hero{
  position:relative;
top:-25px;
  width:100%;
  min-height:680px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:0 0 42px 42px;
}

.cc-annonce .cc-hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.cc-annonce .cc-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.cc-annonce .cc-hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(19,52,80,.12) 0%,
      rgba(19,52,80,.28) 40%,
      rgba(19,52,80,.76) 100%
    );
}

.cc-annonce .cc-hero-content{
  position:relative;
  z-index:2;
  width:min(900px,calc(100% - 48px));
  margin:0 auto;
  padding:115px 0 125px;
  text-align:center;
  color:#fff;
}

.cc-annonce .cc-hero-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:37px;
  padding:0 18px;
  border-radius:30px;
  background:rgba(255,255,255,.96);
  color:var(--blue);
  font-size:12px;
  font-weight:600;
}

.cc-annonce .cc-hero h1{
  max-width:850px;
  margin:25px auto 21px;
  padding:0;
  color:#fff;
  font-size:clamp(48px,6vw,78px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:400;
}

.cc-annonce .cc-hero h1 strong{
  font-weight:700;
}

.cc-annonce .cc-hero-description{
  max-width:650px;
  margin:0 auto;
  color:rgba(255,255,255,.94);
  font-size:17px;
  line-height:1.7;
}

.cc-annonce .cc-hero-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
}


/* =========================================================
   PETIT LABELS
   ========================================================= */

.cc-annonce .cc-label{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 15px;
  border-radius:30px;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:11px;
  font-weight:700;
}


/* =========================================================
   INTRO
   ========================================================= */

.cc-annonce .cc-intro{
  padding:110px 0 95px;
  background:#fff;
}

.cc-annonce .cc-intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:85px;
  align-items:center;
}

.cc-annonce .cc-intro h2,
.cc-annonce .cc-section-title,
.cc-annonce .cc-process h2,
.cc-annonce .cc-owner h2{
  margin:20px 0;
  padding:0;
  color:var(--navy);
  font-size:clamp(38px,4.5vw,57px);
  line-height:1.06;
  letter-spacing:-.04em;
  font-weight:400;
}

.cc-annonce .cc-intro h2 strong,
.cc-annonce .cc-section-title strong,
.cc-annonce .cc-process h2 strong,
.cc-annonce .cc-owner h2 strong{
  font-weight:700;
}

.cc-annonce .cc-text{
  max-width:560px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}

.cc-annonce .cc-list{
  display:grid;
  gap:13px;
  margin-top:30px;
}

.cc-annonce .cc-list-item{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--navy);
  font-size:13px;
  font-weight:600;
}

.cc-annonce .cc-check{
  display:flex;
  align-items:center;
  justify-content:center;
  width:29px;
  height:29px;
  flex:none;
  border-radius:50%;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:12px;
  font-weight:700;
}


/* =========================================================
   PHOTOS INTRO
   ========================================================= */

.cc-annonce .cc-collage{
  position:relative;
  width:100%;
  height:500px;
}

.cc-annonce .cc-photo{
  position:absolute;
  overflow:hidden;
  border-radius:30px;
  box-shadow:0 20px 50px rgba(24,58,87,.13);
}

.cc-annonce .cc-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s ease;
}

.cc-annonce .cc-photo:hover img{
  transform:scale(1.04);
}

.cc-annonce .cc-photo-main{
  left:0;
  bottom:10px;
  width:69%;
  height:405px;
}

.cc-annonce .cc-photo-small{
  right:0;
  top:0;
  width:51%;
  height:300px;
  border:9px solid #fff;
}


/* =========================================================
   SERVICES
   ========================================================= */

.cc-annonce .cc-services{
  padding:105px 0 115px;
  background:var(--light);
}

.cc-annonce .cc-section-intro{
  max-width:720px;
  margin-bottom:48px;
}

.cc-annonce .cc-section-intro p{
  max-width:600px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}

.cc-annonce .cc-services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.cc-annonce .cc-card{
  min-height:370px;
  padding:34px;
  background:#fff;
  border:1px solid rgba(31,71,103,.05);
  border-radius:28px;
  box-shadow:0 8px 28px rgba(30,65,95,.045);
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.cc-annonce .cc-card:hover{
  transform:translateY(-7px);
  box-shadow:0 18px 42px rgba(30,65,95,.10);
}

.cc-annonce .cc-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  margin:40px 0 22px;
  border-radius:17px;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:22px;
}

.cc-annonce .cc-card h3{
  margin:0 0 13px;
  padding:0;
  color:var(--navy);
  font-size:21px;
  line-height:1.25;
  font-weight:600;
}

.cc-annonce .cc-card p{
  margin:0 0 22px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

.cc-annonce .cc-card ul{
  padding:15px 0 0;
  margin:0;
  list-style:none;
  border-top:1px solid var(--border);
}

.cc-annonce .cc-card li{
  padding:5px 0;
  color:var(--navy);
  font-size:12px;
  line-height:1.5;
}

.cc-annonce .cc-card li::before{
  content:"✓";
  margin-right:8px;
  color:var(--blue);
  font-weight:700;
}


/* =========================================================
   GRAND BLOC BLEU
   ========================================================= */

.cc-annonce .cc-benefits{
  padding:0 0 110px;
  background:var(--light);
}

.cc-annonce .cc-benefits-box{
  position:relative;
  overflow:hidden;
  padding:65px 58px 52px;
  border-radius:38px;
  background:var(--blue);
  color:#fff;
}

.cc-annonce .cc-benefits-box::after{
  content:"";
  position:absolute;
  right:-160px;
  bottom:-220px;
  width:500px;
  height:500px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}

.cc-annonce .cc-benefits-heading{
  position:relative;
  z-index:2;
  max-width:720px;
  margin-bottom:45px;
}

.cc-annonce .cc-benefits-heading .cc-label{
  background:rgba(255,255,255,.16);
  color:#fff;
}

.cc-annonce .cc-benefits-heading h2{
  margin:20px 0 15px;
  padding:0;
  color:#fff;
  font-size:clamp(36px,4vw,53px);
  line-height:1.05;
  letter-spacing:-.035em;
  font-weight:400;
}

.cc-annonce .cc-benefits-heading h2 strong{
  font-weight:700;
}

.cc-annonce .cc-benefits-heading p{
  max-width:610px;
  margin:0;
  color:rgba(255,255,255,.76);
  font-size:14px;
  line-height:1.75;
}

.cc-annonce .cc-benefits-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.cc-annonce .cc-benefit{
  padding:8px 25px;
  border-right:1px solid rgba(255,255,255,.22);
}

.cc-annonce .cc-benefit:first-child{
  padding-left:0;
}

.cc-annonce .cc-benefit:last-child{
  border-right:0;
}

.cc-annonce .cc-benefit-icon{
  margin-bottom:15px;
  color:#fff;
  font-size:24px;
}

.cc-annonce .cc-benefit strong{
  display:block;
  margin-bottom:7px;
  color:#fff;
  font-size:14px;
  line-height:1.4;
}

.cc-annonce .cc-benefit span{
  display:block;
  color:rgba(255,255,255,.68);
  font-size:11px;
  line-height:1.6;
}


/* =========================================================
   PROCESS
   ========================================================= */

.cc-annonce .cc-process{
  padding:115px 0;
  background:#fff;
}

.cc-annonce .cc-process-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:100px;
}

.cc-annonce .cc-process-intro p{
  max-width:440px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}

.cc-annonce .cc-steps{
  border-top:1px solid var(--border);
}

.cc-annonce .cc-step{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:23px;
  padding:28px 0;
  border-bottom:1px solid var(--border);
}

.cc-annonce .cc-step-number{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:11px;
  font-weight:700;
}

.cc-annonce .cc-step h3{
  margin:5px 0 8px;
  padding:0;
  color:var(--navy);
  font-size:18px;
  line-height:1.3;
  font-weight:600;
}

.cc-annonce .cc-step p{
  max-width:620px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}


/* =========================================================
   ESPACE PROPRIÉTAIRE
   ========================================================= */

.cc-annonce .cc-owner{
  padding:110px 0;
  background:var(--light);
}

.cc-annonce .cc-owner-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:85px;
  align-items:center;
}

.cc-annonce .cc-owner-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:30px;
}

.cc-annonce .cc-owner-feature{
  padding:20px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 22px rgba(30,65,95,.045);
}

.cc-annonce .cc-owner-feature strong{
  display:block;
  color:var(--navy);
  font-size:13px;
  line-height:1.4;
}

.cc-annonce .cc-owner-feature span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
}

.cc-annonce .cc-owner-photos{
  position:relative;
  width:100%;
  height:480px;
}

.cc-annonce .cc-owner-photo{
  position:absolute;
  overflow:hidden;
  border-radius:30px;
  box-shadow:0 20px 50px rgba(25,55,85,.13);
}

.cc-annonce .cc-owner-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.cc-annonce .cc-owner-main{
  left:0;
  top:0;
  width:72%;
  height:390px;
}

.cc-annonce .cc-owner-small{
  right:0;
  bottom:0;
  width:53%;
  height:245px;
  border:9px solid var(--light);
}


/* =========================================================
   CTA FINAL
   ========================================================= */

.cc-annonce .cc-final{
  padding:110px 0;
  background:#fff;
}

.cc-annonce .cc-final-box{
  position:relative;
  overflow:hidden;
  padding:80px 30px;
  text-align:center;
  border-radius:38px;
  background:var(--blue-soft);
}

.cc-annonce .cc-final-box::before,
.cc-annonce .cc-final-box::after{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  background:rgba(45,105,166,.055);
}

.cc-annonce .cc-final-box::before{
  left:-160px;
  bottom:-190px;
}

.cc-annonce .cc-final-box::after{
  right:-150px;
  top:-190px;
}

.cc-annonce .cc-final-box > *{
  position:relative;
  z-index:2;
}

.cc-annonce .cc-final-box h2{
  max-width:700px;
  margin:20px auto;
  padding:0;
  color:var(--navy);
  font-size:clamp(39px,4.5vw,57px);
  line-height:1.05;
  letter-spacing:-.04em;
  font-weight:400;
}

.cc-annonce .cc-final-box h2 strong{
  font-weight:700;
}

.cc-annonce .cc-final-box p{
  max-width:590px;
  margin:0 auto 30px;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

/*
 * Les sections se decouvrent au defilement, par le mecanisme du theme plutot
 * que par celui de la page collee : celui-ci reposait sur un script maison qui
 * masquait tout d'abord, si bien qu'une panne du script laissait la page
 * blanche. Ici l'etat masque n'existe que la ou le navigateur sait animer.
 *
 * Les selecteurs sont repris a l'identique dans la liste `REVEAL` de main.js,
 * qui prend le relais sur les navigateurs sans `animation-timeline`.
 */

@supports (animation-timeline: view()) {
  /* --- Témoignages de propriétaires --------------------------------------- */

.cc-annonce .cc-temoignages-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

/* Même carte que les services : la page ne gagne rien à deux vocabulaires. */
.cc-annonce .cc-temoignage{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:0;
  padding:34px;
  background:#fff;
  border:1px solid rgba(31,71,103,.05);
  border-radius:28px;
  box-shadow:0 8px 28px rgba(30,65,95,.045);
  transition:transform .35s ease, box-shadow .35s ease;
}

.cc-annonce .cc-temoignage:hover{
  transform:translateY(-7px);
  box-shadow:0 18px 42px rgba(30,65,95,.10);
}

.cc-annonce .cc-temoignage__note{
  margin:0;
  color:#f0a500;
  font-size:15px;
  letter-spacing:2px;
}

/* Les guillemets sont posés ici plutôt que saisis : on évite qu'une fiche sur
   deux en porte et l'autre non. */
.cc-annonce .cc-temoignage__texte{
  flex:1;
  margin:0;
  color:var(--ink,#1f4767);
  font-size:16px;
  line-height:1.8;
}
.cc-annonce .cc-temoignage__texte::before{ content:"\201C"; }
.cc-annonce .cc-temoignage__texte::after{ content:"\201D"; }

.cc-annonce .cc-temoignage__signature{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:18px;
  border-top:1px solid rgba(31,71,103,.08);
}

.cc-annonce .cc-temoignage__photo{
  flex:none;
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
}

.cc-annonce .cc-temoignage__signature strong{
  display:block;
  font-size:15px;
}

.cc-annonce .cc-temoignage__signature small{
  display:block;
  color:var(--muted);
  font-size:13px;
}

@media (prefers-reduced-motion: no-preference) {

    /* Les deux grilles se revelent colonne par colonne : le texte, puis les
       photos qui l'accompagnent. */
    .cc-annonce .cc-intro-grid > *,
    .cc-annonce .cc-owner-grid > *,
    .cc-annonce .cc-section-intro,
    .cc-annonce .cc-benefits-box,
    .cc-annonce .cc-process-intro,
    .cc-annonce .cc-step,
    .cc-annonce .cc-card,
    .cc-annonce .cc-temoignage,
    .cc-annonce .cc-final-box{
      /* Deux animations, comme la page d'origine : le fondu remplace
         l'opacite, le deplacement s'ajoute au `transform` de l'element pour ne
         pas ecraser ce qu'il porte deja. Le reste du theme se deplace sans
         fondu ; ces sections gardent le leur, c'est leur dessin. */
      animation: cc-shift linear both, cc-fade linear both;
      animation-composition: add, replace;
      animation-timeline: view(), view();
      animation-range: cover 5% cover 22%, cover 5% cover 20%;
    }

  }
}

/* Le bandeau est deja a l'ecran au chargement : aucune chronologie de
   defilement ne l'atteindrait. Il entre au temps, comme les autres en-tetes
   de page du theme. */
@media (prefers-reduced-motion: no-preference) {
  .cc-annonce .cc-hero-content{
    animation: cc-rise .7s var(--cc-ease-out) .15s both;
  }
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media(max-width:900px){

  .cc-annonce-container{
    width:calc(100% - 36px);
  }

  .cc-annonce .cc-hero{
    min-height:620px;
  }

  .cc-annonce .cc-intro-grid,
  .cc-annonce .cc-process-grid,
  .cc-annonce .cc-owner-grid{
    grid-template-columns:1fr;
    gap:55px;
  }

  .cc-annonce .cc-services-grid,
  .cc-annonce .cc-temoignages-grid{
    grid-template-columns:1fr;
  }

  .cc-annonce .cc-benefits-grid{
    grid-template-columns:1fr 1fr;
  }

  .cc-annonce .cc-benefit{
    margin-bottom:25px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

  .cc-annonce-container{
    width:calc(100% - 26px);
  }

  .cc-annonce .cc-hero{
    min-height:640px;
    border-radius:0 0 27px 27px;
  }

  .cc-annonce .cc-hero-content{
    width:calc(100% - 28px);
    padding:90px 0 105px;
  }

  .cc-annonce .cc-hero h1{
    margin:22px auto 20px;
    font-size:43px;
  }

  .cc-annonce .cc-hero-description{
    font-size:15px;
  }

  .cc-annonce .cc-hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .cc-annonce .cc-btn{
    width:100%;
  }

  .cc-annonce .cc-intro,
  .cc-annonce .cc-services,
  .cc-annonce .cc-process,
  .cc-annonce .cc-owner{
    padding:75px 0;
  }

  .cc-annonce .cc-intro h2,
  .cc-annonce .cc-section-title,
  .cc-annonce .cc-process h2,
  .cc-annonce .cc-owner h2,
  .cc-annonce .cc-final-box h2{
    font-size:36px;
  }

  .cc-annonce .cc-collage{
    height:360px;
  }

  .cc-annonce .cc-photo-main{
    height:290px;
  }

  .cc-annonce .cc-photo-small{
    height:230px;
  }

  .cc-annonce .cc-benefits{
    padding-bottom:75px;
  }

  .cc-annonce .cc-benefits-box{
    padding:40px 24px;
    border-radius:28px;
  }

  .cc-annonce .cc-benefits-grid{
    grid-template-columns:1fr;
  }

  .cc-annonce .cc-benefit,
  .cc-annonce .cc-benefit:first-child{
    padding:20px 0;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.2);
  }

  .cc-annonce .cc-benefit:last-child{
    border-bottom:0;
  }

  .cc-annonce .cc-owner-features{
    grid-template-columns:1fr;
  }

  .cc-annonce .cc-owner-photos{
    height:350px;
  }

  .cc-annonce .cc-owner-main{
    height:290px;
  }

  .cc-annonce .cc-owner-small{
    height:185px;
  }

  .cc-annonce .cc-final{
    padding:70px 0;
  }

  .cc-annonce .cc-final-box{
    padding:60px 22px;
    border-radius:28px;
  }

}


/* =========================================================
   RÉDUCTION DES ANIMATIONS
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .cc-annonce .cc-card,
  .cc-annonce .cc-photo img,
  .cc-annonce .cc-btn,
  .cc-annonce .cc-arrow{
    transition:none;
  }

}