/* landing.css — canelle.fr v3 : design fluide (DESIGN.md Vivid+Co) adapté à la charte CanLMS
   Tokens identiques à canelle-ui.css (nuit, grenat, pétales) pour rester cohérent avec CanLMS et Studio. */
@font-face{font-family:"Manrope";src:url("../fonts/manrope.woff2") format("woff2");font-weight:200 800;font-display:swap}
:root{
  --nuit:#0c0c16; --nuit-2:#171729; --os:#fffdf9; --discret:#a9a9bd; --filet:#2a2a40;
  --grenat:#a91135; --grenat-h:#8a0e2b; --creme:#f3f0ec; --texte:#21262b; --gris:#5d6470; --bord:#ddd5d0;
  --p-vert:#b8cc22; --p-orange:#f18e2c; --p-teal:#0fa3a3; --p-rose:#e8779a;
  --f:"Manrope","Helvetica Neue",Arial,sans-serif;
  --courbe:cubic-bezier(.52,.01,0,1);
  --largeur:1240px; --r:12px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font:400 1.0625rem/1.6 var(--f);background:var(--nuit);color:var(--os);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--p-orange);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cadre{width:min(var(--largeur),100% - 2.5rem);margin-inline:auto}

/* Boutons : plein grenat (CanLMS) pour l'action, contour pour le reste */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.5rem;border-radius:var(--r);font:700 1rem/1 var(--f);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .5s var(--courbe),color .5s var(--courbe),border-color .5s var(--courbe)}
.btn-plein{background:var(--grenat);color:#fff}
.btn-plein:hover{background:var(--grenat-h)}
.btn-contour{border-color:var(--os);color:var(--os);background:transparent}
.btn-contour:hover{background:var(--os);color:var(--nuit)}

/* BLOC 1 : en-tête */
.entete{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .5s var(--courbe),border-color .5s var(--courbe);border-bottom:1px solid transparent}
.entete.fond{background:rgba(12,12,22,.9);backdrop-filter:blur(10px);border-color:var(--filet)}
.entete .cadre{display:flex;align-items:center;gap:2rem;min-height:72px}
.marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;font:700 1.45rem/1 var(--f);letter-spacing:-.03em}
.marque img{width:40px;height:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.8rem}
.nav a:not(.btn){text-decoration:none;font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--os);transition:color .5s var(--courbe)}
.nav a:not(.btn):hover{color:var(--p-orange)}
.nav .btn{padding:.7rem 1.1rem;font-size:.9rem}
.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--os);border-radius:var(--r);color:var(--os);padding:.55rem .9rem;font:700 .9rem var(--f)}

/* BLOC 2 : hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:7.5rem 0 0;overflow:hidden;isolation:isolate}
.bouquet{position:absolute;right:max(1.5rem,calc((100vw - var(--largeur))/2));top:14vh;width:min(46vw,620px);aspect-ratio:1;z-index:-1;pointer-events:none}
.petale{position:absolute;width:56%;aspect-ratio:1;border-radius:0 100% 0 100%;mix-blend-mode:screen;animation:flotte 16s var(--courbe) infinite alternate}
.petale:nth-child(1){background:var(--grenat);left:4%;top:8%;--r0:-12deg;--r1:8deg}
.petale:nth-child(2){background:var(--p-orange);left:34%;top:0;--r0:70deg;--r1:92deg;animation-duration:19s}
.petale:nth-child(3){background:var(--p-teal);left:30%;top:34%;--r0:160deg;--r1:140deg;animation-duration:22s}
.petale:nth-child(4){background:var(--p-vert);width:34%;left:0;top:50%;--r0:-100deg;--r1:-70deg;animation-duration:17s;opacity:.9}
.petale:nth-child(5){background:var(--p-rose);width:30%;left:64%;top:62%;--r0:20deg;--r1:50deg;animation-duration:20s;opacity:.9}
@keyframes flotte{from{transform:translate3d(0,0,0) rotate(var(--r0))}to{transform:translate3d(3%,-4%,0) rotate(var(--r1))}}
.hero h1{font-weight:400;font-size:clamp(2.7rem,7.2vw,6.6rem);line-height:1.02;letter-spacing:-.035em;max-width:14.5em;margin:0}
.hero h1 .surtitre{display:block;font-size:clamp(.78rem,1.1vw,.95rem);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--discret);line-height:1.4;margin-bottom:1.6rem}
.chapo{max-width:34rem;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5;margin:2rem 0 0}
.hero .actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.raccourcis{list-style:none;margin:clamp(2.5rem,7vh,5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--filet)}
.raccourcis li+li{border-left:1px solid var(--filet)}
.raccourcis a{display:flex;flex-direction:column;gap:.5rem;height:100%;padding:1.5rem 1.5rem 2rem;text-decoration:none;transition:background .5s var(--courbe)}
.raccourcis li:first-child a{padding-left:0}
.raccourcis .num{font-size:.8rem;letter-spacing:.1em;color:var(--discret)}
.raccourcis .titre{font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.15;letter-spacing:-.02em;transition:color .5s var(--courbe)}
.raccourcis .desc{color:var(--discret);font-size:.95rem;line-height:1.45}
.raccourcis .fleche{margin-top:auto;padding-top:.8rem;font-weight:700;transition:transform .5s var(--courbe)}
.raccourcis a:hover .titre{color:var(--p-orange)}
.raccourcis a:hover .fleche{transform:translateX(8px)}

/* BLOC 3 : bandeau rendez-vous + formulaire (surface claire inversée) */
.rdv{background:var(--creme);color:var(--texte);padding:clamp(3rem,7vw,6rem) 0}
.rdv-bandeau{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:center;padding-bottom:2.5rem;border-bottom:1px solid var(--bord)}
.rdv h2{font-weight:500;font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 .8rem}
.rdv-bandeau p{margin:0;color:var(--gris);max-width:36rem}
.rdv-bandeau .btn{justify-self:end;font-size:1.1rem;padding:1.15rem 1.9rem}
.rdv-form{display:grid;grid-template-columns:.8fr 1.2fr;gap:2rem 4rem;padding-top:2.5rem}
.rdv-form h3{font-weight:500;font-size:1.6rem;letter-spacing:-.02em;margin:0 0 .6rem}
.rdv-form .intro p{color:var(--gris);margin:0 0 1rem}
form.demande{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.champ{display:flex;flex-direction:column;gap:.35rem}
.champ.large{grid-column:1/-1}
.champ label{font-weight:700;font-size:.95rem}
.champ input,.champ select,.champ textarea{font:inherit;padding:.8rem .9rem;border:1.5px solid var(--bord);border-radius:var(--r);background:#fff;color:var(--texte);width:100%}
.champ textarea{min-height:7rem;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:3px solid rgba(169,17,53,.25);border-color:var(--grenat)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rgpd{grid-column:1/-1;font-size:.85rem;color:var(--gris);line-height:1.5;margin:0}
.rgpd a{color:var(--grenat)}
.envoi{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.statut{font-weight:700;margin:0}
.statut.ok{color:#146c43}.statut.ko{color:var(--grenat)}

/* pied provisoire (bloc 10 à venir) */
.pied{background:var(--nuit);color:var(--discret);font-size:.9rem;padding:2rem 0}
.pied a{color:var(--os)}

@media (max-width:900px){
  .burger{display:block}
  .nav{display:none;position:fixed;inset:72px 0 0 0;background:var(--nuit);flex-direction:column;align-items:flex-start;gap:1.2rem;padding:2rem 1.5rem}
  .nav.ouvert{display:flex}
  .nav a:not(.btn){font-size:1.2rem}
  .bouquet{width:80vw;right:-18vw;top:9vh;opacity:.55}
  .raccourcis{grid-template-columns:1fr 1fr}
  .raccourcis li:nth-child(3){border-left:0}
  .raccourcis li:nth-child(n+3){border-top:1px solid var(--filet)}
  .raccourcis li:first-child a{padding-left:1.5rem}
  .raccourcis a{padding:1.2rem 1.2rem 1.5rem}
  .rdv-bandeau,.rdv-form{grid-template-columns:1fr}
  .rdv-bandeau .btn{justify-self:start}
  form.demande{grid-template-columns:1fr}
}
@media (max-width:520px){.raccourcis{grid-template-columns:1fr}.raccourcis li+li{border-left:0;border-top:1px solid var(--filet)}.raccourcis a,.raccourcis li:first-child a{padding:1.1rem 0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ==== FUN : pétales vivants, touches rétro-éclairées, survol des boutons ==== */
.petale{will-change:transform,translate,rotate}
.raccourcis li:nth-child(1){--c:var(--p-orange)}
.raccourcis li:nth-child(2){--c:var(--p-teal)}
.raccourcis li:nth-child(3){--c:var(--p-vert)}
.raccourcis li:nth-child(4){--c:var(--p-rose)}
.raccourcis .num{display:flex;align-items:center;gap:.7rem}
.feuille{display:block;width:1.5rem;height:1.5rem;flex:none;border-radius:0 100% 0 100%;background:var(--c);transform:rotate(-20deg);transform-origin:var(--ox,85%) var(--oy,60%);transition:transform .8s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1)}
@keyframes vent{
  0%,100%{transform:rotate(-20deg) scale(1.2)}
  25%{transform:rotate(14deg) scale(1.2)}
  50%{transform:rotate(-32deg) scale(1.2)}
  75%{transform:rotate(6deg) scale(1.2)}}
.raccourcis a{border-radius:18px;transition:transform .6s var(--courbe),box-shadow .6s var(--courbe),background .6s var(--courbe)}
@media (min-width:901px){
  .raccourcis{margin-inline:-1.5rem;border-top:0}
  .raccourcis::before{content:"";grid-column:1/-1;height:1px;background:var(--filet);margin-inline:1.5rem}
  .raccourcis li+li{border-left:0}
  .raccourcis li:first-child a{padding-left:1.5rem}
}
@media (hover:hover){
  /* la touche se soulève et s'éclaire, entrée amortie (long freinage) */
  .raccourcis a:hover,.raccourcis a:focus-visible{transform:translateY(-10px);
    background:linear-gradient(180deg,#26263d,#171728);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent),0 0 42px -2px color-mix(in srgb,var(--c) 60%,transparent),0 22px 30px -20px rgba(0,0,0,.9);
    transition:transform 1s cubic-bezier(.16,1,.3,1),box-shadow 1s cubic-bezier(.16,1,.3,1),background 1s cubic-bezier(.16,1,.3,1)}
  .raccourcis a:hover .titre,.raccourcis a:focus-visible .titre{color:var(--c)}
  .raccourcis a:hover .feuille,.raccourcis a:focus-visible .feuille{animation:vent 4.2s ease-in-out infinite;filter:drop-shadow(0 0 8px var(--c))}
}

/* boutons : reflet qui traverse, léger soulèvement, ombre colorée */
.btn{position:relative;overflow:hidden;transition:background .5s var(--courbe),color .5s var(--courbe),border-color .5s var(--courbe),transform .5s var(--courbe),box-shadow .5s var(--courbe)}
.btn::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-130%)}
.btn:active{transform:translateY(0) scale(.97)}
@media (hover:hover){
  .btn:hover{transform:translateY(-3px)}
  .btn:hover::after{transform:translateX(130%);transition:transform .9s var(--courbe)}
  .btn-plein:hover{box-shadow:0 14px 28px -10px rgba(169,17,53,.9)}
  .btn-contour:hover{box-shadow:0 14px 28px -14px rgba(255,253,249,.6)}
}
.nav a:not(.btn){padding-bottom:4px;background:linear-gradient(var(--p-orange),var(--p-orange)) left bottom/0 2px no-repeat;transition:color .5s var(--courbe),background-size .6s var(--courbe)}
.nav a:not(.btn):hover{background-size:100% 2px}
.burger{transition:background .5s var(--courbe),color .5s var(--courbe)}
.burger:hover{background:var(--os);color:var(--nuit)}

/* ==== NAV LONGUE : libellés plus longs, une seule ligne ==== */
.nav{gap:1.3rem}
.nav a{white-space:nowrap}
.nav a:not(.btn){font-size:.76rem;letter-spacing:.06em}
@media (max-width:1180px){
  .burger{display:block}
  .nav{display:none;position:fixed;inset:72px 0 0 0;background:var(--nuit);flex-direction:column;align-items:flex-start;gap:1.2rem;padding:2rem 1.5rem}
  .nav.ouvert{display:flex}
  .nav a:not(.btn){font-size:1.2rem}
}

/* ==== COULEURS NAV : chaque lien reprend la couleur de son bloc (sous-ligne et texte au survol) ==== */
.nav a:not(.btn){--c:var(--os);background-image:linear-gradient(var(--c),var(--c))}
.nav a:nth-child(1){--c:var(--p-orange)}
.nav a:nth-child(2){--c:var(--p-teal)}
.nav a:nth-child(3){--c:var(--p-vert)}
.nav a:nth-child(4){--c:var(--p-rose)}
.nav a:not(.btn):hover{color:var(--os)}
.nav a:nth-child(5){--c:var(--grenat)}

/* ==== BLOC 4 : preuves (chiffres, garanties, avis) ==== */
.preuves{background:var(--nuit);padding:clamp(4rem,9vw,8rem) 0 clamp(3rem,6vw,5rem);border-top:1px solid var(--filet)}
.preuves h2{font-weight:400;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.05;letter-spacing:-.035em;max-width:16em;margin:0 0 clamp(2rem,5vw,4rem)}
.chiffres{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.chiffres li{border-top:1px solid var(--filet);padding-top:1.2rem}
.chiffres strong{display:block;font-weight:400;font-size:clamp(2.8rem,6.4vw,5.6rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.chiffres li:nth-child(1) strong{color:var(--p-orange)}
.chiffres li:nth-child(2) strong{color:var(--p-teal)}
.chiffres li:nth-child(3) strong{color:var(--p-vert)}
.chiffres li:nth-child(4) strong{color:var(--p-rose)}
.chiffres small{font-size:.45em;letter-spacing:0}
.chiffres li>span{display:block;margin-top:.7rem;color:var(--discret);font-size:.95rem;line-height:1.4;max-width:15rem}
.garanties{list-style:none;margin:clamp(2.5rem,6vw,4.5rem) 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem 3rem}
.garanties li{color:var(--discret);font-size:.98rem;line-height:1.55}
.garanties strong{display:block;color:var(--os);font-weight:700;font-size:1.05rem;margin-bottom:.3rem}
.garanties a{color:var(--os);text-underline-offset:3px;text-decoration-color:var(--grenat);text-decoration-thickness:2px}
.garanties a:hover{text-decoration-color:var(--os)}
.avis{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin:0}
.avis figure{margin:0;display:flex;flex-direction:column;gap:1.4rem;background:linear-gradient(180deg,#1e1e33,#171728);border-radius:18px;padding:1.6rem 1.6rem 1.4rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);transition:transform .6s var(--courbe),box-shadow .6s var(--courbe)}
.avis figure::before{content:"";width:1.4rem;height:1.4rem;border-radius:0 100% 0 100%;background:var(--c);transform:rotate(-20deg)}
.avis figure:nth-child(4n+1){--c:var(--p-orange)}
.avis figure:nth-child(4n+2){--c:var(--p-teal)}
.avis figure:nth-child(4n+3){--c:var(--p-vert)}
.avis figure:nth-child(4n+4){--c:var(--p-rose)}
.avis blockquote{margin:0;font-size:1.08rem;line-height:1.55;flex:1}
.avis figcaption{font-weight:700;font-size:.95rem}
.avis figcaption span{display:block;font-weight:400;color:var(--discret);font-size:.85rem;margin-top:.15rem}
@media (hover:hover){.avis figure:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 0 34px -6px color-mix(in srgb,var(--c) 55%,transparent)}}
@media (max-width:900px){
  .chiffres{grid-template-columns:1fr 1fr}
  .garanties{grid-template-columns:1fr}
  .avis{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin-inline:-1.25rem;padding:0 1.25rem 1rem}
  .avis figure{flex:0 0 82%;scroll-snap-align:center}
}

/* ==== MARQUE ET PIED : mot-symbole en Helvetica Neue Light, alignements, pied de page ==== */
.marque{font:300 1.9rem/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.01em;gap:.6rem;align-items:center}
.marque img{width:40px;height:auto;flex:none}
.entete .cadre{align-items:center}
.nav{align-items:center}
.nav a:not(.btn){display:inline-flex;align-items:center;padding:.55rem 0;background-position:left bottom}
.nav .btn{align-self:center}
.hero h1,.rdv h2,.preuves h2{margin-left:-.045em}
.hero h1 .surtitre{margin-left:.045em}
.pied{padding:3.5rem 0 2.5rem}
.pied-qualiopi{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;padding-bottom:2rem;margin-bottom:2.2rem;border-bottom:1px solid var(--filet)}
.pied-qualiopi img{width:150px;height:auto;background:#fff;border-radius:8px;padding:.5rem}
.pied-qualiopi p{margin:0;flex:1 1 320px;max-width:62ch;line-height:1.55}
.pied-cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:2rem 3rem;margin-bottom:2.2rem}
.pied-marque p{margin:1rem 0 0;line-height:1.6}
.pied-titre{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--os);margin:0 0 1rem}
.pied ul{list-style:none;margin:0;padding:0}
.pied-cols li{margin:0 0 .5rem;line-height:1.4}
.pied a{text-decoration:none;transition:color .5s var(--courbe)}
.pied a:hover{color:var(--p-orange)}
.pied-liens{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;padding-top:1.6rem;border-top:1px solid var(--filet);margin-bottom:1.2rem}
.pied-fin{margin:0;font-size:.82rem;line-height:1.6;max-width:none}
@media (max-width:900px){.pied-cols{grid-template-columns:1fr 1fr}.marque{font-size:1.7rem}}
@media (max-width:520px){.pied-cols{grid-template-columns:1fr}}
.pied .pied-liens{padding-top:1.6rem;margin:0 0 1.2rem}

/* ==== SEPARATEUR : s'efface au survol des 4 blocs, revient après 1 seconde ==== */
@media (min-width:901px){
  .raccourcis::before{transition:opacity .45s var(--courbe) 1s}
  .raccourcis:has(a:hover,a:focus-visible)::before{opacity:0;transition-delay:0s}
}

/* ==== RDV IMPRIMANTE : bandeau cliquable, le formulaire « sort » comme une feuille ==== */
.rdv{background:var(--creme);padding:0}
.rdv h2.rdv-titre{font-size:1rem;font-weight:400;line-height:1;letter-spacing:0;margin:0}
.rdv-bouton{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;padding:clamp(1.5rem,3.4vw,2.6rem) max(1.25rem,calc((100vw - var(--largeur))/2));background:var(--grenat);color:#fff;border:0;cursor:pointer;font:inherit;text-align:left;position:relative;overflow:hidden;transition:background .5s var(--courbe)}
.rdv-bouton:hover{background:var(--grenat-h)}
.rdv-bouton::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-130%)}
@media (hover:hover){.rdv-bouton:hover::after{transform:translateX(130%);transition:transform 1.1s var(--courbe)}}
.rdv-texte b{display:block;font-weight:500;font-size:clamp(1.7rem,3.8vw,3rem);letter-spacing:-.03em;line-height:1.08}
.rdv-texte span{display:block;margin-top:.5rem;opacity:.88;font-size:1rem}
.rdv-bouton[aria-expanded=true] .t-ferme,.rdv-bouton[aria-expanded=false] .t-ouvert{display:none}
.rdv-icone{flex:none;width:3.4rem;height:3.4rem;border:2px solid #fff;border-radius:50%;position:relative;transition:transform .9s var(--courbe),background .5s var(--courbe)}
.rdv-icone::before,.rdv-icone::after{content:"";position:absolute;left:50%;top:50%;width:1.2rem;height:2px;background:#fff;transform:translate(-50%,-50%)}
.rdv-icone::after{transform:translate(-50%,-50%) rotate(90deg)}
.rdv-bouton:hover .rdv-icone{background:rgba(255,255,255,.18)}
.rdv-bouton[aria-expanded=true] .rdv-icone{transform:rotate(135deg)}
.fente{height:16px;background:linear-gradient(#05050a,#15151f);box-shadow:inset 0 7px 8px -4px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.06)}
.rdv-sortie{height:0;overflow:hidden;background:var(--creme);transition:height 1.8s steps(30,end)}
.papier{width:90%;margin:0 auto;background:#fff;border-radius:0 0 18px 18px;box-shadow:0 18px 30px -16px rgba(12,12,22,.45);padding:clamp(1.6rem,4vw,3rem);transform:translateY(-100%);transition:transform 1.8s steps(30,end)}
.rdv-sortie.ouvert .papier{transform:translateY(0)}
.papier h3{font-weight:500;font-size:1.6rem;letter-spacing:-.02em;margin:0 0 .5rem;color:var(--texte)}
.rdv-rdv{display:flex;flex-wrap:wrap;gap:1.5rem 2rem;align-items:center;justify-content:space-between;padding-bottom:2rem;border-bottom:1px solid var(--bord)}
.rdv-rdv p{margin:0;color:var(--gris);max-width:40rem}
.rdv-form{padding-top:2rem}
.rdv-form .intro p{color:var(--gris)}

/* ==== ARBRE ANIMÉ (bloc 4) ==== */
.preuves-tete{display:grid;grid-template-columns:1fr minmax(180px,30%);gap:2rem;align-items:center;margin-bottom:clamp(2rem,5vw,4rem)}
.preuves-tete h2{margin:0;max-width:13em}
.arbre{display:block;width:100%;height:auto;overflow:visible}
.arbre-corps{transform-box:fill-box;transform-origin:50% 100%;animation:tronc 11s ease-in-out infinite alternate}
.arbre .feuille-v{transform-box:fill-box;transform-origin:50% 100%;animation:brise var(--d,6s) ease-in-out var(--dl,0s) infinite alternate}
.arbre .feuille-v.flot{animation-name:derive}
@keyframes brise{from{transform:rotate(calc(var(--a,4)*-1deg))}to{transform:rotate(calc(var(--a,4)*1deg))}}
@keyframes derive{from{transform:translate(calc(var(--dx,3)*-1px),calc(var(--dy,4)*-1px)) rotate(calc(var(--a,8)*-1deg))}to{transform:translate(calc(var(--dx,3)*1px),calc(var(--dy,4)*1px)) rotate(calc(var(--a,8)*1deg))}}
@keyframes tronc{from{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}}
@media (max-width:700px){.preuves-tete{grid-template-columns:1fr}.arbre-wrap{max-width:240px;margin-left:auto}}

/* ==== PIED : chaque ligne des colonnes prend une couleur au survol ==== */
.pied-cols li a{display:inline-block;transition:color .5s var(--courbe),transform .6s var(--courbe)}
.pied-cols li:nth-child(4n+1) a{--c:var(--p-orange)}
.pied-cols li:nth-child(4n+2) a{--c:var(--p-teal)}
.pied-cols li:nth-child(4n+3) a{--c:var(--p-vert)}
.pied-cols li:nth-child(4n+4) a{--c:var(--p-rose)}
.pied-cols li a:hover,.pied-cols li a:focus-visible{color:var(--c);transform:translateX(6px)}

/* ==== AIR ET VENT : bandeau sur fond clair, feuille blanche sur fond foncé, carrousel, vent de droite ==== */
.rdv{background:var(--nuit)}
.rdv-clair{background:#faf7f7;padding:clamp(3.5rem,8vw,7rem) 0 0}
.imprimante{width:90%;max-width:1700px;margin:0 auto}
.rdv-bouton{padding:clamp(1.6rem,3.4vw,2.8rem) clamp(1.4rem,3vw,3rem);border-radius:18px 18px 0 0}
.fente{height:14px;background:linear-gradient(#05050a,#0c0c16);box-shadow:inset 0 6px 8px -4px rgba(0,0,0,.9),0 -1px 0 rgba(255,255,255,.1)}
.rdv-sortie{background:var(--nuit);transition:height .85s cubic-bezier(.22,1,.36,1)}
.papier{width:90%;max-width:1700px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 60px -10px rgba(255,255,255,.12);transition:transform .85s cubic-bezier(.22,1,.36,1);will-change:transform}
.rdv + .preuves{border-top:0}
.preuves{padding-top:clamp(5rem,10vw,9rem)}
.garanties{margin:clamp(3.5rem,8vw,6.5rem) 0}

/* carrousel infini : une seule ligne, réactif à la souris */
.avis-zone{margin-top:clamp(3rem,7vw,6rem)}
.avis{display:block;overflow-x:auto;margin:0;padding:0;scroll-snap-type:none}
.avis-voie{display:flex;flex-wrap:nowrap;gap:1.25rem;width:max-content;padding:.9rem 1.25rem 1.6rem}
.avis-voie figure{flex:0 0 clamp(280px,28vw,420px);scroll-snap-align:none}
.avis.anime{overflow:hidden;cursor:grab;touch-action:pan-y;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.avis.anime:active{cursor:grabbing}
.avis.anime .avis-voie{will-change:transform;padding-inline:0}
.avis-pause{margin-top:.4rem;background:none;border:1.5px solid var(--filet);border-radius:var(--r);color:var(--discret);font:600 .85rem var(--f);padding:.5rem .9rem;cursor:pointer;transition:color .5s var(--courbe),border-color .5s var(--courbe)}
.avis-pause:hover{color:var(--os);border-color:var(--os)}

/* arbre : -25 % et vent modéré venant de la droite (les feuilles penchent vers la gauche) */
.arbre-wrap{width:75%;margin-left:auto}
.arbre-corps{animation:tronc 3.2s ease-in-out infinite alternate}
@keyframes tronc{from{transform:rotate(-.6deg)}to{transform:rotate(-2.2deg)}}
.arbre .feuille-v{animation:brise var(--d,3s) ease-in-out var(--dl,0s) infinite alternate;transition:rotate .7s var(--courbe),translate .7s var(--courbe)}
.arbre .feuille-v.flot{animation-name:derive}
@keyframes brise{from{transform:rotate(calc(var(--a,8)*-.2deg))}to{transform:rotate(calc(var(--a,8)*-1deg))}}
@keyframes derive{from{transform:translate(calc(var(--dx,6)*.4px),calc(var(--dy,5)*-1px)) rotate(calc(var(--a,14)*-.15deg))}to{transform:translate(calc(var(--dx,6)*-2px),calc(var(--dy,5)*1px)) rotate(calc(var(--a,14)*-1deg))}}
@media (max-width:700px){.arbre-wrap{max-width:180px}.imprimante,.papier{width:94%}}

/* ==== RETOUR BANDEAU PLEINE LARGEUR, MENU DÉROULANT, ARBRE PLUS VIF ==== */
.rdv{background:#fff;color:var(--texte)}
.rdv-clair{background:none;padding:0}
.imprimante{width:100%;max-width:none;margin:0}
.rdv-bouton{border-radius:0;padding:clamp(1.5rem,3.4vw,2.6rem) max(1.25rem,calc((100vw - var(--largeur))/2))}
.fente{height:8px;background:linear-gradient(rgba(12,12,22,.28),rgba(12,12,22,0));box-shadow:none}
.rdv-sortie{background:#fff}
.papier{width:100%;max-width:none;background:#fff;color:var(--texte);box-shadow:none}
@media (max-width:1360px){
  .burger{display:block}
  .nav{display:none;position:fixed;inset:72px max(1rem,calc((100vw - var(--largeur))/2)) auto auto;width:min(320px,calc(100vw - 2rem));background:var(--nuit);border:1px solid var(--filet);border-radius:16px;box-shadow:0 24px 48px -12px rgba(0,0,0,.6);flex-direction:column;align-items:stretch;gap:.2rem;padding:.8rem}
  .nav.ouvert{display:flex}
  .nav a:not(.btn){font-size:1rem;padding:.75rem .9rem;background-size:0 2px}
  .nav a:not(.btn):hover{background-color:rgba(255,255,255,.06)}
  .nav .btn{margin-top:.4rem;justify-content:center}
}
.arbre .feuille-v{transition:rotate .3s var(--courbe),translate .3s var(--courbe)}
.papier{padding-inline:max(1.25rem,calc((100vw - var(--largeur))/2))}
.papier>*{padding-inline:0}
@media (max-width:1360px){.nav{width:min(360px,calc(100vw - 2rem))}.nav a{white-space:normal}}
.imprimante{position:relative}
.rdv-calendly{position:absolute;z-index:2;top:calc((100% - 8px)/2);transform:translateY(-50%);right:calc(max(1.25rem,(100vw - var(--largeur))/2) + 3.4rem + 1.2rem);padding:.85rem 1.3rem;border-radius:var(--r);background:#006bff;color:#fff;font:700 .95rem/1 var(--f);text-decoration:none;white-space:nowrap;box-shadow:0 6px 18px -6px rgba(0,0,0,.5);transition:background .4s var(--courbe),transform .4s var(--courbe),box-shadow .4s var(--courbe)}
.rdv-calendly:hover{background:#0053c7;transform:translateY(-50%) translateY(-2px);box-shadow:0 10px 22px -6px rgba(0,0,0,.55)}
@media (max-width:700px){.rdv-calendly{display:none}}

/* ==== BOUTON CALENDLY (turquoise de la charte, même hauteur que la croix), FLÈCHES AVIS ==== */
.rdv-calendly{display:inline-flex;align-items:center;justify-content:center;height:3.4rem;padding:0 1.5rem;border-radius:3.4rem;border:2px solid #fff;background:color-mix(in srgb,var(--p-teal) 82%,#000);box-shadow:none;font-size:1rem}
.rdv-calendly:hover{background:color-mix(in srgb,var(--p-teal) 62%,#000);box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.rdv-calendly{top:calc((100% - 8px)/2)}
.avis-zone{position:relative}
.avis-fleche{position:absolute;z-index:3;top:calc(50% - 2.2rem);width:3.2rem;height:3.2rem;border-radius:50%;border:1.5px solid var(--filet);background:var(--nuit-2);color:var(--os);font:700 1.2rem/1 var(--f);cursor:pointer;display:grid;place-items:center;transition:background .4s var(--courbe),color .4s var(--courbe),border-color .4s var(--courbe),transform .4s var(--courbe)}
.avis-fleche.g{left:max(.6rem,calc((100vw - var(--largeur))/2 - 3.6rem))}
.avis-fleche.d{right:max(.6rem,calc((100vw - var(--largeur))/2 - 3.6rem))}
.avis-fleche:hover{background:var(--os);color:var(--nuit);border-color:var(--os);transform:scale(1.08)}
.avis.anime{user-select:none;-webkit-user-select:none}
.avis.anime figure{-webkit-user-drag:none}
.avis-fleche{top:calc((100% - 3.6rem)/2 - 1.6rem)}
.pied .pied-fin{max-width:none}

/* ==== EFFET JEU DE CARTES (accueil) ==== */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .js-pile .pile{position:sticky;top:var(--top,0px);border-radius:30px 30px 0 0;transform-origin:50% 0;box-shadow:0 -24px 50px -20px rgba(0,0,0,.75);transform:scale(var(--sc,1));filter:brightness(var(--br,1));will-change:transform,filter}
  .js-pile .hero.pile{border-radius:0;box-shadow:none}
  .js-pile .pile:nth-of-type(n){z-index:calc(1 + var(--i,0))}
}

/* pied de page = dernière carte, recouvre les avis */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .js-pile main{display:contents}
  .js-pile .pied.pile{background:var(--nuit-2);border-top:1px solid #3a3a58}
}

/* ==== FLÈCHE RETOUR EN HAUT ==== */
.haut{position:fixed;right:clamp(1rem,2.2vw,1.8rem);bottom:clamp(1rem,2.2vw,1.8rem);z-index:80;width:3.4rem;height:3.4rem;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;color:#fff;background:color-mix(in srgb,var(--p-teal) 88%,#000);box-shadow:0 10px 26px -8px rgba(15,163,163,.7),0 0 0 1px rgba(255,255,255,.18) inset;opacity:0;transform:translateY(14px) scale(.85);transition:opacity .45s var(--courbe),transform .45s var(--courbe),background .3s,box-shadow .3s}
.haut.on{opacity:1;transform:none}
.haut:hover,.haut:focus-visible{background:var(--p-teal);transform:translateY(-4px);box-shadow:0 14px 30px -8px rgba(15,163,163,.9),0 0 0 1px rgba(255,255,255,.3) inset}
.haut:focus-visible{outline:3px solid #fff;outline-offset:3px}
.haut svg{transition:transform .4s var(--courbe)}
.haut:hover svg{transform:translateY(-2px)}
.haut[hidden]{display:none}

/* bandeau rendez-vous (non empilé) : au-dessus de la carte précédente */
.js-pile .rdv:not(.pile){position:relative;z-index:40}

.js-pile .groupe.pile{border-radius:0;box-shadow:none}
.groupe .rdv:not(.pile){position:relative;z-index:2}

/* temps de lecture : le groupe reste épinglé 40% d écran de plus avant d être recouvert */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){.js-pile .groupe.pile{margin-bottom:60vh}}

/* ==== COMPTEURS À CÔTÉ DE L'ARBRE + BULLES ==== */
.preuves-tete{grid-template-columns:minmax(0,1.5fr) minmax(180px,.8fr);gap:clamp(1.5rem,4vw,4rem);margin-bottom:0}
.preuves-tete .chiffres{grid-template-columns:1fr 1fr;gap:2.4rem 1.6rem}
.preuves-tete .chiffres strong{font-size:clamp(2.6rem,5vw,4.6rem)}
.chiffres li{position:relative;outline:none}
.chiffres .bulle{position:absolute;left:0;bottom:calc(100% + .7rem);z-index:6;font-style:normal;font-size:.85rem;font-weight:700;line-height:1.3;white-space:nowrap;padding:.55rem .85rem;border-radius:12px;background:var(--os);color:var(--nuit);box-shadow:0 14px 30px -10px rgba(0,0,0,.7);opacity:0;translate:0 8px;pointer-events:none;transition:opacity .35s var(--courbe),translate .45s var(--courbe)}
.chiffres .bulle::after{content:"";position:absolute;left:1.4rem;top:100%;border:7px solid transparent;border-top-color:var(--os)}
.chiffres li:hover .bulle,.chiffres li:focus .bulle,.chiffres li:focus-within .bulle{opacity:1;translate:0 0}
.chiffres li:focus-visible{outline:2px solid var(--p-teal);outline-offset:6px;border-radius:8px}
.preuves-tete + .garanties{margin:clamp(2.5rem,5vw,4rem) 0}
.garanties + h2{margin:clamp(2rem,5vw,4rem) 0 clamp(1.8rem,4vw,3rem)}
@media (max-width:700px){.preuves-tete{grid-template-columns:1fr}}
.preuves-tete .chiffres{order:-1}

/* ==== BANDEAUX de la charte : vert (chiffres + arbre) et bleu (pied de page) ==== */
.preuves,.pied.pile{position:relative;overflow:clip}
.preuves{border-top:0;background:radial-gradient(55% 18% at 50% 0%,rgba(184,204,34,.14),transparent 70%),var(--nuit)}
.preuves::before,.pied.pile::before{content:"";position:absolute;left:0;right:0;top:0;height:3rem;z-index:3;pointer-events:none}
.preuves::before{background:linear-gradient(90deg,var(--p-vert),#d6e84a 50%,var(--p-vert));box-shadow:0 3px 12px 0 rgba(184,204,34,.4)}
.pied.pile::before{background:linear-gradient(90deg,var(--p-teal),#2fd0d0 50%,var(--p-teal));box-shadow:0 3px 12px 0 rgba(15,163,163,.45)}
.pied.pile{padding-top:calc(3.5rem + 3rem)}
.preuves .cadre:first-child{position:relative;z-index:1}

/* espace sous le bandeau rouge (même hauteur que sous le carrousel d'avis) : le bandeau reste plus longtemps visible avant d'être recouvert */
.groupe{background:var(--nuit)}

/* ==== BANDEAU RENDEZ-VOUS : angles arrondis comme les cartes, et formulaire qui sort de derrière le bandeau, vers le haut ==== */
.rdv{display:flex;flex-direction:column-reverse;background:transparent}
.rdv-clair{background:none}
.rdv-bouton{border-radius:30px 30px 0 0}
.rdv:has(.rdv-bouton[aria-expanded=true]) .rdv-bouton{border-radius:0}
.fente{display:none}
.rdv-calendly,.rdv-calendly:hover{top:50%}
.rdv-sortie{border-radius:30px 30px 0 0}
.papier{transform:translateY(100%);border-radius:30px 30px 0 0}
.rdv-sortie.ouvert .papier{transform:translateY(0)}

/* ==== le bandeau « Évaluons » est une carte à part entière ==== */
.js-pile main .hero.pile,.js-pile .groupe .hero{position:sticky;top:0}
.rdv.pile{overflow:hidden;background:var(--nuit)}
.js-pile .rdv.pile{background:var(--nuit)}
.rdv-bouton,.rdv:has(.rdv-bouton[aria-expanded=true]) .rdv-bouton{border-radius:0}
.rdv-sortie,.papier{border-radius:0}
@media (min-width:761px) and (prefers-reduced-motion:no-preference){.js-pile .rdv.pile{margin-bottom:45vh}}

.js-pile .groupe{display:contents}
.js-pile .hero.pile{border-radius:0}
.groupe .rdv.pile{position:sticky}
.js-pile .groupe .rdv.pile,.groupe .rdv.pile{background:var(--bordeaux,#a91135)}

/* ==== couleurs : bandeau « Évaluons » en vert citron, bandeau des avis en orange ==== */
.js-pile .groupe .rdv.pile,.groupe .rdv.pile{background:var(--p-vert)}
.rdv-bouton,.rdv-bouton:hover{background:var(--p-vert);color:var(--nuit)}
.rdv-bouton *{color:var(--nuit)}
.rdv-icone{border-color:var(--nuit)}
.rdv-icone::before,.rdv-icone::after{background:var(--nuit)}
.rdv-bouton:hover .rdv-icone{background:rgba(12,12,22,.12)}
.rdv-calendly{background:var(--p-teal);color:#fff;border-color:var(--p-teal)}
.preuves::before{background:linear-gradient(90deg,var(--p-orange),#f7ad5c 50%,var(--p-orange));box-shadow:0 3px 12px 0 rgba(241,142,44,.4)}

/* espace sombre sous les 4 colonnes avant l arrivée du bandeau vert */
.hero{padding-bottom:clamp(3rem,6vw,5.5rem)}

/* flèche haut de page : à 25% de la hauteur de l écran, au-dessus de la croix du bandeau */
.haut{bottom:25vh}

/* ==== MENU : glissé depuis la droite, police plus fine et un peu plus grande ==== */
@media (max-width:1360px){
  .nav{display:flex;visibility:hidden;pointer-events:none;opacity:0;transform:translateX(calc(100% + 2rem));transition:transform .6s var(--courbe),opacity .35s ease,visibility 0s linear .6s}
  .nav.ouvert{visibility:visible;pointer-events:auto;opacity:1;transform:translateX(0);transition:transform .6s var(--courbe),opacity .35s ease,visibility 0s}
  .nav a:not(.btn){font-size:1.05rem;font-weight:300;letter-spacing:.03em}
  .nav .btn{font-size:1rem;font-weight:500}
}
@media (prefers-reduced-motion:reduce){.nav,.nav.ouvert{transition:none}}

/* bandeau « Évaluons » en carte vert citron sur toutes les pages */
.js-pile main .rdv.pile{position:sticky;overflow:hidden;background:var(--p-vert)}

/* menu du haut (grand écran) : même graisse fine que le menu déroulant */
@media (min-width:1361px){
  .nav a:not(.btn){font-size:.8rem;font-weight:300;letter-spacing:.05em}
  .nav .btn{font-weight:500}
}

/* BLOC 5 : qui est derrière Canelle */
.qui{background:var(--creme);color:var(--texte);padding:clamp(3.5rem,8vw,7rem) 0}
.qui-tete{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(1.8rem,5vw,4.5rem);align-items:center}
.qui-photo{margin:0;position:relative}
.qui-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1.05;object-fit:cover;object-position:50% 12%;border-radius:22px;box-shadow:0 24px 50px -24px rgba(12,12,22,.55)}
.qui-photo figcaption{position:absolute;left:1rem;bottom:1rem;right:1rem;display:flex;flex-direction:column;padding:.8rem 1rem;border-radius:16px;color:#fff;font-size:.9rem;line-height:1.35;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06));backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.28)}
.qui-photo figcaption strong{font-size:1.05rem}
.qui-sur{display:block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grenat);margin-bottom:.8rem}
.qui h2{font-weight:400;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 1.4rem;color:var(--nuit)}
.qui-texte p{margin:0 0 1rem;max-width:40em;color:var(--texte)}
.qui-sous{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:700;letter-spacing:-.02em;margin:clamp(2.5rem,6vw,4.5rem) 0 1.3rem;color:var(--nuit)}
.qui-equipe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.qui-equipe li{position:relative;overflow:hidden;background:#fff;border-radius:26px;padding:1.9rem 1.6rem 1.6rem;box-shadow:0 10px 30px -14px rgba(12,12,22,.25)}
.qui-equipe li::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:var(--c)}
.qui-equipe .c-orange{--c:var(--p-orange)}.qui-equipe .c-teal{--c:var(--p-teal)}.qui-equipe .c-rose{--c:var(--p-rose)}
.qui-equipe strong{display:block;font-size:1.2rem;color:var(--nuit)}
.qui-role{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin:.25rem 0 .8rem}
.qui-equipe p{margin:0;font-size:.97rem;color:var(--texte)}
.qui-note{margin:1.2rem 0 0;font-size:.88rem;color:var(--gris)}
@media (max-width:900px){.qui-tete{grid-template-columns:1fr}.qui-photo{max-width:260px}.qui-equipe{grid-template-columns:1fr}}