/* ==========================================================================
   Sections — compositions éditoriales, aplats, grille suisse
   ========================================================================== */

/* ----- Chargement ----- */
.a-loader{position:fixed;inset:0;z-index:1000;background:var(--jaune);
  display:grid;place-items:center;transition:transform var(--d-long) var(--e-sortie)}
.a-loader.est-fini{transform:translateY(-101%)}
.a-loader__in{text-align:center}
.a-loader svg{width:82px;height:82px;margin:0 auto 20px}
.a-loader polygon{fill:none;stroke:var(--encre);stroke-width:4;
  stroke-dasharray:420;stroke-dashoffset:420;animation:a-trace 1.4s var(--e-net) forwards}
@keyframes a-trace{to{stroke-dashoffset:0}}
.a-loader__nom{font-family:var(--titre);font-weight:800;font-size:clamp(30px,7vw,58px);
  letter-spacing:-.045em;text-transform:uppercase;opacity:0;animation:a-fade .5s .35s forwards}
@keyframes a-fade{to{opacity:1}}
.a-loader__barre{width:200px;height:var(--trait-fort);background:rgba(14,14,14,.2);margin:24px auto 0}
.a-loader__barre i{display:block;height:100%;width:0;background:var(--encre)}

/* ----- Hero : affiche de campagne ----- */
.a-hero{position:relative;background:var(--turquoise);
  border-bottom:var(--trait-fort) solid var(--encre);overflow:hidden}
.a-hero__fond{display:none}
/* Trame de points : clin d'œil à l'impression pop */
.a-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(14,14,14,.14) 1.4px,transparent 1.4px);
  background-size:16px 16px;opacity:.55}
.a-hero__in{position:relative;z-index:2;max-width:var(--max);margin-inline:auto;
  padding:clamp(40px,6vw,80px) var(--gouttiere) 0;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,60px);align-items:center;
  min-height:calc(100svh - var(--hdr) - 44px)}
.a-hero__copie{max-width:none}
.a-hero .a-label,.a-hero h1,.a-hero__st,.a-hero__cta{opacity:0;transform:translateY(24px)}
.a-hero.est-prete .a-label{animation:a-monte .6s var(--e-net) .1s forwards}
.a-hero.est-prete h1{animation:a-monte .7s var(--e-net) .2s forwards}
.a-hero.est-prete .a-hero__st{animation:a-monte .7s var(--e-net) .34s forwards}
.a-hero.est-prete .a-hero__cta{animation:a-monte .7s var(--e-net) .46s forwards}
@keyframes a-monte{to{opacity:1;transform:none}}
.a-hero h1{font-size:var(--t-affiche);margin:22px 0 20px;color:var(--encre)}
.a-hero h1 em{display:block;color:var(--papier);
  -webkit-text-stroke:2px var(--encre);paint-order:stroke fill}
.a-hero__st{font-size:clamp(16px,1.5vw,21px);font-weight:500;max-width:40ch;margin-bottom:32px;color:var(--encre)}
.a-hero__cta{display:flex;gap:14px;flex-wrap:wrap}
/* La montre, cadrée dans un octogone tracé */
.a-hero__visuel{position:relative;display:grid;place-items:center;padding-block:clamp(20px,4vw,50px)}
.a-hero__montre{position:relative;width:min(84%,520px);z-index:2;
  opacity:0;transform:scale(.94) rotate(-3deg);
  transition:opacity .8s var(--e-net) .2s,transform .9s var(--e-sortie) .2s;
  filter:drop-shadow(10px 14px 0 rgba(14,14,14,.18))}
.a-hero.est-prete .a-hero__montre{opacity:1;
  transform:translateY(var(--par,0px)) scale(1) rotate(-2deg)}
.a-hero__halo{position:absolute;width:min(88%,560px);aspect-ratio:1;z-index:1;
  background:var(--jaune);border:var(--trait-fort) solid var(--encre);
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  opacity:0;transform:rotate(0deg) scale(.9);
  transition:opacity .7s var(--e-net) .1s,transform .9s var(--e-sortie) .1s;filter:none}
.a-hero.est-prete .a-hero__halo{opacity:1;transform:rotate(11deg) scale(1)}
.a-hero__scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  width:var(--trait);height:46px;background:rgba(14,14,14,.25);overflow:hidden}
.a-hero__scroll i{position:absolute;top:-46px;left:0;width:100%;height:46px;background:var(--encre);
  animation:a-scroll 2.2s var(--e-net) infinite}
@keyframes a-scroll{0%{top:-46px}60%,100%{top:46px}}
@media(max-width:900px){
  .a-hero__in{grid-template-columns:1fr;min-height:0;padding-bottom:30px;gap:8px}
  .a-hero__visuel{order:-1}
  .a-hero__montre{width:min(72%,320px)}
  .a-hero__halo{width:min(80%,340px)}
  .a-hero__scroll{display:none}
}

/* ----- En-tête de section ----- */
.a-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  flex-wrap:wrap;padding-bottom:22px;margin-bottom:clamp(28px,3.4vw,50px);
  border-bottom:var(--trait-fort) solid var(--encre)}
.a-tete h2{margin-top:16px}
.a-tete__st{font-size:clamp(14px,1.05vw,16.5px);font-weight:500;max-width:44ch;opacity:.72}
.a-tete--centre{flex-direction:column;align-items:center;text-align:center}

/* ----- Collection ----- */
.a-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(16px,1.8vw,26px)}
/* Chaque carte reçoit une couleur de la palette, en rotation. */
.a-grille > *:nth-child(8n+1),.a-carrousel__item:nth-child(8n+1){--pop:var(--turquoise)}
.a-grille > *:nth-child(8n+2),.a-carrousel__item:nth-child(8n+2){--pop:var(--jaune)}
.a-grille > *:nth-child(8n+3),.a-carrousel__item:nth-child(8n+3){--pop:var(--rose)}
.a-grille > *:nth-child(8n+4),.a-carrousel__item:nth-child(8n+4){--pop:var(--ciel)}
.a-grille > *:nth-child(8n+5),.a-carrousel__item:nth-child(8n+5){--pop:var(--vert)}
.a-grille > *:nth-child(8n+6),.a-carrousel__item:nth-child(8n+6){--pop:var(--orange)}
.a-grille > *:nth-child(8n+7),.a-carrousel__item:nth-child(8n+7){--pop:var(--creme)}
.a-grille > *:nth-child(8n+8),.a-carrousel__item:nth-child(8n+8){--pop:var(--bleu)}

/* ----- Carrousel ----- */
.a-carrousel{position:relative;padding-block:var(--sec) 0}
.a-carrousel__piste{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px var(--gouttiere) 28px;scrollbar-width:none;cursor:grab}
.a-carrousel__piste::-webkit-scrollbar{display:none}
.a-carrousel__piste.est-tire{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.a-carrousel__item{flex:0 0 clamp(248px,23vw,320px);scroll-snap-align:center;
  transition:transform var(--d-moyen) var(--e-net),opacity var(--d-moyen);
  opacity:.6;transform:scale(.95)}
.a-carrousel__item.est-centre{opacity:1;transform:scale(1)}
.a-carrousel__nav{display:flex;gap:10px;justify-content:flex-end;
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere)}
.a-fleche{width:50px;height:50px;display:grid;place-items:center;
  border:var(--trait) solid var(--encre);background:var(--papier);
  transition:background var(--d-court),transform var(--d-court) var(--e-net),opacity var(--d-court)}
.a-fleche:hover{background:var(--jaune);transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--encre)}
.a-fleche[disabled]{opacity:.3;pointer-events:none}
.a-fleche svg{width:18px;height:18px;stroke-width:2.2}

/* ----- Produit vedette : deux blocs contrastés ----- */
.a-vedette{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border:var(--trait-fort) solid var(--encre)}
.a-vedette__img{position:relative;display:grid;place-items:center;padding:clamp(28px,4vw,64px);
  background:var(--framboise);border-right:var(--trait-fort) solid var(--encre);overflow:hidden}
.a-vedette__img::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(14,14,14,.16) 1.4px,transparent 1.4px);background-size:15px 15px}
.a-vedette__img::after{content:"";position:absolute;width:70%;aspect-ratio:1;
  border:var(--trait-fort) solid var(--encre);background:var(--creme);
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}
.a-vedette__img img{position:relative;z-index:2;width:80%;
  filter:drop-shadow(8px 12px 0 rgba(14,14,14,.2))}
.a-vedette__txt{padding:clamp(28px,4vw,64px);background:var(--papier);display:flex;flex-direction:column;justify-content:center}
.a-vedette h2{margin:16px 0 14px}
.a-vedette__specs{margin:26px 0;border-top:var(--trait) solid var(--encre)}
.a-vedette__specs div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;
  border-bottom:var(--trait) solid var(--ligne-douce)}
.a-vedette__specs .k{font-size:10.5px;font-weight:700;letter-spacing:var(--ls-mini);text-transform:uppercase;opacity:.6}
.a-vedette__specs .v{font-family:var(--titre);font-weight:700;font-size:17px;
  letter-spacing:-.02em;text-transform:uppercase}
.a-vedette__prix{font-family:var(--titre);font-weight:800;font-size:clamp(32px,3.6vw,52px);
  letter-spacing:-.04em;margin-bottom:24px}
@media(max-width:900px){
  .a-vedette{grid-template-columns:1fr}
  .a-vedette__img{border-right:0;border-bottom:var(--trait-fort) solid var(--encre)}
}

/* ----- Savoir-faire : bloc plein cadre ----- */
.a-savoir{position:relative;border-block:var(--trait-fort) solid var(--encre);
  background:var(--bleu);overflow:hidden;display:grid;place-items:center;
  min-height:min(82vh,760px)}
.a-savoir__media{position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;opacity:.85}
.a-savoir__media img{width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.08 + var(--p,0) * .06)) translate3d(0,calc(var(--p,0) * -30px),0)}
.a-savoir__media::after{display:none}
.a-savoir__in{position:relative;z-index:2;text-align:center;max-width:52ch;
  padding:clamp(30px,5vw,60px);background:var(--papier);
  border:var(--trait-fort) solid var(--encre);box-shadow:12px 12px 0 var(--encre);
  margin-inline:var(--gouttiere)}
.a-savoir h2{margin:18px 0 16px;font-size:var(--t-h1)}
.a-savoir p{font-weight:500;margin-bottom:28px}

/* ----- Chiffres : blocs colorés ----- */
.a-chiffres{display:grid;grid-template-columns:repeat(4,1fr);
  border:var(--trait-fort) solid var(--encre)}
.a-chiffres div{padding:clamp(26px,3.4vw,48px) clamp(14px,1.8vw,28px);text-align:center;
  border-right:var(--trait) solid var(--encre)}
.a-chiffres div:last-child{border-right:0}
.a-chiffres div:nth-child(1){background:var(--jaune)}
.a-chiffres div:nth-child(2){background:var(--turquoise)}
.a-chiffres div:nth-child(3){background:var(--rose)}
.a-chiffres div:nth-child(4){background:var(--ciel)}
.a-chiffres .n{font-family:var(--titre);font-weight:800;font-size:clamp(42px,5.4vw,82px);
  line-height:.9;letter-spacing:-.05em}
.a-chiffres .n em{color:var(--encre)}
.a-chiffres .l{font-size:10px;font-weight:700;letter-spacing:var(--ls-mini);
  text-transform:uppercase;margin-top:12px}
@media(max-width:820px){
  .a-chiffres{grid-template-columns:1fr 1fr}
  .a-chiffres div:nth-child(2n){border-right:0}
  .a-chiffres div:nth-child(1),.a-chiffres div:nth-child(2){border-bottom:var(--trait) solid var(--encre)}
}

/* ----- Histoire ----- */
.a-histoire{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,72px);align-items:center}
.a-histoire__img{position:relative;aspect-ratio:4/5;overflow:hidden;
  border:var(--trait-fort) solid var(--encre);background:var(--orange)}
.a-histoire__img img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06) translate3d(0,calc(var(--p,0) * -22px),0)}
.a-histoire h2{margin:16px 0 20px}
.a-histoire p{font-weight:500;margin-bottom:16px;opacity:.82}
.a-histoire__sign{display:inline-block;font-family:var(--titre);font-weight:800;font-size:19px;
  letter-spacing:-.03em;text-transform:uppercase;background:var(--jaune);
  border:var(--trait) solid var(--encre);padding:8px 14px;margin-top:22px;opacity:1}
@media(max-width:900px){.a-histoire{grid-template-columns:1fr}}

/* ----- Témoignages ----- */
.a-avis{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.a-avis blockquote{border:var(--trait) solid var(--encre);padding:clamp(22px,2.6vw,34px);
  background:var(--papier);display:flex;flex-direction:column;gap:14px;height:100%;
  transition:transform var(--d-moyen) var(--e-net),box-shadow var(--d-moyen) var(--e-net)}
.a-avis blockquote:hover{transform:translate(-5px,-5px);box-shadow:9px 9px 0 var(--encre)}
.a-avis blockquote:nth-child(1){background:var(--creme)}
.a-avis blockquote:nth-child(2){background:var(--papier)}
.a-avis blockquote:nth-child(3){background:var(--creme)}
.a-avis .etoiles{letter-spacing:.24em;font-size:14px}
.a-avis p{font-family:var(--titre);font-weight:700;font-size:19px;line-height:1.22;
  letter-spacing:-.025em;flex:1;opacity:1}
.a-avis cite{font-style:normal;font-size:10.5px;font-weight:700;
  letter-spacing:var(--ls-mini);text-transform:uppercase;opacity:.65}
@media(max-width:900px){.a-avis{grid-template-columns:1fr}}

/* ----- Appel final : pleine couleur ----- */
.a-final{position:relative;text-align:center;padding-block:clamp(80px,11vw,160px);
  background:var(--jaune);border-top:var(--trait-fort) solid var(--encre);overflow:hidden}
.a-final::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(14,14,14,.13) 1.5px,transparent 1.5px);background-size:18px 18px}
.a-final > *{position:relative;z-index:2}
.a-final__ligne{width:56px;height:56px;background:var(--framboise);
  border:var(--trait-fort) solid var(--encre);margin:0 auto 30px;
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%)}
.a-final h2{font-size:var(--t-h1);margin-bottom:18px}
.a-final h2 em{color:var(--papier);-webkit-text-stroke:2px var(--encre);paint-order:stroke fill}
.a-final p{font-weight:500;max-width:46ch;margin:0 auto 34px}

/* ----- Pied de page ----- */
.a-pied{background:var(--encre);color:var(--papier);border-top:var(--trait-fort) solid var(--encre)}
.a-pied__grille{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(26px,3.4vw,54px);
  padding-block:clamp(46px,6vw,80px) 40px}
.a-pied .a-logo svg{color:var(--papier)}
.a-pied__marque .a-logo{margin-bottom:16px}
.a-pied__marque p{font-size:14px;max-width:36ch;opacity:.62}
.a-pied h4{font-family:var(--texte);font-size:10px;font-weight:800;letter-spacing:var(--ls-mini);
  text-transform:uppercase;color:var(--jaune);margin-bottom:16px}
.a-pied ul{display:flex;flex-direction:column;gap:10px}
.a-pied ul a{font-family:var(--titre);font-weight:600;font-size:16px;letter-spacing:-.02em;
  text-transform:uppercase;opacity:.78;transition:opacity var(--d-court),color var(--d-court)}
.a-pied ul a:hover{opacity:1;color:var(--jaune)}
.a-pied__base{border-top:var(--trait) solid rgba(244,241,234,.2);padding-block:20px 34px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:10.5px;font-weight:600;letter-spacing:.04em;opacity:.6}
.a-pied__base a:hover{color:var(--jaune);opacity:1}
@media(max-width:1000px){.a-pied__grille{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.a-pied__grille{grid-template-columns:1fr}}

/* ----- Cookies ----- */
.a-cookies{position:fixed;left:20px;right:20px;bottom:20px;z-index:120;max-width:640px;
  margin-inline:auto;background:var(--papier);border:var(--trait-fort) solid var(--encre);
  box-shadow:10px 10px 0 var(--encre);padding:20px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  transform:translateY(180%);transition:transform var(--d-long) var(--e-net)}
.a-cookies.est-visible{transform:none}
.a-cookies p{flex:1;min-width:220px;font-size:13px;font-weight:500}
.a-cookies a{border-bottom:var(--trait) solid var(--encre);font-weight:700}
.a-cookies__btns{display:flex;gap:8px}
.a-cookies button{padding:11px 18px;font-size:10.5px;font-weight:700;letter-spacing:var(--ls-mini);
  text-transform:uppercase;border:var(--trait) solid var(--encre);background:var(--papier);
  transition:background var(--d-court)}
.a-cookies button:hover{background:var(--papier-2)}
.a-cookies .oui{background:var(--jaune)}
.a-cookies .oui:hover{background:var(--encre);color:var(--papier)}
@media(max-width:560px){.a-cookies{left:10px;right:10px;bottom:10px}
  .a-cookies__btns{width:100%}.a-cookies__btns button{flex:1}}

/* ==========================================================================
   Hero vidéo — pour vos propres films
   ========================================================================== */
.a-video{position:relative;background:var(--encre);
  border-bottom:var(--trait-fort) solid var(--encre);overflow:hidden}
.a-video__cadre{position:relative;height:min(88svh,860px);min-height:460px}
.a-video__media{width:100%;height:100%;object-fit:cover;display:block;
  transform:translate3d(0,calc(var(--p,0) * -18px),0) scale(1.04)}
.a-video__voile{position:absolute;inset:0;
  background:linear-gradient(to right,rgba(14,14,14,.82) 0%,rgba(14,14,14,.5) 46%,rgba(14,14,14,.1) 82%)}
.a-video__copie{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:center;max-width:var(--max);margin-inline:auto;
  padding-inline:var(--gouttiere);color:var(--papier)}
.a-video__copie > *{max-width:46ch}
.a-video__copie h1{font-size:var(--t-affiche);color:var(--papier);margin:20px 0 18px}
.a-video__copie h1 em{color:var(--jaune)}
.a-video__st{font-size:clamp(16px,1.5vw,21px);font-weight:500;margin-bottom:30px;opacity:.88}
.a-video__cta{display:flex;gap:14px;flex-wrap:wrap}
.a-video__cta .a-btn{background:var(--papier);color:var(--encre)}
.a-video__cta .a-btn--pop{background:var(--jaune)}
.a-video__cta .a-btn:hover{background:var(--jaune)}
.a-video__ctrl{position:absolute;right:var(--gouttiere);bottom:22px;z-index:3;display:flex;gap:8px}
.a-video__btn{width:44px;height:44px;display:grid;place-items:center;color:var(--encre);
  background:var(--papier);border:var(--trait) solid var(--encre);
  transition:background var(--d-court),transform var(--d-court) var(--e-net)}
.a-video__btn:hover{background:var(--jaune);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--encre)}
.a-video__btn svg{width:17px;height:17px}
@media(max-width:900px){
  .a-video__cadre{height:auto;aspect-ratio:9/16;max-height:86svh}
  .a-video__voile{background:linear-gradient(to top,rgba(14,14,14,.88) 10%,rgba(14,14,14,.25) 62%)}
  .a-video__copie{justify-content:flex-end;padding-bottom:92px}
  .a-video__ctrl{left:var(--gouttiere);right:auto;bottom:26px}
}

/* ==========================================================================
   Hero séquence — bâti sur vos visuels produits
   ========================================================================== */
.a-seq{position:relative;background:var(--papier);
  border-bottom:var(--trait-fort) solid var(--encre);overflow:hidden;
  display:grid;grid-template-columns:1.02fr .98fr;align-items:center;
  min-height:calc(100svh - var(--hdr) - 44px);
  padding:clamp(30px,4vw,60px) var(--gouttiere)}
.a-seq__copie{position:relative;z-index:3;max-width:46ch}
.a-seq__copie h1{font-size:var(--t-affiche);margin:20px 0 18px}
.a-seq__copie h1 em{display:block;color:var(--papier);
  -webkit-text-stroke:2px var(--encre);paint-order:stroke fill}
.a-seq__st{font-size:clamp(16px,1.5vw,21px);font-weight:500;max-width:40ch;margin-bottom:30px}
.a-seq__cta{display:flex;gap:14px;flex-wrap:wrap}

/* Les plans se superposent, un seul est visible à la fois. */
.a-seq__plans{position:relative;height:100%;min-height:min(64svh,600px);order:2}
.a-seq__plan{position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;visibility:hidden;transition:opacity .7s var(--e-net),visibility .7s}
.a-seq__plan.est-actif{opacity:1;visibility:visible}
/* L'octogone prend la teinte du plan : c'est lui qui fait le « cut » coloré. */
.a-seq__octo{position:absolute;width:min(86%,520px);aspect-ratio:1;
  background:var(--teinte);border:var(--trait-fort) solid var(--encre);
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  transform:rotate(4deg) scale(.86);transition:transform .9s var(--e-sortie)}
.a-seq__plan.est-actif .a-seq__octo{transform:rotate(11deg) scale(1)}
.a-seq__plan img{position:relative;z-index:2;width:min(74%,440px);
  filter:drop-shadow(10px 14px 0 rgba(14,14,14,.18));
  transform:translateY(18px) scale(.94) rotate(2deg);transition:transform 1s var(--e-sortie)}
.a-seq__plan.est-actif img{transform:translateY(var(--par,0px)) scale(1) rotate(-2deg)}
.a-seq__nom{position:absolute;z-index:3;bottom:6%;left:50%;transform:translateX(-50%);
  background:var(--encre);color:var(--papier);border:var(--trait) solid var(--encre);
  padding:8px 14px;font-family:var(--texte);font-size:11px;font-weight:800;
  letter-spacing:var(--ls-mini);text-transform:uppercase;white-space:nowrap;
  opacity:0;transition:opacity .5s var(--e-net) .2s}
.a-seq__plan.est-actif .a-seq__nom{opacity:1}

.a-seq__pastilles{position:absolute;left:var(--gouttiere);bottom:22px;z-index:4;display:flex;gap:8px}
.a-seq__pastille{width:34px;height:16px;display:grid;align-items:center;padding:0}
.a-seq__pastille i{display:block;height:var(--trait-fort);background:rgba(14,14,14,.22);
  transition:background var(--d-court)}
.a-seq__pastille.est-actif i{background:var(--encre)}
.a-seq__pastille:hover i{background:var(--framboise)}

@media(max-width:900px){
  .a-seq{grid-template-columns:1fr;min-height:0;gap:10px;padding-bottom:60px}
  .a-seq__plans{order:-1;min-height:min(50svh,420px)}
  .a-seq__octo{width:min(78%,340px)}
  .a-seq__plan img{width:min(66%,280px)}
  .a-seq__pastilles{position:static;margin-top:18px}
}
/* Le mode calme est centralisé dans responsive.css. */

/* ==========================================================================
   Bannière défilante — un plan, une montre, une couleur
   ========================================================================== */
.a-def{position:relative;overflow:hidden;border-block:var(--trait-fort) solid var(--encre)}
.a-def__plans{position:relative;min-height:min(76svh,720px)}
@media(max-width:900px){.a-def__plans{min-height:auto}}

.a-def__plan{position:absolute;inset:0;background:var(--fond);color:var(--txt);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(16px,3vw,50px);padding:clamp(28px,4vw,64px) var(--gouttiere) clamp(78px,7vw,96px);
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--e-net),visibility .55s}
.a-def__plan.est-actif{opacity:1;visibility:visible;position:relative}
/* Trame de points, reprise de l'impression pop */
.a-def__plan::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--txt) 16%,transparent) 1.5px,transparent 1.5px);
  background-size:17px 17px;opacity:.5}

/* L'octogone d'accent, derrière le visuel */
.a-def__octo{position:absolute;right:8%;top:50%;width:min(38vw,430px);aspect-ratio:1;
  background:var(--acc);border:var(--trait-fort) solid var(--encre);
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  transform:translateY(-50%) rotate(0deg) scale(.82);opacity:0;
  transition:transform 1s var(--e-sortie) .1s,opacity .6s var(--e-net) .1s}
.a-def__plan.est-actif .a-def__octo{transform:translateY(-50%) rotate(13deg) scale(1);opacity:1}

/* Texte : chaque ligne monte séparément */
.a-def__texte{position:relative;z-index:3}
.a-def__kicker{display:inline-block;font-family:var(--texte);font-size:var(--t-mini);font-weight:800;
  letter-spacing:var(--ls-mini);text-transform:uppercase;
  background:var(--acc);color:var(--encre);border:var(--trait) solid var(--encre);padding:6px 12px;
  opacity:0;transform:translateY(18px)}
.a-def__titre{margin:20px 0 18px;font-size:clamp(38px,6.6vw,96px);line-height:.9;color:var(--txt)}
.a-def__titre span{display:block;opacity:0;transform:translateY(28px)}
.a-def__titre .l2{color:var(--fond);-webkit-text-stroke:2px var(--txt);paint-order:stroke fill}
.a-def__modele{display:inline-block;font-family:var(--texte);font-size:12px;font-weight:700;
  letter-spacing:var(--ls-mini);text-transform:uppercase;
  border-bottom:var(--trait) solid var(--txt);padding-bottom:3px;
  opacity:0;transform:translateY(16px)}
.a-def__plan.est-actif .a-def__kicker{animation:a-def-in .6s var(--e-net) .12s forwards}
.a-def__plan.est-actif .a-def__titre .l1{animation:a-def-in .7s var(--e-net) .2s forwards}
.a-def__plan.est-actif .a-def__titre .l2{animation:a-def-in .7s var(--e-net) .3s forwards}
.a-def__plan.est-actif .a-def__modele{animation:a-def-in .6s var(--e-net) .42s forwards}
@keyframes a-def-in{to{opacity:1;transform:none}}

/* Visuel : entre en glissant depuis la droite */
.a-def__visuel{position:relative;z-index:2;display:grid;place-items:center}
.a-def__visuel img{width:min(100%,780px);
  filter:drop-shadow(12px 16px 0 color-mix(in srgb,var(--encre) 22%,transparent));
  opacity:0;transform:translateX(58px) scale(.96)}
.a-def__plan.est-actif .a-def__visuel img{animation:a-def-img .9s var(--e-sortie) .16s forwards}
@keyframes a-def-img{to{opacity:1;transform:translateX(0) scale(1)}}

/* Barre de commande */
.a-def__barre{position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px var(--gouttiere) 20px}
.a-def__fleche,.a-def__pause{width:44px;height:44px;display:grid;place-items:center;
  background:var(--papier);color:var(--encre);border:var(--trait) solid var(--encre);
  transition:background var(--d-court),transform var(--d-court) var(--e-net)}
.a-def__fleche:hover,.a-def__pause:hover{background:var(--jaune);
  transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--encre)}
.a-def__fleche svg{width:17px;height:17px;stroke-width:2.2}
.a-def__pause svg{width:15px;height:15px}
.a-def__pastilles{display:flex;gap:6px;padding:0 6px}
.a-def__pastille{width:26px;height:18px;display:grid;align-items:center;padding:0}
.a-def__pastille i{display:block;height:var(--trait-fort);background:var(--encre);opacity:.3;
  transition:opacity var(--d-court),background var(--d-court)}
.a-def__pastille.est-actif i{opacity:1}
.a-def__pastille:hover i{opacity:1;background:var(--framboise)}

/* Progression du plan en cours */
.a-def__progres{position:absolute;left:0;right:0;bottom:0;z-index:6;height:4px;
  background:color-mix(in srgb,var(--encre) 18%,transparent);display:block}
.a-def__progres i{display:block;height:100%;width:0;background:var(--encre)}

@media(max-width:900px){
  .a-def__plan{grid-template-columns:1fr;padding-bottom:92px;gap:8px}
  .a-def__visuel{order:-1}
  .a-def__octo{right:auto;left:50%;top:38%;width:min(74vw,340px);
    transform:translate(-50%,-50%) rotate(0) scale(.82)}
  .a-def__plan.est-actif .a-def__octo{transform:translate(-50%,-50%) rotate(11deg) scale(1)}
  .a-def__visuel img{width:min(86%,420px)}
  .a-def__titre{font-size:clamp(32px,10vw,54px)}
}

/* ==========================================================================
   Bannière défilante — un plan, une couleur, une animation
   ========================================================================== */
.a-bd{position:relative;overflow:hidden;
  background:var(--bd-fond,var(--turquoise));color:var(--bd-texte,var(--encre));
  border-bottom:var(--trait-fort) solid var(--encre);
  transition:background 900ms var(--e-net),color 600ms var(--e-net)}
/* Trame d'impression, comme sur les cadrans */
.a-bd::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(currentColor 1.4px,transparent 1.4px);
  background-size:17px 17px;opacity:.11}

.a-bd__scene{position:relative;min-height:min(88svh,880px)}
.a-bd__plan{position:absolute;inset:0;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(16px,3vw,50px);
  max-width:var(--max);margin-inline:auto;padding:calc(var(--hdr) + 30px) var(--gouttiere) 96px;
  opacity:0;visibility:hidden;transition:opacity 700ms var(--e-net),visibility 700ms}
.a-bd__plan.est-actif{opacity:1;visibility:visible}

/* ---- Le visuel ---- */
.a-bd__visuel{position:relative;display:grid;place-items:center;height:100%}
.a-bd__visuel img{width:100%;max-height:min(64svh,620px);object-fit:contain;
  filter:drop-shadow(14px 18px 0 rgba(14,14,14,.16))}
/* Trois cadrages, trois entrées différentes : la bannière ne se répète pas. */
.a-bd__plan--large .a-bd__visuel img{transform:scale(1.14) translateX(6%);opacity:0}
.a-bd__plan--large.est-actif .a-bd__visuel img{
  animation:bd-large 1200ms var(--e-sortie) forwards}
@keyframes bd-large{to{transform:scale(1) translateX(0);opacity:1}}

.a-bd__plan--centre .a-bd__visuel img{transform:scale(.82) rotate(-8deg);opacity:0}
.a-bd__plan--centre.est-actif .a-bd__visuel img{
  animation:bd-centre 1100ms var(--e-sortie) forwards}
@keyframes bd-centre{to{transform:scale(1) rotate(-2deg);opacity:1}}

.a-bd__plan--gauche .a-bd__visuel img{transform:translateX(-16%) scale(1.06);opacity:0}
.a-bd__plan--gauche.est-actif .a-bd__visuel img{
  animation:bd-gauche 1150ms var(--e-sortie) forwards}
@keyframes bd-gauche{to{transform:translateX(0) scale(1);opacity:1}}

/* Octogone d'accent derrière le visuel */
.a-bd__visuel::before{content:"";position:absolute;z-index:-1;
  width:min(78%,520px);aspect-ratio:1;background:var(--bd-accent,var(--jaune));
  border:var(--trait-fort) solid var(--encre);
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  opacity:0;transform:rotate(0deg) scale(.86)}
.a-bd__plan.est-actif .a-bd__visuel::before{
  animation:bd-octo 1200ms var(--e-sortie) 80ms forwards}
@keyframes bd-octo{to{opacity:.92;transform:rotate(12deg) scale(1)}}

/* ---- Le texte ---- */
.a-bd__copie{position:relative;z-index:3;max-width:44ch}
.a-bd__label,.a-bd__titre,.a-bd__ligne,.a-bd__cta{opacity:0;transform:translateY(26px)}
.a-bd__plan.est-actif .a-bd__label{animation:bd-monte 700ms var(--e-net) 120ms forwards}
.a-bd__plan.est-actif .a-bd__titre{animation:bd-monte 800ms var(--e-net) 220ms forwards}
.a-bd__plan.est-actif .a-bd__ligne{animation:bd-monte 800ms var(--e-net) 330ms forwards}
.a-bd__plan.est-actif .a-bd__cta{animation:bd-monte 800ms var(--e-net) 430ms forwards}
@keyframes bd-monte{to{opacity:1;transform:none}}

.a-bd__label{display:inline-block;font-family:var(--texte);font-size:var(--t-mini);font-weight:800;
  letter-spacing:var(--ls-mini);text-transform:uppercase;
  background:var(--bd-accent,var(--jaune));color:var(--encre);
  border:var(--trait) solid var(--encre);padding:6px 12px;margin-bottom:20px}
.a-bd__titre{font-family:var(--titre);font-weight:800;font-size:var(--t-affiche);
  line-height:.9;letter-spacing:var(--ls-titre);text-transform:uppercase;
  color:var(--bd-texte,var(--encre));margin-bottom:18px}
.a-bd__ligne{font-size:clamp(15px,1.35vw,19px);font-weight:500;margin-bottom:28px;opacity:.86}
.a-bd__cta{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;
  background:var(--encre);color:var(--papier);border:var(--trait) solid var(--encre);
  font-family:var(--texte);font-size:var(--t-mini);font-weight:800;
  letter-spacing:var(--ls-mini);text-transform:uppercase;
  transition:transform var(--d-court) var(--e-net),box-shadow var(--d-court),
             background var(--d-court),color var(--d-court)}
.a-bd__cta:hover{background:var(--bd-accent,var(--jaune));color:var(--encre);
  transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--encre)}

/* Numéro de plan, en très grand, discret */
.a-bd__numero{position:absolute;right:var(--gouttiere);top:calc(var(--hdr) + 18px);z-index:1;
  font-family:var(--titre);font-weight:800;font-size:clamp(60px,12vw,180px);
  line-height:1;letter-spacing:-.06em;color:var(--bd-texte,var(--encre));opacity:.1}

/* ---- Barre de commande ---- */
.a-bd__barre{position:absolute;left:0;right:0;bottom:0;z-index:4;
  max-width:var(--max);margin-inline:auto;padding:0 var(--gouttiere) 24px;
  display:flex;align-items:center;gap:12px}
.a-bd__fleche,.a-bd__pause{width:46px;height:46px;display:grid;place-items:center;flex:none;
  border:var(--trait) solid var(--encre);background:var(--papier);color:var(--encre);
  transition:background var(--d-court),transform var(--d-court) var(--e-net)}
.a-bd__fleche:hover,.a-bd__pause:hover{background:var(--bd-accent,var(--jaune));
  transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--encre)}
.a-bd__fleche svg,.a-bd__pause svg{width:18px;height:18px;stroke-width:2.2}
.a-bd__pause{margin-left:auto}
.a-bd__jauges{display:flex;gap:6px;flex:1;min-width:0}
.a-bd__jauge{flex:1;max-width:64px;height:18px;display:grid;align-items:center;padding:0}
.a-bd__jauge i{display:block;height:var(--trait-fort);width:100%;
  background:color-mix(in srgb,var(--bd-texte,var(--encre)) 26%,transparent);position:relative;overflow:hidden}
.a-bd__jauge i::after{content:"";position:absolute;inset:0;width:0;background:var(--bd-texte,var(--encre))}
/* La jauge active se remplit sur la durée du plan : le rythme est lisible. */
.a-bd__jauge.est-actif i::after{animation:bd-jauge var(--bd-duree,5200ms) linear forwards}
.a-bd.est-pause .a-bd__jauge.est-actif i::after{animation-play-state:paused}
@keyframes bd-jauge{to{width:100%}}

@media(max-width:900px){
  .a-bd__scene{min-height:0}
  .a-bd__plan{position:relative;grid-template-columns:1fr;padding:calc(var(--hdr) + 20px) var(--gouttiere) 92px;
    display:none}
  .a-bd__plan.est-actif{display:grid}
  .a-bd__visuel img{max-height:38svh}
  .a-bd__visuel::before{width:min(84%,320px)}
  .a-bd__copie{max-width:none}
  .a-bd__numero{font-size:64px;top:calc(var(--hdr) + 6px)}
  .a-bd__barre{padding-bottom:18px}
  .a-bd__jauge{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .a-bd__plan.est-actif .a-bd__visuel img,
  .a-bd__plan.est-actif .a-bd__visuel::before,
  .a-bd__plan.est-actif .a-bd__label,
  .a-bd__plan.est-actif .a-bd__titre,
  .a-bd__plan.est-actif .a-bd__ligne,
  .a-bd__plan.est-actif .a-bd__cta{
    animation:bd-apparait 260ms ease forwards}
}
@keyframes bd-apparait{to{opacity:1;transform:none}}

/* ==========================================================================
   v2.2 — corrections d'alignement et de contrôles
   ========================================================================== */

/* ---- Bannière : alignement du visuel et du texte ----
   Le titre pouvait devenir plus haut que la scène et pousser le texte sous
   le bandeau. On plafonne sa taille et on centre les deux colonnes. */
.a-bd__scene{min-height:min(84svh,820px)}
.a-bd__plan{align-items:center;align-content:center;
  padding-block:calc(var(--hdr) + clamp(20px,3vw,44px)) 104px}
.a-bd__copie{display:flex;flex-direction:column;justify-content:center;
  max-height:100%;min-width:0}
.a-bd__titre{
  /* Deux mots par ligne au maximum, sans jamais déborder de la scène. */
  font-size:clamp(30px,4.6vw,78px);
  line-height:.94;
  overflow-wrap:break-word;
  hyphens:none;
  margin-bottom:14px;
  max-width:100%}
.a-bd__ligne{font-size:clamp(14px,1.15vw,17px);margin-bottom:22px;max-width:38ch}
.a-bd__visuel{align-self:center;max-height:100%}
.a-bd__visuel img{max-height:min(56svh,540px)}
.a-bd__label{margin-bottom:16px;align-self:flex-start}
.a-bd__cta{align-self:flex-start}
/* Le numéro ne doit jamais passer sous le titre. */
.a-bd__numero{top:calc(var(--hdr) + 10px);font-size:clamp(48px,9vw,140px)}

/* ---- Contrôles : contraste garanti en toute circonstance ----
   L'accent du plan pouvait être noir, ce qui donnait un bouton noir sur fond
   noir. Les commandes gardent donc une identité fixe : fond clair, encre,
   survol jaune. */
.a-bd__fleche,.a-bd__pause,
.a-fleche,.a-video__btn{
  background:var(--papier)!important;color:var(--encre)!important;
  border:var(--trait) solid var(--encre)!important}
.a-bd__fleche:hover,.a-bd__pause:hover,
.a-fleche:hover,.a-video__btn:hover{
  background:var(--jaune)!important;color:var(--encre)!important;
  transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--encre)}
.a-bd__fleche:focus-visible,.a-bd__pause:focus-visible{outline-offset:2px}

/* Une seule icône visible à la fois dans le bouton lecture/pause. */
.a-bd__pause .ic-play,.a-video__btn .ic-play{display:none}
.a-bd__pause[aria-pressed="true"] .ic-pause,
.a-video__btn[aria-pressed="true"] .ic-pause{display:none}
.a-bd__pause[aria-pressed="true"] .ic-play,
.a-video__btn[aria-pressed="true"] .ic-play{display:block}
.a-bd__pause svg[hidden],.a-video__btn svg[hidden]{display:none!important}

/* Les jauges restent lisibles sur fond sombre comme sur fond clair. */
.a-bd__jauge i{background:color-mix(in srgb,var(--bd-texte,var(--encre)) 30%,transparent)}

@media(max-width:900px){
  .a-bd__plan{padding-block:calc(var(--hdr) + 16px) 96px}
  .a-bd__titre{font-size:clamp(28px,8.4vw,46px)}
  .a-bd__visuel img{max-height:34svh}
  .a-bd__numero{font-size:52px}
}

/* ==========================================================================
   « Le détail » — galerie de macros
   ========================================================================== */
.a-det__grille{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
.a-det__bloc{position:relative;margin:0;border:var(--trait) solid var(--encre);
  background:var(--det,var(--turquoise));overflow:hidden;
  transition:transform var(--d-moyen) var(--e-net),box-shadow var(--d-moyen) var(--e-net)}
.a-det__bloc:hover{transform:translate(-6px,-6px);box-shadow:10px 10px 0 var(--encre)}
.a-det__visuel{display:block;position:relative;aspect-ratio:16/10;overflow:hidden}
.a-det__visuel::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(14,14,14,.14) 1.4px,transparent 1.4px);
  background-size:16px 16px}
.a-det__visuel img{width:100%;height:100%;object-fit:contain;position:relative;
  transition:transform var(--d-long) var(--e-sortie)}
.a-det__bloc:hover .a-det__visuel img{transform:scale(1.06)}
.a-det__bloc figcaption{position:relative;padding:clamp(18px,2vw,28px);
  background:var(--papier);border-top:var(--trait) solid var(--encre)}
.a-det__num{position:absolute;top:clamp(14px,1.6vw,22px);right:clamp(16px,2vw,26px);
  font-family:var(--titre);font-weight:800;font-size:clamp(26px,3vw,44px);
  letter-spacing:-.05em;opacity:.16;line-height:1}
.a-det__bloc h3{font-size:clamp(19px,2vw,26px);margin-bottom:8px;padding-right:60px}
.a-det__bloc p{font-size:14.5px;font-weight:500;opacity:.78;max-width:44ch}
@media(max-width:760px){
  .a-det__grille{grid-template-columns:1fr}
  .a-det__visuel{aspect-ratio:4/3}
}

/* ==========================================================================
   Entrée de page — après le voile de chargement
   Le contenu monte légèrement en fondu. Présent sur toutes les pages, comme
   sur mobile. Sans JavaScript, rien n'est masqué.
   ========================================================================== */
.js-actif .a-hdr,
.js-actif .a-bd,
.js-actif .a-boutique,
.js-actif .a-produit,
.js-actif .a-page{opacity:0;transform:translateY(14px);
  transition:opacity 620ms var(--e-net),transform 700ms var(--e-sortie)}
.js-actif.est-entre .a-hdr,
.js-actif.est-entre .a-bd,
.js-actif.est-entre .a-boutique,
.js-actif.est-entre .a-produit,
.js-actif.est-entre .a-page{opacity:1;transform:none}
.js-actif.est-entre .a-bd{transition-delay:80ms}
/* Le voile lui-même sort vers le haut. */
.a-loader{transform:translateY(0);transition:transform 760ms var(--e-sortie)}
.a-loader.est-fini{transform:translateY(-101%)}
@media (prefers-reduced-motion:reduce){
  .js-actif .a-hdr,.js-actif .a-bd,.js-actif .a-boutique,
  .js-actif .a-produit,.js-actif .a-page{
    opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================================
   v2.3 — resserrage des enchaînements de sections
   Deux blocs successifs cumulaient leur marge basse et leur marge haute,
   ce qui créait un vide inutile. On réduit la jonction sans toucher au
   rythme général de la page.
   ========================================================================== */

/* Entre « Notre histoire » et les témoignages */
#histoire{padding-bottom:clamp(36px,4vw,64px)}
#histoire + .a-section{padding-top:clamp(30px,3.4vw,56px)}

/* Entre la collection et « Le détail » */
#collection{padding-bottom:clamp(40px,4.4vw,70px)}
#details{padding-top:clamp(32px,3.6vw,58px)}

/* Le produit vedette suit « Le détail » : même traitement. */
#details{padding-bottom:clamp(40px,4.4vw,70px)}
#signature{padding-top:clamp(32px,3.6vw,58px)}

/* La bannière défilante colle désormais au bandeau du dessous. */
.a-bd + .a-ticker{border-top:0}

/* ==========================================================================
   v2.4 — contrastes garantis, marges intérieures, responsive mobile
   ========================================================================== */

/* ---- Étiquette : couleur propre à chaque plan ----
   Elle reprenait l'accent, qui peut être noir : le texte devenait alors
   invisible sur un fond noir. Chaque plan porte désormais sa pastille. */
.a-bd__label{
  background:var(--bd-puce,var(--jaune))!important;
  color:var(--bd-puce-texte,var(--encre))!important;
  border-color:var(--bd-puce-texte,var(--encre))!important}

/* ---- Bouton d'appel : jamais sombre sur sombre ----
   Il utilisait l'encre en fond, invisible sur le plan noir. Il prend
   maintenant la couleur du texte du plan, donc toujours l'inverse du fond. */
.a-bd__cta{
  background:var(--bd-texte,var(--encre))!important;
  color:var(--bd-fond,var(--papier))!important;
  border-color:var(--bd-texte,var(--encre))!important}
.a-bd__cta:hover{
  background:var(--bd-puce,var(--jaune))!important;
  color:var(--bd-puce-texte,var(--encre))!important;
  border-color:var(--bd-puce-texte,var(--encre))!important}

/* ---- Bouton lecture / pause : une seule icône, pilotée par le CSS ---- */
.a-bd__pause .ic-play,.a-video__btn .ic-play{display:none}
.a-bd__pause .ic-pause,.a-video__btn .ic-pause{display:block}
.a-bd__pause[aria-pressed="true"] .ic-pause,
.a-video__btn[aria-pressed="true"] .ic-pause{display:none}
.a-bd__pause[aria-pressed="true"] .ic-play,
.a-video__btn[aria-pressed="true"] .ic-play{display:block}

/* ---- Savoir-faire : le texte respirait mal contre les bords ---- */
.a-savoir__in{
  padding:clamp(34px,5vw,72px) clamp(28px,5vw,80px);
  max-width:min(56ch,calc(100% - 2 * var(--gouttiere)))}
.a-savoir h2{
  font-size:clamp(28px,4.4vw,58px);
  padding-inline:clamp(4px,1vw,16px);
  overflow-wrap:break-word}
.a-savoir p{padding-inline:clamp(4px,1vw,16px)}
@media(max-width:900px){
  .a-savoir__in{padding:30px 22px;box-shadow:8px 8px 0 var(--encre)}
  .a-savoir h2{font-size:clamp(26px,7.6vw,40px)}
}

/* ---- Écran de chargement : visible sur tous les navigateurs ----
   Il ne dépend d'aucune animation « décorative » pour exister : l'octogone
   se trace et la barre se remplit, mais même sans mouvement le voile
   s'affiche puis disparaît en fondu. */
.a-loader{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
  /* Pas de glissement vers le haut : un simple fondu, mais le voile
     reste bel et bien affiché pendant le chargement. */
  .a-loader{transition:opacity 320ms ease}
  .a-loader.est-fini{transform:none;opacity:0}
  .a-loader polygon{animation:none;stroke-dashoffset:0}
  .a-loader__nom{animation:none;opacity:1}
  .a-loader__barre i{transition:width 120ms linear}
}