/* =====================================================================
   Pétanque Manager — components.css
   Base, navigation, boutons, hero, sections, téléphones, offres, bandeau,
   pied de page, mouvement réduit. Dépend des tokens de tokens.css.
   Les effets (motion.js) s'attachent aux classes : .reveal, .phone-stage,
   .phone, .pillar[data-key], #sticky-phone .screen[data-screen], [data-count],
   .theme-btn, .menu-btn, .lang.
   ===================================================================== */
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px);scroll-behavior:smooth}
/* Fondu entre deux pages du même site (navigateurs qui le savent ; les autres changent de page comme avant) */
@view-transition{navigation:auto}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:18px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;color:var(--ink);overflow-wrap:break-word}
/* Césure des titres sur petit écran seulement : un mot long (« Fortschrittsgrafiken ») ne déborde pas à 320 px */
@media (max-width:600px){h1,h2,h3{hyphens:auto}}
h2{font-size:clamp(34px,4.6vw,64px);line-height:1.02}
h3{font-size:clamp(28px,3.2vw,40px);line-height:1}
.section{padding:var(--gap) 0 0}
.lead{color:var(--muted);font-size:clamp(18px,2vw,21px);line-height:1.45}

/* ---------- Boutons (pilule Bevel, survol Stripe) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:var(--r-pill);
  font-weight:500;font-size:16px;line-height:1.4;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background-color .25s,border-color .25s,color .2s;
}
.btn--primary{background:var(--btn-bg);color:var(--btn-fg)}
@media (hover:hover) and (pointer:fine){.btn--primary:hover{background:var(--btn-bg-hover);transform:translateY(-2px);box-shadow:var(--shadow-hover)}}
.btn--gold{background:var(--gold);color:var(--gold-fg)}
@media (hover:hover) and (pointer:fine){.btn--gold:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(0,0,0,.6);filter:brightness(1.04)}}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--hairline)}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{border-color:var(--ink);background:var(--surface);transform:translateY(-2px)}}
.btn--sm{padding:9px 16px;font-size:15px}
.btn:active{transform:translateY(0) scale(.99)}

/* ---------- Navigation capsule (Bevel) ---------- */
.nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:50;max-width:calc(var(--max) + 32px);margin:12px auto 0;padding:0 16px}
.nav__bar{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:8px 10px 8px 18px;
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--hairline);border-radius:var(--r-field);
  transition:box-shadow .35s var(--ease),background-color .35s;
}
.nav.is-scrolled .nav__bar{box-shadow:var(--shadow-card)}
.brand{display:flex;align-items:center;gap:10px;font-weight:500;font-size:18px;letter-spacing:.16px;color:var(--ink)}
.brand svg{width:28px;height:28px;flex:none}
.brand img{width:28px;height:28px;flex:none;border-radius:50%}
.nav__links{display:flex;gap:2px;margin:0 auto;padding:0;list-style:none;min-width:0}  /* seule à céder : un libellé passe sur deux lignes, rien n'est rogné */
.nav__links a{display:block;padding:8px 10px;text-align:center;border-radius:999px;font-size:16px;font-weight:500;color:var(--muted);transition:color .2s,background-color .2s}
@media (hover:hover) and (pointer:fine){.nav__links a:hover{color:var(--ink);background:var(--cloud)}}
.nav__right{display:flex;align-items:center;gap:6px;margin-left:auto}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;white-space:nowrap;padding:8px 12px;border-radius:999px;font-weight:500;font-size:16px;color:var(--ink);transition:background-color .2s}
.lang summary::-webkit-details-marker{display:none}
.lang[open] summary{background:var(--cloud)}
@media (hover:hover) and (pointer:fine){.lang summary:hover{background:var(--cloud)}}
.lang__menu{position:absolute;right:0;top:calc(100% + 10px);min-width:170px;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-card);padding:8px;margin:0;list-style:none}
.lang__menu a{display:block;padding:9px 12px;border-radius:10px;font-size:15px;transition:background-color .2s}
@media (hover:hover) and (pointer:fine){.lang__menu a:hover{background:var(--cloud)}}
.theme-btn{width:40px;height:40px;border-radius:999px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:background-color .2s}
@media (hover:hover) and (pointer:fine){.theme-btn:hover{background:var(--cloud)}}
.theme-btn .ico-sun{display:none}
:root[data-theme="dark"] .theme-btn .ico-sun{display:block}
:root[data-theme="dark"] .theme-btn .ico-moon{display:none}
.menu-btn{display:none;width:40px;height:40px;border-radius:999px;border:0;background:transparent;cursor:pointer;place-items:center;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.menu-btn:hover{background:var(--cloud)}}
.mobile-menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 10px);background:var(--surface);border-radius:24px;box-shadow:var(--shadow-card);padding:10px;list-style:none;margin:0}
.mobile-menu.is-open{display:block}
.mobile-menu a{display:block;padding:12px 14px;border-radius:12px;font-weight:500;font-size:17px}
@media (hover:hover) and (pointer:fine){.mobile-menu a:hover{background:var(--cloud)}}
/* Bouton de menu sous 1 150 px : six liens tiennent sur la barre jusqu'à 1 140 px en français (le plus long),
   mesuré à l'étape 8 bis, langue par langue */
@media (max-width:1149px){
  .nav__links{display:none}
  .menu-btn{display:grid}
}
@media (max-width:600px){
  .nav__dl{display:none}
  .brand span{font-size:17px}
  .nav__right{gap:0}  /* à 390 px le bouton de menu débordait de 4 px la capsule */
}
/* Sous 386 px la capsule ne tient plus : le nom s'efface à l'œil, le logo reste, le lien garde son nom pour les lecteurs d'écran */
@media (max-width:385px){
  .nav .brand>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---------- Hero : champ arrondi Bevel + aurore Stripe ---------- */
.hero{padding:20px 16px 0}
.hero__field{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-field);
  background:linear-gradient(var(--sky),var(--warm));
  min-height:min(88vh,860px);
  padding:clamp(56px,8vw,104px) 20px 0;
  display:flex;flex-direction:column;
}
.hero__aurora{position:absolute;inset:-20%;z-index:-2;pointer-events:none}
.hero__aurora i{position:absolute;border-radius:50%;filter:blur(72px);opacity:.75;will-change:transform}
.hero__aurora .a1{width:46vw;height:46vw;min-width:320px;min-height:320px;left:-8%;top:-10%;background:var(--blob-blue);animation:drift1 26s ease-in-out infinite alternate}
.hero__aurora .a2{width:40vw;height:40vw;min-width:280px;min-height:280px;right:-6%;top:6%;background:var(--sky);animation:drift2 31s ease-in-out infinite alternate}
.hero__aurora .a3{width:36vw;height:36vw;min-width:260px;min-height:260px;left:30%;bottom:-16%;background:var(--blob-yellow);opacity:.6;animation:drift3 35s ease-in-out infinite alternate}
.hero__aurora .a4{width:22vw;height:22vw;min-width:180px;min-height:180px;right:22%;bottom:6%;background:var(--gold);opacity:.22;animation:drift1 41s ease-in-out infinite alternate-reverse}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(12%,10%) scale(1.15)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-14%,12%) scale(.95)}}
@keyframes drift3{from{transform:translate(0,0)}to{transform:translate(-10%,-14%) scale(1.1)}}
/* Budget de mouvement (a) sous 900 px : deux taches, flou 48 px (MOTION.md, mesure de la phase E) */
@media (max-width:900px){.hero__aurora i{filter:blur(48px)}.hero__aurora .a2,.hero__aurora .a4{display:none}}
.hero__grid{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:64px 64px;background-position:center top;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 72%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 72%);
}
.hero__copy{position:relative;text-align:center;max-width:900px;margin:0 auto}
.hero h1{font-size:clamp(42px,6.8vw,80px);line-height:1;margin:0 auto 24px;max-width:14ch}
.hero__lead{max-width:640px;margin:0 auto 32px}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.hero__avail{font-size:14px;color:var(--muted);margin:0}
.hero__device{position:relative;margin:clamp(44px,6vw,72px) auto -14%;width:min(330px,78vw)}
.hero__device .phone{box-shadow:var(--shadow-img),0 48px 90px -40px rgba(31,32,37,.5)}

/* Séquence d'arrivée : un seul moment orchestré, au chargement */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.reveal--device{transform:translateY(48px)}
.is-ready .reveal{opacity:1;transform:none}
.reveal:nth-child(1){transition-delay:.05s}
.reveal:nth-child(2){transition-delay:.16s}
.reveal:nth-child(3){transition-delay:.27s}
.reveal:nth-child(4){transition-delay:.36s}
.reveal--device{transition-delay:.42s}
/* Le titre et le téléphone du hero glissent sans fondu : visibles dès le premier rendu, ils comptent pour le LCP sans attendre l'arrivée (MOTION.md § 1) */
.hero h1.reveal,.hero .reveal--device{opacity:1;transition-property:transform}

/* ---------- Téléphone (cadre CSS, écrans simulés) ---------- */
.phone{position:relative;aspect-ratio:9/19.2;border-radius:46px;background:var(--phone-frame);padding:10px;box-shadow:var(--shadow-img)}
.phone::before{content:"";position:absolute;left:50%;top:20px;width:86px;height:24px;transform:translateX(-50%);background:#050a14;border-radius:999px;z-index:3}

/* Effet 3D : scène en perspective, inclinaison au pointeur (ordinateur) ou au défilement (mobile),
   flottement au repos, balancement au changement d'écran, reflet qui suit le pointeur */
.phone-stage{perspective:1400px;perspective-origin:50% 40%}
.phone{
  --rx:0deg;--ry:0deg;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transition:transform .9s var(--ease);
  will-change:transform;
}
.phone.is-floating{animation:float 8s ease-in-out infinite alternate}
.phone.is-entering{animation:enter 1.1s cubic-bezier(.2,.7,.2,1) both}
.phone.is-swapping{animation:swing .8s cubic-bezier(.2,.7,.2,1)}
.phone.is-tilting{animation:none !important;transition:transform .18s ease-out}
/* reflet qui balaie la vitre pendant le flottement */
.phone__screen::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);background-size:260% 100%;background-position:120% 0}
.phone.is-floating .phone__screen::after{animation:sheen 8s ease-in-out infinite alternate}
.phone__glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.28),rgba(255,255,255,0) 55%);
  opacity:0;transition:opacity .45s var(--ease);
}
.phone.is-tilting .phone__glare{opacity:1}
@keyframes float{
  0%{transform:rotateX(0) rotateY(0) translateY(0)}
  50%{transform:rotateX(3deg) rotateY(-9deg) translateY(-9px)}
  100%{transform:rotateX(-2deg) rotateY(9deg) translateY(-4px)}
}
@keyframes enter{0%{transform:rotateY(-24deg) rotateX(7deg) translateY(36px)}100%{transform:rotateY(0) rotateX(0) translateY(0)}}
@keyframes swing{0%{transform:rotateY(-16deg) rotateX(3deg)}100%{transform:rotateY(0) rotateX(0)}}
@keyframes sheen{from{background-position:120% 0}to{background-position:-20% 0}}
.phone__screen{position:relative;height:100%;border-radius:37px;background:var(--screen-bg);overflow:hidden}
/* Survol (ordinateur) : les pixels de l'écran se dissolvent en petits points et partent en fumée,
   puis l'écran se recompose quand la souris quitte le téléphone */
@property --dot{syntax:'<percentage>';inherits:false;initial-value:115%}
.screen{
  position:absolute;inset:0;overflow:hidden;
  opacity:0;transform:translateY(12px);
  --dot:115%;
  -webkit-mask-image:radial-gradient(circle,#000 var(--dot),transparent calc(var(--dot) + 8%));
  mask-image:radial-gradient(circle,#000 var(--dot),transparent calc(var(--dot) + 8%));
  -webkit-mask-size:7px 7px;mask-size:7px 7px;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1),--dot .75s ease,filter .75s ease,translate .75s ease;
  pointer-events:none;
}
.phone.is-smoking .screen{--dot:0%;filter:blur(1.5px);translate:0 -14px}
.phone__smoke{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);border-radius:37px;z-index:6;pointer-events:none}
.screen.is-active{opacity:1;transform:none;pointer-events:auto}
.screen img{width:100%;height:100%;object-fit:cover;display:block}


/* ---------- Vidéo (DESIGN.md, composant « video ») ----------
   Boucle muette : un <video> à la place de l'<img> d'un .screen, mêmes cadre, 3D et fumée.
   Façade : affiche et bouton de lecture ; l'iframe YouTube n'arrive qu'au clic (motion.js). */
.screen video{width:100%;height:100%;object-fit:cover;display:block}
.video-facade{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--cloud);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.video-facade img,.video-facade iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.video-facade__play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:999px;background:var(--gold);color:var(--navy-900);display:grid;place-items:center;box-shadow:var(--shadow-card)}
.video-facade__play svg{width:30px;height:30px;margin-left:4px}
@media (hover:hover) and (pointer:fine){
  .video-facade[href]:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
}

/* ---------- Déclaration centrée (Bevel : grands énoncés) ---------- */
.statement{text-align:center;max-width:820px;margin:0 auto}
.statement h2{margin-bottom:20px}
.statement .lead{max-width:720px;margin:0 auto 20px}
.statement .punch{font-size:clamp(20px,2.4vw,26px);font-weight:500;color:var(--ink);margin:0}

/* ---------- Icônes (assets/design/icones.svg, icone() dans includes/header.php) ----------
   Trait en currentColor : l'icône prend la couleur de son texte. Tailles de la
   planche : 26 px dans une tuile de 56, 22 px dans une tuile de 48 et dans un
   titre, 20 px pour une coche, 16 px pour une flèche ou un chevron. */
.ico{display:inline-block;flex:none;width:24px;height:24px;vertical-align:-.18em}
.pillar__icon .ico,.module__icon .ico{width:26px;height:26px}
.tile__icon .ico,h2>.ico,h3>.ico{width:22px;height:22px}
.compare__yes .ico,.plan__list .ico,.notice .ico{width:20px;height:20px}
.compare .ico{vertical-align:middle}
.compare td>.ico{color:var(--muted)}
/* Texte gardé pour les lecteurs d'écran et le relevé de contenu, caché à l'œil */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.more .ico,.back .ico,.lang summary .ico,.btn .ico,strong>.ico{width:16px;height:16px}

/* ---------- Trois piliers : texte qui défile, téléphone qui reste (Stripe) ---------- */
.pillars-intro{text-align:center;max-width:720px;margin:0 auto}
.pillars-intro .lead{margin-top:16px}
.showcase{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,88px);align-items:start;margin-top:clamp(24px,4vw,40px)}
.pillars{display:flex;flex-direction:column}
.pillar{padding:clamp(40px,6vw,72px) 0;min-height:68vh;display:flex;flex-direction:column;justify-content:center}
/* Pilier lu : un filet or à gauche de son texte (mouvement 4) ; les autres gardent tout leur contraste */
.pillar__body{position:relative}
.pillar__body::before{content:"";position:absolute;left:-16px;top:0;bottom:0;width:3px;border-radius:3px;background:var(--rule);opacity:0;transition:opacity .45s var(--ease)}
.pillars.has-active .pillar.is-active .pillar__body::before{opacity:1}
.pillar__icon{width:56px;height:56px;border-radius:16px;background:var(--cloud);display:grid;place-items:center;font-size:26px;margin-bottom:20px}
.pillar h2,.pillar h3{margin-bottom:12px}
.pillar h2{font-size:clamp(28px,3.2vw,40px);line-height:1}  /* atouts de loisir.php : h2 sous le h1, à la taille des piliers */
.pillar__body>p{color:var(--muted);margin:0 0 22px;font-size:19px}
.checks--fiches strong{display:block;color:var(--ink);font-weight:600}  /* manager.php : nom de la fonctionnalité, puis sa description */
.checks{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:11px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.4;color:var(--ink)}
.checks svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--accent)}
.more{font-weight:500;color:var(--ink);position:relative;display:inline-block;padding-bottom:2px}
.more::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
@media (hover:hover) and (pointer:fine){.more:hover::after{transform:scaleX(1)}}
[data-count]{display:inline-block;min-width:5.4ch;font-variant-numeric:tabular-nums;text-align:left}
.sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 88px)}
.device-field{background:var(--cloud);border-radius:var(--r-field);padding:32px 24px;overflow:visible;display:flex;justify-content:center}
.device-field .phone{width:min(280px,60vw)}
.pillar__inline{display:none}
.all-features{text-align:center;margin-top:clamp(24px,4vw,40px)}
@media (max-width:900px){
  .showcase{grid-template-columns:1fr;gap:0}
  .sticky{display:none}
  .pillar{min-height:0;padding:clamp(32px,6vw,56px) 0}
  .pillar__body::before{display:none}
  .pillar__inline{display:block;margin:4px 0 0}
  .pillar__inline .device-field{padding:28px 16px}
  .pillar__inline .phone{width:min(250px,66vw)}
}

/* ---------- Gabarit fonctionnalité (performance, competition, loisir, fonctionnalites) ----------
   Hero court sans aurore ni grille, sections en alternance texte / visuel, listes à coches.
   Les captures au format tablette (mock-*) se posent dans un .device-field, sans cadre de téléphone. */
.hero--short .hero__field{min-height:0;padding-bottom:clamp(48px,7vw,88px)}
/* v2 (D6) : texte à gauche, téléphone flottant à droite qui déborde du champ ; en dessous sous 900 px */
.hero--feature .hero__field{min-height:0;padding:clamp(48px,7vw,88px) clamp(20px,5vw,64px) 0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero--feature .hero__copy{text-align:left;margin:0;max-width:none;padding-bottom:clamp(48px,7vw,88px)}
.hero--feature h1{margin-left:0;max-width:none;font-size:clamp(38px,4.8vw,62px)}
.hero--feature .hero__lead{margin-left:0}
.hero--feature .search{margin-left:0}
.hero--feature .hero__device{margin:0 auto -16%;width:min(300px,70vw);align-self:end}
@media (max-width:900px){
  .hero--feature .hero__field{grid-template-columns:minmax(0,1fr)}
  .hero--feature .hero__copy{text-align:center;padding-bottom:0}
  .hero--feature h1,.hero--feature .hero__lead,.hero--feature .search{margin-left:auto;margin-right:auto}
  .hero--feature .hero__device{margin-top:8px}
}
.hero__aurora--lite .a1{opacity:.375}
.hero__aurora--lite .a3{opacity:.3}
.hero--short h1{max-width:22ch}
.eyebrow{display:inline-block;margin:0 0 16px;padding:6px 14px;border-radius:999px;background:var(--cloud);color:var(--accent);font-size:15px;font-weight:500;line-height:1.4}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.feature--media-left .feature__media{order:-1}
.feature__text>p:not(.eyebrow){color:var(--muted);margin:0 0 22px;font-size:19px}
.checks strong{font-weight:600}
.shot{display:block;width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow-img)}
.statement + .device-field{margin-top:clamp(28px,4vw,44px)}
.feature__text h2,.block-title{font-size:clamp(30px,3.6vw,48px);line-height:1.05;margin-bottom:16px}
/* Tuiles : icône, titre, texte — un filet au-dessus, jamais une surface de carte */
.tiles{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:24px 28px}
.tile{border-top:1px solid var(--hairline);padding-top:18px}
.tile__icon{width:48px;height:48px;border-radius:14px;background:var(--cloud);display:grid;place-items:center;font-size:22px;margin-bottom:14px}
.tile h2,.tile h3{font-size:20px;line-height:1.25;letter-spacing:-.01em;margin-bottom:6px}
.tile p{margin:0;color:var(--muted);font-size:17px}
/* Les onze formules de competition.php (design/maquette-formules.html) : tuiles compactes sur --cloud,
   icône dans une pastille --surface, deux colonnes dans la colonne de texte */
.pastille{display:inline-block;margin:0 0 18px;padding:5px 11px;border-radius:999px;background:var(--gold);color:var(--gold-fg);font-size:13px;font-weight:600;line-height:1.4}
.formules{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.formule{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:20px;background:var(--cloud)}
.formule__icon{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--surface);color:var(--accent)}
.formule__icon .ico{width:24px;height:24px}
.formule h3{font-size:17px;line-height:1.25;letter-spacing:-.01em;margin:0}
.formule p{margin:3px 0 0;font-size:14px;color:var(--muted)}
@media (max-width:600px){.formule{flex-direction:column;gap:10px;padding:14px}.formule h3{font-size:15px}.formule p{font-size:13px}}
/* Offres résumées d'une page fonctionnalité : deux paliers sur --cloud, une pastille or au plus */
.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px;max-width:860px;margin:clamp(28px,4vw,44px) auto 0;text-align:left}
.offer{position:relative;background:var(--cloud);border-radius:var(--r-card);padding:30px 28px 28px}
.offer h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:8px}
.offer p:not(.offer__value){margin:0;color:var(--muted);font-size:17px}
.offer__value{font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--ink);margin:20px 0 6px}
.offer__badge{position:absolute;top:-13px;left:28px;background:var(--gold);color:var(--gold-fg);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:600;line-height:1.4}
.offers + .all-features{margin-top:clamp(28px,4vw,40px)}
/* Liste de fonctionnalités : un filet d'accent à gauche, jamais une carte (loisir, fonctionnalites) */
.fitems{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.fitems--grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:28px 36px}
.fitem{border-left:2px solid var(--accent);padding-left:16px}
.fitem h3,.fitem h4{font-size:19px;line-height:1.3;letter-spacing:-.01em;margin:0 0 4px}
.fitem p{margin:0;color:var(--muted);font-size:16px}
.fitem .fitem__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;margin-bottom:8px}
.fitem__badge{background:var(--cloud);color:var(--accent);border-radius:999px;padding:2px 10px;font-weight:500}
.fitem .fitem__status{font-size:14px;margin-top:8px}
/* Page fonctionnalites : recherche, univers en pastilles collantes, captures qui s'agrandissent */
.search{display:block;width:100%;max-width:560px;height:52px;margin:0 auto;padding:0 22px;border-radius:999px;border:1px solid var(--hairline);background:var(--surface);color:var(--ink);font:inherit;font-size:17px}
.search::placeholder{color:var(--muted)}
.chips{position:sticky;top:calc(env(safe-area-inset-top,0px) + 78px);z-index:40;margin-top:clamp(24px,4vw,40px);background:var(--paper)}
.chips__list{display:flex;gap:8px;overflow-x:auto;max-width:var(--max);margin:0 auto;padding:10px 20px;scrollbar-width:none}
.chips__list a{flex:none;padding:8px 14px;border-radius:999px;background:var(--cloud);color:var(--ink);font-size:15px;font-weight:500;white-space:nowrap;transition:background-color .2s}
@media (hover:hover) and (pointer:fine){.chips__list a:hover{background:var(--accent-soft)}}
@media (min-width:1024px){.chips__list{justify-content:center}}
.univers{scroll-margin-top:150px}
.shots{display:flex;gap:16px;justify-content:center;align-items:flex-start;padding:4px 4px 12px}  /* sans overflow : la 3D des téléphones déborde librement de la rangée */
.shots figure{margin:0;flex:0 1 clamp(120px,13vw,160px);min-width:0}  /* rétrécissent plutôt que de déborder : pas de zone qui défile hors clavier */
.shots figure:nth-child(even){margin-top:32px}
.shots picture{display:block;height:100%}
.shots .capture{cursor:zoom-in}
/* Petit téléphone des vignettes : rayons, encoche et marges à l'échelle d'un cadre de 110 à 150 px */
.phone--mini{border-radius:22px;padding:5px}
.phone--mini::before{top:9px;width:34px;height:10px}
.phone--mini .phone__screen{border-radius:18px}
.phone--mini .phone__smoke{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:18px}
.shots figcaption{hyphens:auto;margin-top:8px;text-align:center;font-size:14px;color:var(--muted)}
.more-list{margin-top:clamp(28px,4vw,40px);background:var(--cloud);border-radius:var(--r-card)}
.more-list summary{cursor:pointer;padding:16px 24px;font-weight:500;color:var(--accent)}
.more-list .fitems{padding:4px 24px 24px}
.no-result{text-align:center;padding:64px 20px}
.loupe{padding:0;border:0;background:transparent;max-width:95vw;max-height:95vh}
.loupe img{display:block;max-height:95vh;width:auto;border-radius:24px}
.loupe::backdrop{background:color-mix(in srgb,var(--navy-900) 88%,transparent)}
@media (max-width:900px){
  .feature{grid-template-columns:1fr}
  .feature--media-left .feature__media{order:0}
  .feature__media .shot{max-width:440px}
}

/* ---------- Offres ---------- */
.pricing{text-align:center}
.pricing h2{margin-bottom:20px}
.pricing__intro{max-width:780px;margin:0 auto 24px}
.pricing__intro strong{color:var(--ink);font-weight:600}
.module{
  max-width:860px;margin:clamp(36px,5vw,56px) auto 0;
  background:var(--cloud);border-radius:var(--r-card);padding:32px;
  text-align:left;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
}
.module__icon{width:56px;height:56px;border-radius:16px;background:var(--surface);display:grid;place-items:center;font-size:26px}
.module h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:10px}
.module p{color:var(--muted);margin:0 0 18px;font-size:18px}
.module__meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:15px;color:var(--ink);font-weight:500}
.module__meta span{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border-radius:999px;padding:6px 12px}
.module__meta small{font-size:15px;font-weight:500;color:var(--muted);width:100%}
@media (max-width:600px){.module{grid-template-columns:1fr;padding:24px}}

/* ---------- Gabarit tarifs (tarifs.php) ----------
   Trois paliers sur --cloud, le recommandé sur --surface élevé. Seules cartes cliquables du site :
   le bouton s'étend à toute la carte (::after), qui s'élève au survol. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--cloud);border-radius:var(--r-card);padding:34px 28px 28px;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.plan--featured{background:var(--surface);box-shadow:var(--shadow-card)}
.plan h2{font-size:24px;line-height:1.2;letter-spacing:-.01em;margin-bottom:8px}
.plan__price{font-size:clamp(34px,3.6vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--ink);margin:0 0 14px}
.plan__price span{font-size:17px;font-weight:500;letter-spacing:0;color:var(--muted)}
.plan__text{color:var(--muted);margin:0 0 20px;flex-grow:1}
.plan__list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px;font-size:17px;line-height:1.4}
.plan__list li{display:flex;gap:10px;align-items:flex-start}
.plan__list .ico{color:var(--accent);margin-top:2px}
.plan__badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--gold-fg);border-radius:999px;padding:5px 14px;font-size:14px;font-weight:600;line-height:1.4;white-space:nowrap}
.plan .btn{width:100%}
.plan .btn::after{content:"";position:absolute;inset:0;border-radius:var(--r-card)}
@media (hover:hover) and (pointer:fine){.plan .btn:hover{transform:none;box-shadow:none}}
@media (hover:hover) and (pointer:fine){.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}}
@media (max-width:900px){.plans{grid-template-columns:1fr;max-width:480px;margin:0 auto;gap:32px}}
/* Tableau comparatif : défile dans son propre conteneur, jamais la page */
.table-wrap{position:relative;overflow-x:auto;border-radius:var(--r-card);background:var(--cloud)}
.compare{width:100%;min-width:600px;border-collapse:collapse;font-size:16px;line-height:1.4}
.compare th,.compare td{padding:14px 18px;text-align:center;border-bottom:1px solid var(--hairline)}
.compare th:first-child,.compare td:first-child{text-align:left;width:34%}
.compare thead th{font-size:15px;font-weight:600;color:var(--ink)}
.compare tbody td{color:var(--muted)}
.compare tbody td:first-child{color:var(--ink);font-weight:500}
.compare tbody tr:last-child td{border-bottom:0}
.compare__yes{color:var(--accent);font-weight:600}
.note{text-align:center;font-size:15px;color:var(--muted);margin:16px 0 0}
.module h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:10px}
.module .btn{margin-top:4px}

/* ---------- Gabarit documentation (docs.php, genese.php, securite.php ; légal sans sommaire) ----------
   Colonne de lecture de 68 ch, sommaire collant à droite au-delà de 1024 px, au-dessus en deçà.
   La feuille de docs.php garde ses styles en ligne (copie vers Google Docs) : on l'habille autour. */
.doc-head{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,72px) 20px 0}
.doc-head h1{font-size:clamp(34px,4.6vw,56px);line-height:1.05}
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:var(--max);margin:clamp(28px,4vw,40px) auto 0;padding:0 20px}
.toc{background:var(--cloud);border-radius:var(--r-card);padding:22px 24px}
.toc h2{font-size:15px;font-weight:600;letter-spacing:0;line-height:1.4;margin:0 0 10px}
.toc nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:0 24px}
.toc a{display:flex;gap:8px;padding:5px 0;color:var(--muted);font-size:15px;line-height:1.35;transition:color .2s}
@media (hover:hover) and (pointer:fine){.toc a:hover{color:var(--ink)}}
.toc a span{color:var(--accent)}
@media (max-width:1023px){.toc nav{max-height:320px;overflow-y:auto}}  /* 71 entrées : le sommaire défile seul, la feuille reste proche */
.doc-sheet{justify-self:center;width:100%;max-width:calc(68ch + 144px);background:var(--sheet);color:var(--sheet-ink);border-radius:var(--r-card);padding:clamp(24px,6vw,72px);box-shadow:var(--shadow-img);line-height:1.6;overflow-wrap:break-word}
.doc-sheet img{display:inline-block;max-width:100%;aspect-ratio:600/1303}  /* les captures n'ont qu'une largeur : sans ce rapport, leur chargement décale les ancres */
/* Captures de la feuille dans un cadre de téléphone, à l'écran seulement et sans effet : la copie vers
   Google Docs reprend le style en ligne (filet de 1 px, rayon 8 px). Chrome copie aussi les styles calculés :
   le cadre est retiré pendant la copie (.is-copying, docs.php), vérifiée inchangée (tools/copie_docs.js).
   !important parce que le style en ligne fixe le filet et le rayon pour la copie. */
.doc-sheet:not(.is-copying) p>img{box-sizing:content-box;max-width:calc(100% - 16px);border:8px solid var(--phone-frame) !important;border-radius:30px !important;box-shadow:var(--shadow-img);background:var(--phone-frame)}
.doc-head .btn{white-space:normal;text-align:center}
/* Titres-liens de la feuille vers tutoriel.php : couleur du titre (style en ligne, gardé pour la copie),
   soulignés au survol, focus marine — l'--accent du thème sombre ne se verrait pas sur la feuille blanche.
   !important seulement parce que le style en ligne fixe text-decoration:none pour Google Docs. */
@media (hover:hover) and (pointer:fine){.doc-sheet h1 a:hover{text-decoration:underline !important;text-underline-offset:6px;text-decoration-thickness:3px}}
.doc-sheet a:focus-visible{outline-color:var(--navy-500)}
@media (min-width:1024px){
  .doc-layout{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
  .toc{grid-column:2;grid-row:1;position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);max-height:calc(100vh - 120px);overflow-y:auto}
  .toc nav{grid-template-columns:1fr}
  .doc-sheet{grid-column:1;grid-row:1}
}

/* Colonne de lecture (genese.php, securite.php ; puis les pages légales) : 68 ch, h2 à 34 px, sans sommaire */
.prose{max-width:68ch;margin:0 auto;padding:clamp(40px,6vw,72px) 20px 0}
.prose h1{font-size:clamp(34px,4.6vw,56px);line-height:1.05;margin:0 0 16px}
.prose > .lead{margin:0}
.prose h2{font-size:clamp(28px,4vw,34px);line-height:1.15;margin:clamp(40px,6vw,64px) 0 16px}
.prose h3{font-size:21px;line-height:1.3;letter-spacing:-.01em;margin:32px 0 10px}
.prose p{margin:0 0 18px}
.prose strong{font-weight:600;color:var(--ink)}
.prose a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{margin:28px 0;padding:22px 26px;background:var(--cloud);border-left:4px solid var(--accent);border-radius:0 var(--r-card) var(--r-card) 0}
.prose blockquote p{margin:0;font-size:clamp(20px,2.2vw,24px);font-weight:500;font-style:italic;color:var(--ink)}
.prose .device-field{margin:28px 0}
.prose .tiles{margin:40px 0 0}
.prose .tile h2{font-size:20px;line-height:1.25;letter-spacing:-.01em;margin:0 0 6px}  /* une tuile garde sa taille dans la colonne de lecture */
.prose .punch{font-weight:600;color:var(--ink)}
.prose__cta{margin-top:40px;padding-top:40px;border-top:1px solid var(--hairline);text-align:center}
.prose .eyebrow{margin-bottom:14px}

/* Pages légales (cgu, mentions-legales, confidentialite) : colonne de lecture sans sommaire,
   encadrés sur --cloud, grilles d'encadrés, tableau de données dans son conteneur */
.prose__small{font-size:15px;color:var(--muted)}
.prose__note{font-style:italic}
.prose__box{background:var(--cloud);border-radius:var(--r-card);padding:24px 26px;margin:28px 0}
.prose__box > :first-child,.prose__box > div > :first-child{margin-top:0}
.prose__box > :last-child,.prose__box > div > :last-child{margin-bottom:0}
.prose__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:16px;margin:28px 0}
.prose__grid .prose__box{margin:0}
.prose__box .tile__icon{background:var(--surface)}
.prose__box h2,.prose__box h3{margin-top:0}
.prose__grid h2{font-size:22px;line-height:1.25;letter-spacing:-.01em;margin-bottom:10px}
.prose__label{font-weight:600;color:var(--ink)}
.prose ul{padding-left:1.2em;margin:0 0 18px}
.prose li{margin:0 0 8px}
.prose .table-wrap{margin:28px 0}
.data-table{width:100%;min-width:36rem;border-collapse:collapse;font-size:16px;line-height:1.45}
.data-table th,.data-table td{padding:12px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--hairline)}
.data-table thead th{font-size:14px;font-weight:600;color:var(--ink);border-top:0}
.data-table td{color:var(--muted)}
.data-table td:first-child{color:var(--ink);font-weight:500}

/* ---------- Tutoriels (tutoriel.php, gabarit documentation) ----------
   Liste : liens sur --cloud, fond qui s'éclaire au survol (pas d'élévation, réservée aux tarifs).
   Tutoriel : étapes numérotées, astuce, capture collante à droite au-delà de 900 px. */
.page-head{max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,72px) 20px 0}
.page-head h1{font-size:clamp(34px,4.6vw,56px);line-height:1.05;margin:12px 0 14px}
.page-head .lead{max-width:68ch;margin:0}
.back{color:var(--muted);font-size:16px;font-weight:500;transition:color .2s}
.back+.back{margin-left:24px}
@media (hover:hover) and (pointer:fine){.back:hover{color:var(--ink)}}
.link-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px}
.link-card{display:block;height:100%;background:var(--cloud);border-radius:var(--r-card);padding:20px 22px;transition:background-color .2s}
@media (hover:hover) and (pointer:fine){.link-card:hover{background:var(--accent-soft)}}
.link-card h2{font-size:19px;line-height:1.3;letter-spacing:-.01em;margin:0}
.link-card p{margin:8px 0 0;color:var(--muted);font-size:16px}
.tuto{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.step{display:flex;gap:18px;background:var(--cloud);border-radius:var(--r-card);padding:22px 24px}
.step__num{flex:none;width:40px;height:40px;border-radius:999px;background:var(--surface);color:var(--accent);display:grid;place-items:center;font-weight:600;font-variant-numeric:tabular-nums}
.step h2{font-size:20px;line-height:1.3;letter-spacing:-.01em;margin:0 0 6px}
.step p{margin:0;color:var(--muted)}
.step--tip{display:block;background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:0 var(--r-card) var(--r-card) 0}
.step--tip p{color:var(--ink)}
.step--tip strong{color:var(--accent)}
.tuto__shot{justify-self:center;width:min(320px,70vw)}
.tuto__shot picture{display:block;height:100%}
@media (min-width:900px){
  .tuto--with-shot{grid-template-columns:minmax(0,1fr) 320px}
  .tuto__shot{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px)}
}

/* ---------- Gabarit contact (contact.php) ----------
   Formulaire sur --surface, champs de 48 px, focus en --accent ; texte (support, FAQ) en colonne de lecture. */
.contact{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,56px);align-items:start}
@media (min-width:1024px){.contact{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.form-card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:clamp(24px,4vw,40px)}
.form-card h2,.contact__aside h2{font-size:clamp(24px,2.6vw,30px);line-height:1.15;margin-bottom:20px}
.form{display:grid;gap:20px}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:20px}
.field label{display:block;font-size:15px;font-weight:500;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{display:block;width:100%;min-height:48px;padding:11px 16px;border-radius:14px;border:1px solid var(--hairline);background:var(--paper);color:var(--ink);font:inherit;font-size:17px;line-height:1.4;transition:border-color .2s}
.field textarea{resize:vertical;min-height:144px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form .btn{width:100%;min-height:52px}
.notice{border-radius:16px;padding:16px 20px;margin-bottom:20px;background:var(--accent-soft);border-left:4px solid var(--accent);color:var(--ink)}
.notice p{margin:0}
.notice p:first-child{font-weight:600}
.notice p + p{margin-top:4px;font-size:16px}
.notice a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.notice--error{background:color-mix(in srgb,var(--danger) 10%,var(--cloud));border-left-color:var(--danger)}
.contact__aside{max-width:68ch}
.contact__direct{background:var(--cloud);border-radius:var(--r-card);padding:24px 26px;margin-bottom:clamp(32px,5vw,48px)}
.contact__direct h2{font-size:21px;margin-bottom:8px}
.contact__direct p{margin:0 0 12px;color:var(--muted)}
.contact__mail{font-size:19px;font-weight:600;color:var(--accent);overflow-wrap:anywhere}
.faq{display:grid}
.faq > div{padding:18px 0;border-bottom:1px solid var(--hairline)}
.faq > div:first-child{padding-top:0}
.faq > div:last-child{border-bottom:0}
.faq h3{font-size:19px;line-height:1.3;letter-spacing:-.01em;margin:0 0 6px}
.faq p{margin:0;color:var(--muted);font-size:17px}

/* ---------- Bandeau final (bloc charbon Bevel, lueur unique) ---------- */
.cta{padding:var(--gap) 16px 0}
.cta__band{position:relative;overflow:hidden;background:var(--band);color:#fff;border-radius:var(--r-field);padding:clamp(64px,9vw,112px) 24px;text-align:center;isolation:isolate}
.cta__band::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-45%;height:80%;background:radial-gradient(closest-side,var(--glow),transparent 72%);filter:blur(28px);z-index:-1;pointer-events:none}
.cta h2{color:#fff;margin-bottom:16px}
.cta p{color:rgba(255,255,255,.72);font-size:clamp(18px,2vw,21px);margin:0 auto 32px;max-width:560px}

/* ---------- Pied de page ---------- */
.footer{padding:var(--gap) 20px 32px}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;max-width:var(--max);margin:0 auto}
.footer .brand{margin-bottom:14px}
.footer__desc{color:var(--muted);font-size:16px;max-width:380px;margin:0}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.store{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;border:1px solid rgba(31,32,37,.14);font-weight:500;font-size:15px;background:var(--surface);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .25s}
@media (hover:hover) and (pointer:fine){.store:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:transparent}}
/* Badges officiels (includes/config_site.php) : l'image porte son propre cadre, 40 px de haut */
.store--badge{padding:0;border:0;background:none;border-radius:8px}
.store--badge img{height:40px;width:auto}
.store__sombre,:root[data-theme="dark"] .store__clair{display:none}
:root[data-theme="dark"] .store__sombre{display:block}
/* Titres de colonne : des h2 pour l'ordre des titres, à la taille d'une légende */
.footer__title{font-size:15px;font-weight:600;line-height:1.4;letter-spacing:0;margin:0 0 14px;color:var(--ink)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer ul a{color:var(--muted);font-size:16px;transition:color .2s}
@media (hover:hover) and (pointer:fine){.footer ul a:hover{color:var(--ink)}}
.footer__langs{display:flex;gap:6px 18px;flex-wrap:wrap;max-width:var(--max);margin:44px auto 20px;font-size:14px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.footer__langs a:hover{color:var(--ink)}}
.footer__bottom{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;border-top:1px solid var(--hairline);padding-top:20px;font-size:14px;color:var(--muted);max-width:var(--max);margin:0 auto}
.footer__legal{display:flex;gap:18px;flex-wrap:wrap}
@media (hover:hover) and (pointer:fine){.footer__legal a:hover{color:var(--ink)}}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr 1fr}.footer__grid>div:first-child{grid-column:1/-1}}

/* ---------- Mouvement réduit : tout s'affiche, rien ne bouge ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  /* le fondu entre deux pages aussi : ses pseudo-éléments échappent à * */
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}