/* Page « Télécharger pour Windows » (public/telecharger/index.html). Les mises en page fines restent
   dans le style des éléments ; ici : textures de toile, réglages par largeur, animations et démonstration. */
#contenu a{color:#702f48}#contenu a:hover{color:#542036}
*,*::before,*::after{box-sizing:border-box}
a:focus-visible,summary:focus-visible{outline:3px solid #f2c14e;outline-offset:3px;border-radius:10px}
.conteneur{width:100%;max-width:1240px;margin:0 auto;padding-left:32px;padding-right:32px}
.aida-sombre{background-color:#3d1727;background-image:radial-gradient(circle,rgb(255 236 242 / 9%) 1.1px,transparent 1.6px);background-size:11px 11px}
.aida-clair{background-color:#fcfaf7;background-image:radial-gradient(circle,rgb(112 47 72 / 9%) 1.1px,transparent 1.6px);background-size:11px 11px}
.aida-toile{background-color:#fffdf8;background-image:radial-gradient(circle,rgb(112 47 72 / 16%) 1.1px,transparent 1.7px);background-size:9px 9px}
.titre-hero{font-size:clamp(46px,5.6vw,84px)}
.titre-section{font-size:clamp(34px,4vw,56px)}
.hero-grille{display:flex;flex-wrap:wrap;align-items:center;gap:56px 64px}
.hero-texte{flex:1 1 440px;min-width:0}
.hero-visuel{flex:1.2 1 540px;min-width:0}
.grille-cartes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.duo{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.fin-grille{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:56px 88px}
.btn-or{transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .2s,box-shadow .3s}
.btn-or:hover{background-color:#f9dc8c !important;transform:translateY(-3px);box-shadow:0 18px 40px -14px rgb(242 193 78 / 55%) !important;color:#3d1727 !important}
.btn-vin{transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .2s}
.btn-vin:hover{background-color:#542036 !important;transform:translateY(-3px);color:#ffffff !important}
.btn-contour{transition:background-color .2s,border-color .2s}
.btn-contour:hover{background-color:rgb(252 250 247 / 10%) !important;border-color:rgb(252 250 247 / 70%) !important;color:#fcfaf7 !important}
.lien-nav{transition:color .2s}
.lien-nav:hover{color:#ffffff !important}
.onglet{transition:background-color .25s,border-color .25s,color .25s}
.demo{container-type:inline-size}
/* Une taille en cqw se mesure sur le conteneur parent : la démo la donne donc à ses enfants. */
.demo>*{font-size:1.1cqw}
.atelier-fond{background-color:#ede6dc;background-image:radial-gradient(circle,rgb(112 47 72 / 11%) 0.09cqw,transparent 0.15cqw);background-size:1.2cqw 1.2cqw}
.grille-tissu{background-color:#fffdf8;background-image:linear-gradient(rgb(112 47 72 / 12%) 1px,transparent 1px),linear-gradient(90deg,rgb(112 47 72 / 12%) 1px,transparent 1px),radial-gradient(circle,rgb(112 47 72 / 14%) 0.08cqw,transparent 0.14cqw);background-size:calc(100% / 22) calc(100% / 16),calc(100% / 22) calc(100% / 16),calc(100% / 44) calc(100% / 32)}
.grille-papier{background-color:#ffffff;background-image:linear-gradient(rgb(42 35 38 / 28%) 1px,transparent 1px),linear-gradient(90deg,rgb(42 35 38 / 28%) 1px,transparent 1px);background-size:calc(100% / 22) calc(100% / 16)}
.x-dessous,.x-dessus{position:absolute;left:50%;top:50%;width:112%;height:24%;border-radius:999px;box-shadow:0 0.06cqw 0.1cqw rgb(42 35 38 / 35%)}
.x-dessous{transform:translate(-50%,-50%) rotate(45deg);filter:brightness(.84)}
.x-dessus{transform:translate(-50%,-50%) rotate(-45deg);background-image:linear-gradient(rgb(255 255 255 / 40%),transparent 75%)}
.sym{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.3cqw;line-height:1;color:#2a2326}
.echeveau{background-image:repeating-linear-gradient(112deg,rgb(255 255 255 / 20%) 0 0.22cqw,transparent 0.22cqw 0.62cqw),linear-gradient(rgb(255 255 255 / 16%),rgb(0 0 0 / 14%));box-shadow:inset 0 0 0 1px rgb(0 0 0 / 6%)}
.studio{background:radial-gradient(circle at 50% 45%,#fffaf2 0%,#e5d9c9 75%)}
.legende-demo{position:absolute;left:8.5%;bottom:4%;z-index:8;display:flex;align-items:center;gap:0.9cqw;padding:0.7cqw 1.3cqw 0.7cqw 0.7cqw;border-radius:1.1cqw;background-color:rgb(42 16 28 / 92%);color:#fcfaf7;box-shadow:0 1.2cqw 2.4cqw -1cqw rgb(30 12 20 / 60%)}
.legende-num{display:inline-flex;align-items:center;justify-content:center;flex:none;width:max(22px,2.3cqw);height:max(22px,2.3cqw);border-radius:0.7cqw;background-color:#f2c14e;color:#3d1727;font-weight:700;font-size:max(11px,1.1cqw)}
.legende-titre{font-weight:700;font-size:max(11px,1.15cqw)}
.legende-sous{font-size:max(10px,0.95cqw);opacity:.8}
.onglet:hover{border-color:rgb(252 250 247 / 55%) !important;color:#fcfaf7 !important}
.carte{transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .45s}
.carte:hover{transform:translateY(-6px);border-color:#bc4365 !important;box-shadow:0 30px 60px -34px rgb(61 23 39 / 45%)}
.couture path{animation:couture 1.4s linear infinite}
.fil-defile path{animation:couture 1.8s linear infinite}
.flotte{animation:flotte 10s ease-in-out infinite}
.flotte-lente{animation:flotte 15s ease-in-out infinite}
.scintille{animation:scintille 6s ease-in-out infinite}
.piste{display:flex;width:max-content;animation:defile 44s linear infinite}
.piste-inverse{animation-direction:reverse}
.fondu{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.indice span.goutte{animation:goutte 2.2s cubic-bezier(.65,0,.35,1) infinite}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details .plus{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
details[open] .plus{transform:rotate(45deg)}
.pointille{border-radius:2px;background-image:repeating-linear-gradient(90deg,rgb(255 255 255 / 75%) 0 6px,transparent 6px 10px)}
.case-install{position:relative;aspect-ratio:1 / 1;border-radius:3px;background-color:#f6f0e9}
.caret{animation:clignote 1s steps(1) infinite}
.reflet{position:relative;overflow:hidden}
.reflet::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgb(255 255 255 / 30%) 50%,transparent 65%);transform:translateX(-120%);animation:reflet 3.8s ease-in-out infinite;pointer-events:none}
@keyframes clignote{50%{opacity:0}}
@keyframes reflet{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes couture{to{stroke-dashoffset:-36}}
@keyframes flotte{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-18px,0)}}
@keyframes scintille{0%,100%{opacity:.22}50%{opacity:.62}}
@keyframes defile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes goutte{0%{transform:translateY(-14px);opacity:0}30%{opacity:1}100%{transform:translateY(22px);opacity:0}}
@media (max-width:1100px){.grille-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.etapes{grid-template-columns:minmax(0,1fr)}.fil-etapes{display:none}}
@media (max-width:720px){.calque-proche{display:none}.cache-mobile{display:none !important}}
@media (max-width:640px){.conteneur{padding-left:16px;padding-right:16px}.grille-cartes{grid-template-columns:minmax(0,1fr)}.hero-visuel{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.flotte,.flotte-lente,.scintille,.piste,.couture path,.fil-defile path,.indice span.goutte,.caret,.reflet::after{animation:none !important}}

/* ---------- Page, en-tête commun et pied de page ---------- */
html{background:#fcfaf7}
body{margin:0;background:#fcfaf7;color:#2a2326;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
#contenu{display:block;overflow-x:hidden}
.lien-sauter{position:absolute;left:16px;top:-80px;z-index:20;padding:10px 16px;border-radius:10px;background:#702f48;color:#fff !important;font-weight:600;text-decoration:none}
.lien-sauter:focus{top:12px}
.site-header{position:relative;z-index:10;background:#fcfaf7;border-bottom:1px solid #e9e1da}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:#702f48;text-decoration:none}
.brand svg{flex:none;width:34px;height:34px}
.brand span{font-family:'Playfair Display',Georgia,serif;font-size:1.55rem;font-weight:600;letter-spacing:-0.02em;line-height:1}
footer .lien-nav{color:rgb(252 250 247 / 72%);text-decoration:none;padding:8px 0}

/* ---------- Fenêtre de démonstration ---------- */
.pente{transform:perspective(1800px) rotateY(-9deg) rotateX(4deg);transform-origin:50% 50%}
.segment{position:relative;flex:1;min-width:0;display:flex;align-items:center;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.segment-piste{position:relative;display:block;width:100%;height:4px;border-radius:999px;background-color:rgb(252 250 247 / 18%);overflow:hidden;transition:height .2s,background-color .2s}
.segment:hover .segment-piste{height:6px;background-color:rgb(252 250 247 / 30%)}
.segment[aria-pressed="true"] .segment-piste{height:6px}
.segment-barre{position:absolute;inset:0;border-radius:999px;background-color:#f2c14e;transform-origin:0 50%;transform:scaleX(0)}
.segment::after{content:attr(data-nom);position:absolute;left:50%;bottom:calc(100% - 6px);padding:4px 10px;border-radius:8px;background-color:#fcfaf7;color:#3d1727;font-size:12px;font-weight:700;white-space:nowrap;opacity:0;transform:translate(-50%,4px);pointer-events:none;transition:opacity .2s,transform .2s}
.segment:hover::after,.segment:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.segment:focus-visible{outline:3px solid #f2c14e;outline-offset:2px;border-radius:8px}
.compteur-scene{flex:none;min-width:48px;text-align:right;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:rgb(252 250 247 / 66%)}
.compteur-scene b{color:#fcfaf7}
[data-icone][hidden]{display:none}
.onglet-lecture{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border-radius:999px;border:1px solid rgb(252 250 247 / 24%);background-color:transparent;color:#fcfaf7;cursor:pointer}

/* ---------- Ruban de broderies ---------- */
.ruban-motif{display:flex;align-items:center;justify-content:center;flex:none;width:150px;height:120px;margin-right:44px}
.ruban-motif img{max-width:120px;max-height:110px;width:auto;height:auto;filter:drop-shadow(0 14px 18px rgb(12 2 7 / 45%))}

@media (max-width:899px){.pente{transform:none}}