/* ============================================================
   Cintra, le site. Même DA que l'extension, en deux matières :
   - jour (par défaut) : « argent poli », le métal liquide en plein jour sous
     un voile blanc, cartes en verre blanc, titres en chrome noir poli, action
     principale en graphite au liseré aqua ;
   - nuit : la DA du site d'accompagnement (graphite profond, verre fumé,
     chrome argent et aqua).
   js/theme.js pose data-theme="dark" sur <html> avant le premier affichage
   quand le visiteur a choisi la nuit ; la clé est celle de l'extension, donc
   la démo (même site) suit le même choix.

   Fluidité : aucune carte n'a de flou d'arrière-plan (il se recalculait à
   chaque image du fond animé) ; seule la barre du haut en a un, sur ordinateur.
   cintra.css ajoute les blocs propres à Cintra (tarifs, compte, démo…).
   ============================================================ */

@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --ang2 { syntax: '<angle>'; initial-value: 180deg; inherits: false; }

/* --- Jour : argent poli -------------------------------------------------- */
:root {
  --fond-page: #eef2f4;
  --halos: radial-gradient(60% 50% at 12% 6%, rgba(255, 255, 255, .9), transparent 60%), radial-gradient(50% 45% at 92% 18%, rgba(57, 213, 255, .1), transparent 60%), radial-gradient(60% 50% at 20% 100%, rgba(94, 242, 214, .1), transparent 60%);
  /* Voile plus léger que dans l'extension (le texte du site est posé sur le
     fond, pas dans des cartes) : clair au centre pour la lecture, le métal
     se voit sur les bords. */
  --voile: radial-gradient(ellipse 62% 48% at 50% 30%, rgba(255, 255, 255, .62), rgba(255, 255, 255, .08) 74%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .3) 75%, rgba(255, 255, 255, .5));

  --txt: #071114;
  --fort: #071114;
  --mute: #2b3a3f;
  --faible: #4b5b60;
  --lien: #087a6c;
  --aqua: #0b9c8a;
  --erreur: #c42c4e;

  --ligne: rgba(12, 30, 36, .1);
  --ligne-forte: rgba(12, 30, 36, .18);
  --carte-fond: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .8));
  --carte-ombre: inset 0 1px 0 #fff, 0 0 0 1px var(--ligne), 0 1px 2px rgba(6, 20, 23, .05), 0 18px 40px -18px rgba(10, 34, 40, .3);
  --carte-ombre-survol: inset 0 1px 0 #fff, 0 0 0 1px var(--ligne-forte), 0 2px 6px rgba(6, 20, 23, .06), 0 30px 60px -20px rgba(10, 34, 40, .36);
  --projecteur: rgba(94, 242, 214, .14);
  --projecteur-bord: rgba(11, 156, 138, .55);
  --verre: rgba(255, 255, 255, .78);
  --creux: rgba(12, 30, 36, .045);
  --champ: #ffffff;
  --barre-haut: rgba(255, 255, 255, .72);

  --chrome: linear-gradient(180deg, #ffffff 0%, #eaf4f6 18%, #a9bcc2 42%, #f6fcfd 52%, #7c9097 68%, #d9e6e9 86%, #ffffff 100%);
  --chrome-titre: linear-gradient(180deg, #33454a 0%, #0c171a 40%, #5f7479 51%, #0f1b1e 60%, #020607 100%);
  --chrome-aqua: linear-gradient(180deg, #13a493 0%, #0a7770 40%, #34cdb9 51%, #087a71 60%, #034a46 100%);
  --aqua-bombe: linear-gradient(180deg, #8ff7e4 0%, #2fd6bf 55%, #13a59a 100%);
  --reflet: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .2) 54%, transparent 62%);
  --titre-ombre: none;
  --titre-aqua-ombre: none;
  --pastille-ombre: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(0, 0, 0, .18), 0 0 0 1px rgba(12, 30, 36, .12);

  --btn-fond: linear-gradient(180deg, #33444a 0%, #141f23 46%, #070d0f 54%, #172529 100%);
  --btn-texte: #f2fffc;
  --btn-ombre: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(94, 242, 214, .65), 0 14px 30px -12px rgba(4, 14, 17, .6), 0 0 0 1px rgba(4, 12, 14, .85);
  --btn-ombre-survol: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -2px 0 rgba(94, 242, 214, .85), 0 18px 36px -12px rgba(4, 14, 17, .65), 0 0 0 1px rgba(4, 12, 14, .9);
  --btn-reflet: rgba(255, 255, 255, .26);
  --btn-verre-fond: rgba(255, 255, 255, .92);
  --btn-verre-ombre: inset 0 1px 0 #fff, 0 1px 2px rgba(6, 20, 23, .08), 0 0 0 1px var(--ligne-forte);
  --comete-1: rgba(11, 156, 138, .95);
  --comete-2: rgba(30, 159, 208, .9);
  --comete-tete: #0b9c8a;

  --encre: #021614;
  --selection: rgba(94, 242, 214, .4);
  --selection-txt: #071114;
  --rideau: rgba(6, 20, 23, .42);

  --titre: 'Unbounded', 'Inter', sans-serif;
  --corps: 'Inter', system-ui, -apple-system, sans-serif;
  --rayon: 22px;
  --marge: 20px;
  color-scheme: light;
}

/* --- Nuit : graphite, verre fumé, chrome argent et aqua ------------------- */
:root[data-theme="dark"] {
  --fond-page: #020507;
  --halos: radial-gradient(60% 50% at 20% 20%, rgba(94, 242, 214, .14), transparent 60%), radial-gradient(50% 45% at 85% 30%, rgba(57, 213, 255, .1), transparent 60%);
  --voile: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(2, 5, 7, .55), transparent 70%), linear-gradient(180deg, rgba(2, 5, 7, .25), rgba(2, 5, 7, .55) 70%, rgba(2, 5, 7, .8));

  --txt: #eef6f7;
  --fort: #ffffff;
  --mute: rgba(214, 232, 235, .7);
  --faible: rgba(214, 232, 235, .5);
  --lien: #5ef2d6;
  --aqua: #5ef2d6;
  --erreur: #ff8f85;

  --ligne: rgba(190, 235, 240, .13);
  --ligne-forte: rgba(190, 235, 240, .26);
  --carte-fond: linear-gradient(180deg, rgba(17, 33, 37, .8), rgba(8, 18, 21, .74));
  --carte-ombre: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px var(--ligne), 0 20px 50px rgba(0, 0, 0, .35);
  --carte-ombre-survol: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px var(--ligne-forte), 0 30px 70px rgba(0, 0, 0, .45);
  --projecteur: rgba(94, 242, 214, .16);
  --projecteur-bord: rgba(220, 255, 250, .9);
  --verre: rgba(12, 26, 30, .7);
  --creux: rgba(2, 8, 10, .55);
  --champ: rgba(2, 8, 10, .6);
  --barre-haut: rgba(3, 9, 11, .9);

  --chrome-titre: var(--chrome);
  --chrome-aqua: linear-gradient(180deg, #f2fffc 0%, #b6fbee 22%, #3fd9c1 46%, #e4fffa 54%, #1aa6b0 72%, #9bf2ff 100%);
  --aqua-bombe: var(--chrome-aqua);
  --titre-ombre: drop-shadow(0 2px 14px rgba(0, 0, 0, .55));
  --titre-aqua-ombre: drop-shadow(0 0 22px rgba(94, 242, 214, .28));
  --pastille-ombre: inset 0 1px 0 #fff, inset 0 -2px 5px rgba(0, 0, 0, .3), 0 0 22px rgba(94, 242, 214, .18);

  --btn-fond: linear-gradient(180deg, #c9fff4 0%, #6ff3dc 30%, #22c9b4 70%, #129aa0 100%);
  --btn-texte: #021614;
  --btn-ombre: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -3px 6px rgba(0, 60, 60, .35), 0 10px 34px rgba(30, 220, 195, .32), 0 0 0 1px rgba(255, 255, 255, .25);
  --btn-ombre-survol: inset 0 1px 0 #fff, inset 0 -3px 6px rgba(0, 60, 60, .35), 0 16px 46px rgba(30, 220, 195, .45), 0 0 0 1px rgba(255, 255, 255, .35);
  --btn-reflet: rgba(255, 255, 255, .85);
  --btn-verre-fond: rgba(12, 26, 30, .7);
  --btn-verre-ombre: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px var(--ligne-forte);
  --comete-1: rgba(94, 242, 214, .7);
  --comete-2: rgba(57, 213, 255, .7);
  --comete-tete: #ffffff;

  --selection: rgba(94, 242, 214, .35);
  --selection-txt: #ffffff;
  --rideau: rgba(2, 5, 7, .82);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 66px; -webkit-text-size-adjust: 100%; background: var(--fond-page); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--halos), var(--fond-page);
  color: var(--txt);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lien); }
button { font: inherit; }
::selection { background: var(--selection); color: var(--selection-txt); }

/* ---------- Fond ---------- */
/* 100lvh : hauteur fixe même quand la barre d'adresse du téléphone se replie */
#fond { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; display: block; z-index: 0; opacity: 0; transition: opacity 1.4s ease; }
.webgl-pret #fond { opacity: 1; }
.voile { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 1; pointer-events: none; background: var(--voile); }
main, header, footer { position: relative; z-index: 3; }

/* ---------- Typo ---------- */
.wrap { width: min(1120px, 100% - 2 * var(--marge)); margin-inline: auto; }
h1, h2, h3 { font-family: var(--titre); margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(29px, 3.9vw, 56px); line-height: 1.06; font-weight: 800; }
h2 { font-size: clamp(25px, 3.4vw, 42px); line-height: 1.1; font-weight: 700; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: 0; }
.chrome, .chrome-aqua {
  background-image: var(--reflet), var(--chrome-titre);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: reflet 5.5s cubic-bezier(.6, 0, .3, 1) infinite;
}
.chrome-aqua { background-image: var(--reflet), var(--chrome-aqua); }
@keyframes reflet { 0%, 35% { background-position: 160% 0, 0 0; } 75%, 100% { background-position: -60% 0, 0 0; } }
.etiquette {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--titre); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--verre);
}
.mute { color: var(--mute); }
.centre { text-align: center; }
.intro { color: var(--mute); font-size: clamp(16px, 1.6vw, 18.5px); max-width: 660px; }
.centre .intro, .intro.centre { margin-inline: auto; }

/* ---------- Haut de page ---------- */
.top { position: sticky; top: 0; z-index: 10; transition: background .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.top.colle { background: var(--barre-haut); border-bottom-color: var(--ligne); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--titre); font-weight: 700; font-size: 16px; color: var(--txt); letter-spacing: .02em; }
.logo-v { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--chrome); color: #0b1416; font-family: var(--titre); font-weight: 900; font-size: 17px; box-shadow: var(--pastille-ombre); }

/* ---------- Boutons ---------- */
.btn {
  --h: 58px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 30px; border-radius: 16px; border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--titre); font-weight: 700; font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--btn-texte); background: var(--btn-fond); box-shadow: var(--btn-ombre);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, filter .25s ease;
  overflow: hidden; white-space: nowrap; touch-action: manipulation;
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, var(--btn-reflet) 50%, transparent 65%);
  transform: translateX(-120%); animation: balaye 3.6s ease-in-out infinite;
}
@keyframes balaye { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
.btn:disabled { cursor: wait; filter: saturate(.6); }
/* Les deux comètes de lumière qui tournent autour du bouton */
.comete { position: relative; border-radius: 18px; padding: 2px; display: inline-flex; }
.comete::before, .comete::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0deg 300deg, var(--comete-1) 318deg, var(--comete-tete) 330deg, var(--comete-1) 342deg, transparent 356deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: tourne 3.2s linear infinite;
}
.comete::after { background: conic-gradient(from var(--ang2), transparent 0deg 300deg, var(--comete-2) 318deg, var(--comete-tete) 330deg, var(--comete-2) 342deg, transparent 356deg); animation-name: tourne2; }
@keyframes tourne { to { --ang: 360deg; } }
@keyframes tourne2 { to { --ang2: 540deg; } }
.btn.verre { color: var(--txt); background: var(--btn-verre-fond); box-shadow: var(--btn-verre-ombre); }
.btn.verre::after { opacity: .25; }
.btn.petit { --h: 44px; padding: 0 18px; font-size: 12px; border-radius: 12px; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Héros ---------- */
.heros { padding: clamp(36px, 7vw, 86px) 0 40px; }
.heros h1 .ligne { display: block; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Sections ----------
   Règle de lecture : quand le titre d'une section est en haut de l'écran
   (lien du menu ou défilement), tout son contenu tient dessous. Les marges
   restent donc mesurées, et un lien de menu cache presque toute la marge du
   haut sous la barre (scroll-margin négatif). */
section.bloc { padding: 76px 0; scroll-margin-top: -48px; }
section.bloc-serre { padding-top: 0; }
.entete { margin-bottom: 26px; }
.entete .etiquette { margin-bottom: 12px; }
.entete h2 + p { margin-top: 12px; }
.entete .intro { font-size: 16.5px; }

/* Cartes : verre opaque (pas de flou), projecteur qui suit la souris sur ordinateur */
.carte {
  position: relative; isolation: isolate; border-radius: var(--rayon); padding: 26px;
  background: var(--carte-fond); box-shadow: var(--carte-ombre);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
  overflow: hidden;
}
.carte::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(420px circle at var(--x, 50%) var(--y, 50%), var(--projecteur), transparent 55%);
}
.carte::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(300px circle at var(--x, 50%) var(--y, 50%), var(--projecteur-bord), rgba(94, 242, 214, .3) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Étapes */
.etapes { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.etape { z-index: 1; }
.etape .num { font-family: var(--titre); font-size: 46px; font-weight: 800; line-height: 1; margin-bottom: 14px; display: inline-block; }
.etape p { color: var(--mute); margin: 8px 0 0; }

/* Avantages : pastille et titre sur une ligne, texte dessous */
.avantages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.avantage { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 22px; }
.avantage .ico-av { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--chrome); color: #0b1416; box-shadow: var(--pastille-ombre); }
.avantage .ico-av svg { width: 21px; height: 21px; }
.avantage h3 { font-size: 17.5px; line-height: 1.25; }
.avantage p { grid-column: 1 / -1; color: var(--mute); margin: 12px 0 0; font-size: 15px; line-height: 1.55; }

/* FAQ */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 12px; }
.q-faq { border-radius: 18px; background: var(--carte-fond); box-shadow: var(--carte-ombre); transition: box-shadow .3s ease; }
.q-faq.ouvert { box-shadow: var(--carte-ombre), inset 0 0 0 1px rgba(94, 242, 214, .45); }
.q-faq button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; background: none; border: 0; color: var(--txt); font: 600 16.5px var(--corps); text-align: left; cursor: pointer; touch-action: manipulation; }
.q-faq .chevron { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--chrome); color: #0b1416; box-shadow: var(--pastille-ombre); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.q-faq.ouvert .chevron { transform: rotate(180deg); background: var(--aqua-bombe); }
.q-faq .chevron svg { width: 16px; height: 16px; }
.reponse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1); }
.q-faq.ouvert .reponse { grid-template-rows: 1fr; }
.reponse > div { overflow: hidden; }
.reponse p { margin: 0; padding: 0 22px 20px; color: var(--mute); }

.erreur { color: var(--erreur); font-size: 14px; min-height: 22px; margin: 10px 0 0; }

/* ---------- Pied de page ---------- */
footer { border-top: 1px solid var(--ligne); padding: 34px 0 44px; color: var(--faible); font-size: 14px; background: linear-gradient(180deg, transparent, var(--verre)); }
footer .wrap { display: flex; gap: 16px 28px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
footer nav { display: flex; gap: 12px 20px; flex-wrap: wrap; }
footer a { color: var(--mute); text-decoration: none; }

/* ---------- Apparitions ----------
   Courtes et toutes ensemble : une section apparaît d'un bloc dès que son
   haut entre dans l'écran (app.js), le contenu est là quand on lit le titre. */
[data-r] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 50ms); }
[data-r="zoom"] { transform: scale(.98); }
[data-r].vu { opacity: 1; transform: none; }

/* ---------- Ordinateur (souris) : survols, barre du haut en verre, ombres des titres ---------- */
@media (hover: hover) and (pointer: fine) {
  .chrome { filter: var(--titre-ombre); }
  .chrome-aqua { filter: var(--titre-aqua-ombre); }
  .top.colle { -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
  :root[data-theme="dark"] .top.colle { background: rgba(3, 9, 11, .62); }
  .btn:hover { filter: brightness(1.07); box-shadow: var(--btn-ombre-survol); }
  .btn.verre:hover { box-shadow: var(--btn-verre-ombre), inset 0 0 0 1px rgba(94, 242, 214, .5); }
  .carte:hover::before, .carte:hover::after { opacity: 1; }
  .carte:hover { box-shadow: var(--carte-ombre-survol); }
  footer a:hover { color: var(--fort); }
}

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 960px) {
  .etapes, .avantages { grid-template-columns: 1fr; }
}

/* Ordinateur à écran bas (portable avec barre de favoris, 1366 × 768…) : on
   resserre pour que chaque titre garde tout son contenu dans l'écran. */
@media (min-width: 961px) and (max-height: 820px) {
  section.bloc { padding: 58px 0; scroll-margin-top: -42px; }
  .entete .etiquette { display: none; }
  h2 { font-size: clamp(25px, 2.6vw, 36px); }
  .entete { margin-bottom: 22px; }
  .entete h2 + p { margin-top: 8px; }
}

@media (max-width: 640px) {
  :root { --marge: 16px; --rayon: 20px; }
  section.bloc { padding: 52px 0; scroll-margin-top: -36px; }
  section.bloc-serre { padding-top: 0; }
  .heros { padding: 26px 0 34px; }
  .heros h1 { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.1; margin: 16px 0 16px; }
  .entete { margin-bottom: 28px; }
  .intro { font-size: 15.5px; }
  .carte { padding: 20px; }

  /* Étapes et avantages en lignes compactes : icône à gauche, texte à droite */
  .etapes { gap: 12px; }
  .etape { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: start; padding: 20px 18px; }
  .etape .num { grid-row: span 2; font-size: 34px; margin: 2px 0 0; }
  .etape h3 { font-size: 17px; }
  .etape p { font-size: 15px; margin-top: 6px; }
  .avantages { gap: 10px; }
  .avantage { grid-template-columns: 40px 1fr; padding: 16px; }
  .avantage .ico-av { width: 40px; height: 40px; border-radius: 12px; }
  .avantage .ico-av svg { width: 19px; height: 19px; }
  .avantage h3 { font-size: 16px; }
  .avantage p { font-size: 14.5px; margin-top: 10px; }

  .q-faq button { padding: 17px 16px; font-size: 15.5px; }
  .q-faq .chevron { width: 30px; height: 30px; }
  .reponse p { padding: 0 16px 18px; font-size: 15px; }

  .btn { padding: 0 22px; font-size: 13px; }
  .actions .btn, .actions .comete { width: 100%; }
  .actions .comete .btn { width: 100%; }
  .top .wrap { height: 60px; }
}

@media (max-width: 360px) {
  :root { --marge: 14px; }
  .btn { --h: 54px; padding: 0 14px; font-size: 12px; letter-spacing: .03em; gap: 8px; }
  .heros h1 { font-size: 25px; }
  .logo { font-size: 14.5px; }
}

/* Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-r] { opacity: 1 !important; transform: none !important; filter: none !important; }
}