/* PLIGO — page d'accueil du site. En-tête, pied et polices : /telecharger/site.css.
   23/10 — Refonte (esprit Raycast) : héros avec halo et téléphones en 3D,
   bande défilante, démo en 3 gestes, grille « bento » éclairée sous la souris,
   visite complète en explorateur (onglets sur PC, carrousel sur smartphone).
   Les animations sont coupées si le système demande moins d'animations.
   Sans script, tout reste lisible (la visite s'affiche en liste). */
:root {
  --acc-fond: #fbf7f6;
  --acc-fond2: #f4ecea;
  --acc-carte: #ffffff;
  --acc-texte: #1d1416;
  --acc-doux: #6b5f60;
  --acc-pale: #9a8e8f;
  --acc-ligne: rgba(60, 20, 22, .10);
  --acc-ligne2: rgba(60, 20, 22, .16);
  --acc-rouge: #c4262c;
  --acc-rouge-fonce: #a91f23;
  --acc-rouge-clair: #c4262c;
  --acc-halo: rgba(226, 57, 63, .22);
  --acc-point: rgba(60, 20, 22, .12);
  --acc-titre-haut: #1d1416;
  --acc-titre-bas: #5a3c3e;
  --acc-verre: rgba(255, 255, 255, .82);
  --acc-ombre: 0 24px 60px -24px rgba(60, 20, 22, .35);
  --acc-vert: #1f9d63;
  --acc-ambre: #b86e00;
  --acc-j-rouge: rgba(226, 57, 63, .12);
  --acc-j-ambre: rgba(245, 165, 36, .16);
  --acc-j-vert: rgba(31, 157, 99, .12);
  --acc-titre: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --acc-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
/* Sombre par défaut ; clair seulement si choisi (27/10). */
  :root:not([data-theme="clair"]) {
    --acc-fond: #0b0a0b;
    --acc-fond2: #121011;
    --acc-carte: #161314;
    --acc-texte: #f4eeee;
    --acc-doux: #a39a9b;
    --acc-pale: #6f6667;
    --acc-ligne: rgba(255, 255, 255, .08);
    --acc-ligne2: rgba(255, 255, 255, .14);
    --acc-rouge: #e2393f;
    --acc-rouge-clair: #ff8e91;
    --acc-halo: rgba(226, 57, 63, .45);
    --acc-point: rgba(255, 255, 255, .13);
    --acc-titre-haut: #ffffff;
    --acc-titre-bas: #c9b7b8;
    --acc-verre: rgba(24, 20, 21, .78);
    --acc-ombre: 0 30px 70px -24px rgba(0, 0, 0, .85);
    --acc-vert: #6ee7b0;
    --acc-ambre: #ffc565;
    --acc-j-rouge: rgba(226, 57, 63, .18);
    --acc-j-ambre: rgba(245, 165, 36, .16);
    --acc-j-vert: rgba(60, 207, 142, .15);
  }

* { box-sizing: border-box; }
/* Défilement doux et marge sous l'en-tête collant : site.css (29/10). */
body {
  margin: 0; background: var(--acc-fond); color: var(--acc-texte);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* L'en-tête collant flotte AU-DESSUS du héros (pas de bandeau qui pousse la page). */
body > .site-entete { margin-bottom: -70px; }
a { color: var(--acc-rouge-clair); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--acc-titre); text-wrap: balance; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
main :focus-visible { outline: 2px solid var(--acc-rouge); outline-offset: 3px; border-radius: 8px; }
.acc-int { max-width: 1160px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* Barre de lecture (rouge, tout en haut) et en-tête resserré après le héros. */
.acc-progression {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--acc-rouge-fonce), var(--acc-rouge), #ff8e91); box-shadow: 0 0 12px var(--acc-halo);
}
.site-entete-int { transition: max-width .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, padding .4s; }
/* 29/10 : resserré à 1040 px (et non 900) pour garder tous les liens de l'en-tête. */
.acc-bas .site-entete-int { max-width: 1040px; box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .55); }

/* ---------- Héros ---------- */
.acc-hero { position: relative; padding: 130px 0 24px; isolation: isolate; overflow: hidden; }
.acc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(600px 380px at 50% 22%, var(--acc-halo), transparent 70%),
    radial-gradient(900px 520px at 50% 0%, rgba(169, 31, 35, .16), transparent 70%);
}
.acc-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6;
  background-image: radial-gradient(var(--acc-point) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 28%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 28%, #000 30%, transparent 75%);
}
.acc-hero-txt { text-align: center; display: grid; justify-items: center; gap: 22px; }
/* Logo animé (23/10) : l'assiette arrive, les pâtes s'enroulent puis tournent
   doucement, les boulettes tombent et sautillent tour à tour, le halo respire.
   Survol : l'assiette fait un tour complet. */
.acc-logo { width: 116px; height: 116px; overflow: visible; cursor: pointer; }
.acc-logo-halo { fill: var(--acc-rouge); opacity: .18; transform-origin: 100px 100px; filter: blur(14px); animation: acc-respire 4s ease-in-out infinite; }
.acc-logo-assiette { transform-origin: 100px 100px; animation: acc-assiette .9s cubic-bezier(.2, 1.4, .4, 1) backwards; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.acc-logo:hover .acc-logo-assiette { transform: rotate(360deg) scale(1.06); }
.acc-logo-pates { transform-origin: 100px 100px; animation: acc-pates-tourne 24s linear 2.2s infinite; }
.acc-logo-pates path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: acc-pates-trace 1.6s cubic-bezier(.4, 0, .2, 1) .5s forwards; }
.acc-logo-boulette { transform-box: fill-box; transform-origin: center; animation: acc-tombe .6s cubic-bezier(.3, 1.6, .5, 1) backwards, acc-saute 8s ease-in-out infinite; }
.acc-logo-boulette:nth-of-type(3) { animation-delay: 1.6s, 3s; }
.acc-logo-boulette:nth-of-type(4) { animation-delay: 1.75s, 5s; }
.acc-logo-boulette:nth-of-type(5) { animation-delay: 1.9s, 7s; }
.acc-logo-boulette:nth-of-type(6) { animation-delay: 2.05s, 9s; }
.acc-logo-reflet { opacity: .55; animation: acc-reflet-assiette 6s ease-in-out 2.4s infinite; transform-origin: 100px 100px; }
@keyframes acc-respire { 0%, 100% { transform: scale(.9); opacity: .14; } 50% { transform: scale(1.12); opacity: .32; } }
@keyframes acc-assiette { from { transform: scale(.4) rotate(-120deg); opacity: 0; } }
@keyframes acc-pates-trace { to { stroke-dashoffset: 0; } }
@keyframes acc-pates-tourne { to { transform: rotate(360deg); } }
@keyframes acc-tombe { from { transform: translateY(-34px) scale(.3); opacity: 0; } }
@keyframes acc-saute { 0%, 6%, 100% { translate: 0 0; } 3% { translate: 0 -7px; } }
@keyframes acc-reflet-assiette { 0%, 70%, 100% { transform: rotate(0); opacity: .55; } 85% { transform: rotate(200deg); opacity: .9; } }
.acc-logo-final { width: 132px; height: 132px; }
/* Le logo du bas attend d'être à l'écran pour jouer son entrée (accueil.js). */
.acc-js .acc-logo-final:not(.acc-joue) *, .acc-js .acc-logo-final:not(.acc-joue) path { animation-play-state: paused; }
@media (max-width: 760px) { .acc-logo { width: 92px; height: 92px; } }
@property --acc-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.acc-pastille {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px;
  font-size: .82rem; padding: 6px 14px 6px 6px; border-radius: 999px; text-decoration: none;
  background: var(--acc-carte); color: var(--acc-doux); border: 1px solid var(--acc-ligne);
}
.acc-pastille::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1;
  background: conic-gradient(from var(--acc-angle), transparent 0 70%, var(--acc-rouge) 85%, #ffb3b5 92%, transparent);
  animation: acc-tourne 4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.acc-pastille em {
  font-style: normal; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 999px; background: var(--acc-j-rouge); color: var(--acc-rouge-clair);
}
.acc-pastille:hover { color: var(--acc-texte); }
@keyframes acc-tourne { to { --acc-angle: 360deg; } }
/* Pas de « background-clip: text » sur le h1 : il peindrait aussi les mots qui défilent
   hors de leur case (le découpage d'un enfant ne s'applique pas à la peinture du parent). */
.acc-hero h1 {
  font-size: clamp(1.6rem, 8vw, 5rem); line-height: 1.04; font-weight: 800; color: var(--acc-titre-haut);
}
/* Le mot coloré : couleur pleine, car un texte en « background-clip: text » qui bouge
   déborde de sa case dans Chrome (le mot sortant restait visible au-dessus). */
.acc-hero h1 .acc-mot { color: color-mix(in srgb, var(--acc-rouge-clair) 50%, var(--acc-rouge)); }
/* 2e ligne du titre : « dans mon <mot> ? », toujours sur sa propre ligne. */
.acc-ligne-mot { display: block; white-space: nowrap; color: color-mix(in srgb, var(--acc-titre-bas) 75%, var(--acc-titre-haut)); }
/* « dans mon congélateur ? » mesure ≈ 10,4 em : la ligne rapetisse pour tenir dans la largeur du titre. */
.acc-hero h1 { container-type: inline-size; justify-self: stretch; }
.acc-hero h1 .acc-ligne-mot { font-size: min(1em, 100cqi / 10.8); }
.acc-mots { display: inline-block; position: relative; vertical-align: bottom; height: 1.12em; margin-bottom: -.06em; transition: width .4s cubic-bezier(.2, .8, .2, 1); }
.acc-mot { display: inline-block; white-space: nowrap; line-height: 1.12; }
.acc-mots:not(.acc-mots-js) .acc-mot:not(:first-child) { display: none; }
.acc-mots-js { overflow: hidden; clip-path: inset(0 -.1em); }
.acc-mots-js .acc-mot {
  position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(105%);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .3s;
}
/* Le mot qui sort quitte la case avant que le suivant n'y entre : jamais deux mots superposés. */
.acc-mots-js .acc-mot.acc-actif { opacity: 1; transform: none; transition-delay: .3s; }
.acc-mots-js .acc-mot.acc-sort { opacity: 0; transform: translateY(-105%); transition-duration: .3s, .2s; }
.acc-chapo { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--acc-doux); max-width: 34em; }
.acc-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.acc-btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 600; font-size: .95rem; padding: 13px 22px; border-radius: 14px; color: var(--acc-texte);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), translate .3s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s;
}
.acc-btn:hover { transform: translateY(-2px); }
.acc-btn { translate: var(--mx, 0) var(--my, 0); }
.acc-btn-plein {
  overflow: hidden; color: #fff;
  background: linear-gradient(180deg, #ef4a50, var(--acc-rouge-fonce));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 10px 30px -8px var(--acc-halo);
}
.acc-btn-plein::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  animation: acc-reflet 3.6s ease-in-out infinite;
}
@keyframes acc-reflet { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.acc-btn-plein:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 16px 44px -8px var(--acc-halo); }
.acc-btn-contour { background: var(--acc-carte); border: 1px solid var(--acc-ligne2); }
.acc-btn-contour:hover { border-color: var(--acc-rouge); }
.acc-touche {
  font: 500 .68rem var(--acc-mono); padding: 2px 6px; border-radius: 6px;
  background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .22);
}
.acc-gages { display: flex; gap: 8px 20px; flex-wrap: wrap; justify-content: center; font-size: .85rem; color: var(--acc-doux); list-style: none; margin: 0; padding: 0; }
.acc-gages li { display: inline-flex; gap: 6px; align-items: center; }
.acc-gages svg { width: 15px; height: 15px; color: var(--acc-vert); }

/* Scène : trois téléphones, celui du milieu suit la souris ; bulles de dates. */
.acc-scene { position: relative; margin: 56px auto 0; max-width: 820px; height: 560px; perspective: 1400px; }
.acc-tel {
  position: absolute; left: 50%; top: 0; width: 262px; margin: 0 0 0 -131px; border-radius: 40px; padding: 9px;
  background: linear-gradient(160deg, #3a3335, #141112);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, var(--acc-ombre), 0 0 120px -30px var(--acc-halo);
  transform: rotateX(8deg); transition: transform .3s ease-out;
}
.acc-tel img { display: block; width: 100%; height: auto; aspect-ratio: 360 / 774; object-fit: cover; border-radius: 32px; }
.acc-tel-fond { width: 220px; margin-left: -110px; top: 60px; opacity: .55; filter: saturate(.8) brightness(.75); }
.acc-tel-g { transform: translateX(-230px) rotateY(18deg) rotateZ(-4deg); }
.acc-tel-d { transform: translateX(230px) rotateY(-18deg) rotateZ(4deg); }
.acc-bulle {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; font-size: .82rem; line-height: 1.35;
  padding: 10px 14px; border-radius: 14px; background: var(--acc-verre); border: 1px solid var(--acc-ligne2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .45); animation: acc-flotte 6s ease-in-out infinite;
}
.acc-bulle b { font-weight: 600; display: block; }
.acc-bulle small { display: block; color: var(--acc-doux); font-size: .75rem; }
.acc-b1 { left: 2%; top: 90px; }
.acc-b2 { right: 0; top: 200px; animation-delay: -2s; }
.acc-b3 { left: 8%; top: 360px; animation-delay: -4s; }
@keyframes acc-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.acc-j { font: 600 .74rem var(--acc-mono); padding: 3px 7px; border-radius: 7px; white-space: nowrap; }
.acc-j-r { background: var(--acc-j-rouge); color: var(--acc-rouge-clair); }
.acc-j-a { background: var(--acc-j-ambre); color: var(--acc-ambre); }
.acc-j-v { background: var(--acc-j-vert); color: var(--acc-vert); }
@media (max-width: 760px) {
  .acc-hero { padding-top: 120px; }
  .acc-scene { height: 540px; margin-top: 40px; }
  .acc-tel-fond { display: none; }
  .acc-b1 { left: 0; top: 24px; } .acc-b2 { right: 0; top: 250px; } .acc-b3 { left: 0; top: 440px; }
}

/* ---------- Bande défilante ---------- */
.acc-defile {
  border-block: 1px solid var(--acc-ligne); overflow: hidden; padding: 16px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.acc-defile-piste { display: flex; gap: 12px; width: max-content; margin: 0; padding: 0; list-style: none; animation: acc-defile 45s linear infinite; }
.acc-defile:hover .acc-defile-piste { animation-play-state: paused; }
.acc-defile li {
  display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--acc-doux);
  padding: 6px 8px 6px 12px; border-radius: 10px; border: 1px solid var(--acc-ligne); white-space: nowrap;
}
@keyframes acc-defile { to { transform: translateX(-50%); } }
.acc-defile { display: grid; gap: 10px; }
.acc-defile-inverse { animation-direction: reverse; animation-duration: 55s; }

/* ---------- Sections ---------- */
.acc-section { padding-top: 100px; }
.acc-etiquette { font: 600 .74rem var(--acc-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--acc-rouge-clair); }
.acc-tete { display: grid; gap: 14px; max-width: 660px; margin-bottom: 44px; }
.acc-tete h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.05; font-weight: 700; }
.acc-tete p { color: var(--acc-doux); font-size: 1.05rem; }
.acc-apparait.acc-vu { animation: acc-monte .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes acc-monte { from { opacity: .001; transform: translateY(18px); } }

/* ---------- Démo en 3 gestes ---------- */
.acc-demo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: center; }
.acc-gestes { display: grid; gap: 10px; }
.acc-geste {
  position: relative; display: grid; gap: 6px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 18px 20px; border-radius: 18px; border: 1px solid var(--acc-ligne); background: var(--acc-carte);
  overflow: hidden; transition: border-color .3s, background .3s;
}
.acc-geste h3 { font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.acc-geste kbd {
  font: 600 .7rem var(--acc-mono); min-width: 26px; text-align: center; padding: 3px 6px; border-radius: 7px;
  border: 1px solid var(--acc-ligne2); border-bottom-width: 3px; color: var(--acc-doux); background: var(--acc-fond);
}
.acc-geste p { color: var(--acc-doux); font-size: .95rem; }
.acc-geste-barre { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--acc-rouge); }
/* Avec script : un seul geste ouvert à la fois, qui avance tout seul. */
.acc-js .acc-geste p { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.acc-js .acc-geste.acc-actif p { max-height: 140px; }
.acc-geste.acc-actif { border-color: color-mix(in srgb, var(--acc-rouge) 45%, transparent); background: linear-gradient(180deg, var(--acc-j-rouge), var(--acc-carte)); }
.acc-geste.acc-actif kbd { color: var(--acc-rouge-clair); border-color: var(--acc-rouge); }
.acc-js .acc-geste.acc-actif .acc-geste-barre { animation: acc-remplit 5s linear forwards; }
@keyframes acc-remplit { to { width: 100%; } }
.acc-demo-tel {
  justify-self: center; width: 300px; max-width: 100%; border-radius: 44px; padding: 10px;
  background: linear-gradient(160deg, #3a3335, #141112);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, var(--acc-ombre), 0 0 100px -30px var(--acc-halo);
}
.acc-ecran { position: relative; border-radius: 35px; overflow: hidden; aspect-ratio: 360 / 774; background: #111; }
.acc-ecran img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity .6s, transform .8s;
}
.acc-ecran img.acc-actif { opacity: 1; transform: none; }
@media (max-width: 860px) { .acc-demo { grid-template-columns: 1fr; } }

/* ---------- Grille « bento » : éclairée sous la souris ---------- */
.acc-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.acc-carte {
  position: relative; isolation: isolate; grid-column: span 2; display: flex; flex-direction: column; gap: 8px;
  min-height: 320px; padding: 24px 24px 0; border-radius: 22px; overflow: hidden;
  background: var(--acc-carte); border: 1px solid var(--acc-ligne);
}
.acc-carte::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), var(--acc-j-rouge), transparent 45%);
}
.acc-carte::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  opacity: 0; transition: opacity .3s;
  background: radial-gradient(300px circle at var(--x, 50%) var(--y, 50%), var(--acc-rouge-clair), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.acc-bento:hover .acc-carte::before, .acc-bento:hover .acc-carte::after { opacity: 1; }
.acc-bento { perspective: 1200px; }
.acc-carte { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.acc-carte:hover { border-color: var(--acc-ligne2); }
.acc-js .acc-bento:not(.acc-vu) .acc-carte { opacity: .001; translate: 0 26px; }
.acc-bento.acc-vu .acc-carte { animation: acc-cascade .8s cubic-bezier(.2, .8, .2, 1) backwards; }
.acc-bento.acc-vu .acc-carte:nth-child(2) { animation-delay: .08s; }
.acc-bento.acc-vu .acc-carte:nth-child(3) { animation-delay: .16s; }
.acc-bento.acc-vu .acc-carte:nth-child(4) { animation-delay: .24s; }
.acc-bento.acc-vu .acc-carte:nth-child(5) { animation-delay: .32s; }
@keyframes acc-cascade { from { opacity: 0; translate: 0 34px; } }
.acc-carte h3 { font-size: 1.3rem; font-weight: 700; }
.acc-carte p { color: var(--acc-doux); font-size: .95rem; max-width: 42ch; }
.acc-carte-large { grid-column: span 4; }
.acc-cliche {
  margin-top: auto; border-radius: 16px 16px 0 0; border: 1px solid var(--acc-ligne2); border-bottom: 0; overflow: hidden;
  transform: translateY(26px); transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.acc-carte:hover .acc-cliche { transform: translateY(10px); }
.acc-cliche img { display: block; width: 100%; height: auto; aspect-ratio: 360 / 420; object-fit: cover; object-position: top; }
.acc-carte-large .acc-cliche img { aspect-ratio: 1280 / 560; }
/* Les zéros : une colonne de chiffres de même largeur, texte centré sur le
   chiffre ; au premier passage, chaque chiffre descend jusqu'à 0 (accueil.js). */
.acc-zero { display: grid; gap: 10px; margin: auto 0 24px; padding: 0; list-style: none; }
.acc-zero li {
  display: grid; grid-template-columns: 2.4ch minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: 14px; background: var(--acc-fond); border: 1px solid var(--acc-ligne);
  color: var(--acc-doux); font-size: .95rem; line-height: 1.3;
  transition: border-color .4s, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.acc-zero li:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--acc-rouge) 40%, transparent); }
.acc-zero-num {
  font: 800 2.2rem/1 var(--acc-titre); text-align: center; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--acc-titre-haut), var(--acc-rouge-clair));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.acc-zero li.acc-fini .acc-zero-num { animation: acc-pop .5s cubic-bezier(.3, 1.8, .5, 1); }
.acc-zero li.acc-fini { border-color: color-mix(in srgb, var(--acc-vert) 45%, transparent); }
@keyframes acc-pop { 40% { transform: scale(1.35); } }
@media (max-width: 900px) { .acc-carte, .acc-carte-large { grid-column: span 3; } }
@media (max-width: 620px) { .acc-bento { grid-template-columns: 1fr; } .acc-carte, .acc-carte-large { grid-column: auto; min-height: 0; } }

/* ---------- Visite complète (générée depuis « Découvrir PLIGO ») ----------
   Sans script : liste. Smartphone : carrousel à faire glisser.
   PC avec script : onglets à gauche, écran à droite. */
.acc-visite { position: relative; }
.acc-etape { display: grid; gap: 14px; align-content: start; min-width: 0; }
.acc-etape h3 { font-size: 1.35rem; font-weight: 700; }
.acc-etape p { color: var(--acc-doux); max-width: 60ch; }
.acc-etape picture { display: block; }
.acc-capture {
  display: block; width: 100%; height: auto; border-radius: 22px; background: var(--acc-carte);
  border: 1px solid var(--acc-ligne2); box-shadow: var(--acc-ombre);
}
.acc-visite-nav, .acc-visite-fleches { display: none; }

@media (max-width: 899px) {
  .acc-visite-piste {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 320px); gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 24px; margin: 0 -16px;
    scrollbar-width: none;
  }
  .acc-visite-piste::-webkit-scrollbar { display: none; }
  .acc-etape { scroll-snap-align: center; }
  .acc-etape picture { order: -1; }
  .acc-capture { border-radius: 26px; }
  .acc-js .acc-visite-fleches { display: flex; justify-content: center; align-items: center; gap: 14px; }
}
.acc-fleche {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--acc-ligne2); background: var(--acc-carte);
  color: var(--acc-texte); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center;
}
.acc-fleche:hover { border-color: var(--acc-rouge); }
.acc-compteur { font: 600 .82rem var(--acc-mono); color: var(--acc-doux); min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; }

@media (min-width: 900px) {
  .acc-visite-piste { display: grid; gap: 64px; }
  .acc-etape > div { order: -1; }
  .acc-js .acc-visite { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
  .acc-js .acc-visite-nav {
    display: grid; gap: 2px; position: sticky; top: 96px; margin: 0; padding: 0; list-style: none;
    max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin;
  }
  .acc-visite-nav button {
    width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; font: inherit; font-size: .92rem;
    color: var(--acc-doux); background: transparent; border: 0; border-radius: 10px; padding: 8px 10px; cursor: pointer;
    transition: background .2s, color .2s;
  }
  .acc-visite-nav button span { font: 600 .7rem var(--acc-mono); color: var(--acc-pale); min-width: 2ch; font-variant-numeric: tabular-nums; }
  .acc-visite-nav button:hover { color: var(--acc-texte); background: var(--acc-fond2); }
  .acc-visite-nav button[aria-selected="true"] { color: var(--acc-texte); background: var(--acc-carte); box-shadow: inset 2px 0 0 var(--acc-rouge), 0 0 0 1px var(--acc-ligne); font-weight: 600; }
  .acc-visite-nav button[aria-selected="true"] span { color: var(--acc-rouge-clair); }
  .acc-js .acc-visite-piste { display: block; min-width: 0; }
  .acc-js .acc-etape { display: none; }
  .acc-js .acc-etape.acc-actif { display: grid; animation: acc-fondu .45s ease both; }
  .acc-capture { border-radius: 14px; }
  /* Cadre de fenêtre autour de la capture PC. */
  .acc-js .acc-etape picture {
    border-radius: 16px; padding: 30px 6px 6px; background: var(--acc-fond2); border: 1px solid var(--acc-ligne2);
    box-shadow: var(--acc-ombre); position: relative;
  }
  .acc-js .acc-etape picture::before {
    content: ""; position: absolute; left: 14px; top: 11px; width: 9px; height: 9px; border-radius: 50%;
    background: #ff5f57; box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840;
  }
  .acc-js .acc-etape .acc-capture { box-shadow: none; border-radius: 10px; }
}
@keyframes acc-fondu { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Engagements ---------- */
.acc-engage {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none;
  background: var(--acc-ligne); border: 1px solid var(--acc-ligne); border-radius: 22px; overflow: hidden;
}
.acc-engage li { background: var(--acc-fond); padding: 28px; display: grid; gap: 10px; align-content: start; }
.acc-engage svg { width: 26px; height: 26px; color: var(--acc-rouge-clair); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.acc-engage li { position: relative; transition: background .4s; }
.acc-engage li:hover { background: var(--acc-fond2); }
.acc-engage li:hover svg { transform: scale(1.18) rotate(-8deg); }
.acc-engage svg * { stroke-dasharray: 80; stroke-dashoffset: 0; }
.acc-engage.acc-vu svg * { animation: acc-trace 1.4s ease both; }
.acc-engage.acc-vu li:nth-child(2) svg * { animation-delay: .2s; }
.acc-engage.acc-vu li:nth-child(3) svg * { animation-delay: .4s; }
@keyframes acc-trace { from { stroke-dashoffset: 80; } }
.acc-engage h3 { font-size: 1.2rem; }
.acc-engage p { color: var(--acc-doux); font-size: .95rem; }
@media (max-width: 760px) { .acc-engage { grid-template-columns: 1fr; } }

/* ---------- Questions fréquentes (29/10) : <details>, sans script ---------- */
.acc-faq-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 24px 56px; align-items: start; }
.acc-faq-cote { position: sticky; top: 110px; display: grid; gap: 4px; }
.acc-faq-cote .acc-tete { margin-bottom: 20px; }
.acc-faq-cote .acc-tete a { color: var(--acc-rouge-clair); text-underline-offset: 3px; }
.acc-faq-contact {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; text-decoration: none;
  color: var(--acc-texte); background: var(--acc-carte); border: 1px solid var(--acc-ligne);
  transition: border-color .3s, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.acc-faq-contact:hover { border-color: color-mix(in srgb, var(--acc-rouge) 45%, transparent); transform: translateY(-2px); }
.acc-faq-contact svg { width: 26px; height: 26px; flex: none; color: var(--acc-rouge-clair); }
.acc-faq-contact b { display: block; font-weight: 600; }
.acc-faq-contact small { display: block; color: var(--acc-doux); font-size: .88rem; overflow-wrap: anywhere; }
.acc-faq { display: grid; gap: 10px; }
.acc-question {
  border-radius: 18px; background: var(--acc-carte); border: 1px solid var(--acc-ligne);
  transition: border-color .3s, background .3s;
}
.acc-question:hover { border-color: var(--acc-ligne2); }
.acc-question[open] {
  border-color: color-mix(in srgb, var(--acc-rouge) 40%, transparent);
  background: linear-gradient(180deg, var(--acc-j-rouge), var(--acc-carte) 120px);
}
.acc-question summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 18px 14px 22px; border-radius: 18px;
  font-family: var(--acc-titre); font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
}
.acc-question summary::-webkit-details-marker { display: none; }
.acc-plus {
  position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--acc-ligne2); color: var(--acc-doux);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), color .3s, border-color .3s;
}
.acc-plus::before, .acc-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.acc-plus::after { transform: rotate(90deg); }
.acc-question summary:hover .acc-plus { color: var(--acc-texte); border-color: var(--acc-rouge); }
.acc-question[open] .acc-plus { transform: rotate(180deg); color: var(--acc-rouge-clair); border-color: var(--acc-rouge); }
.acc-question[open] .acc-plus::after { transform: rotate(0deg); }
.acc-reponse { display: grid; gap: 10px; padding: 0 22px 20px; color: var(--acc-doux); max-width: 68ch; }
.acc-question[open] .acc-reponse { animation: acc-fondu .35s ease both; }
.acc-reponse b { color: var(--acc-texte); font-weight: 600; }
.acc-reponse a { text-underline-offset: 3px; }
.acc-reponse code { font: .9em var(--acc-mono); padding: 1px 5px; border-radius: 5px; background: var(--acc-j-rouge); color: var(--acc-texte); }
@media (max-width: 979px) {
  .acc-faq-grille { grid-template-columns: minmax(0, 1fr); }
  /* Smartphone : titre, questions, puis la carte « Pas trouvé ta réponse ? ». */
  .acc-faq-cote { display: contents; }
  .acc-faq-cote .acc-tete { margin-bottom: 0; }
  .acc-faq-contact { order: 2; }
}
@media (max-width: 520px) {
  .acc-question summary { padding: 12px 14px 12px 16px; font-size: 1rem; }
  .acc-reponse { padding: 0 16px 18px; }
}

/* ---------- Appel final ---------- */
.acc-final {
  position: relative; isolation: isolate; overflow: hidden; margin-top: 110px; padding: 90px 24px;
  display: grid; gap: 22px; justify-items: center; text-align: center;
  border-radius: 32px; border: 1px solid var(--acc-ligne);
}
.acc-final::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(500px 260px at 50% 100%, var(--acc-halo), transparent 70%), linear-gradient(180deg, var(--acc-fond2), var(--acc-fond));
}
.acc-final::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(380px circle at var(--x, 50%) var(--y, 50%), var(--acc-j-rouge), transparent 60%);
}
.acc-final:hover::after { opacity: 1; }
.acc-final > img { width: 84px; height: 84px; border-radius: 22px; background: #fff; box-shadow: 0 0 60px -6px var(--acc-halo); }
.acc-final h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
.acc-final p { color: var(--acc-doux); max-width: 46ch; }
.acc-final .acc-avert { font-size: .85rem; color: var(--acc-pale); }
.acc-final .acc-avert a { color: inherit; }

/* Moins d'animations demandées : tout est figé, rien ne se cache. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .acc-logo-pates path { stroke-dashoffset: 0; }
  .acc-js .acc-bento .acc-carte { opacity: 1; translate: none; }
}