/* accueil-v4.css : accueil allégé, 4 pôles visibles d'un coup d'œil (versions 4a « tuiles » et 4b « bandes »).
   Se charge APRÈS landing.css ; ne modifie aucune autre page. */

/* ---- hero raccourci ---- */
.hero{min-height:0;justify-content:flex-start;padding:7rem 0 0}
.hero h1{font-size:clamp(2.1rem,4.7vw,4.3rem);line-height:1.04;max-width:16em}
.hero h1 .surtitre{margin-bottom:1.1rem}
.chapo{margin-top:1.1rem;font-size:clamp(1rem,1.3vw,1.15rem)}
.hero .actions{margin-top:clamp(5rem,30vh,17rem)}
.bouquet{top:11vh;width:min(46vw,620px);opacity:1;filter:saturate(1.45) brightness(1.08)}
@media (max-width:900px){.bouquet{width:92vw;right:-26vw;top:15vh;opacity:.78}.hero{padding-top:6rem}.hero .actions{margin-top:clamp(7rem,34vh,15rem)}}

/* ---- un pôle (commun aux deux versions) ---- */
.pole{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:1.25rem 1.3rem 1.3rem;border-radius:22px;overflow:hidden;isolation:isolate;text-decoration:none;color:var(--os);background:var(--nuit-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.07);transition:transform .6s var(--courbe),box-shadow .6s var(--courbe)}
.pole>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;animation:zoomlent 20s ease-in-out infinite alternate;transition:scale 1.4s var(--courbe),filter .9s var(--courbe)}
@keyframes zoomlent{from{transform:scale(1.02)}to{transform:scale(1.13)}}
.pole::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(12,12,22,.1) 0%,rgba(12,12,22,.5) 45%,rgba(12,12,22,.93) 100%),linear-gradient(0deg,color-mix(in srgb,var(--c) 30%,transparent),transparent 60%)}
.pole::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.17),transparent 62%);opacity:0;transition:opacity .5s}
.pole .num{position:absolute;top:1.1rem;left:1.3rem;display:flex;align-items:center;gap:.6rem;font-size:.8rem;letter-spacing:.1em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.pole .feuille{background:var(--c)}
.pole .fleche{position:absolute;top:.95rem;right:1.1rem;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;font-weight:700;background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.08));backdrop-filter:blur(10px) saturate(1.5);-webkit-backdrop-filter:blur(10px) saturate(1.5);border:1px solid rgba(255,255,255,.3);transition:transform .6s var(--courbe),background .6s}
.pole .titre{display:block;font-size:clamp(1.25rem,1.85vw,1.65rem);line-height:1.12;letter-spacing:-.02em;font-weight:500}
.pole .detail{display:block}
.pole .desc{display:block;margin:.55rem 0 .8rem;color:#dcdce8;font-size:.9rem;line-height:1.4}
.pole .preuve{display:inline-flex;width:fit-content;padding:.3rem .75rem;border-radius:999px;font-size:.78rem;font-weight:700;color:#fff;background:color-mix(in srgb,var(--c) 28%,transparent);border:1px solid color-mix(in srgb,var(--c) 60%,transparent)}
@media (hover:hover){
  .pole:hover,.pole:focus-visible{transform:translateY(-8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),0 0 44px -4px color-mix(in srgb,var(--c) 55%,transparent),0 24px 34px -22px rgba(0,0,0,.9)}
  .pole:hover>img,.pole:focus-visible>img{scale:1.07}
  .pole:hover::after,.pole:focus-visible::after{opacity:1}
  .pole:hover .fleche,.pole:focus-visible .fleche{transform:translate(4px,-4px) rotate(-45deg);background:var(--c)}
  .pole:hover .feuille{animation:vent 2.4s ease-in-out infinite}
}

/* ---- version 4a : tuiles ---- */
.poles{list-style:none;margin:clamp(1.6rem,4vh,2.8rem) 0 0;padding:0 0 clamp(1.4rem,3vh,2.2rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.poles .pole{min-height:clamp(270px,40vh,360px)}
@media (max-width:1000px){.poles{grid-template-columns:repeat(2,minmax(0,1fr))}.poles .pole{min-height:250px}}
@media (max-width:560px){
  .poles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-1.25rem;padding-inline:1.25rem;padding-bottom:1.4rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-inline:1.25rem}
  .poles::-webkit-scrollbar{display:none}
  .poles>li{flex:0 0 80%;scroll-snap-align:start}
  .poles .pole{min-height:300px}
}

/* ---- version 4b : bandes qui s'ouvrent ---- */
.bandes{list-style:none;margin:clamp(1.6rem,4vh,2.8rem) 0 0;padding:0 0 clamp(1.4rem,3vh,2.2rem);display:flex;gap:12px;height:clamp(330px,46vh,440px);box-sizing:content-box}
.bandes>li{flex:1 1 0;min-width:0;transition:flex-grow .9s var(--courbe)}
.bandes>li.actif{flex-grow:2.7}
.bandes .pole>img{filter:brightness(.62) saturate(.85)}
.bandes>li.actif .pole>img{filter:none}
.bandes .detail{max-height:0;opacity:0;transform:translateY(10px);overflow:hidden;transition:max-height .8s var(--courbe),opacity .6s .15s,transform .8s var(--courbe)}
.bandes>li.actif .detail{max-height:12rem;opacity:1;transform:none}
.bandes .pole .titre{font-size:clamp(1.15rem,1.7vw,1.5rem)}
.bandes>li.actif .pole .titre{font-size:clamp(1.4rem,2.1vw,1.9rem)}
.bandes>li.actif .pole{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),0 0 44px -6px color-mix(in srgb,var(--c) 50%,transparent)}
.bandes>li.actif .fleche{background:var(--c)}
@media (max-width:900px){
  .bandes{flex-direction:column;height:auto}
  .bandes>li,.bandes>li.actif{flex:none}
  .bandes .pole{min-height:128px;justify-content:center;padding-left:1.3rem;padding-top:3rem;padding-bottom:1.1rem}
  .bandes .pole>img{filter:brightness(.7)}
  .bandes .detail,.bandes>li.actif .detail{max-height:none;opacity:1;transform:none}
  .bandes .pole .titre,.bandes>li.actif .pole .titre{font-size:1.3rem}
  .bandes .desc{margin:.3rem 0 .5rem}
}

/* ---- bande de preuves allégée (remplace chiffres + arbre + garanties) ---- */
.preuves{padding-top:clamp(3.5rem,7vw,6rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.preuves-tete{display:block;margin:0}
.chiffres strong{font-size:clamp(2.2rem,4.2vw,3.6rem)}
.chiffres li>span{font-size:.88rem;margin-top:.5rem}
.pastilles{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem}
.pastilles a{display:inline-flex;align-items:baseline;gap:.65rem;padding:.7rem 1.15rem;border-radius:999px;text-decoration:none;color:var(--os);background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.04));backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:border-color .5s,transform .6s var(--courbe)}
.pastilles li:nth-child(1) a{--c:var(--p-orange)}.pastilles li:nth-child(2) a{--c:var(--p-teal)}.pastilles li:nth-child(3) a{--c:var(--p-rose)}
.pastilles a:hover,.pastilles a:focus-visible{border-color:var(--c);transform:translateY(-3px)}
.pastilles b{font-weight:700;font-size:.98rem}
.pastilles span{color:var(--discret);font-size:.86rem}
.preuves h2{font-size:clamp(1.6rem,3vw,2.5rem);margin:clamp(2.5rem,5vw,4rem) 0 0;max-width:20em}
.avis-zone{margin-top:1.8rem}
.preuves .chiffres{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem 1.5rem}
@media (max-width:760px){.preuves .chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- bandeau rendez-vous : verre sombre translucide, marge haute verte ---- */
.js-pile .rdv.pile,.js-pile .groupe .rdv.pile,.groupe .rdv.pile,.rdv.pile{background:var(--verre-sombre);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);padding-top:3rem;color:var(--os);border-top:1px solid var(--verre-bord);box-shadow:var(--verre-relief)}
.rdv.pile::before{content:"";position:absolute;left:0;right:0;top:0;height:3rem;z-index:3;pointer-events:none;background:linear-gradient(90deg,var(--p-vert),#d6e84a 50%,var(--p-vert));box-shadow:0 3px 12px 0 rgba(184,204,34,.4)}
.rdv-clair,.imprimante{background:none}
.rdv-bouton,.rdv-bouton:hover{background:transparent;color:var(--os)}
.rdv-bouton *{color:var(--os)}
.rdv-icone{border-color:rgba(255,255,255,.7)}
.rdv-icone::before,.rdv-icone::after{background:#fff}
.rdv-bouton:hover{background:rgba(255,255,255,.06)}
.rdv-bouton:hover .rdv-icone{background:rgba(255,255,255,.18)}
.rdv-bouton::after{display:none}
/* le premier écran ne s'assombrit plus quand le bandeau le recouvre */
.js-pile .hero.pile,.js-pile main .hero.pile{filter:none;top:var(--top,0px)}
/* ---- bloc « Qui est derrière Canelle ? » : même marge, en bordeaux ---- */
.qui{overflow:clip;padding-top:calc(3rem + clamp(3.5rem,8vw,7rem))}
.qui::before{content:"";position:absolute;left:0;right:0;top:0;height:3rem;z-index:3;pointer-events:none;background:linear-gradient(90deg,var(--grenat),#d3365a 50%,var(--grenat));box-shadow:0 3px 12px 0 rgba(169,17,53,.4)}

/* ---- cartes des pôles : image vive, verre sur les bords, texte lisible en bas ---- */
.pole{background:var(--nuit-2);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.22),0 18px 36px -18px rgba(0,0,0,.8),0 0 30px -10px color-mix(in srgb,var(--c) 60%,transparent)}
.pole>img{filter:brightness(1.12) saturate(1.3) contrast(1.05)}
.pole::before{background:linear-gradient(180deg,rgba(12,12,22,0) 0%,rgba(12,12,22,0) 38%,rgba(12,12,22,.72) 70%,rgba(12,12,22,.95) 100%),linear-gradient(0deg,color-mix(in srgb,var(--c) 26%,transparent),transparent 45%)}
.pole .titre{text-shadow:0 2px 14px rgba(0,0,0,.7)}
.pole .desc{color:#f1f1f8}
.pole .num{padding:.3rem .7rem .3rem .55rem;border-radius:999px;top:.95rem;left:1rem;background:var(--verre-clair);-webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);border:1px solid rgba(255,255,255,.45);text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.pole .fleche{background:var(--verre-clair);border-color:rgba(255,255,255,.55)}
.pole .preuve{background:color-mix(in srgb,var(--c) 45%,rgba(12,12,22,.5));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.bandes .pole>img{filter:brightness(.8) saturate(1.1)}
.bandes>li.actif .pole>img{filter:brightness(1.1) saturate(1.3)}
/* fleurs un peu moins envahissantes : derrière les cartes */
.bouquet{top:8vh;width:min(40vw,540px);opacity:.88}
@media (max-width:900px){.bouquet{opacity:.7}}
.pole .num{background:linear-gradient(135deg,rgba(40,40,64,.62),rgba(12,12,22,.5));border-color:rgba(255,255,255,.4)}
.pole .fleche{background:linear-gradient(135deg,rgba(40,40,64,.62),rgba(12,12,22,.5))}
.pole::before{background:linear-gradient(180deg,rgba(12,12,22,0) 0%,rgba(12,12,22,0) 30%,rgba(12,12,22,.78) 62%,rgba(12,12,22,.96) 100%),linear-gradient(0deg,color-mix(in srgb,var(--c) 26%,transparent),transparent 45%)}

/* ---- adoucissement global : moins de contraste et de saturation ---- */
.pole>img{filter:brightness(1.0) saturate(1.0) contrast(.95)}
.bandes>li.actif .pole>img{filter:brightness(1.0) saturate(1.0)}
.bouquet{filter:saturate(.8);opacity:.62}
@media (max-width:900px){.bouquet{opacity:.5}}
.pole{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.18),0 18px 36px -18px rgba(0,0,0,.8)}
.pole::before{background:linear-gradient(180deg,rgba(12,12,22,.12) 0%,rgba(12,12,22,.1) 30%,rgba(12,12,22,.78) 62%,rgba(12,12,22,.96) 100%)}
.rdv.pile::before{background:linear-gradient(90deg,#a9ba22,#c4d44a 50%,#a9ba22);box-shadow:0 3px 12px 0 rgba(184,204,34,.25)}
.preuves::before{filter:saturate(.8)}

/* ---- réglage intermédiaire : ni flashy, ni terne ---- */
.pole>img{filter:brightness(1.06) saturate(1.18) contrast(1)}
.bandes>li.actif .pole>img{filter:brightness(1.06) saturate(1.18)}
.bouquet{filter:saturate(1.1);opacity:.8}
@media (max-width:900px){.bouquet{opacity:.65}}
.rdv.pile::before{background:linear-gradient(90deg,#b4c624,#d0e040 50%,#b4c624);box-shadow:0 3px 12px 0 rgba(184,204,34,.35)}
.preuves::before{filter:none}
.pole .preuve{background:color-mix(in srgb,var(--c) 55%,rgba(12,12,22,.45))}