/* Boutiz — la vitrine.
   Une boutique, c'est bien éclairé : toute la page est claire (blanc chaud, lumière de jour).
   Les couleurs de la référence de Célestin (cyan lumineux, rose néon, violet profond) servent
   d'accents : cadres lumineux, enseignes, reflets, dégradé des titres et du bouton principal.
   Le violet très profond sert au texte. Jamais de cyan pâle sur blanc pour du texte. */
:root{
  --fond:#FFFBF6; --fond2:#F7F3FC; --blanc:#fff;
  --encre:#1C1747; --doux:#55507A; --pale:#8B86A8; --ligne:#E7E1F0;
  --cyan:#3FD9E8; --cyan-clair:#A9F6FB; --cyan-texte:#087786;
  --rose:#D96AD9; --rose-clair:#F7A6E6; --rose-texte:#A3329F;
  --violet:#6A4BD8; --indigo:#2B2F9E;
  --signe:linear-gradient(100deg,#2FC9DC 0%,#D96AD9 52%,#6A4BD8 100%);
  --signe-texte:linear-gradient(100deg,#0B9FB3 0%,#B83FB8 50%,#5B3BD0 100%);
  --bouton:linear-gradient(100deg,#5B3BD0 0%,#9A3FC6 55%,#C2409E 100%);
  --app:#0e8a97; --app-nuit:#123f52; --app-or:#c98a2b; --app-fond:#F3F7F6;
  --titre:'Fraunces',Georgia,'Times New Roman',serif;
  --corps:'Figtree',-apple-system,'Segoe UI',Roboto,sans-serif;
  --main:'Caveat','Bradley Hand','Segoe Print',cursive;
  --barre:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--corps);background:var(--fond);color:var(--encre);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:16.5px}
a{color:inherit}
img,svg{display:block}
h1,h2,h3{font-family:var(--titre);font-weight:600;line-height:1.08;letter-spacing:-.012em;color:var(--encre)}
em{font-style:italic}
h1 em,h2 em{background:var(--signe-texte);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500;padding-right:.06em}
main{overflow-x:clip}
.saut{position:absolute;left:-999px;top:8px;z-index:100;background:var(--encre);color:#fff;padding:8px 14px;border-radius:8px}
.saut:focus{left:12px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.surtitre{font:700 12.5px/1.3 var(--corps);letter-spacing:.16em;text-transform:uppercase;color:var(--rose-texte);display:flex;align-items:center;gap:10px}
.surtitre::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--signe);flex:none}
.enveloppe{max-width:1180px;margin:0 auto;padding-inline:max(20px,4vw)}
.enveloppe.etroite{max-width:860px}

/* ── boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--corps);text-decoration:none;border-radius:999px;padding:16px 26px;border:0;cursor:pointer;transition:transform .15s,box-shadow .2s;white-space:nowrap}
.btn-demo{color:#fff;background:var(--bouton);box-shadow:0 10px 26px -10px rgba(194,64,158,.7),0 0 0 3px rgba(142,240,244,.55)}
.btn-demo:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(194,64,158,.75),0 0 0 4px rgba(142,240,244,.8)}
.btn-demo:active{transform:translateY(1px)}
.btn-trait{color:var(--encre);background:var(--blanc);border:1.5px solid #D9D0EC}
.btn-trait:hover{border-color:var(--violet)}
.btn-petit{padding:11px 18px;font-size:14.5px;box-shadow:0 6px 16px -8px rgba(194,64,158,.7),0 0 0 2px rgba(142,240,244,.6)}
.btn-plein{width:100%;padding:18px}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--violet);outline-offset:3px}

/* ── la barre ── */
.barre{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--barre);background:rgba(255,251,246,.97);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;padding-top:env(safe-area-inset-top)}
.barre.fond{border-color:var(--ligne);box-shadow:0 6px 24px -18px rgba(28,23,71,.5)}
@media (hover:hover) and (pointer:fine){.barre{background:rgba(255,251,246,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
.barre-in{height:100%;max-width:1180px;margin:0 auto;padding-inline:max(20px,4vw);display:flex;align-items:center;gap:20px}
.marque{display:flex;align-items:center;gap:9px;text-decoration:none;font:600 23px/1 var(--titre);color:var(--encre)}
.marque .logo{width:32px;height:32px}
.liens{display:flex;gap:26px;margin-left:18px}
.liens a{text-decoration:none;font-weight:600;font-size:15px;color:var(--doux)}
.liens a:hover{color:var(--encre)}
.barre-droite{margin-left:auto;display:flex;align-items:center;gap:14px}
.connexion{text-decoration:none;font-weight:600;font-size:14.5px;color:var(--doux)}
.connexion:hover{color:var(--encre)}
.langue{font:700 13px/1 var(--corps);color:var(--encre);background:var(--blanc);border:1.5px solid var(--ligne);border-radius:999px;padding:8px 11px;cursor:pointer;letter-spacing:.06em}
.langue:hover{border-color:var(--cyan)}
.lu{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--signe);transform-origin:0 50%;transform:scaleX(var(--lu,0))}
@media (max-width:960px){.liens{display:none}}
@media (max-width:520px){.connexion{display:none}.barre-in{gap:10px}.marque{font-size:21px}.btn-petit{padding:10px 14px;font-size:14px}}

/* ── la visite de la boutique (3D) ──
   La scène reste à l'écran (sous la barre) pendant qu'on fait défiler la section ; la longueur de la section
   (--ecrans, en hauteurs de scène) est réglée par la visite elle-même. Rien ne retient le défilement.
   Hauteur : 100lvh (la plus grande) pour que la scène ne change pas de taille quand la barre de Safari se replie ;
   les cartes du bas remontent de la hauteur de cette barre (100lvh − 100svh) pour rester visibles. */
.visite{--h3d:calc(100vh - var(--barre));--bas:16px;position:relative;margin-top:var(--barre);height:calc(var(--ecrans,8) * var(--h3d));background:#FBF8F4}
@supports (height:100lvh){.visite{--h3d:calc(100lvh - var(--barre));--bas:calc(16px + 100lvh - 100svh)}}
.scene3d{position:sticky;top:var(--barre);height:var(--h3d);overflow:hidden;isolation:isolate}
.affiche3d,.affiche3d img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.affiche3d{transition:opacity .6s}
#toile3d{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s}
.visite.prete #toile3d{opacity:1}
.visite.prete .affiche3d{opacity:0}
.voile3d{position:absolute;inset:0;background:#FFFBF6;opacity:0;pointer-events:none;z-index:1}
.photo3d{display:none}

/* les cartes de texte : une seule visible à la fois, sur un fond clair (sans flou : fluidité iPad) */
.carte3d{position:absolute;z-index:2;left:max(24px,3.2vw);top:50%;width:min(430px,33vw);padding:26px 28px 24px;border-radius:24px;
  background:rgba(255,253,250,.94);border:1px solid rgba(43,39,82,.08);
  box-shadow:0 1px 2px rgba(43,39,82,.04),0 30px 60px -34px rgba(60,44,30,.35);opacity:0;visibility:hidden;transform:translate3d(0,calc(-50% + 14px),0);
  transition:opacity .45s ease,transform .45s ease,visibility 0s .45s}
.carte3d.on{opacity:1;visibility:visible;transform:translate3d(0,-50%,0);transition:opacity .45s ease,transform .45s ease}
.carte3d h2{font-size:clamp(25px,2.3vw,34px)}
.carte3d .texte3d>p:not(.chapitre):not(.surtitre):not(.defiler){margin-top:10px;font-size:16.5px;line-height:1.55;color:var(--doux)}
.chapitre{display:flex;align-items:center;gap:10px;font:700 12.5px/1.2 var(--corps);letter-spacing:.14em;text-transform:uppercase;color:var(--rose-texte);margin-bottom:12px}
.chapitre i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(63,217,232,.16)}
.chapitre i.rose{background:var(--rose);box-shadow:0 0 0 4px rgba(217,106,217,.14)}
.chapitre i.violet{background:var(--violet);box-shadow:0 0 0 4px rgba(106,75,216,.14)}
/* la première carte : le haut de page lui-même */
.carte-haut{width:min(560px,42vw);padding:34px 36px 28px}
.carte-haut h1{font-size:clamp(36px,4.1vw,60px);margin-top:16px}
.chapo{margin-top:16px;font-size:17.5px;color:var(--doux);max-width:33em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.confiance{list-style:none;margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:14px;color:var(--doux)}
.confiance li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.confiance li::before{content:"";flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(63,217,232,.2)}
.confiance li:nth-child(2)::before{background:var(--rose);box-shadow:0 0 0 4px rgba(217,106,217,.18)}
.confiance li:nth-child(3)::before{background:var(--violet);box-shadow:0 0 0 4px rgba(106,75,216,.16)}
.defiler{display:flex;align-items:center;gap:10px;margin-top:20px;font-weight:700;font-size:13.5px;color:var(--violet)}
.defiler i{width:18px;height:28px;border:2px solid var(--violet);border-radius:10px;position:relative;flex:none}
.defiler i::after{content:"";position:absolute;left:50%;top:5px;width:4px;height:6px;margin-left:-2px;border-radius:2px;background:var(--rose);animation:roulette 1.8s ease-in-out infinite}
@keyframes roulette{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{opacity:0}}
/* la dernière carte : au centre, en haut */
.carte-fin{left:50%;top:max(28px,6vh);width:min(660px,calc(100% - 40px));text-align:center;transform:translate3d(-50%,14px,0)}
.carte-fin.on{transform:translate3d(-50%,0,0)}
.carte-fin h2{font-size:clamp(28px,3.2vw,44px)}
.carte-fin .actions{justify-content:center}
.passer{position:absolute;z-index:3;top:14px;right:16px;font:700 13px/1 var(--corps);color:var(--encre);text-decoration:none;background:rgba(255,255,255,.88);border:1px solid var(--ligne);border-radius:999px;padding:9px 14px}
.passer:hover{border-color:var(--violet)}
.lu3d{position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:rgba(28,23,71,.06)}
.lu3d i{display:block;height:100%;background:var(--signe);transform-origin:0 50%;transform:scaleX(0)}

/* téléphone, tablette tenue droite : la carte en bas, l'image au-dessus */
@media (max-aspect-ratio:9/10){
  .carte3d{left:12px;right:12px;top:auto;bottom:var(--bas);width:auto;padding:16px 18px 15px;border-radius:20px;transform:translate3d(0,14px,0)}
  .carte3d.on{transform:none}
  .carte3d h2{font-size:clamp(21px,5.6vw,30px)}
  .carte3d .texte3d>p:not(.chapitre):not(.surtitre):not(.defiler){font-size:15px;margin-top:6px;line-height:1.5}
  .chapitre{font-size:11.5px;margin-bottom:8px}
  .carte-haut{padding:20px 20px 16px}
  .carte-haut h1{font-size:clamp(30px,8.4vw,48px);margin-top:10px}
  .carte-haut .surtitre{font-size:11px}
  .chapo{font-size:15.5px;margin-top:10px}
  .actions{margin-top:16px;gap:10px}
  .actions .btn{padding:14px 18px;font-size:15px}
  .confiance{display:none}
  .defiler{margin-top:14px}
  .carte-fin{left:12px;right:12px;top:max(18px,4vh);bottom:auto;width:auto;transform:translate3d(0,14px,0)}
  .carte-fin.on{transform:none}
  .passer{top:10px;right:10px;padding:8px 12px;font-size:12.5px}
}
@media (max-aspect-ratio:9/10) and (min-width:600px){
  .carte3d{left:50%;right:auto;width:min(600px,calc(100% - 48px));transform:translate3d(-50%,14px,0)}
  .carte3d.on,.carte-fin.on{transform:translate3d(-50%,0,0)}
  .carte-fin{left:50%;right:auto}
}

/* la version immobile (mouvement réduit, appareil sans 3D, page sans script) : chaque étape et son image, l'une sous l'autre */
:is(html:not(.js),.visite-immobile) .visite{height:auto;background:var(--fond);padding-bottom:30px}
:is(html:not(.js),.visite-immobile) .scene3d{position:static;height:auto;overflow:visible;padding:28px max(20px,4vw) 0}
:is(html:not(.js),.visite-immobile) :is(#toile3d,.voile3d,.affiche3d,.passer,.lu3d,.defiler){display:none}
:is(html:not(.js),.visite-immobile) .carte3d{position:static;opacity:1;visibility:visible;transform:none;width:auto;max-width:1120px;margin:0 auto 26px;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:30px;align-items:center;text-align:left}
:is(html:not(.js),.visite-immobile) .carte3d:nth-of-type(even) .photo3d{order:2}
:is(html:not(.js),.visite-immobile) .photo3d{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 18px 40px -26px rgba(28,23,71,.55)}
:is(html:not(.js),.visite-immobile) .carte-fin .actions{justify-content:flex-start}
@media (max-width:760px){
  :is(html:not(.js),.visite-immobile) .carte3d{grid-template-columns:1fr;gap:16px;padding:18px}
  :is(html:not(.js),.visite-immobile) .carte3d:nth-of-type(even) .photo3d{order:0}
  :is(html:not(.js),.visite-immobile) .confiance{display:grid;grid-template-columns:1fr}
}


/* ── bandes de lecture ── */
.bande{padding:100px 0}
.tete h2{font-size:clamp(30px,3.8vw,48px);margin-top:16px;max-width:20ch}
.tete p:not(.surtitre){margin-top:16px;font-size:18px;color:var(--doux);max-width:36em}
.fonctions{background:var(--fond2);position:relative}
.fonctions::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--signe);opacity:.7}
.grille-f{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.f{background:var(--blanc);border:1px solid var(--ligne);border-radius:22px;padding:26px;position:relative;transition:transform .25s,box-shadow .25s}
.f:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(106,75,216,.5)}
.f h3{font-size:21px;margin-top:16px}
.f p{margin-top:8px;font-size:15.5px;color:var(--doux)}
.ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#fff;border:2px solid}
.ic svg{width:24px;height:24px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic-cyan{border-color:#8EF0F4;box-shadow:0 0 0 4px rgba(142,240,244,.25),0 0 18px rgba(63,217,232,.35)}.ic-cyan svg{stroke:var(--cyan-texte)}
.ic-rose{border-color:#F7A6E6;box-shadow:0 0 0 4px rgba(247,166,230,.22),0 0 18px rgba(217,106,217,.3)}.ic-rose svg{stroke:var(--rose-texte)}
.ic-violet{border-color:#B9A6F5;box-shadow:0 0 0 4px rgba(185,166,245,.25),0 0 18px rgba(106,75,216,.25)}.ic-violet svg{stroke:var(--violet)}

.formats{background:var(--fond)}
.formats-in{display:grid;grid-template-columns:1fr 1.05fr;gap:5vw;align-items:center}
.trois-ecrans{position:relative;height:330px}
.m-ordi,.m-tab,.m-tel{position:absolute;background:#1C1747;box-shadow:0 24px 40px -24px rgba(28,23,71,.6)}
.m-ordi{left:0;top:0;width:68%;aspect-ratio:16/10;border-radius:14px;padding:9px}
.m-pied{position:absolute;left:30%;right:30%;bottom:-22px;height:22px;background:linear-gradient(#2B2F9E,#1C1747);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.m-tab{right:17%;bottom:0;width:40%;aspect-ratio:4/3;border-radius:14px;padding:7px}
.m-tel{right:0;bottom:0;width:13%;aspect-ratio:9/19;border-radius:14px;padding:4px}
.m-ecran{width:100%;height:100%;border-radius:7px;background:#fff;display:grid;gap:5px;padding:6px}
.m-ecran.deux{grid-template-columns:1.3fr 1fr}.m-ecran.un{grid-template-columns:1fr}
.m-ecran i{border-radius:5px;background:repeating-linear-gradient(180deg,#e2f4f5 0 14%,#fff 14% 20%)}
.m-ecran i:nth-child(2){background:repeating-linear-gradient(180deg,#fbeccc 0 12%,#fff 12% 18%);box-shadow:inset 0 -18% 0 #0e8a97}
.m-ordi .m-ecran{box-shadow:0 0 0 2px #8EF0F4}.m-tab .m-ecran{box-shadow:0 0 0 2px #F7A6E6}.m-tel .m-ecran{box-shadow:0 0 0 2px #B9A6F5}
.commerces{margin-top:70px}
.puces{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.puces li{background:var(--blanc);border:1.5px solid var(--ligne);border-radius:999px;padding:10px 18px;font-weight:600;font-size:15px}
.puces li:nth-child(3n+1){border-color:#BFF3F8}.puces li:nth-child(3n+2){border-color:#F6CDEF}.puces li:nth-child(3n){border-color:#D6CCF7}

.questions{background:var(--fond2)}
.faq{margin-top:34px;display:flex;flex-direction:column;gap:12px}
details{background:var(--blanc);border:1px solid var(--ligne);border-radius:18px;padding:0 22px;transition:border-color .25s}
details[open]{border-color:#D6CCF7}
summary{list-style:none;cursor:pointer;font-weight:700;font-size:17px;padding:19px 0;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:12px;height:12px;border-right:2.5px solid var(--violet);border-bottom:2.5px solid var(--violet);transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s}
details[open] summary::after{transform:rotate(225deg)}
details p{padding-bottom:20px;color:var(--doux);font-size:16px}

.demo{background:radial-gradient(700px 400px at 90% 10%,rgba(247,166,230,.28),transparent 70%),radial-gradient(600px 380px at 0% 100%,rgba(142,240,244,.3),transparent 70%),var(--fond)}
.demo-in{display:grid;grid-template-columns:1fr 1.05fr;gap:5vw;align-items:center}
.demo h2{font-size:clamp(32px,4vw,52px);margin-top:16px}
.demo-texte>p:not(.surtitre){margin-top:16px;font-size:18px;color:var(--doux)}
.coches{list-style:none;margin-top:22px;display:grid;gap:10px}
.coches li{display:flex;gap:12px;align-items:center;font-weight:600}
.coches li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A4BD8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;border:2px solid #B9A6F5}
.formulaire{background:linear-gradient(#fff,#fff) padding-box,var(--signe) border-box;border:3px solid transparent;border-radius:28px;padding:30px;box-shadow:0 30px 60px -36px rgba(106,75,216,.55),0 0 0 1px var(--ligne);display:flex;flex-direction:column;gap:16px;position:relative}
.deux-champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formulaire label{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:14.5px}
.formulaire input,.formulaire textarea{font:500 16px var(--corps);color:var(--encre);background:#FDFBFF;border:1.5px solid #DDD5EC;border-radius:12px;padding:13px 14px;resize:vertical}
.formulaire input:focus,.formulaire textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(106,75,216,.14)}
.erreur{color:#b4234a;font-weight:700;font-size:14.5px}
.note{font-size:13.5px;color:var(--doux);text-align:center}
.note a{color:var(--encre);font-weight:700}

.pied{background:var(--blanc);border-top:1px solid var(--ligne);padding:46px 0 30px}
.pied-in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.pied p{color:var(--doux);font-size:15px;margin-top:8px}
.pied-liens{display:flex;flex-wrap:wrap;gap:8px 22px}
.pied-liens a{color:var(--doux);text-decoration:none;font-size:15px;font-weight:600}
.pied-liens a:hover{color:var(--encre)}
.signature{text-align:center;margin-top:30px;font-size:13.5px}
.signature a{color:var(--pale);text-decoration:none}

/* apparition douce des blocs */
.js .rev{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s ease,transform .7s ease}
.js .rev.vu{opacity:1;transform:none}

/* ── tablette (portrait) et téléphone ── */
@media (max-width:1080px){
  .grille-f{grid-template-columns:1fr 1fr}
  .formats-in,.demo-in{grid-template-columns:1fr}
  .trois-ecrans{max-width:560px;width:100%;margin:10px auto 0}
}
@media (max-width:760px){
  .grille-f{grid-template-columns:1fr}
  .deux-champs{grid-template-columns:1fr}
  .bande{padding:76px 0}
  .formulaire{padding:22px}
  .trois-ecrans{height:240px}
}

/* ── mouvement réduit : la page reste lisible, immobile ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rev{opacity:1;transform:none}
}