/* ============================================================
   STYLE : tous les composants du site, dans l'ordre où on les rencontre.
   Les valeurs viennent de system.css (jetons). Plan :
     1. Base            5. Marques (bandeau)     9. Fiche projet
     2. Barre du haut   6. Carrousel (accueil)  10. À propos + compétences
     3. Panneau Projets 7. Page Projets         11. Bande contact + coordonnées
     4. Hero + boutons  8. Points (dotnav)      12. Utilitaires (vert grainé, rythme de page)
   ============================================================ */

/* ============ 1. Base ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;background:var(--background);transition:background-color .55s}
body{margin:0;background:transparent;color:var(--foreground);font-family:var(--font);-webkit-font-smoothing:antialiased}
#stage{position:relative;background:var(--background)}
#stage.frozen{position:fixed;inset:0;overflow:hidden}      /* la page ne défile plus quand une fiche projet est ouverte */
.spacer{height:max(110px,12vh)}                            /* place de la barre du haut sur les pages intérieures */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ 2. Barre du haut (se déplie en panneau « Projets ») ============ */
.pbar{position:fixed;top:10px;left:0;right:0;margin-inline:auto;width:min(calc(100% - 30px),1100px);z-index:100;
  height:52px;overflow:hidden;border-radius:26px;color:#000;
  background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
  box-shadow:0 0 0 1px #e4e4df;font-family:var(--font);
  transition:border-radius .4s var(--ease),background-color .4s var(--ease)}
.pbar.open{border-radius:var(--r-card);background:#fff}
.pbar-top{position:relative;height:52px;display:flex;align-items:center;justify-content:flex-start;padding:0 20px}
.pbar-logo{flex:none;display:block;width:28px;height:28px;margin-right:12px}
.pbar-logo img{display:block;width:100%;height:100%}
.pbar-logo:focus-visible{outline:2px solid #000;outline-offset:3px;border-radius:var(--r-sm)}
.pbar-links{display:flex;align-items:center;gap:var(--sp-5);margin-left:auto;margin-right:var(--sp-4);font-size:12px;letter-spacing:-.12px;
  transition:opacity .25s,visibility 0s .25s,color .2s,background-color .2s}
.pbar-links a{color:rgba(0,0,0,.56);text-decoration:none;transition:color .2s}
.pbar-links a:hover,.pbar-links a[aria-current="page"]{color:var(--foreground)}
.pbar-links a:focus-visible,.pbar-link:focus-visible{outline:2px solid #000;outline-offset:4px;border-radius:var(--r-sm)}
.pbar-link{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:none;font:inherit;font-size:12px;letter-spacing:-.12px;
  color:rgba(0,0,0,.56);cursor:pointer;transition:color .2s}
.pbar-link:hover,.pbar-link[aria-expanded="true"],.pbar-link[aria-current]{color:#1d1d1f}
.pbar-cta{flex:none;display:inline-flex;align-items:center;height:28px;padding:0 var(--sp-4);border-radius:var(--r-pill);background:#000;color:#fff;
  font-size:12px;letter-spacing:-.12px;text-decoration:none;transition:opacity .25s,visibility 0s .25s,color .2s,background-color .2s}
.pbar-cta:hover{background:#333}
.pbar-cta:focus-visible{outline:2px solid #000;outline-offset:2px}
/* zones de clic : l'œil voit du texte de 12 px, la souris et le doigt disposent d'environ 44 px de haut (rien ne bouge visuellement) */
.pbar-links > *{padding:18px 8px;margin:-18px -8px}
.pbar-cta{position:relative}
.pbar-cta::before{content:"";position:absolute;inset:-8px -4px}
.pbar.open .pbar-links,.pbar.open .pbar-cta{opacity:0;visibility:hidden}           /* ouvert : titre + croix remplacent les liens */
.pbar-close{position:absolute;top:8px;right:12px;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#e8e8ed;color:rgba(0,0,0,.56);cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s,background-color .2s}
.pbar-close svg{width:36px;height:36px}
.pbar-close:hover{background:#dcdce1}
.pbar-close:focus-visible{outline:2px solid #000;outline-offset:2px}
.pbar.open .pbar-close{opacity:1;visibility:visible;transition:opacity .3s .1s,visibility 0s,background-color .2s}
/* souris : le panneau s'ouvre au survol, les liens restent en place (cliquables) et la croix est inutile (on ferme en sortant de la barre) */
@media (hover:hover) and (pointer:fine){
  .pbar.open .pbar-links,.pbar.open .pbar-cta{opacity:1;visibility:visible}
  .pbar.open .pbar-close{opacity:0;visibility:hidden}
}
@media (max-width:640px){.pbar-links{margin-right:auto;margin-left:var(--sp-3)}.pbar-links a:not(.pbar-projects):not([href="index.html"]){display:none}}   /* mobile : « Accueil » et « Projets » restent */
@media (prefers-reduced-motion:reduce){.pbar,.pbar-backdrop{transition:none}}

/* ============ 3. Panneau « Projets » (façon apple.com) ============ */
.pbar-content{display:flow-root;margin:0 clamp(20px,5vw,50px)}
.pbar-content[hidden]{display:none}
/* panneau Contact : trois cartes vertes (Stage / Mandat / Question) */
.cn-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--card-gap);margin:0 0 var(--sp-5);padding:0;list-style:none}
.cn-pick{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-5);height:100%;min-height:128px;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-card);
  color:#fff;text-decoration:none;transition:transform .35s var(--ease),filter .25s}
.cn-pick small{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.cn-pick span{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);font-weight:600;line-height:1.05;letter-spacing:-.04em}
.cn-pick:hover{transform:translateY(-3px);filter:brightness(1.06)}
.cn-pick:focus-visible{outline:2px solid #000;outline-offset:3px}
@media (max-width:640px){.cn-picks{grid-template-columns:1fr}.cn-pick{min-height:88px;gap:var(--sp-3)}}
.cn-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-5);margin:var(--sp-4) 0 var(--sp-5)}
.cn-title{margin:0;font-size:clamp(2rem,1.4rem + 1.6vw,2.75rem);font-weight:600;line-height:var(--lh-tight);letter-spacing:var(--tr-head)}
.cn-all{display:inline-block;margin:0;font-size:var(--fs-body);font-weight:600;letter-spacing:-.02em;color:var(--foreground);text-decoration:none}
.cn-all:hover{text-decoration:underline;text-underline-offset:4px}
.cn-all:focus-visible{outline:2px solid #000;outline-offset:4px;border-radius:var(--r-sm)}
.cn{position:relative;overflow:hidden;margin:0 0 var(--sp-6)}
.cn-items{position:relative;display:flex;margin:-3px 0;padding:3px 0;list-style:none;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;white-space:nowrap;cursor:grab;overscroll-behavior-x:contain}
.cn-items::-webkit-scrollbar{display:none}
.cn-items.dragging{cursor:grabbing;user-select:none}
.cn-items.dragging .cn-link{pointer-events:none}
.cn-item{flex:none;padding:0 var(--sp-5) 0 0}
.cn-link{display:grid;justify-items:center;color:rgba(0,0,0,.8);text-decoration:none;outline:none;transition:color .3s var(--ease)}
.cn-link:hover{color:#000}
.cn-link:focus-visible .cn-thumb{outline:2px solid #000;outline-offset:3px}
.cn-thumb{display:block;width:72px;height:112px;margin-bottom:var(--sp-3);border-radius:var(--r-sm);overflow:hidden;transition:scale .3s var(--ease)}
.cn-link:hover .cn-thumb{scale:1.05}
.cn-thumb>*{display:block;width:100%;height:100%;object-fit:cover}
.cn-label{font-size:14px;line-height:18px;font-weight:600;letter-spacing:-.224px}
.cn-paddle{position:absolute;top:-3px;width:72px;height:calc(100% + 6px);z-index:2;padding:0;border:0;color:#000;cursor:pointer;
  background:linear-gradient(90deg,#fff 45%,rgba(255,255,255,0));display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.cn-paddle svg{width:7px;height:13px}
.cn-paddle-l{left:0;justify-content:flex-start;padding-left:var(--sp-2)}
.cn-paddle-r{right:0;justify-content:flex-end;padding-right:var(--sp-2);background:linear-gradient(270deg,#fff 45%,rgba(255,255,255,0))}
.cn-paddle:disabled{opacity:0;pointer-events:none}
.cn-paddle:focus-visible{outline:2px solid #000;outline-offset:-2px}
.pbar-backdrop{position:fixed;inset:0;z-index:90;background:rgba(250,250,252,.6);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.pbar-backdrop.on{opacity:1;pointer-events:auto}

/* ============ 4. Hero (vert grainé, pleine largeur) + boutons ============ */
.hero{max-width:none;margin:0;padding:clamp(112px,15vh,160px) var(--page-x) var(--sp-8);
  border-radius:0 0 var(--r-card) var(--r-card);color:#fff;text-align:center}
.hero-eyebrow{margin:0 0 var(--sp-4);font-size:var(--fs-small);font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.85)}
.hero h1{margin:0;font-weight:600;font-size:min(var(--fs-display),calc((100vw - 2*var(--page-x))/11));   /* la plus longue pastille (« de la communication », ≈ 10,8 em) doit tenir dans la largeur de l'écran */line-height:var(--lh-tight);letter-spacing:var(--tr-display);text-wrap:balance;color:#fff}
.hero-line{display:block}
.hero-pill{--pill-bg:#fff;display:inline-flex;align-items:center;gap:.28em;vertical-align:baseline;position:relative;
  padding:.04em .34em .1em .26em;border-radius:var(--r-pill);background:var(--pill-bg);color:var(--foreground);
  box-shadow:0 0 0 1px rgba(255,255,255,.35);font-weight:400;letter-spacing:-.035em;transition:background-color .5s}
.hero-dot{flex:none;width:.34em;height:.34em;border-radius:50%;transition:background-color .5s;transform:translateY(.02em)}
.hero-word{position:relative;display:inline-block;align-self:baseline;height:calc(1.15em + .18em);padding-bottom:.18em;margin-bottom:-.18em;box-sizing:border-box;overflow:clip;white-space:nowrap;transition:width .5s var(--ease);text-align:left}   /* clip + baseline : le point final se cale sur le bas des lettres, pas au milieu de la pastille */
.hero-word-inner{display:block;line-height:1.15;transition:transform .5s var(--ease),opacity .4s}
.hero-word>.hero-word-inner:not(:first-child){position:absolute;left:0;top:0}
.hero-word-inner.in{transform:translateY(100%);opacity:0}
.hero-word-inner.out{transform:translateY(-100%);opacity:0}
.hero-sub{margin:var(--sp-5) auto 0;max-width:36ch;font-size:var(--fs-lead);line-height:1.3;letter-spacing:-.02em;color:rgba(255,255,255,.92)}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:var(--sp-6)}
@media (prefers-reduced-motion:reduce){.hero-word,.hero-word-inner,.hero-pill,.hero-dot{transition:none}}

/* Boutons : noir et blanc partout, une seule taille */
.btn,.about-cta,.cnext{display:inline-flex;align-items:center;height:44px;padding:0 var(--sp-5);border-radius:var(--r-pill);
  font-size:var(--fs-body);font-weight:600;text-decoration:none}
.btn{transition:background-color .2s}
.btn:focus-visible,.about-cta:focus-visible{outline:2px solid #000;outline-offset:3px}
.btn-primary,.about-cta{background:#000;color:#fff}
.btn-primary:hover,.about-cta:hover{background:#333}
.btn-soft{background:#fff;color:#000;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.btn-soft:hover{background:#ececea}
.hero .btn-primary{background:#fff;color:#000}.hero .btn-primary:hover{background:#ececea}     /* sur le vert : couleurs inversées */
.hero .btn-soft{background:#000;color:#fff;box-shadow:none}.hero .btn-soft:hover{background:#333}
.hero .btn:focus-visible{outline-color:#fff}

/* ============ 5. Bandeau « Ils m'ont fait confiance » ============ */
.brands{padding:var(--section-y) 0 var(--sy)}
.brands-head{max-width:var(--max);margin:0 auto var(--sp-4);padding-inline:var(--page-x)}
.brands-head h2{margin:0;font-weight:600;font-size:var(--fs-small);line-height:var(--lh-head);letter-spacing:.04em;text-transform:uppercase;color:var(--muted-foreground)}   /* simple étiquette au-dessus des logos */
.marquee{--speed:60;                       /* px par seconde (réglé en JS) */
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;will-change:transform;
  animation:marquee var(--marquee-duration,40s) linear infinite}
.marquee-group{display:flex;flex:none;align-items:center;gap:clamp(48px,6vw,96px);padding-right:clamp(48px,6vw,96px)}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (hover:hover){.marquee:hover .marquee-track{animation-play-state:paused}}
.brand{flex:none;display:flex;align-items:center;height:48px;color:var(--muted-foreground);opacity:.85;transition:color .3s,opacity .3s;white-space:nowrap}
.brand:hover{color:var(--foreground);opacity:1}
.brand img{display:block;mix-blend-mode:multiply;height:100%;width:auto;max-width:180px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
.brand:hover img{filter:none;opacity:1}
.brand-word{font-size:clamp(22px,2.2vw,32px);line-height:1;font-weight:700;letter-spacing:-.05em}   /* marque sans logo : nom en texte */
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation-duration:calc(var(--marquee-duration,40s) * 2)}   /* le bandeau défile toujours, deux fois moins vite ; il se met en pause au survol */
}

/* ============ 6. Carrousel « Projets sélectionnés » (accueil) ============ */
.work-section{--work-inset:max(var(--page-x),calc((100% - var(--max)) / 2 + var(--page-x)));
  --work-gap:clamp(14px,1.687vw,20px);                      /* écart propre au carrousel */
  padding:var(--sy) var(--work-inset);overflow:hidden}
.work-carousel{position:relative}
.work-carousel:focus-visible{outline:2px solid var(--ring);outline-offset:-3px}
.work-heading{margin-bottom:var(--head-gap)}
.work-heading h2{margin:0;font-weight:600;font-size:var(--fs-section);line-height:var(--lh-head);letter-spacing:var(--tr-head);text-wrap:balance}
.work-heading p{margin:8px 0 0;font-size:var(--fs-small);line-height:1.5;color:var(--muted-foreground)}
.work-heading p a{display:inline-flex;align-items:center;gap:3px;text-decoration:underline;text-underline-offset:3px;color:inherit}
.viewport{margin-block:-8px -22px;padding-block:8px 22px;overflow:visible;touch-action:pan-y pinch-zoom}
.work-track{display:flex;margin-left:calc(-1 * var(--work-gap));touch-action:pan-y pinch-zoom;will-change:transform;transition:transform 750ms var(--ease)}
.work-track.dragging{transition:none}
.work-slide{min-width:0;flex:0 0 min(79vw,clamp(300px,29vw,410px));padding-left:var(--work-gap)}
.work-card{display:block;aspect-ratio:744/1160;cursor:grab;user-select:none;-webkit-user-select:none}
.work-card:active{cursor:grabbing}
.work-card:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:var(--r-card)}
.work-image-frame{position:relative;width:100%;height:100%;overflow:hidden;border-radius:var(--r-card);background:var(--muted);container-type:inline-size}
.work-image-frame::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;border:1px solid rgba(255,255,255,.14)}
.work-image{display:block;width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease)}
.work-image-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.333),rgba(0,0,0,0) 25%,rgba(0,0,0,0) 48%,rgba(0,0,0,.8))}
.work-logo{position:absolute;top:24px;left:24px;color:#fff;font-weight:600;letter-spacing:-.03em;font-size:clamp(22px,7cqi,30px);line-height:1}
.work-logo img,.pcard-client img{display:block;height:1.15em;width:auto;max-width:7em;object-fit:contain;object-position:left center}      /* logo du client à la place de son nom */
.work-summary{position:absolute;inset-inline:24px;bottom:24px;margin:0;color:#fff;letter-spacing:-.035em;line-height:1.22;
  text-wrap:balance;font-size:clamp(1.125rem,6.55cqi,1.75rem);transition:transform .6s var(--ease)}
.work-card[data-theme="light"] .work-image-shade{background:none}
.work-card[data-theme="light"] .work-image-frame::after{border-color:rgba(0,0,0,.12)}
.work-card[data-theme="light"] .work-summary,.work-card[data-theme="light"] .work-logo{color:var(--foreground)}
@media (hover:hover){
  .work-card:hover .work-image{transform:scale(1.035)}
  .work-card:hover .work-summary{transform:translateY(-4px)}
}
@media (prefers-reduced-motion:reduce){.work-image,.work-summary{transition:none}}

/* ============ 7. Page « Projets » : titre, onglets, grille ============ */
.all{--work-inset:max(var(--page-x),calc((100% - var(--max)) / 2 + var(--page-x)));padding:var(--sy) var(--work-inset);scroll-margin-top:84px}
.all-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:var(--sp-3)}
.all-head h1{margin:0;font-weight:600;font-size:var(--fs-title);line-height:var(--lh-tight);letter-spacing:var(--tr-display);text-transform:uppercase}
.all-count{margin:0;line-height:1.5;color:var(--muted-foreground);text-align:right}
.all-head .all-count{font-size:clamp(1rem,.9rem + .5vw,1.4rem);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.all-lead{margin:0 0 var(--head-gap);max-width:36ch;font-size:var(--fs-lead);line-height:1.3;letter-spacing:-.02em;color:var(--muted-foreground)}
.filters{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,36px);margin-bottom:var(--sp-5);padding-bottom:14px;border-bottom:1px solid #dcdcd6}
.ftab{padding:0 0 6px;margin-bottom:-15px;border:0;border-bottom:2px solid transparent;background:none;font:inherit;font-size:clamp(1rem,.95rem + .25vw,1.15rem);font-weight:500;
  color:var(--muted-foreground);cursor:pointer;transition:color .2s,border-color .2s}
.ftab:hover{color:var(--foreground)}
.ftab[aria-pressed="true"]{color:var(--foreground);border-bottom-color:var(--foreground)}
.ftab:focus-visible{outline:2px solid var(--ring);outline-offset:4px;border-radius:var(--r-sm)}
.ftypes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--head-gap)}      /* filtre par type : clients / école / personnel */
.ftypes-label{margin-right:var(--sp-2);font-size:var(--fs-small);color:var(--muted-foreground)}
.ftype{height:34px;padding:0 var(--sp-4);border:1px solid rgba(0,0,0,.16);border-radius:var(--r-pill);background:transparent;color:var(--foreground);font:inherit;font-size:var(--fs-small);
  cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.ftype:hover{border-color:rgba(0,0,0,.45)}
.ftype[aria-pressed="true"]{background:var(--foreground);border-color:var(--foreground);color:#fff}
.ftype:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.freset{border:0;background:none;padding:0;color:var(--muted-foreground);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.freset[hidden]{display:none}
.freset:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.pgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--card-gap)}
.pcard-item[hidden]{display:none}
.pcard{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;isolation:isolate;color:#fff;text-decoration:none;background:var(--muted)}
.pcard::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;border:1px solid rgba(255,255,255,.14)}
.pcard-art{position:absolute;inset:0;transition:transform .85s var(--ease)}
.pcard-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,.333),rgba(0,0,0,0) 25%,rgba(0,0,0,0) 48%,rgba(0,0,0,.8))}
.pcard-client{position:absolute;top:20px;left:20px;z-index:1;font-weight:600;font-size:20px;letter-spacing:-.03em;line-height:1}
.pcard-badge{position:absolute;top:20px;right:20px;z-index:1;padding:5px 10px 6px;border-radius:var(--r-pill);font-size:12px;line-height:1;
  background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pcard-text{position:absolute;left:20px;right:20px;bottom:20px;z-index:1;display:grid;gap:6px;transition:transform .6s var(--ease)}
.pcard-text strong{font-weight:600;font-size:var(--fs-card);line-height:var(--lh-head);letter-spacing:var(--tr-head)}
.pcard-text span{font-size:14px;line-height:1.3;opacity:.85;text-wrap:balance}
.pcard[data-theme="light"]{color:var(--foreground)}
.pcard[data-theme="light"] .pcard-shade{background:none}
.pcard[data-theme="light"]::after{border-color:rgba(0,0,0,.12)}
.pcard[data-theme="light"] .pcard-badge{background:rgba(0,0,0,.07)}
.pcard:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
@media (hover:hover){.pcard:hover .pcard-art{transform:scale(1.035)}.pcard:hover .pcard-text{transform:translateY(-4px)}}
.pempty{padding:64px 0;text-align:center;color:var(--muted-foreground);font-size:16px}
.pempty[hidden]{display:none}
.pempty button{margin-top:14px}
@media (max-width:760px){.all-head{flex-direction:column;align-items:flex-start;gap:6px}.all-count{text-align:left}}

/* ============ 8. Points de navigation du carrousel (dotnav) ============ */
.dotnav-wrap{display:flex;justify-content:center;margin-top:56px}
.dotnav-wrap[hidden]{display:none}
/* un peu d'air avant/après les points aux extrémités de la pilule (Apple : 16px) */
.dotnav.dotnav-scrim-solid{--sk-dotnav-items-padding-inline:24px}
/* ============ Dotnav : CSS repris tel quel du site Apple ============ */
.dotnav { --sk-dotnav-size: 8px; --sk-dotnav-height: calc(var(--sk-dotnav-margin-block) * 2 + var(--sk-dotnav-size)); --sk-dotnav-width: var(--sk-dotnav-size); --sk-dotnav-scale: 1; --sk-dotnav-scale-2: 0.75; --sk-dotnav-scale-3: 0.5; --sk-dotnav-opacity: 1; --sk-dotnav-margin-block: 8px; --sk-dotnav-margin-inline: 8px; --sk-dotnav-scrim-height: 56px; --sk-dotnav-items-padding-block: 0px; --sk-dotnav-items-padding-inline: 0px; --sk-dotnav-variable-duration: 1000ms; --sk-dotnav-margin-offset-inline-start: 0px; --sk-dotnav-margin-offset-inline-end: 0px; --sk-dotnav-logical-factor: 1; --sk-dotnav-fade-in-out-duration: calc(var(--sk-dotnav-variable-duration) / 2 - 20ms); --sk-dotnav-fade-in-delay: calc(var(--sk-dotnav-variable-duration) - var(--sk-dotnav-fade-in-out-duration)); --sk-dotnav-hover-animation-duration: 120ms; --sk-dotnav-animation-stagger-duration: 40ms; --sk-dotnav-animation-collapse-duration: 380ms; --sk-dotnav-background: rgba(0,0,0,.42); --sk-dotnav-background-hover: rgba(0,0,0,.54); --sk-dotnav-background-current: rgba(0,0,0,.8); --sk-dotnav-focus-color: #000; --sk-dotnav-scrim-background-color: rgba(210,210,215,.64); --sk-dotnav-scrim-solid-background-color: rgb(232,232,237); width: fit-content; }
.dotnav.dotnav-scrim-solid { --sk-dotnav-background: rgba(0,0,0,.48); --sk-dotnav-background-current: rgb(0,0,0); --sk-dotnav-background-hover: rgba(0,0,0,.72); --sk-dotnav-focus-color: #000; }
.dotnav .dotnav-stop-transitions .dotnav-link { transition: none !important; }
.dotnav .dotnav-stop-transitions .dotnav-link::before { transition: none !important; }
.dotnav .dotnav-items { margin: 0; list-style: none; --sk-dotnav-count: 2; --sk-dotnav-width: calc(var(--sk-dotnav-size) * var(--sk-dotnav-count) + var(--sk-dotnav-margin-inline) * var(--sk-dotnav-count) * 2); position: relative; display: flex; align-items: center; justify-content: center; overflow-x: hidden; padding-block: var(--sk-dotnav-items-padding-block); padding-inline: var(--sk-dotnav-items-padding-inline); height: var(--sk-dotnav-height); width: var(--sk-dotnav-width); }
.dotnav .dotnav-items:has(:nth-child(2)) { --sk-dotnav-count: 2; }
.dotnav .dotnav-items:has(:nth-child(3)) { --sk-dotnav-count: 3; }
.dotnav .dotnav-items:has(:nth-child(4)) { --sk-dotnav-count: 4; }
.dotnav .dotnav-items:has(:nth-child(5)) { --sk-dotnav-count: 5; }
.dotnav .dotnav-items:has(:nth-child(6)) { --sk-dotnav-count: 6; }
.dotnav .dotnav-items:has(:nth-child(7)) { --sk-dotnav-count: 7; }
.dotnav .dotnav-items:focus-visible { outline: none; }
.dotnav .dotnav-item { margin:0; padding:0; }
.dotnav .dotnav-link { outline: none; box-sizing: content-box; display: block; position: relative; padding-block: var(--sk-dotnav-margin-block); padding-inline: var(--sk-dotnav-margin-inline); height: var(--sk-dotnav-size); width: var(--sk-dotnav-size); margin-inline-start: var(--sk-dotnav-margin-offset-inline-start); margin-inline-end: var(--sk-dotnav-margin-offset-inline-end); user-select: none; transition: height var(--sk-dotnav-hover-animation-duration) linear, width var(--sk-dotnav-hover-animation-duration) linear; cursor: pointer; text-decoration:none; }
.dotnav .dotnav-link::before { content: ""; display: block; border-radius: 999px; position: absolute; top: calc(50% - var(--sk-dotnav-size)/2); left: calc(50% - var(--sk-dotnav-size)/2); scale: var(--sk-dotnav-scale); height: var(--sk-dotnav-size); width: var(--sk-dotnav-size); background: var(--sk-dotnav-background); opacity: var(--sk-dotnav-opacity); transition: background-color var(--sk-dotnav-hover-animation-duration) linear, transform var(--sk-dotnav-hover-animation-duration) ease-in-out, scale var(--sk-dotnav-hover-animation-duration) ease-in-out; }
.dotnav .dotnav-link:hover::before { background: var(--sk-dotnav-background-hover); transition: top var(--sk-dotnav-hover-animation-duration) linear, left var(--sk-dotnav-hover-animation-duration) linear, height var(--sk-dotnav-hover-animation-duration) linear, width var(--sk-dotnav-hover-animation-duration) linear, scale var(--sk-dotnav-hover-animation-duration) linear, transform var(--sk-dotnav-hover-animation-duration) linear; }
.dotnav .dotnav-focused.dotnav-item .dotnav-link::before { transition: none; }
.dotnav .current.dotnav-item .dotnav-link { cursor: default; pointer-events: none; }
.dotnav .current.dotnav-item .dotnav-link::before { background: var(--sk-dotnav-background-current); }
.dotnav .dotnav-items:has(:focus-visible) .dotnav-focused.dotnav-item .dotnav-link::before { outline: 2px solid var(--sk-dotnav-focus-color); outline-offset: 3px; }

/* --- troncature : les petits points quand il reste du contenu --- */
.dotnav .dotnav-trunc-2 { --sk-dotnav-scale: var(--sk-dotnav-scale-2); }
.dotnav .dotnav-trunc-2 .dotnav-link:hover::before { --sk-dotnav-size: calc((1/var(--sk-dotnav-scale)) * 8px); }
.dotnav .dotnav-trunc-3 { --sk-dotnav-scale: var(--sk-dotnav-scale-3); }
.dotnav .dotnav-trunc-3 .dotnav-link:hover::before { --sk-dotnav-size: calc((1/var(--sk-dotnav-scale)) * 6px); }
.dotnav .dotnav-transitioning .dotnav-link { pointer-events: none; }
.dotnav .dotnav-transitioning .dotnav-link::before { transition: transform var(--sk-dotnav-variable-duration) ease-in-out, scale var(--sk-dotnav-variable-duration) ease-in-out; pointer-events: none; }
.dotnav .dotnav-trunc-4, .dotnav .dotnav-trunc-hidden { --sk-dotnav-scale: var(--sk-dotnav-scale-3); --sk-dotnav-margin-block: 0; --sk-dotnav-margin-inline: 0; --sk-dotnav-size: 0; --sk-dotnav-opacity: 0; }
.dotnav .dotnav-trunc-4:not(.dotnav-transitioning), .dotnav .dotnav-trunc-hidden:not(.dotnav-transitioning) { position: absolute; top: 0; left: 0; }
.dotnav .dotnav-trunc-4:not(.dotnav-transitioning) .dotnav-link, .dotnav .dotnav-trunc-hidden:not(.dotnav-transitioning) .dotnav-link { position: absolute; clip: rect(1px,1px,1px,1px); clip-path: inset(0 0 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; }
.dotnav .dotnav-trunc-4 .dotnav-link, .dotnav .dotnav-trunc-hidden .dotnav-link { transition: width var(--sk-dotnav-variable-duration) ease-in-out, height var(--sk-dotnav-variable-duration) ease-in-out, padding-block var(--sk-dotnav-variable-duration) ease-in-out, padding-inline var(--sk-dotnav-variable-duration) ease-in-out, padding var(--sk-dotnav-variable-duration) ease-in-out; }
.dotnav .dotnav-trunc-4 .dotnav-link::before, .dotnav .dotnav-trunc-hidden .dotnav-link::before { transition: width var(--sk-dotnav-variable-duration) ease-in-out, height var(--sk-dotnav-variable-duration) ease-in-out, left var(--sk-dotnav-variable-duration) ease-in-out, opacity var(--sk-dotnav-variable-duration) ease-in-out, background-color var(--sk-dotnav-variable-duration) ease-in-out, scale var(--sk-dotnav-variable-duration) ease-in-out, transform var(--sk-dotnav-variable-duration) ease-in-out; }
.dotnav .dotnav-trunc-4.dotnav-dot-stop-transitions .dotnav-link, .dotnav .dotnav-trunc-hidden.dotnav-dot-stop-transitions .dotnav-link { transition: none !important; }
.dotnav .dotnav-trunc-4.dotnav-dot-stop-transitions .dotnav-link::before, .dotnav .dotnav-trunc-hidden.dotnav-dot-stop-transitions .dotnav-link::before { transition: none !important; }

/* --- apparition / disparition en cascade (stagger 40ms) --- */
.dotnav .dotnav-becoming-visible-1 .dotnav-link { animation: dotnav-become-visible var(--sk-dotnav-fade-in-out-duration) ease-in-out calc(var(--sk-dotnav-fade-in-delay) - var(--sk-dotnav-animation-stagger-duration)*2) both; }
.dotnav .dotnav-becoming-invisible-1 .dotnav-link { animation: dotnav-become-invisible var(--sk-dotnav-fade-in-out-duration) ease-in-out calc(var(--sk-dotnav-animation-stagger-duration)*0) both; }
.dotnav .dotnav-becoming-visible-2 .dotnav-link { animation: dotnav-become-visible var(--sk-dotnav-fade-in-out-duration) ease-in-out calc(var(--sk-dotnav-fade-in-delay) - var(--sk-dotnav-animation-stagger-duration)*1) both; }
.dotnav .dotnav-becoming-invisible-2 .dotnav-link { animation: dotnav-become-invisible var(--sk-dotnav-fade-in-out-duration) ease-in-out calc(var(--sk-dotnav-animation-stagger-duration)*1) both; }
.dotnav .dotnav-becoming-visible-3 .dotnav-link { animation: dotnav-become-visible var(--sk-dotnav-fade-in-out-duration) ease-in-out calc(var(--sk-dotnav-fade-in-delay) - var(--sk-dotnav-animation-stagger-duration)*0) both; }
.dotnav .dotnav-becoming-invisible-3 .dotnav-link { animation: dotnav-become-invisible var(--sk-dotnav-fade-in-out-duration) ease-in-out calc(var(--sk-dotnav-animation-stagger-duration)*2) both; }
@keyframes dotnav-shift-start-1 { 0% { translate: calc(8px*var(--sk-dotnav-logical-factor)); } 100% { translate: 0px; } }
@keyframes dotnav-shift-end-1   { 0% { translate: calc(-8px*var(--sk-dotnav-logical-factor)); } 100% { translate: 0px; } }
@keyframes dotnav-shift-start-2 { 0% { translate: calc(16px*var(--sk-dotnav-logical-factor)); } 100% { translate: 0px; } }
@keyframes dotnav-shift-end-2   { 0% { translate: calc(-16px*var(--sk-dotnav-logical-factor)); } 100% { translate: 0px; } }
@keyframes dotnav-shift-start-3 { 0% { translate: calc(24px*var(--sk-dotnav-logical-factor)); } 100% { translate: 0px; } }
@keyframes dotnav-shift-end-3   { 0% { translate: calc(-24px*var(--sk-dotnav-logical-factor)); } 100% { translate: 0px; } }
@keyframes dotnav-become-visible { 0% { opacity: 0; scale: 0; } 100% { opacity: 1; scale: 1; } }
@keyframes dotnav-become-invisible { 0% { opacity: 1; } 100% { opacity: 0; } }
.dotnav .dotnav-shift-start-1 .dotnav-link::before { animation: dotnav-shift-start-1 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav .dotnav-shift-start-2 .dotnav-link::before { animation: dotnav-shift-start-2 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav .dotnav-shift-start-3 .dotnav-link::before { animation: dotnav-shift-start-3 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav .dotnav-shift-end-1 .dotnav-link::before { animation: dotnav-shift-end-1 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav .dotnav-shift-end-2 .dotnav-link::before { animation: dotnav-shift-end-2 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav .dotnav-shift-end-3 .dotnav-link::before { animation: dotnav-shift-end-3 var(--sk-dotnav-variable-duration) ease-in-out both; }

/* --- fond « scrim » solide (la pilule grise) --- */
.dotnav.dotnav-scrim-solid { --sk-dotnav-items-padding-inline: calc((var(--sk-dotnav-scrim-height) - var(--sk-dotnav-size) - (var(--sk-dotnav-margin-inline) * 2)) / 2); --sk-dotnav-height: var(--sk-dotnav-scrim-height); --sk-dotnav-scrim-backdrop-filter: none; }
.dotnav.dotnav-scrim-solid .dotnav-items { border-radius: 999px; background: var(--sk-dotnav-scrim-solid-background-color); backdrop-filter: var(--sk-dotnav-scrim-backdrop-filter); }

/* --- mode « timed » : le point actif devient une pilule de 32px avec barre de progression --- */
.dotnav-timed { --sk-dotnav-timed-track-width: 32px; --sk-dotnav-timed-duration: 3000ms; --sk-dotnav-iconcontrol-margin: 4px; --sk-dotnav-iconcontrol-icon-size: 36px; --sk-dotnav-iconcontrol-border-radius: 0px; --sk-dotnav-timed-track-color: rgb(0,0,0); --sk-dotnav-timed-track-background-color: rgba(0,0,0,.42); --sk-dotnav-scrim-timed-track-color: rgb(0,0,0); --sk-dotnav-scrim-timed-track-background-color: rgba(0,0,0,.48); --sk-dotnav-iconcontrol-content-color: rgba(0,0,0,.42); --sk-dotnav-iconcontrol-content-color-hover: rgba(0,0,0,.54); --sk-dotnav-scrim-solid-iconcontrol-scrim-color: rgb(232,232,237); --sk-dotnav-scrim-solid-iconcontrol-scrim-color-hover: rgb(235.68,235.68,239.88); --sk-dotnav-scrim-solid-iconcontrol-scrim-color-active: rgb(222.72,222.72,227.52); --sk-dotnav-scrim-solid-iconcontrol-content-color: rgba(0,0,0,.48); --sk-dotnav-scrim-solid-iconcontrol-content-color-hover: rgba(0,0,0,.72); display: flex; align-items: center; flex-direction: row-reverse; }
@keyframes dotnav-timed-animation { 0% { width: var(--sk-dotnav-size); } 100% { width: calc(100% - var(--sk-dotnav-margin-inline)*2); } }
@keyframes dotnav-timed-dot-expand { 0% { left: calc(50% - var(--sk-dotnav-size)/2); width: 8px; } 100% { left: calc(50% - 16px); width: 32px; } }
@keyframes dotnav-timed-dot-shrink { 0% { left: calc(50% - 16px); width: 32px; } 100% { left: calc(50% - var(--sk-dotnav-size)/2); width: 8px; } }
.dotnav-timed .dotnav-items { width: calc(var(--sk-dotnav-width) + var(--sk-dotnav-timed-track-width) - var(--sk-dotnav-size)); }
.dotnav-timed .dotnav-link { transition: width 250ms linear; }
.dotnav-timed .dotnav-link::after { content: ""; position: absolute; display: block; inset-block: var(--sk-dotnav-margin-block); left: var(--sk-dotnav-margin-inline); width: var(--sk-dotnav-size); border-radius: 999px; opacity: 0; animation-iteration-count: 1; animation-play-state: paused; animation-fill-mode: forwards; animation-duration: var(--sk-dotnav-timed-duration); animation-timing-function: linear; }
.dotnav-timed .dotnav-focused.dotnav-item .dotnav-link { width: var(--sk-dotnav-timed-track-width); }
.dotnav-timed .dotnav-focused.dotnav-item .dotnav-link::before { left: calc(50% - 16px); width: calc(100% - var(--sk-dotnav-margin-inline)*2); background: var(--sk-dotnav-timed-track-background-color); animation: 250ms ease-in 0s 1 normal none running dotnav-timed-dot-expand; }
.dotnav-timed .current:not(.dotnav-focused).dotnav-item .dotnav-link::before { background: var(--sk-dotnav-background-current); }
.dotnav-timed .current.dotnav-focused.dotnav-item .dotnav-link { width: var(--sk-dotnav-timed-track-width); pointer-events: none; }
.dotnav-timed .current.dotnav-focused.dotnav-item .dotnav-link::before { left: calc(50% - 16px); width: calc(100% - var(--sk-dotnav-margin-inline)*2); background: var(--sk-dotnav-timed-track-background-color); animation: 250ms ease-in 0s 1 normal none running dotnav-timed-dot-expand; }
.dotnav-timed .current.dotnav-focused.dotnav-item .dotnav-link::after { background: var(--sk-dotnav-background-current); animation-name: dotnav-timed-animation; animation-play-state: running; animation-delay: calc(var(--sk-dotnav-variable-duration) - 160ms); opacity: 1; transition: opacity 80ms ease-in calc(var(--sk-dotnav-variable-duration) - 80ms); }
.dotnav-timed .dotnav-previous-current.dotnav-item .dotnav-link::before { animation: 250ms ease-out 0s 1 normal none running dotnav-timed-dot-shrink; transition: scale calc(var(--sk-dotnav-variable-duration) - 200ms) ease-in-out 200ms; }
.dotnav-timed .dotnav-previous-current.dotnav-item .dotnav-link:hover::before { transition: top var(--sk-dotnav-hover-animation-duration) linear, left var(--sk-dotnav-hover-animation-duration) linear, height var(--sk-dotnav-hover-animation-duration) linear, width var(--sk-dotnav-hover-animation-duration) linear, scale var(--sk-dotnav-hover-animation-duration) linear, transform var(--sk-dotnav-hover-animation-duration) linear; }
.dotnav-timed .dotnav-focused.dotnav-item.dotnav-shift-start-1 .dotnav-link::before { animation: dotnav-timed-dot-expand 250ms ease-in, dotnav-shift-start-1 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav-timed .dotnav-focused.dotnav-item.dotnav-shift-start-2 .dotnav-link::before { animation: dotnav-timed-dot-expand 250ms ease-in, dotnav-shift-start-2 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav-timed .dotnav-focused.dotnav-item.dotnav-shift-start-3 .dotnav-link::before { animation: dotnav-timed-dot-expand 250ms ease-in, dotnav-shift-start-3 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav-timed .dotnav-focused.dotnav-item.dotnav-shift-end-1 .dotnav-link::before { animation: dotnav-timed-dot-expand 250ms ease-in, dotnav-shift-end-1 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav-timed .dotnav-focused.dotnav-item.dotnav-shift-end-2 .dotnav-link::before { animation: dotnav-timed-dot-expand 250ms ease-in, dotnav-shift-end-2 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav-timed .dotnav-focused.dotnav-item.dotnav-shift-end-3 .dotnav-link::before { animation: dotnav-timed-dot-expand 250ms ease-in, dotnav-shift-end-3 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav-timed .dotnav-previous-current.dotnav-item.dotnav-shift-start-1 .dotnav-link::before { animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-start-1 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav-timed .dotnav-previous-current.dotnav-item.dotnav-shift-start-2 .dotnav-link::before { animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-start-2 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav-timed .dotnav-previous-current.dotnav-item.dotnav-shift-start-3 .dotnav-link::before { animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-start-3 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav-timed .dotnav-previous-current.dotnav-item.dotnav-shift-end-1 .dotnav-link::before { animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-end-1 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav-timed .dotnav-previous-current.dotnav-item.dotnav-shift-end-2 .dotnav-link::before { animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-end-2 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav-timed .dotnav-previous-current.dotnav-item.dotnav-shift-end-3 .dotnav-link::before { animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-end-3 var(--sk-dotnav-variable-duration) ease-in-out both; }
.dotnav-timed .dotnav-trunc-4.dotnav-previous-current.dotnav-item[class*="dotnav-shift-"] .dotnav-link::before { transition: left 250ms linear, width var(--sk-dotnav-variable-duration) linear, height var(--sk-dotnav-variable-duration) ease-in-out, opacity 140ms ease-in-out, background-color var(--sk-dotnav-variable-duration) ease-in-out, transform var(--sk-dotnav-variable-duration) ease-in-out, scale 0ms 140ms; }
.dotnav-timed .dotnav-trunc-4.dotnav-previous-current.dotnav-item.dotnav-shift-start-1 .dotnav-link::before { animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-start-1 calc(var(--sk-dotnav-variable-duration) - 80ms) ease-in-out 80ms both; }
.dotnav-timed .dotnav-trunc-4.dotnav-previous-current.dotnav-item.dotnav-shift-start-2 .dotnav-link::before { animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-start-2 calc(var(--sk-dotnav-variable-duration) - 80ms) ease-in-out 80ms both; }
.dotnav-timed .dotnav-trunc-4.dotnav-previous-current.dotnav-item.dotnav-shift-start-3 .dotnav-link::before { animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-start-3 calc(var(--sk-dotnav-variable-duration) - 80ms) ease-in-out 80ms both; }
.dotnav-timed .dotnav-trunc-4.dotnav-previous-current.dotnav-item.dotnav-shift-end-1 .dotnav-link::before { animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-end-1 calc(var(--sk-dotnav-variable-duration) - 80ms) ease-in-out 80ms both; }
.dotnav-timed .dotnav-trunc-4.dotnav-previous-current.dotnav-item.dotnav-shift-end-2 .dotnav-link::before { animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-end-2 calc(var(--sk-dotnav-variable-duration) - 80ms) ease-in-out 80ms both; }
.dotnav-timed .dotnav-trunc-4.dotnav-previous-current.dotnav-item.dotnav-shift-end-3 .dotnav-link::before { animation: dotnav-timed-dot-shrink 250ms ease-out, dotnav-shift-end-3 calc(var(--sk-dotnav-variable-duration) - 80ms) ease-in-out 80ms both; }
.dotnav-timed.dotnav-timed-paused .current.dotnav-item .dotnav-link::after { animation-play-state: paused; }
.dotnav-timed.dotnav-stop-transitions .dotnav-items .dotnav-link { transition: none; }
.dotnav-timed.dotnav-stop-transitions .dotnav-items .dotnav-link::before { transition: background-color var(--sk-dotnav-hover-animation-duration) linear; }
.dotnav-timed.dotnav-stop-transitions .dotnav-items .dotnav-focused .dotnav-link::before { animation-duration: 0ms; width: var(--sk-dotnav-timed-track-width); }

/* --- bouton pause / lecture / rejouer --- */
.dotnav-timed .dotnav-iconcontrol { margin-inline-start: var(--sk-dotnav-iconcontrol-margin); margin-block: 0; padding: 0; border: 0; border-radius: var(--sk-dotnav-iconcontrol-border-radius); color: var(--sk-dotnav-iconcontrol-content-color); transition: color var(--sk-dotnav-hover-animation-duration) linear; background: transparent; cursor: pointer; }
.dotnav-timed .dotnav-iconcontrol path { fill: currentcolor; }
.dotnav-timed .dotnav-iconcontrol:hover { color: var(--sk-dotnav-iconcontrol-content-color-hover); }
.dotnav-timed .dotnav-iconcontrol:focus-visible { outline: 2px solid var(--sk-dotnav-focus-color); outline-offset: -6px; }
.dotnav-timed .dotnav-iconcontrol-icon { display: flex; justify-content: center; align-items: center; height: var(--sk-dotnav-iconcontrol-icon-size); width: var(--sk-dotnav-iconcontrol-icon-size); }
.dotnav-timed .dotnav-iconcontrol-icon svg { height: 100%; fill: currentcolor; }
.dotnav-timed .dotnav-iconcontrol-play, .dotnav-timed .dotnav-iconcontrol-replay { display: none; }
.dotnav-timed.dotnav-timed-paused:not(.dotnav-timed-end) .dotnav-iconcontrol-play { display: block; }
.dotnav-timed.dotnav-timed-paused:not(.dotnav-timed-end) .dotnav-iconcontrol-pause { display: none; }
.dotnav-timed.dotnav-timed-end .dotnav-iconcontrol-replay { display: block; }
.dotnav-timed.dotnav-timed-end .dotnav-iconcontrol-pause { display: none; }
.dotnav-timed.dotnav-scrim-solid { --sk-dotnav-iconcontrol-margin: 16px; --sk-dotnav-iconcontrol-icon-size: 56px; --sk-dotnav-iconcontrol-border-radius: 999px; }
.dotnav-timed.dotnav-scrim-solid .dotnav-focused.dotnav-item .dotnav-link::before, .dotnav-timed.dotnav-scrim-solid .current.dotnav-item .dotnav-link::before { --sk-dotnav-timed-track-background-color: var(--sk-dotnav-scrim-timed-track-background-color); }
.dotnav-timed.dotnav-scrim-solid .dotnav-focused.dotnav-item .dotnav-link::after, .dotnav-timed.dotnav-scrim-solid .current.dotnav-item .dotnav-link::after { --sk-dotnav-background-current: var(--sk-dotnav-scrim-timed-track-color); }
.dotnav-timed.dotnav-scrim-solid .dotnav-iconcontrol { transition: background-color 100ms linear; color: var(--sk-dotnav-scrim-solid-iconcontrol-content-color); background: var(--sk-dotnav-scrim-solid-iconcontrol-scrim-color); }
.dotnav-timed.dotnav-scrim-solid .dotnav-iconcontrol:hover { color: var(--sk-dotnav-scrim-solid-iconcontrol-content-color-hover); background: var(--sk-dotnav-scrim-solid-iconcontrol-scrim-color-hover); }
.dotnav-timed.dotnav-scrim-solid .dotnav-iconcontrol:active { background: var(--sk-dotnav-scrim-solid-iconcontrol-scrim-color-active); }

/* ============ 9. Fiche projet : fenêtre centrée façon apple.com, la page derrière reste en place ============ */
.sheet-scrim{position:fixed;inset:0;z-index:200;visibility:hidden;opacity:0;background:rgba(70,70,72,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:opacity .45s var(--sheet-ease),visibility 0s linear .45s}
html.sheet-open .sheet-scrim{visibility:visible;opacity:1;transition:opacity .45s var(--sheet-ease),visibility 0s}
.sheet{position:fixed;left:50%;bottom:0;top:clamp(12px,4vh,40px);width:min(1260px,calc(100% - clamp(16px,3vw,40px)));z-index:201;
  display:flex;flex-direction:column;background:#fff;color:var(--foreground);border-radius:var(--r-card) var(--r-card) 0 0;
  transform:translate(-50%,60px);opacity:0;visibility:hidden;outline:none;
  transition:transform .5s var(--sheet-ease),opacity .35s,visibility 0s linear .5s}
.sheet.open{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .5s var(--sheet-ease),opacity .35s,visibility 0s}
.sheet-close{position:absolute;top:clamp(14px,2.2vw,28px);right:clamp(14px,2.2vw,28px);z-index:3;width:36px;height:36px;border:0;border-radius:50%;
  background:var(--foreground);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s}
.sheet-close:hover{background:#3c3f3a}
.sheet-close svg{width:36px;height:36px}
.sheet-close:focus-visible{outline:2px solid #000;outline-offset:2px}
.sheet-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-radius:inherit}
/* barre de défilement : fine, arrondie, sans flèches, dans la continuité de la croix (Chrome / Edge) */
.sheet-scroll::-webkit-scrollbar{width:18px}
.sheet-scroll::-webkit-scrollbar-button{display:none;width:0;height:0}
.sheet-scroll::-webkit-scrollbar-corner{background:transparent}
.sheet-scroll::-webkit-scrollbar-track{background:transparent;margin-block:clamp(64px,7vw,84px) clamp(20px,3vw,36px)}   /* démarre sous la croix */
.sheet-scroll::-webkit-scrollbar-thumb{min-height:48px;border:6px solid transparent;border-radius:var(--r-pill);background:#c8c8c2;background-clip:padding-box;transition:background-color .2s}
.sheet-scroll::-webkit-scrollbar-thumb:hover{background:#8f8f89;background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){.sheet-scroll{scrollbar-width:thin;scrollbar-color:#c8c8c2 transparent}}
.sheet-in{padding:clamp(40px,6vw,76px) clamp(20px,6vw,76px)}
.sheet-in>*{animation:sheet-in .6s var(--ease) both}
@keyframes sheet-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sheet-eyebrow{margin:0 0 10px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.sheet-in h2{margin:0;max-width:18ch;font-weight:600;font-size:clamp(2rem,1rem + 3.6vw,4rem);line-height:var(--lh-tight);letter-spacing:var(--tr-head);text-wrap:balance}
.sheet-sum{margin:18px 0 0;max-width:48ch;font-size:var(--fs-lead);line-height:1.3;letter-spacing:-.02em;color:var(--muted-foreground)}
.sheet-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.sheet-chips li{padding:7px 13px 8px;border:1px solid rgba(0,0,0,.14);border-radius:var(--r-pill);font-size:13px;line-height:1}
.panels{display:grid;gap:var(--card-gap);margin-top:var(--head-gap)}
.panel{padding:var(--card-pad-lg) clamp(22px,7vw,110px);border-radius:var(--r-card);background:var(--panel)}
.panel h3{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
.panel p{margin:0;max-width:44ch;font-size:clamp(1.25rem,1rem + 1.1vw,2rem);line-height:1.22;letter-spacing:-.025em;font-weight:600;color:var(--muted-foreground)}
.panel p b{color:var(--foreground);font-weight:600}
.panel-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px)}
.panel-cols dt{margin:0 0 8px;font-size:clamp(2rem,1rem + 3vw,3.6rem);line-height:1;letter-spacing:-.045em;font-weight:600}
.panel-cols dd{margin:0;font-size:14px;line-height:1.3;color:var(--muted-foreground)}
.panel .sheet-chips{margin:0}
.panel .sheet-chips li{background:#fff;border-color:transparent;font-size:15px;padding:10px 16px}
.panel-visual{position:relative;aspect-ratio:16/9;padding:0;overflow:hidden;color:#fff}
.panel-visual>span{position:absolute;left:clamp(20px,4vw,48px);bottom:clamp(18px,3vw,40px);max-width:24ch;font-size:clamp(1.1rem,.8rem + 1.5vw,2rem);line-height:1.15;letter-spacing:-.03em;font-weight:600}
.panel-visual[data-theme="light"]{color:var(--foreground)}
.panel-visual.has-img{aspect-ratio:auto;display:grid;place-items:center;background:var(--panel);padding:clamp(12px,2vw,28px)}   /* vraie image : on la montre entière */
.panel-visual.has-img img{width:auto;height:auto;max-width:100%;max-height:min(80vh,960px);object-fit:contain;border-radius:var(--r-sm)}
.panel-video{position:relative;aspect-ratio:16/9;padding:0;overflow:hidden;background:#000}     /* vidéo YouTube incrustée (voir playVideo dans sheet.js) */
.video-poster{display:block;width:100%;height:100%;padding:0;border:0;cursor:pointer;background-color:#000;background-repeat:no-repeat;
  background-size:158% auto;background-position:center}      /* l'image de couverture est un portrait : on recadre sur le cadre vidéo, au centre */
.video-poster:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.panel-video iframe{display:block;width:100%;height:100%;border:0}
.panel-links{display:flex;flex-wrap:wrap;gap:var(--sp-3);padding:var(--card-pad)}      /* boutons vers un site / une application */
/* couverture PAYSAGE (miniature de vidéo) : affichée dans un cadre sur fond gris, au lieu d'être recadrée en portrait */
.cover-frame{display:grid;place-items:center;background:var(--muted)}
.cover-frame img{display:block;width:84%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);box-shadow:0 10px 28px -12px rgba(0,0,0,.4)}
/* galerie photo : colonnes qui s'adaptent au format de chaque photo (paysage ou portrait) */
.panel-gallery{padding:var(--card-pad)}
.panel-gallery h3{margin:var(--sp-2) var(--sp-2) var(--sp-4)}
.gallery{columns:3 220px;column-gap:var(--card-gap)}
.shot{display:block;position:relative;width:100%;margin:0 0 var(--card-gap);padding:0;border:0;border-radius:var(--r-sm);overflow:hidden;
  break-inside:avoid;cursor:zoom-in;background-color:var(--muted);transition:transform .35s var(--ease)}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
@media (hover:hover){.shot:hover{transform:scale(1.015)}}
.shot:focus-visible{outline:2px solid #000;outline-offset:3px}
@media (max-width:700px){.gallery{columns:2 140px}}
/* visionneuse plein écran */
.lb{position:fixed;inset:0;z-index:300;display:none;place-items:center;background:rgba(12,12,12,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.lb.open{display:grid}
.lb-fig{width:min(92vw,calc(84vh * var(--ar,1.5)));border-radius:var(--r-sm);overflow:hidden;background-color:#222}
.lb-fig img{display:block;width:100%;height:100%;object-fit:cover}
.lb-btn{position:absolute;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s}
.lb-btn:hover{background:rgba(255,255,255,.3)}
.lb-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb-btn svg{width:9px;height:15px}
.lb-close{top:20px;right:20px}
.lb-close svg{width:36px;height:36px}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%)}
.lb-prev{left:20px}
.lb-next{right:20px}
.lb-count{position:absolute;bottom:20px;left:0;right:0;margin:0;text-align:center;color:rgba(255,255,255,.75);font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.panel-shots{display:grid;grid-template-columns:1fr 1fr;gap:var(--card-gap);background:none;padding:0}
.mock{margin:0;border:2px solid #000;border-radius:var(--r-card);overflow:hidden;background:#fff;aspect-ratio:16/10;display:flex;flex-direction:column}
.mock-bar{flex:none;height:34px;display:flex;align-items:center;gap:6px;padding:0 14px}
.mock-bar i{width:8px;height:8px;border-radius:50%;background:#d6d6da}
.mock-bar b{margin-left:auto;width:72px;height:12px;border-radius:var(--r-pill);background:#e8e8e4}
.mock-body{position:relative;flex:1;margin:0 10px 10px;border-radius:var(--r-sm);overflow:hidden}
.mock-ui{position:absolute;inset:16px;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto 1fr;gap:10px}
.mock-ui span{border-radius:var(--r-sm);background:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mock-ui span:first-child{grid-column:1/-1;height:26px;width:46%}
.sheet-next{display:block;text-decoration:none;color:inherit}
.sheet-next small{display:block;margin-bottom:8px;font-size:13px;color:var(--muted-foreground)}
.sheet-next span{font-size:clamp(1.5rem,1rem + 2vw,2.6rem);letter-spacing:-.04em;font-weight:600}
.sheet-next:hover span{text-decoration:underline;text-underline-offset:6px}
@media (max-width:700px){.panel-cols{grid-template-columns:1fr}.panel-shots{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.sheet,.sheet.open,.sheet-scrim{transition:none}.sheet-in>*{animation:none}}

/* ============ 10. À propos + compétences ============ */
.about{max-width:var(--max);margin-inline:auto;padding:var(--sy) var(--page-x)}
.about-head{margin-bottom:var(--head-gap)}
.about-head h1{margin:0;font-weight:600;font-size:var(--fs-title);line-height:var(--lh-tight);letter-spacing:var(--tr-display)}
.about-head h2{margin:0;font-weight:600;font-size:var(--fs-section);line-height:var(--lh-head);letter-spacing:var(--tr-head)}
.about-grid{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:var(--col-gap);align-items:start}
.about-photo{aspect-ratio:4/5;border-radius:var(--r-card);background-color:var(--panel);overflow:hidden}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;mix-blend-mode:multiply}   /* multiply : le fond blanc de la photo prend la couleur du panneau */
.about-text p{margin:0 0 var(--sp-4);max-width:60ch;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);color:var(--muted-foreground)}
.about-text .about-lead{font-weight:600;font-size:var(--fs-sub);line-height:1.2;letter-spacing:-.03em;color:var(--foreground)}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}.about-photo{aspect-ratio:16/10}}
.skills{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--col-gap);align-items:start;max-width:var(--max);margin:0 auto;padding:var(--sy) var(--page-x)}
.skills-title{position:sticky;top:96px;margin:0;font-weight:600;font-size:var(--fs-section);line-height:var(--lh-head);letter-spacing:var(--tr-head)}
.skills-list{display:grid;gap:var(--card-gap)}
.skill{display:flex;gap:var(--card-gap);align-items:flex-start;padding:var(--card-gap);border-radius:var(--r-card);background:var(--panel)}
.skill-tools{flex:none;display:grid;gap:8px;padding:8px;border-radius:var(--r-sm);background:#fff}
.tool{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:var(--r-sm)}
.tool img{display:block;width:100%;height:100%;object-fit:contain}
.skill-card{flex:1;min-width:0;align-self:stretch;padding:var(--card-pad);border-radius:var(--r-sm);background:#fff}
.skill-card h3{margin:0 0 10px;font-weight:600;font-size:var(--fs-card);line-height:var(--lh-head);letter-spacing:var(--tr-head);text-transform:uppercase}
.skill-card p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);color:var(--muted-foreground)}
.skill-names{display:block;margin-top:8px;font-size:14px;color:var(--foreground)}
@media (max-width:860px){.skills{grid-template-columns:1fr}.skills-title{position:static}}

/* ============ 11. Bande contact + coordonnées ============ */
.contact-band{width:min(calc(var(--max) - 2 * var(--page-x)),calc(100% - 2 * var(--page-x)));margin:var(--sy) auto;padding:var(--section-y) var(--card-pad-lg);
  border-radius:var(--r-card);color:#fff;text-align:center}
.contact-band h2{margin:0;font-weight:600;font-size:var(--fs-section);line-height:var(--lh-head);letter-spacing:var(--tr-head);text-wrap:balance}
.contact-band p{margin:14px 0 22px;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);color:rgba(255,255,255,.82)}
.contact-band .about-cta{background:#fff;color:#000}
.contact-band .about-cta:hover{background:#ececea}
.contact-band .about-cta:focus-visible{outline-color:#fff}
.contact-list{margin:24px 0 0;padding:0;list-style:none}
.contact-list li{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--muted);font-size:17px}
.contact-list li>span{width:90px;flex:none;color:var(--muted-foreground);font-size:14px;padding-top:3px}
.contact-list a{color:inherit;text-underline-offset:3px}

/* ============ 12. Utilitaires ============ */
/* Vert grainé : dégradé + grain fin. S'applique à la hero, à la bande contact, au bloc À propos, aux cartes et aux boutons de confirmation du parcours de contact. */
.grain-green,.contact-band,.cnext{background-color:var(--accent);
  background-image:var(--grain),radial-gradient(120% 90% at 20% 0%,var(--accent-hi) 0%,var(--accent) 55%,var(--accent-lo) 100%);
  background-size:220px 220px,cover;background-blend-mode:overlay,normal}
/* Rythme vertical : entre deux sections = --section-y (chacune met --sy en haut et en bas) */
.spacer + .about,.spacer + .all,.spacer + .cflow{padding-top:var(--sp-5)}    /* 1re section d'une page intérieure : le .spacer fait déjà la place de la barre */
#page > :last-child{padding-bottom:var(--section-y)}

/* ============ Fiche projet : sections rédigées (champ sections de data.js) ============
   Une phrase d'accroche en grand, puis le texte courant en taille de lecture, des listes et, au besoin, une galerie légendée. */
.panel-section .sec-lead{margin:0 0 var(--sp-5);max-width:28ch;font-size:clamp(1.5rem,1rem + 1.6vw,2.5rem);font-weight:600;line-height:1.15;letter-spacing:-.035em;color:var(--foreground)}
.panel-section .sec-text{margin:0 0 var(--sp-3);max-width:62ch;font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);letter-spacing:var(--tr-body);color:var(--foreground)}
.panel-section .sec-text:last-child{margin-bottom:0}
.sec-list,.sec-steps{margin:var(--sp-4) 0 0;padding:0;max-width:62ch;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);color:var(--foreground)}
.sec-list{list-style:none}
.sec-list li{position:relative;padding-left:var(--sp-5);margin-bottom:var(--sp-3)}
.sec-list li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--foreground)}
.sec-steps{padding-left:var(--sp-5);list-style:decimal}
.sec-steps li{padding-left:var(--sp-2);margin-bottom:var(--sp-2)}
.sec-steps li::marker{color:var(--muted-foreground);font-variant-numeric:tabular-nums;font-weight:600}
.sec-list b{font-weight:600}
.sec-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--card-gap);margin-top:var(--sp-5);align-items:start}
.sec-gallery figure{margin:0}
.sec-gallery .shot{margin:0;background-color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.sec-gallery figcaption{margin-top:var(--sp-2);font-size:var(--fs-small);line-height:1.35;color:var(--muted-foreground)}



/* Hero : pastille de disponibilité (texte dans CONTACT.availability, data.js) */
.hero-avail{display:inline-flex;align-items:center;gap:var(--sp-2);margin:var(--sp-5) 0 0;font-size:var(--fs-small);font-weight:500;letter-spacing:-.005em;color:inherit;opacity:.88}
.hero-avail-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#8be2b0;box-shadow:0 0 0 4px rgba(139,226,176,.25)}
.hero-avail + .hero-cta{margin-top:var(--sp-4)}

/* Hero : la disponibilité se place à droite de « Rémy Martinez · Médiamaticien CFC » (dessous quand la ligne est trop étroite) */
.hero-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-2) var(--sp-4);margin:0 0 var(--sp-4)}
.hero-top .hero-eyebrow{margin:0}
.hero-top .hero-avail{margin:0;padding:6px 14px 6px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);opacity:1}

/* fiche : logos sur fond blanc (champ pad:true d'une image de galerie) et pastilles de couleur (champ swatches) */
.shot-pad img{object-fit:contain;padding:clamp(14px,7%,32px)}
.sec-swatches{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-4) 0 0;padding:0;list-style:none}
.sec-swatches li{display:flex;align-items:center;gap:var(--sp-3);padding:6px 14px 6px 6px;border-radius:var(--r-pill);background:#fff;font-size:var(--fs-small);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.sec-swatches i{flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.sec-swatches span{font-weight:600}
.sec-swatches code{font:inherit;color:var(--muted-foreground);font-variant-numeric:tabular-nums}

/* ============ Pied de page (js/footer.js) ============ */
.footer{max-width:var(--max);margin:0 auto;padding:var(--sy) var(--page-x) var(--sp-6)}
.footer-inner{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));gap:var(--sp-7) var(--col-gap);padding-top:var(--sp-7);border-top:1px solid var(--muted)}
.footer-logo{display:inline-block;margin-bottom:var(--sp-4)}
.footer-logo img{display:block;width:32px;height:32px}
.footer-logo:focus-visible{outline:2px solid #000;outline-offset:4px;border-radius:var(--r-sm)}
.footer-name{margin:0;font-size:var(--fs-card);font-weight:600;letter-spacing:var(--tr-head);line-height:var(--lh-head)}
.footer-role{margin:var(--sp-1) 0 0;font-size:var(--fs-body);color:var(--muted-foreground)}
.footer-avail{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-4) 0 var(--sp-5);font-size:var(--fs-small);font-weight:500}
.footer-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#1f8958;box-shadow:0 0 0 4px rgba(31,137,88,.16)}
.footer-col h2{margin:0 0 var(--sp-4);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
.footer-col ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-3)}
.footer-col a{font-size:var(--fs-body);color:var(--foreground);text-decoration:none;letter-spacing:var(--tr-body)}
.footer-col a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-col a:focus-visible{outline:2px solid #000;outline-offset:3px;border-radius:var(--r-sm)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-8);padding-top:var(--sp-4);border-top:1px solid var(--muted);font-size:var(--fs-small);color:var(--muted-foreground)}
.footer-bottom p{margin:0}
.footer-top{padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.footer-top:hover{color:var(--foreground)}
.footer-top:focus-visible{outline:2px solid #000;outline-offset:3px;border-radius:var(--r-sm)}
@media (max-width:760px){.footer-inner{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1 / -1}}
@media (max-width:480px){.footer-inner{grid-template-columns:1fr}}

/* fiche : tableau « avant / après » (champ table d'une section) */
.sec-table-wrap{margin-top:var(--sp-5);overflow-x:auto;border-radius:var(--r-sm);background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.sec-table{width:100%;border-collapse:collapse;font-size:var(--fs-small);line-height:1.4;text-align:left}
.sec-table th{padding:12px 16px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);border-bottom:1px solid var(--muted)}
.sec-table td{padding:14px 16px;vertical-align:top;border-top:1px solid var(--muted);color:var(--foreground)}
.sec-table tbody tr:first-child td{border-top:0}
.sec-table td:first-child{color:var(--muted-foreground);width:46%}
@media (max-width:640px){.sec-table{font-size:13px}.sec-table th,.sec-table td{padding:10px 12px}}

/* Google Sheets : son logo est en hauteur (727 × 1000) ; sa case est plus haute pour qu'il ait la même présence que les icônes carrées */
.tool-tall{height:60px}

/* Page Projets : mêmes images (fond blanc) et même format que le carrousel de l'accueil */
.pcard{aspect-ratio:1200/1872}
.pcard.has-cover{background:#fff}

/* panneau Contact de la barre : coordonnées directes sous les trois cartes */
.cn-direct{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-5);padding:0;list-style:none}
.cn-direct a{display:inline-flex;align-items:center;height:36px;padding:0 var(--sp-4);border-radius:var(--r-pill);background:var(--panel);color:var(--foreground);
  font-size:var(--fs-small);font-weight:600;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:background-color .2s var(--ease)}
.cn-direct a:hover{background:#e6e6e2}
.cn-direct a:focus-visible{outline:2px solid #000;outline-offset:2px}
@media (max-width:640px){.cn-direct a{height:40px}}
.cn-direct svg{flex:none;width:16px;height:16px;margin-right:var(--sp-2)}
.cn-direct a.icon-only{width:36px;padding:0;justify-content:center}
.cn-direct a.icon-only svg{margin:0;width:18px;height:18px}
@media (max-width:640px){.cn-direct a.icon-only{width:40px}}

/* Carrousel : quand le carrousel a avancé, les cartes qui sortent par la gauche se fondent dans un flou progressif horizontal
   (flou fort au bord de l'écran, nul vers l'intérieur). Il n'apparaît qu'une fois le carrousel avancé (classe is-scrolled, carousel.js) : au début, la première carte reste nette.
   --edge = marge à gauche de la colonne (même formule que --work-inset, mais en vw : un « % » ne se résout pas pareil à l'intérieur du carrousel ;
   15 px = barre de défilement réservée). La zone floue part du bord de l'écran et mesure au moins 56 à 140 px (14 vw) : visible aussi sur téléphone. */
.viewport{position:relative;--edge:max(var(--page-x),calc((100vw - 15px - var(--max)) / 2 + var(--page-x)))}
.viewport::before,.viewport::after{content:"";position:absolute;z-index:3;top:0;bottom:0;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  left:calc(-1 * var(--edge));width:max(var(--edge),clamp(56px,14vw,140px))}
.work-carousel.is-scrolled .viewport::before,.work-carousel.is-scrolled .viewport::after{opacity:1}
.viewport::before{                                   /* flou léger, avec un voile aux couleurs du fond */
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  background:linear-gradient(90deg,color-mix(in srgb,var(--background) 62%,transparent),transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 10%,transparent);mask-image:linear-gradient(90deg,#000 10%,transparent)}
.viewport::after{                                    /* flou plus fort, resserré contre le bord de l'écran */
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(90deg,#000 0,transparent 55%);mask-image:linear-gradient(90deg,#000 0,transparent 55%)}
@media (prefers-reduced-motion:reduce){.viewport::before,.viewport::after{transition:none}}
/* flou du carrousel : ordinateur seulement (souris), pas sur téléphone ni tablette */
@media not all and (hover:hover) and (pointer:fine){.viewport::before,.viewport::after{display:none}}
.video-hint{position:absolute;left:0;right:0;bottom:0;padding:10px 16px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;line-height:1.3;pointer-events:none}