/* Gator · v242 · Écran d’ouverture : choisir Ali Gator (clair) ou Ari Gator (sombre), séparés en diagonale.
   Retour arrière : retirer gator-v242.js et gator-v242.css d’index.html. */
.gtr{position:fixed;inset:0;z-index:2147483300;overflow:hidden;isolation:isolate;
  font-family:"Hellix",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
  background:#f6f7f4;opacity:1;transition:opacity .38s ease}
.gtr.is-demo{position:absolute;z-index:1;border-radius:inherit}
dialog.gtr{max-width:none;max-height:none;width:100%;height:100%;margin:0;padding:0;border:0;color:inherit;outline:none}
html:root body:not(#gtr-x):not(#gtr-y) dialog.gtr[open]{animation:none!important;transform:none!important}
html:root body:not(#gtr-x):not(#gtr-y) dialog.gtr::backdrop{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;animation:none!important}
html:root body:not(#gtr-x) .gtr .gtr-side,html:root body:not(#gtr-x) .gtr .gtr-side:is(:focus,:focus-visible,:hover,:active){box-shadow:none!important;outline:none!important;transform:none!important;filter:none!important}
.gtr.is-out{opacity:0;pointer-events:none}
.gtr *{box-sizing:border-box}
.gtr-side{position:absolute;inset:0;margin:0;padding:0;border:0;width:100%;height:100%;cursor:pointer;-webkit-tap-highlight-color:transparent;
  font:inherit;text-align:center;outline:none;appearance:none;-webkit-appearance:none}
.gtr-ali{background:#f6f7f4;color:#1f3a2a}
.gtr-ari{background:#080908;color:#f3efe6;clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%);
  transition:clip-path .95s cubic-bezier(.7,0,.18,1)}
.gtr.is-pre .gtr-ari{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}
.gtr.hover-ali .gtr-ari{clip-path:polygon(63% 0,100% 0,100% 100%,47% 100%);transition-duration:.6s}
.gtr.hover-ari .gtr-ari{clip-path:polygon(53% 0,100% 0,100% 100%,37% 100%);transition-duration:.6s}
.gtr.pick-ali .gtr-ari{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%)}
.gtr.pick-ari .gtr-ari{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}

/* Cartes des deux apps */
.gtr-card{position:absolute;top:50%;width:46%;display:flex;flex-direction:column;align-items:center;gap:6px;
  transform:translateY(-50%);transition:transform .6s cubic-bezier(.22,.8,.24,1),opacity .45s ease}
.gtr-ali .gtr-card{left:2%}
.gtr-ari .gtr-card{right:2%}
.gtr-card img{display:block;width:min(30vh,240px);aspect-ratio:1;height:auto;margin-bottom:6px;user-select:none;-webkit-user-drag:none;
  transition:transform .6s cubic-bezier(.22,.8,.24,1)}
.gtr.is-demo .gtr-card img{width:min(34%,190px)}
.gtr-card strong{font-size:clamp(22px,3.2vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.gtr-card small{font-size:clamp(12px,1.25vw,15px);font-weight:500;opacity:.66;letter-spacing:.02em}
.gtr-card em{margin-top:14px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-style:normal;font-size:14px;font-weight:600;
  transition:background-color .3s ease,color .3s ease,transform .3s ease,box-shadow .3s ease}
.gtr-card em::after{content:'→';transition:transform .3s ease}
.gtr-ali .gtr-card em{background:rgba(31,58,42,.08);color:#1f3a2a}
.gtr-ari .gtr-card em{background:rgba(243,239,230,.1);color:#f3efe6}
.gtr.hover-ali .gtr-ali .gtr-card img,.gtr.hover-ari .gtr-ari .gtr-card img{transform:scale(1.045) rotate(-1.5deg)}
.gtr.hover-ali .gtr-ali .gtr-card em{background:#24493a;color:#f4fbe9;box-shadow:0 12px 24px -14px rgba(23,68,47,.8)}
.gtr.hover-ari .gtr-ari .gtr-card em{background:#f3efe6;color:#0b0d0b;box-shadow:0 12px 26px -14px rgba(243,239,230,.55)}
.gtr.hover-ali .gtr-ali .gtr-card em::after,.gtr.hover-ari .gtr-ari .gtr-card em::after{transform:translateX(3px)}
.gtr-side:focus-visible .gtr-card em{outline:2px solid #8cbf5c;outline-offset:3px}
.gtr.pick-ali .gtr-ari .gtr-card,.gtr.pick-ari .gtr-ali .gtr-card{opacity:0}
.gtr.pick-ali .gtr-ali .gtr-card{transform:translate(52%,-50%) scale(1.04)}
.gtr.pick-ari .gtr-ari .gtr-card{transform:translate(-52%,-50%) scale(1.04)}

/* Marque « Gator » au sommet de la diagonale (le texte s’inverse d’un côté à l’autre) */
.gtr-brand{position:absolute;top:26px;left:0;right:0;margin:0 auto;width:max-content;display:flex;align-items:center;gap:10px;pointer-events:none}
.gtr-brand>*{transition:opacity .45s ease,transform .6s cubic-bezier(.22,.8,.24,1)}
.gtr-brand b{transition-delay:.06s}
.gtr-brand img{width:40px;height:40px;border-radius:11px;box-shadow:0 8px 20px -10px rgba(0,0,0,.45)}
.gtr-brand b{font-size:19px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;mix-blend-mode:difference}
.gtr.pick-ali .gtr-brand>*,.gtr.pick-ari .gtr-brand>*{opacity:0;transform:translateY(-6px)}
.gtr-hint{position:absolute;z-index:3;bottom:22px;left:50%;transform:translateX(-50%);font-size:12.5px;font-weight:500;letter-spacing:.04em;color:#fff;
  mix-blend-mode:difference;opacity:.55;pointer-events:none;white-space:nowrap;transition:opacity .4s ease}
.gtr.pick-ali .gtr-hint,.gtr.pick-ari .gtr-hint{opacity:0}

/* Entrée en douceur */
.gtr.is-pre .gtr-card,.gtr.is-pre .gtr-brand>*,.gtr.is-pre .gtr-hint{opacity:0}
.gtr.is-pre .gtr-ali .gtr-card{transform:translate(-14px,-50%)}
.gtr.is-pre .gtr-ari .gtr-card{transform:translate(14px,-50%)}
.gtr.is-pre .gtr-brand>*{transform:translateY(-8px)}
.gtr-ari .gtr-card{transition-delay:.12s}

/* Portrait (téléphone) : Ali en haut, Ari en bas, coupe en diagonale */
.gtr.is-portrait .gtr-ari{clip-path:polygon(0 57%,100% 45%,100% 100%,0 100%)}
.gtr.is-portrait.is-pre .gtr-ari,.gtr.is-portrait.pick-ali .gtr-ari{clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%)}
.gtr.is-portrait.hover-ali .gtr-ari{clip-path:polygon(0 60%,100% 48%,100% 100%,0 100%)}
.gtr.is-portrait.hover-ari .gtr-ari{clip-path:polygon(0 54%,100% 42%,100% 100%,0 100%)}
.gtr.is-portrait.pick-ari .gtr-ari{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.gtr.is-portrait .gtr-card{left:0;right:0;width:100%;gap:4px;transform:none}
.gtr.is-portrait .gtr-ali .gtr-card{top:13%}
.gtr.is-portrait .gtr-ari .gtr-card{top:auto;bottom:8%}
.gtr.is-portrait .gtr-card img{width:min(20vh,150px)}
.gtr.is-portrait.is-demo .gtr-card img{width:34%}
.gtr.is-portrait .gtr-card strong{font-size:26px}
.gtr.is-portrait .gtr-card em{margin-top:8px;height:36px;font-size:13px}
.gtr.is-portrait.is-pre .gtr-ali .gtr-card{transform:translateY(-12px)}
.gtr.is-portrait.is-pre .gtr-ari .gtr-card{transform:translateY(12px)}
.gtr.is-portrait.pick-ali .gtr-ali .gtr-card{transform:translateY(22%) scale(1.04)}
.gtr.is-portrait.pick-ari .gtr-ari .gtr-card{transform:translateY(-30%) scale(1.04)}
.gtr.is-portrait .gtr-brand{top:auto;bottom:calc(50% - 20px);left:auto;right:16px;margin:0}
.gtr.is-portrait .gtr-brand b{font-size:15px}
.gtr.is-portrait .gtr-brand img{width:34px;height:34px;border-radius:9px}
.gtr.is-portrait .gtr-hint{display:none}

@media (prefers-reduced-motion:reduce){
  .gtr,.gtr *{transition-duration:.01s!important;transition-delay:0s!important}
}