/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: var(--font-aether), -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}
  /* HARMONISATION DES ÉCRITURES — une seule famille partout. Les champs et
     les boutons héritent de la police du site (les navigateurs leur en
     imposent une par défaut), les titres partagent graisse et chasse. */
  input,
  select,
  textarea,
  button {
    font-family: inherit;
    letter-spacing: inherit;
  }
  h1,
  h2,
  h3,
  h4 {
    font-weight: var(--graisse-titre);
    letter-spacing: var(--pas-titre);
  }
  label {
    font-weight: var(--graisse-label);
  }
  /* Les nombres s'alignent en colonne (durées, compteurs, prix). */
  time,
  .tabular {
    font-variant-numeric: tabular-nums;
  }
/* Carte : surface nette, filet fin, ombre douce. Elle ne bouge pas au
     survol — un formulaire qui sautille n'inspire pas confiance. */
.card {
  position: relative;
  border-radius: 1.5rem;
}
.atelier-apercu-scene > .card {
  display: grid;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
}
.card {
    background: var(--surface);
    border: 1px solid rgb(var(--edge));
    box-shadow:
      0 1px 2px var(--ombre-fine),
      0 16px 40px -28px var(--ombre-douce);
  }
/* BANDES — les sections de page, à la manière d'apple.com.
     Chaque section est un rectangle PLEINE LARGEUR, bord à bord, sans filet
     ni arrondi ; les bandes se suivent COLLÉES, sans laisser voir le fond de
     la page entre elles (il cassait l'harmonie) : c'est l'alternance des
     fonds (clair, puis crème) qui sépare les sections ; `.bande-sombre` en
     fait une bande nuit, quel que soit le thème. Collées aussi à la barre du
     haut (-mt-8) et au pied de page (-mb-16 : les marges de `<main>`).

     La largeur visible (`--largeur-page`) est mesurée par components/Shell :
     avec le panneau des réglages ouvert, la page rétrécit, et 100vw ferait
     passer les bandes dessous (et compterait la barre de défilement). */
.bandes {
  margin-bottom: -4rem;
  margin-top: -2rem;
  display: flex;
  flex-direction: column;
}
.bande {
    width: var(--largeur-page, 100%);
    margin-left: calc(50% - var(--largeur-page, 100%) / 2);
    background: rgb(var(--ink-900));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
@media (min-width: 640px) {

  .bande {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
.bandes > .bande:nth-child(even of .bande) {
    background: rgb(var(--ink-800));
  }
/* Contenu d'une bande : la largeur de lecture de la page. */
.bande-interieur {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 72rem;
}
.bande-surtitre {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--accent-400) / var(--tw-text-opacity));
}
@media (min-width: 640px) {

  .bande-surtitre {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
.bande-titre {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.08;
}
@media (min-width: 640px) {

  .bande-titre {
    font-size: 3rem;
    line-height: 1;
  }
}
@media (min-width: 1024px) {

  .bande-titre {
    font-size: 3.5rem;
  }
}
.bande-titre {
    letter-spacing: -0.03em;
  }
.bande-soustitre {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.75rem;
  max-width: 48rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(var(--slate-400) / var(--tw-text-opacity));
}
@media (min-width: 640px) {

  .bande-soustitre {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
/* Les deux liens d'une bande : « En savoir plus › », « Essayer › ». */
.bande-liens {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  row-gap: 0.75rem;
}
.lien-fleche {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--accent-400) / var(--tw-text-opacity));
}
.lien-fleche:hover {
  text-decoration-line: underline;
}
@media (min-width: 640px) {

  .lien-fleche {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
/* Bande à photo : l'image couvre un côté de la bande, sur TOUTE sa
     hauteur, et se fond dans son fond (masque en dégradé) ; le texte occupe
     l'autre colonne, dans une rangée de hauteur fixe. Quand la bande s'ouvre
     au survol, elle s'allonge vers le bas : le texte ne bouge pas, et la
     photo (portrait, calée sur la largeur) se découvre plus bas au lieu de
     grossir. Sur téléphone, la photo passe au-dessus du texte et se fond
     vers le bas. */
.bande-photo-image {
  margin-bottom: 2rem;
  display: block;
  height: 20rem;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 25%;
     object-position: 50% 25%;
}
@media (min-width: 640px) {

  .bande-photo-image {
    height: 24rem;
  }
}
.bande-photo-image {
    /* Sans ça, le masque se répète : un pixel de sa partie opaque
       réapparaissait au bord de l'image, en fin trait vertical. */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    /* Hors marges : la photo touche les bords de la bande. `max-width` :
       la règle de base des images (100 %) la gardait dans les marges. */
    max-width: none;
    width: calc(100% + 2rem);
    margin-inline: -1rem;
    margin-top: -3.5rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
  }
@media (min-width: 640px) {
    .bande-photo-image {
      width: calc(100% + 3rem);
      margin-inline: -1.5rem;
      margin-top: -5rem;
    }
  }
@media (min-width: 768px) {
    .bande-photo-image {
      position: absolute;
      inset: 0 auto 0 0;
      width: 54%;
      height: 100%;
      margin: 0;
      -o-object-position: 50% 22%;
         object-position: 50% 22%;
      /* Fondu long et progressif (plusieurs paliers, pas une rampe droite) :
         la photo se dissout dans la bande au lieu de s'y arrêter. */
      -webkit-mask-image:
        linear-gradient(to right, #000 18%, rgb(0 0 0 / 0.62) 48%, rgb(0 0 0 / 0.22) 70%, transparent 90%),
        linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(to right, #000 18%, rgb(0 0 0 / 0.62) 48%, rgb(0 0 0 / 0.22) 70%, transparent 90%),
        linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
      -webkit-mask-composite: source-in, xor;
              mask-composite: intersect;
      /* Le bord fondu est transparent, mais le navigateur y peint un liseré
         d'un pixel (bord de la couche masquée) : on le rogne. */
      clip-path: inset(0 3px 0 0);
    }
  }
/* Photo à droite : même chose en miroir, fondue vers la gauche. Moitié de
     la bande et fondu court (le quart gauche seulement) : le sujet d'une
     photo placée à droite regarde vers le texte, donc vers la gauche — un
     fondu large lui effaçait le visage. */
@media (min-width: 768px) {
    .bande-photo-droite .bande-photo-image {
      inset: 0 0 0 auto;
      width: 50%;
      -webkit-mask-image:
        linear-gradient(to left, #000 50%, rgb(0 0 0 / 0.6) 76%, rgb(0 0 0 / 0.2) 92%, transparent 100%),
        linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
      mask-image:
        linear-gradient(to left, #000 50%, rgb(0 0 0 / 0.6) 76%, rgb(0 0 0 / 0.2) 92%, transparent 100%),
        linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
      clip-path: inset(0 0 0 3px);
    }
  }
/* Fondu court, photo à gauche : moitié de la bande, seul le dernier quart
     se fond — le sujet (ici l'écran) reste net. */
@media (min-width: 768px) {
    .bande-photo-court:not(.bande-photo-droite) .bande-photo-image {
      width: 50%;
      -webkit-mask-image:
        linear-gradient(to right, #000 28%, rgb(0 0 0 / 0.55) 56%, rgb(0 0 0 / 0.16) 78%, transparent 94%),
        linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
      mask-image:
        linear-gradient(to right, #000 28%, rgb(0 0 0 / 0.55) 56%, rgb(0 0 0 / 0.16) 78%, transparent 94%),
        linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    }
  }
/* Tuiles : la grille de rectangles sous les grandes bandes, bord à bord
     et collées entre elles, comme les bandes. */
.tuiles {
    width: var(--largeur-page, 100%);
    margin-left: calc(50% - var(--largeur-page, 100%) / 2);
    display: grid;
  }
@media (min-width: 768px) {

  .tuiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.tuile {
    background: rgb(var(--ink-800));
    display: flex;
    min-height: 22rem;
    flex-direction: column;
    align-items: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 2.5rem;
    padding-top: 3rem;
    text-align: center;
  }
@media (min-width: 640px) {

  .tuile {
    min-height: 26rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
.tuiles > .tuile:nth-child(4n + 2),
  .tuiles > .tuile:nth-child(4n + 3) {
    background: rgb(var(--ink-900));
  }
@media (max-width: 767px) {
    .tuiles > .tuile:nth-child(even) {
      background: rgb(var(--ink-900));
    }
    .tuiles > .tuile:nth-child(odd) {
      background: rgb(var(--ink-800));
    }
  }
/* Bande (ou tuile) de nuit : les couleurs du thème sombre, redéfinies sur
     place — le texte et les cartes posés dedans suivent sans rien changer. */
.bande-sombre {
    --ink-950: 18 15 25;
    --ink-900: 27 23 37;
    --ink-800: 36 31 48;
    --slate-100: 244 241 250;
    --slate-200: 226 221 236;
    --slate-300: 198 191 214;
    --slate-400: 170 162 186;
    --slate-500: 152 144 168;
    --accent-400: 181 124 245;
    --edge: 48 42 62;
    --edge-strong: 70 62 88;
    --voile: 255 255 255;
    /* Déjà résolue à la racine (couleur claire) : sans la redéfinir ici, les
       cartes resteraient blanches, sous un texte devenu clair. */
    --surface: rgb(var(--ink-900));
    --ombre-fine: rgba(0, 0, 0, 0.5);
    --ombre-douce: rgba(0, 0, 0, 0.6);
    color: rgb(var(--slate-100));
    background:
      radial-gradient(70% 90% at 50% 110%, rgb(148 64 237 / 0.35), transparent 70%),
      rgb(14 11 20) !important;
  }
/* Bouton secondaire : pastille neutre, sans bordure. */
.glass {
    color: rgb(var(--slate-100));
    background: rgb(var(--voile) / 0.06);
    border: 1px solid transparent;
    transition:
      background 0.2s ease,
      color 0.2s ease;
  }
.glass:hover {
    background: rgb(var(--voile) / 0.11);
  }
/* Bouton principal : verre TEINTÉ violet. L'arête éclairée, le reflet qui
     suit le pointeur et la lentille de pression sont décrits plus bas. */
.glass-primary {
  position: relative;
}
.atelier-apercu-scene > .glass-primary {
  display: grid;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
}
.glass-primary {
    color: var(--sur-violet);
    background: var(--violet);
    border: 1px solid var(--violet);
  }
.glass-primary:hover {
    background: var(--violet-fonce);
    border-color: var(--violet-fonce);
  }
.glass-primary:active {
    background: var(--violet-sombre);
  }
.glass-primary:disabled {
    background: var(--violet);
    transform: none;
    opacity: 0.5;
  }
/* La nuit, le violet foncé du survol s'enfoncerait dans le fond : on
     éclaircit au lieu d'assombrir. */
:root[data-theme="dark"] .glass-primary:hover {
    background: rgb(var(--brand-400));
    border-color: rgb(var(--brand-400));
  }
:root[data-theme="dark"] .glass-primary:active {
    background: rgb(var(--brand-500));
  }
/* Mot mis en avant : l'accent, sans dégradé. */
.text-gradient {
    color: rgb(var(--accent-400));
  }
/* ÉCHELLE TYPOGRAPHIQUE — à utiliser au lieu de « font-display text-xx ».
     Titre de page, titre de section, titre de carte, chapeau, mention. */
.t-section {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
@media (min-width: 640px) {

  .t-section {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}
.t-section {
    font-weight: var(--graisse-titre);
    letter-spacing: var(--pas-titre);
  }
.t-card {
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.375;
    font-weight: var(--graisse-titre);
    letter-spacing: -0.02em;
}
.t-lead {
    /* En rem et non en px : la taille du texte réglée dans l'accessibilité
       doit agrandir le chapeau comme le reste. */
    font-size: 0.9375rem;
    line-height: 1.625;
    --tw-text-opacity: 1;
    color: rgb(var(--slate-400) / var(--tw-text-opacity));
  }
.t-meta {
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(var(--slate-500) / var(--tw-text-opacity));
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-3 {
  inset: 0.75rem;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-x-2 {
  left: 0.5rem;
  right: 0.5rem;
}
.inset-x-2\.5 {
  left: 0.625rem;
  right: 0.625rem;
}
.inset-x-3 {
  left: 0.75rem;
  right: 0.75rem;
}
.inset-x-4 {
  left: 1rem;
  right: 1rem;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.inset-y-\[-6px\] {
  top: -6px;
  bottom: -6px;
}
.inset-y-1 {
  top: 0.25rem;
  bottom: 0.25rem;
}
.-top-3 {
  top: -0.75rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1\.5 {
  bottom: 0.375rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-2\.5 {
  bottom: 0.625rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-\[18\%\] {
  bottom: 18%;
}
.bottom-\[22\%\] {
  bottom: 22%;
}
.bottom-\[9px\] {
  bottom: 9px;
}
.left-0 {
  left: 0px;
}
.left-0\.5 {
  left: 0.125rem;
}
.left-1 {
  left: 0.25rem;
}
.left-1\.5 {
  left: 0.375rem;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-6 {
  left: 1.5rem;
}
.left-\[1\.125rem\] {
  left: 1.125rem;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-2 {
  right: 0.5rem;
}
.right-3\.5 {
  right: 0.875rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1 {
  top: 0.25rem;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-\[38\%\] {
  top: 38%;
}
.right-1 {
  right: 0.25rem;
}
.isolate {
  isolation: isolate;
}
.-z-10 {
  z-index: -10;
}
.z-10 {
  z-index: 10;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[45\] {
  z-index: 45;
}
.z-\[90\] {
  z-index: 90;
}
.\!mx-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}
.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.\!mt-0 {
  margin-top: 0px !important;
}
.-mt-0\.5 {
  margin-top: -0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.hidden {
  display: none;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-\[9\/16\] {
  aspect-ratio: 9/16;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-44 {
  height: 11rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-52 {
  height: 13rem;
}
.h-56 {
  height: 14rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-96 {
  height: 24rem;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-40 {
  height: 10rem;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.min-h-\[7rem\] {
  min-height: 7rem;
}
.min-h-screen {
  min-height: 100vh;
}
.w-0\.5 {
  width: 0.125rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.\!max-w-md {
  max-width: 28rem !important;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[10ch\] {
  max-width: 10ch;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[1\.34\] {
  --tw-scale-x: 1.34;
  --tw-scale-y: 1.34;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes caption {

  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }

  60% {
    transform: translateY(0) scale(1.05);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.animate-caption {
  animation: caption 0.38s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes fade-up {

  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-up {
  animation: fade-up 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes page-in {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.animate-page-in {
  animation: page-in 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.scroll-mt-\[calc\(var\(--hauteur-barre\2c 64px\)\+1\.5rem\)\] {
  scroll-margin-top: calc(var(--hauteur-barre,64px) + 1.5rem);
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.\!items-stretch {
  align-items: stretch !important;
}
.\!justify-start {
  justify-content: flex-start !important;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-\[3px\] {
  gap: 3px;
}
.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.gap-y-6 {
  row-gap: 1.5rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-edge > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--edge) / var(--tw-divide-opacity));
}
.self-end {
  align-self: flex-end;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[1\.6rem\] {
  border-radius: 1.6rem;
}
.rounded-\[2rem\] {
  border-radius: 2rem;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-accent-400 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-400) / var(--tw-border-opacity));
}
.border-accent-400\/30 {
  border-color: rgb(var(--accent-400) / 0.3);
}
.border-accent-400\/40 {
  border-color: rgb(var(--accent-400) / 0.4);
}
.border-accent-500\/40 {
  border-color: rgb(var(--accent-500) / 0.4);
}
.border-brand-200 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--brand-200) / var(--tw-border-opacity));
}
.border-brand-400\/50 {
  border-color: rgb(var(--brand-400) / 0.5);
}
.border-brand-500 {
  --tw-border-opacity: 1;
  border-color: rgb(var(--brand-500) / var(--tw-border-opacity));
}
.border-brand-500\/40 {
  border-color: rgb(var(--brand-500) / 0.4);
}
.border-edge {
  --tw-border-opacity: 1;
  border-color: rgb(var(--edge) / var(--tw-border-opacity));
}
.border-edge\/50 {
  border-color: rgb(var(--edge) / 0.5);
}
.border-edge\/70 {
  border-color: rgb(var(--edge) / 0.7);
}
.border-emerald-600\/30 {
  border-color: rgb(5 150 105 / 0.3);
}
.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}
.border-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}
.border-white\/80 {
  border-color: rgb(255 255 255 / 0.8);
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.bg-accent-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-400) / var(--tw-bg-opacity));
}
.bg-accent-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-500) / var(--tw-bg-opacity));
}
.bg-accent-500\/10 {
  background-color: rgb(var(--accent-500) / 0.1);
}
.bg-accent-500\/15 {
  background-color: rgb(var(--accent-500) / 0.15);
}
.bg-accent-500\/20 {
  background-color: rgb(var(--accent-500) / 0.2);
}
.bg-accent-500\/80 {
  background-color: rgb(var(--accent-500) / 0.8);
}
.bg-accent-500\/85 {
  background-color: rgb(var(--accent-500) / 0.85);
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-black\/15 {
  background-color: rgb(0 0 0 / 0.15);
}
.bg-black\/35 {
  background-color: rgb(0 0 0 / 0.35);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-brand-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-100) / var(--tw-bg-opacity));
}
.bg-brand-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-300) / var(--tw-bg-opacity));
}
.bg-brand-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-50) / var(--tw-bg-opacity));
}
.bg-brand-50\/50 {
  background-color: rgb(var(--brand-50) / 0.5);
}
.bg-brand-50\/70 {
  background-color: rgb(var(--brand-50) / 0.7);
}
.bg-brand-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--brand-500) / var(--tw-bg-opacity));
}
.bg-brand-500\/25 {
  background-color: rgb(var(--brand-500) / 0.25);
}
.bg-edge {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--edge) / var(--tw-bg-opacity));
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
}
.bg-emerald-500\/80 {
  background-color: rgb(16 185 129 / 0.8);
}
.bg-emerald-500\/85 {
  background-color: rgb(16 185 129 / 0.85);
}
.bg-emerald-600\/10 {
  background-color: rgb(5 150 105 / 0.1);
}
.bg-ink-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ink-600) / var(--tw-bg-opacity));
}
.bg-ink-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ink-800) / var(--tw-bg-opacity));
}
.bg-ink-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ink-900) / var(--tw-bg-opacity));
}
.bg-ink-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ink-950) / var(--tw-bg-opacity));
}
.bg-ink-950\/60 {
  background-color: rgb(var(--ink-950) / 0.6);
}
.bg-ink-950\/80 {
  background-color: rgb(var(--ink-950) / 0.8);
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}
.bg-slate-500\/50 {
  background-color: rgb(var(--slate-500) / 0.5);
}
.bg-slate-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--slate-600) / var(--tw-bg-opacity));
}
.bg-transparent {
  background-color: transparent;
}
.bg-voile\/45 {
  background-color: rgb(var(--voile) / 0.45);
}
.bg-voile\/\[0\.03\] {
  background-color: rgb(var(--voile) / 0.03);
}
.bg-voile\/\[0\.06\] {
  background-color: rgb(var(--voile) / 0.06);
}
.bg-voile\/\[0\.07\] {
  background-color: rgb(var(--voile) / 0.07);
}
.bg-voile\/\[0\.08\] {
  background-color: rgb(var(--voile) / 0.08);
}
.bg-voile\/\[0\.15\] {
  background-color: rgb(var(--voile) / 0.15);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-white\/25 {
  background-color: rgb(255 255 255 / 0.25);
}
.bg-white\/30 {
  background-color: rgb(255 255 255 / 0.3);
}
.bg-lime-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(132 204 22 / var(--tw-bg-opacity));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-accent-500\/5 {
  background-color: rgb(var(--accent-500) / 0.05);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-black\/10 {
  --tw-gradient-from: rgb(0 0 0 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/20 {
  --tw-gradient-from: rgb(0 0 0 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/25 {
  --tw-gradient-from: rgb(0 0 0 / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/70 {
  --tw-gradient-from: rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/80 {
  --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-stone-600 {
  --tw-gradient-from: #57534e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(87 83 78 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-black\/10 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-black\/35 {
  --tw-gradient-to: rgb(0 0 0 / 0.35) var(--tw-gradient-to-position);
}
.to-black\/55 {
  --tw-gradient-to: rgb(0 0 0 / 0.55) var(--tw-gradient-to-position);
}
.to-black\/60 {
  --tw-gradient-to: rgb(0 0 0 / 0.6) var(--tw-gradient-to-position);
}
.to-stone-800 {
  --tw-gradient-to: #292524 var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.object-\[50\%_20\%\] {
  -o-object-position: 50% 20%;
     object-position: 50% 20%;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-\[clamp\(11rem\2c 27vw\2c 19rem\)\] {
  padding-bottom: clamp(11rem,27vw,19rem);
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pr-24 {
  padding-right: 6rem;
}
.\!text-left {
  text-align: left !important;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-display {
  font-family: var(--font-aether), -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[0\.8125rem\] {
  font-size: 0.8125rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[2\.35rem\] {
  font-size: 2.35rem;
}
.text-\[5\.5rem\] {
  font-size: 5.5rem;
}
.text-\[6\.5rem\] {
  font-size: 6.5rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[1\.05\] {
  line-height: 1.05;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.\!text-red-500 {
  --tw-text-opacity: 1 !important;
  color: rgb(239 68 68 / var(--tw-text-opacity)) !important;
}
.text-accent-300 {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-300) / var(--tw-text-opacity));
}
.text-accent-400 {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-400) / var(--tw-text-opacity));
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity));
}
.text-brand-600 {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-600) / var(--tw-text-opacity));
}
.text-brand-700 {
  --tw-text-opacity: 1;
  color: rgb(var(--brand-700) / var(--tw-text-opacity));
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(var(--slate-100) / var(--tw-text-opacity));
}
.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(var(--slate-200) / var(--tw-text-opacity));
}
.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(var(--slate-300) / var(--tw-text-opacity));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(var(--slate-400) / var(--tw-text-opacity));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(var(--slate-500) / var(--tw-text-opacity));
}
.text-stone-300 {
  --tw-text-opacity: 1;
  color: rgb(214 211 209 / var(--tw-text-opacity));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.underline {
  text-decoration-line: underline;
}
.decoration-accent-400 {
  text-decoration-color: rgb(var(--accent-400) / 1);
}
.decoration-2 {
  text-decoration-thickness: 2px;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.underline-offset-\[6px\] {
  text-underline-offset: 6px;
}
.opacity-0 {
  opacity: 0;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-85 {
  opacity: 0.85;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-glow {
  --tw-shadow: 0 30px 70px -36px var(--ombre-forte);
  --tw-shadow-colored: 0 30px 70px -36px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-soft {
  --tw-shadow: 0 1px 2px var(--ombre-fine), 0 12px 32px -22px var(--ombre-douce);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 12px 32px -22px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-accent-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--accent-400) / var(--tw-ring-opacity));
}
.ring-accent-400\/40 {
  --tw-ring-color: rgb(var(--accent-400) / 0.4);
}
.ring-accent-400\/50 {
  --tw-ring-color: rgb(var(--accent-400) / 0.5);
}
.ring-accent-400\/60 {
  --tw-ring-color: rgb(var(--accent-400) / 0.6);
}
.ring-black\/70 {
  --tw-ring-color: rgb(0 0 0 / 0.7);
}
.ring-black\/80 {
  --tw-ring-color: rgb(0 0 0 / 0.8);
}
.ring-brand-400\/60 {
  --tw-ring-color: rgb(var(--brand-400) / 0.6);
}
.ring-brand-500\/15 {
  --tw-ring-color: rgb(var(--brand-500) / 0.15);
}
.ring-brand-500\/25 {
  --tw-ring-color: rgb(var(--brand-500) / 0.25);
}
.ring-brand-500\/30 {
  --tw-ring-color: rgb(var(--brand-500) / 0.3);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-saturate-150 {
  --tw-backdrop-saturate: saturate(1.5);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.ease-linear {
  transition-timing-function: linear;
}
/* Titres : même famille que le texte, plus grasse et plus serrée. */
.font-display {
    font-weight: var(--graisse-titre);
    letter-spacing: var(--pas-titre);
  }
.\[justify-content\:safe_center\] {
  justify-content: safe center;
}
.\[scrollbar-width\:none\] {
  scrollbar-width: none;
}

/*
 * Thème « crème & violet », esprit apple.com, en deux habillages : crème le
 * jour, prune la nuit. Une seule couleur d'accent — le violet du logo.
 *
 * TOUTE la palette vit dans des variables, en canaux rvb (« 246 242 234 »)
 * pour que Tailwind puisse encore poser une transparence (`bg-ink-950/80`).
 * Le thème sombre les redéfinit d'un bloc : aucune page n'a de `dark:`.
 */

:root {
  color-scheme: light;

  /* Surfaces : fond de page, cartes, surfaces secondaires. */
  --ink-950: 246 242 234;
  --ink-900: 255 253 249;
  --ink-800: 242 236 228;
  --ink-700: 233 226 216;
  --ink-600: 219 210 198;

  /* Texte, du plus fort au plus discret. */
  --slate-50: 20 16 25;
  --slate-100: 30 25 38;
  --slate-200: 43 36 53;
  --slate-300: 68 59 82;
  --slate-400: 101 93 113;
  --slate-500: 110 102 121;
  --slate-600: 168 162 176;
  --slate-700: 199 193 206;
  --slate-800: 227 222 232;

  /* Le violet du logo et ses nuances. */
  --brand-50: 249 243 254;
  --brand-100: 241 230 253;
  --brand-200: 225 204 251;
  --brand-300: 199 163 246;
  --brand-400: 169 110 242;
  --brand-500: 148 64 237;
  --brand-600: 122 43 211;
  --brand-700: 94 31 166;
  --brand-800: 63 21 128;
  --accent-300: 169 110 242;
  /* Un cran plus sombre que le violet des boutons : posé en TEXTE sur le
     crème du fond de page, #9440ED tombait à 4,46:1, juste sous la barre. */
  --accent-400: 141 58 228;
  --accent-500: 122 43 211;

  /* Filets, voile de survol, ombres. */
  --edge: 232 224 216;
  --edge-strong: 213 203 193;
  --voile: 0 0 0;
  --ombre-fine: rgba(40, 20, 70, 0.06);
  --ombre-douce: rgba(64, 24, 112, 0.34);
  --ombre-forte: rgba(64, 24, 112, 0.42);

  /* Raccourcis lisibles pour les composants de base. */
  --violet: rgb(var(--brand-500));
  --violet-fonce: rgb(var(--brand-600));
  --violet-sombre: rgb(var(--brand-700));
  --surface: rgb(var(--ink-900));
  --sur-violet: #fffdf9;

  /* Échelle typographique — une seule famille, cinq tailles, trois graisses. */
  --pas-titre: -0.025em;
  --graisse-titre: 600; /* Aether Semibold */
  --graisse-texte: 400;
  --graisse-label: 500; /* Aether Medium */
}

/* ── Thème sombre ──────────────────────────────────────────────────────────
   Pas un simple négatif : les fonds sont des prunes très sombres (le violet
   du logo, désaturé et assombri), et les nuances de `brand` qui servaient de
   TEXTE sur pastille claire (600 à 800) deviennent claires à leur tour. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ink-950: 18 15 25;
  --ink-900: 27 23 37;
  --ink-800: 36 31 48;
  --ink-700: 46 40 60;
  --ink-600: 58 51 74;

  --slate-50: 255 255 255;
  --slate-100: 244 241 250;
  --slate-200: 226 221 236;
  --slate-300: 198 191 214;
  --slate-400: 170 162 186;
  --slate-500: 152 144 168;
  --slate-600: 120 112 136;
  --slate-700: 88 80 104;
  --slate-800: 58 51 74;

  --brand-50: 40 26 60;
  --brand-100: 50 33 74;
  --brand-200: 64 43 93;
  --brand-300: 124 92 172;
  --brand-400: 169 110 242;
  --brand-500: 148 64 237;
  --brand-600: 199 163 246;
  --brand-700: 216 190 250;
  --brand-800: 233 216 253;
  --accent-300: 199 163 246;
  --accent-400: 181 124 245;
  --accent-500: 169 110 242;

  --edge: 48 42 62;
  --edge-strong: 70 62 88;
  --voile: 255 255 255;
  --ombre-fine: rgba(0, 0, 0, 0.5);
  --ombre-douce: rgba(0, 0, 0, 0.6);
  --ombre-forte: rgba(0, 0, 0, 0.7);

  --sur-violet: #ffffff;
}

html,
body {
  height: 100%;
}

body {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ink-950) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(var(--slate-100) / var(--tw-text-opacity));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: var(--graisse-texte);
  letter-spacing: -0.011em;
  text-rendering: optimizeLegibility;
}

::-moz-selection {
  background: rgb(var(--brand-500) / 0.22);
}

::selection {
  background: rgb(var(--brand-500) / 0.22);
}

/* Anneau de focus net et visible (accessibilité clavier). */
:focus-visible {
  outline: 2px solid rgb(var(--brand-400) / 0.6);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Respecte le réglage système « moins d'animations ». */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Barres de défilement discrètes */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--voile) / 0.2) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: rgb(var(--voile) / 0.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgb(var(--voile) / 0.045) 25%,
    rgb(var(--voile) / 0.085) 37%,
    rgb(var(--voile) / 0.045) 63%
  );
  background-size: 200% 100%;
}

@keyframes shimmer {

  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  animation: shimmer 1.6s linear infinite;
  border-radius: 0.5rem;
}

/* ── Logo ──────────────────────────────────────────────────────────────────
   Le V est fourni sur fond noir, avec des reflets argentés. Tel quel il se
   perd sur le crème : la version claire teinte ces reflets en lavande
   (9 % de ses pixels passaient sous 1,5:1 de contraste, plus aucun depuis).
   La nuit, l'original reprend sa place. */
.logo-sombre {
  display: none;
}
:root[data-theme="dark"] .logo-clair {
  display: none;
}
:root[data-theme="dark"] .logo-sombre {
  display: block;
}

/* ── Roue des paramètres ───────────────────────────────────────────────────
   Elle fait un tour sur elle-même à l'ouverture, et le tour inverse à la
   fermeture. */
@keyframes roue-avant {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}
@keyframes roue-arriere {
  from {
    rotate: 0deg;
  }
  to {
    rotate: -360deg;
  }
}
.roue-avant {
  animation: roue-avant 0.62s cubic-bezier(0.32, 0.9, 0.3, 1) both;
}
.roue-arriere {
  animation: roue-arriere 0.62s cubic-bezier(0.32, 0.9, 0.3, 1) both;
}

/* ── Verre liquide ─────────────────────────────────────────────────────────
   La matière d'Apple (Liquid Glass) tient en quatre choses, pas une :

     1. la TRANSLUCIDITÉ : le fond traverse le bouton, flouté et saturé, donc
        la couleur du bouton change selon ce qu'il y a derrière ;
     2. l'ARÊTE ÉCLAIRÉE : un filet blanc en haut, un plus faible en bas —
        c'est lui qui donne l'épaisseur, plus que l'ombre ;
     3. le REFLET SPÉCULAIRE, qui SUIT le pointeur : le verre a l'air de
        tourner sous la lumière (components/Verre.tsx pose --px / --py) ;
     4. la PRESSION : au clic la pastille s'enfonce et une lentille claire
        s'ouvre sous le doigt, puis se referme.

   Tout passe par des pseudo-éléments : React réécrit le texte des boutons
   (« Enregistrer » → « Vérification… ») et effacerait un enfant ajouté. */

:root {
  /* Force des reflets : le verre clair accroche plus la lumière que le sombre. */
  --eclat: 0.62;
  --eclat-arete: 0.7;
}
:root[data-theme="dark"] {
  --eclat: 0.3;
  --eclat-arete: 0.22;
}

.verre,
.glass-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    background 0.24s ease,
    border-color 0.24s ease;
}

/* Pastille de verre : boutons secondaires, barre du haut, onglets. */
.verre {
  color: rgb(var(--slate-100));
  background: rgb(var(--ink-900) / 0.5);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgb(var(--voile) / 0.06);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / var(--eclat-arete)),
    inset 0 -1px 0 rgb(255 255 255 / calc(var(--eclat-arete) * 0.28)),
    0 1px 2px var(--ombre-fine),
    0 10px 24px -16px var(--ombre-douce);
}
.verre:hover {
  background: rgb(var(--ink-900) / 0.72);
}

/* Reflet spéculaire : il suit le pointeur, et se replie au centre au repos. */
.verre::before,
.glass-primary::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    42% 58% at var(--px, 50%) var(--py, 0%),
    rgb(255 255 255 / var(--eclat)),
    transparent 72%
  );
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.verre:hover::before,
.glass-primary:hover::before {
  opacity: 1;
}

/* Lentille de pression : elle s'ouvre sous le doigt puis se referme. */
.verre::after,
.glass-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--px, 50%) var(--py, 50%),
    rgb(255 255 255 / 0.5) 0%,
    rgb(255 255 255 / 0.18) 38%,
    transparent 68%
  );
  opacity: 0;
  transform: scale(0.55);
  transition:
    opacity 0.42s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.verre.presse::after,
.glass-primary.presse::after {
  opacity: 1;
  transform: scale(1.05);
}
.verre:active,
.glass-primary:active {
  transform: scale(0.965);
}

/* Le bouton principal garde son violet plein : c'est du verre TEINTÉ, pas
   transparent — sur une carte crème, un bouton d'appel translucide se perd. */
.glass-primary {
  border-color: rgb(var(--brand-600) / 0.9);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 -1px 0 rgb(0 0 0 / 0.12),
    0 1px 2px rgb(var(--brand-700) / 0.28),
    0 10px 24px -16px rgb(var(--brand-500) / 0.6);
}
.glass-primary:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 -1px 0 rgb(0 0 0 / 0.12),
    0 2px 4px rgb(var(--brand-700) / 0.3),
    0 16px 34px -18px rgb(var(--brand-500) / 0.8);
}

/* Pas de pointeur fin (téléphone) : le reflet resterait figé où le doigt a
   touché la dernière fois. On le recentre. */
@media (hover: none) {
  .verre::before,
  .glass-primary::before {
    background: radial-gradient(
      50% 70% at 50% 0%,
      rgb(255 255 255 / var(--eclat)),
      transparent 72%
    );
  }
}

/* ── Verre teinté rouge ────────────────────────────────────────────────────
   Pour les actions qui arrêtent ou suppriment : « Arrêter », « Retirer ».
   On s'appuie sur `.glass-primary` (arête éclairée, reflet qui suit le
   pointeur, lentille de pression) et on ne change que la teinte — un second
   jeu de règles de verre finirait par diverger du premier. */

.glass-primary.glass-rouge {
  color: #fff;
  background: rgb(220 38 38);
  border-color: rgb(220 38 38);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 -1px 0 rgb(0 0 0 / 0.12),
    0 1px 2px rgb(153 27 27 / 0.3),
    0 10px 24px -16px rgb(220 38 38 / 0.6);
}
.glass-primary.glass-rouge:hover {
  background: rgb(185 28 28);
  border-color: rgb(185 28 28);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 -1px 0 rgb(0 0 0 / 0.12),
    0 2px 4px rgb(153 27 27 / 0.3),
    0 16px 34px -18px rgb(220 38 38 / 0.8);
}
.glass-primary.glass-rouge:active {
  background: rgb(153 27 27);
}
/* La nuit, un rouge qui fonce au survol s'enfonce dans le fond : on éclaircit. */
:root[data-theme="dark"] .glass-primary.glass-rouge:hover {
  background: rgb(239 68 68);
  border-color: rgb(239 68 68);
}

/* ── Accessibilité (components/Accessibilite.tsx) ──────────────────────────
   Trois attributs sur <html>, posés avant le premier pixel.

   TAILLE DU TEXTE : la taille de base de la page. Tout le site est dessiné en
   rem, donc tout suit — titres, boutons, marges — et les proportions restent
   justes, là où un zoom sur le seul texte ferait déborder les boutons. */
html[data-texte="grand"] {
  font-size: 112.5%;
}
html[data-texte="tres-grand"] {
  font-size: 125%;
}

/* RÉDUCTION DE MOUVEMENT : on arrête ce qui bouge tout seul. Le logo 3D et
   les reflets du verre, animés en JavaScript, lisent le même attribut. Les
   fondus et les survols restent : ils ne bougent que parce qu'on a agi. */
html[data-mouvement="reduit"] .fond-anime span,
html[data-mouvement="reduit"] .clap-balance,
html[data-mouvement="reduit"] .animate-float,
html[data-mouvement="reduit"] .animate-pulse-glow,
html[data-mouvement="reduit"] .roue-avant,
html[data-mouvement="reduit"] .roue-arriere,
html[data-mouvement="reduit"] .panneau,
html[data-mouvement="reduit"] .mega,
html[data-mouvement="reduit"] .mega-item,
html[data-mouvement="reduit"] .recherche-barre {
  animation: none !important;
}
html[data-mouvement="reduit"] .verre::before,
html[data-mouvement="reduit"] .glass-primary::before {
  background: radial-gradient(
    50% 70% at 50% 0%,
    rgb(255 255 255 / var(--eclat)),
    transparent 72%
  );
}

/* ANIMATIONS RÉDUITES : toute l'interface devient instantanée — la même règle
   que le réglage « moins d'animations » du système, mais réglable ici. */
html[data-animations="reduites"] *,
html[data-animations="reduites"] *::before,
html[data-animations="reduites"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ── Bandes qui s'ouvrent au survol (components/BandeDepliable.tsx) ──────
   Hauteur animée par `grid-template-rows` (0fr → 1fr) : le contenu se
   déploie à sa taille exacte, sans hauteur codée en dur. */
.depliant {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease;
}
.depliant > div {
  min-height: 0;
  overflow: hidden;
}
.depliant-ouvert {
  grid-template-rows: 1fr;
  opacity: 1;
}
/* Repli d'une présentation sortie de l'écran par le haut : d'un coup, le
   défilement est recalé d'autant (components/BandeDepliable.tsx). */
.depliant-instantane {
  transition: none;
}
/* « Voir la présentation ▸ » : seulement là où il n'y a pas de survol
   (écrans tactiles) ; à la souris, la case s'ouvre quand on passe dessus. */
.bouton-depliant {
  margin-top: 1rem;
  display: inline-block;
}
@media (hover: hover) {
  .bouton-depliant:not(.bouton-depliant-toujours) {
    display: none;
  }
}
/* Pas d'ancrage du défilement : quand une case s'ouvre, Chrome faisait
   défiler la page pour garder en place un élément situé PLUS BAS — on
   était entraîné vers le bas. Désactivé pour toute la page : la case
   s'allonge simplement sous ce qu'on regarde. */
html,
.depliant {
  overflow-anchor: none;
}

/* ── Démos animées (components/Demos.tsx) ─────────────────────────────────
   Un cycle de 6 s, rejoué en boucle ; chaque élément y a son moment. */
.demo-ecran {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 48rem;
  border-radius: 1.5rem;
  background: rgb(var(--ink-900));
  border: 1px solid rgb(var(--edge));
  box-shadow: 0 30px 60px -40px var(--ombre-douce);
}
.demo-frappe {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: demo-frappe 6s steps(30, end) infinite;
}
.demo-curseur {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  background: rgb(var(--accent-400));
  animation: demo-clignote 0.9s steps(2, start) infinite;
}
.demo-bouton {
  animation: demo-appui 6s ease infinite;
}
.demo-etape {
  opacity: 0;
  animation: demo-etape 6s ease infinite both;
  animation-delay: calc(var(--i, 0) * 0.4s);
}
.demo-tete {
  animation: demo-tete 6s linear infinite;
}
.demo-moment {
  opacity: 0;
  animation: demo-moment 6s ease infinite both;
  animation-delay: calc(var(--x, 0) * 0.06s);
}
.demo-jauge {
  width: 0;
  animation: demo-jauge 6s cubic-bezier(0.22, 1, 0.36, 1) infinite both;
  animation-delay: calc(var(--i, 0) * 0.15s);
}
.demo-telephone {
  background: linear-gradient(
    160deg,
    hsl(calc(272 + var(--i, 0) * 16) 55% 42%),
    hsl(calc(252 + var(--i, 0) * 16) 45% 13%)
  );
  box-shadow: 0 0 0 3px rgb(0 0 0 / 0.7);
  animation: demo-etape 6s ease infinite both;
  animation-delay: calc(var(--i, 0) * 0.2s);
}
.demo-mot,
.demo-sous-titre {
  opacity: 0;
  /* Sous-titre viral noir et blanc : lettres blanches cernées de noir. */
  text-shadow:
    0 2px 0 #000, 0 -2px 0 #000, 2px 0 0 #000, -2px 0 0 #000,
    0 3px 8px rgb(0 0 0 / 0.6);
}
.demo-mot {
  animation: demo-mot 6s ease infinite both;
  animation-delay: calc(var(--j, 0) * 1.3s + var(--i, 0) * 0.3s);
}
.demo-sous-titre {
  animation: demo-sous-titre 6s ease infinite both;
  animation-delay: calc(var(--j, 0) * 1.5s);
}
.demo-export {
  width: 0;
  animation: demo-export 6s ease-in-out infinite;
}
.demo-export-en-cours {
  animation: demo-avant-fin 6s steps(1, end) infinite;
}
.demo-export-fini {
  opacity: 0;
  animation: demo-apres-fin 6s steps(1, end) infinite;
}
.demo-vignette {
  opacity: 0;
  background: linear-gradient(
    135deg,
    hsl(calc(265 + var(--i, 0) * 12) 50% 45%),
    hsl(calc(240 + var(--i, 0) * 12) 40% 18%)
  );
  animation: demo-vignette 6s ease infinite both;
  animation-delay: calc(var(--i, 0) * 0.22s);
}
.demo-vignette-lue {
  box-shadow: 0 0 0 2px rgb(var(--accent-400));
}

/* ── Vitrine de la page Preview (app/preview/page.tsx) ───────────────────
   Le clip vedette surgit (il monte, dépasse sa taille, se pose) ; ses
   marques numérotées éclosent sur le rendu, puis chaque point arrive de son
   côté et sa flèche se trace jusqu'à la marque (`--k`). Rejoué à chaque
   nouvelle vedette. Dessous, la roulette : tous les clips sur toute la
   largeur, qui défilent par crans. */
.rendu-vedette {
  animation: rendu-surgit 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.rendu-info {
  animation: rendu-info 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.3s + var(--k, 0) * 0.16s);
}
.rendu-progression {
  transform-origin: left;
  animation: rendu-progression linear both;
}

/* Les marques, sur le rendu : à 12 % du bord, du côté de leur point. */
.rendu-marque {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.875rem 0 0 -0.875rem;
  border-radius: 9999px;
  background: rgb(var(--accent-400));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 0 0 4px rgb(var(--accent-400) / 0.3), 0 4px 14px rgb(0 0 0 / 0.5);
  animation: rendu-marque 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(0.45s + var(--k, 0) * 0.18s);
}
.rendu-marque[data-cote="gauche"] { left: 12%; }
.rendu-marque[data-cote="droite"] { left: 88%; }
.rendu-marque::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgb(var(--accent-400) / 0.7);
  animation: rendu-onde 2.4s ease-out infinite;
  animation-delay: calc(1.4s + var(--k, 0) * 0.3s);
}

/* Les points fléchés (grand écran seulement) : le texte, puis un trait qui
   file jusqu'à la marque, terminé par une pointe. */
.rendu-fleche {
  position: absolute;
  z-index: 1;
  display: none;
  align-items: center;
  width: 15.5rem;
  transform: translateY(-50%);
  border-radius: 0.75rem;
}
.rendu-fleche[data-cote="gauche"] { right: calc(88% + 1.05rem); }
.rendu-fleche[data-cote="droite"] { left: calc(88% + 1.05rem); flex-direction: row-reverse; }
@media (min-width: 1024px) {
  .rendu-fleche { display: flex; }
}
@media (min-width: 1280px) {
  .rendu-fleche { width: 18rem; }
}
.rendu-fleche:focus-visible {
  outline: 2px solid rgb(var(--accent-400));
  outline-offset: 4px;
}
.rendu-fleche-texte {
  flex: none;
  width: 11.5rem;
  animation: rendu-fleche-texte 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.6s + var(--k, 0) * 0.18s);
}
.rendu-fleche[data-cote="gauche"] .rendu-fleche-texte { text-align: right; --dx: -16px; }
.rendu-fleche[data-cote="droite"] .rendu-fleche-texte { --dx: 16px; }
@media (min-width: 1280px) {
  .rendu-fleche-texte { width: 13rem; }
}
.rendu-fleche-trait {
  position: relative;
  flex: 1;
  height: 2px;
  margin: 0 0.6rem;
  background: linear-gradient(to right, rgb(var(--accent-400) / 0.15), rgb(var(--accent-400)));
  animation: rendu-trait 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.75s + var(--k, 0) * 0.18s);
}
.rendu-fleche-trait::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid rgb(var(--accent-400));
  border-right: 2px solid rgb(var(--accent-400));
  transform: translateY(-50%) rotate(45deg);
}
.rendu-fleche[data-cote="gauche"] .rendu-fleche-trait { margin-right: 0; transform-origin: left; }
.rendu-fleche[data-cote="droite"] .rendu-fleche-trait {
  margin-left: 0;
  transform-origin: right;
  background: linear-gradient(to left, rgb(var(--accent-400) / 0.15), rgb(var(--accent-400)));
}
.rendu-fleche[data-cote="droite"] .rendu-fleche-trait::after {
  right: auto;
  left: -2px;
  transform: translateY(-50%) rotate(-135deg);
}

/* ── Couleurs propres à certaines pages (lib/couleursPages.ts) ───────────
   <html data-couleur="peche"> (Mes projets), "bleu" (Preview), "rouge"
   (Mes collections) ou "vert" (Pilote auto, vert clair) : les
   couleurs de marque, d'accent, les fonds et les textes sont redéfinis à la
   racine — la page, la barre, le logo, les survols, le panneau compte, les
   fenêtres et le pied de page changent ensemble ; le reste du site reste
   violet. Thème clair : `:not([data-theme="dark"])`, pour ne pas écraser les
   valeurs de nuit. */
:root:not([data-theme="dark"])[data-couleur="peche"] {
  --brand-50: 255 245 240;
  --brand-100: 254 234 226;
  --brand-200: 252 214 202;
  --brand-300: 248 181 165;
  --brand-400: 240 140 124;
  --brand-500: 226 104 94;
  --brand-600: 199 82 76;
  --brand-700: 168 64 60;
  --brand-800: 128 46 44;
  --accent-300: 240 140 124;
  --accent-400: 222 98 88;
  --accent-500: 199 82 76;
  --ink-950: 248 238 232;
  --ink-900: 255 251 248;
  --ink-800: 250 237 230;
  --ink-700: 243 226 218;
  --ink-600: 232 210 200;
  --slate-100: 40 24 26;
  --slate-200: 56 36 38;
  --slate-300: 84 60 62;
  --slate-400: 112 88 88;
  --slate-500: 124 100 100;
  --edge: 240 222 214;
  --edge-strong: 226 200 190;
  --ombre-fine: rgba(90, 40, 30, 0.06);
  --ombre-douce: rgba(120, 50, 40, 0.3);
  --ombre-forte: rgba(120, 50, 40, 0.4);
  --violet: rgb(var(--brand-500));
  --violet-fonce: rgb(var(--brand-600));
  --violet-sombre: rgb(var(--brand-700));
  --surface: rgb(var(--ink-900));
}
:root[data-theme="dark"][data-couleur="peche"] {
  --brand-50: 60 30 30;
  --brand-100: 74 38 36;
  --brand-200: 93 48 44;
  --brand-300: 196 120 106;
  --brand-400: 248 160 140;
  --brand-500: 240 130 112;
  --brand-600: 252 190 172;
  --brand-700: 253 210 196;
  --brand-800: 254 228 220;
  --accent-300: 252 190 172;
  --accent-400: 248 160 140;
  --accent-500: 240 140 120;
  --ink-950: 20 14 15;
  --ink-900: 30 21 23;
  --ink-800: 40 29 31;
  --ink-700: 52 38 40;
  --ink-600: 66 49 51;
  --slate-100: 250 241 239;
  --slate-200: 238 222 219;
  --slate-300: 216 194 190;
  --slate-400: 190 166 162;
  --slate-500: 172 148 144;
  --edge: 62 45 47;
  --edge-strong: 88 65 67;
  --ombre-fine: rgba(0, 0, 0, 0.5);
  --ombre-douce: rgba(0, 0, 0, 0.6);
  --ombre-forte: rgba(0, 0, 0, 0.7);
  --violet: rgb(var(--brand-500));
  --violet-fonce: rgb(var(--brand-600));
  --violet-sombre: rgb(var(--brand-700));
  --surface: rgb(var(--ink-900));
}
:root[data-couleur="peche"] .bande-sombre:not(.entete-photo) {
  --ink-950: 20 12 13;
  --ink-900: 30 20 22;
  --ink-800: 40 28 30;
  --slate-100: 250 241 239;
  --slate-300: 216 194 190;
  --slate-400: 190 166 162;
  --accent-400: 248 160 140;
  --edge: 62 45 47;
  --surface: rgb(var(--ink-900));
  background:
    radial-gradient(70% 90% at 50% 110%, rgb(226 104 94 / 0.32), transparent 70%),
    rgb(20 12 13) !important;
}

/* Preview en bleu. */
:root:not([data-theme="dark"])[data-couleur="bleu"] {
  --brand-50: 239 246 255;
  --brand-100: 219 234 254;
  --brand-200: 191 219 254;
  --brand-300: 147 197 253;
  --brand-400: 96 165 250;
  --brand-500: 37 99 235;
  --brand-600: 29 78 216;
  --brand-700: 30 64 175;
  --brand-800: 30 58 138;
  --accent-300: 96 165 250;
  --accent-400: 37 99 235;
  --accent-500: 29 78 216;
  --ink-950: 238 242 248;
  --ink-900: 250 252 255;
  --ink-800: 236 241 248;
  --ink-700: 226 233 243;
  --ink-600: 210 220 234;
  --slate-100: 17 24 39;
  --slate-200: 31 41 55;
  --slate-300: 55 65 81;
  --slate-400: 75 85 99;
  --slate-500: 100 110 125;
  --edge: 222 230 240;
  --edge-strong: 200 212 228;
  --ombre-fine: rgba(20, 40, 90, 0.06);
  --ombre-douce: rgba(20, 50, 120, 0.3);
  --ombre-forte: rgba(20, 50, 120, 0.4);
  --violet: rgb(var(--brand-500));
  --violet-fonce: rgb(var(--brand-600));
  --violet-sombre: rgb(var(--brand-700));
  --surface: rgb(var(--ink-900));
}
:root[data-theme="dark"][data-couleur="bleu"] {
  --brand-50: 15 30 60;
  --brand-100: 20 40 80;
  --brand-200: 28 52 104;
  --brand-300: 80 130 210;
  --brand-400: 110 170 255;
  --brand-500: 80 145 250;
  --brand-600: 150 195 255;
  --brand-700: 185 215 255;
  --brand-800: 215 232 255;
  --accent-300: 150 195 255;
  --accent-400: 110 170 255;
  --accent-500: 90 155 250;
  --ink-950: 10 14 24;
  --ink-900: 16 22 36;
  --ink-800: 24 32 50;
  --ink-700: 34 44 66;
  --ink-600: 46 58 84;
  --slate-100: 240 245 252;
  --slate-200: 220 228 240;
  --slate-300: 190 202 220;
  --slate-400: 160 174 196;
  --slate-500: 140 154 178;
  --edge: 38 50 74;
  --edge-strong: 58 72 100;
  --ombre-fine: rgba(0, 0, 0, 0.5);
  --ombre-douce: rgba(0, 0, 0, 0.6);
  --ombre-forte: rgba(0, 0, 0, 0.7);
  --violet: rgb(var(--brand-500));
  --violet-fonce: rgb(var(--brand-600));
  --violet-sombre: rgb(var(--brand-700));
  --surface: rgb(var(--ink-900));
}
:root[data-couleur="bleu"] .bande-sombre:not(.entete-photo) {
  --ink-950: 8 12 22;
  --ink-900: 14 20 34;
  --ink-800: 22 30 48;
  --slate-100: 240 245 252;
  --slate-300: 190 202 220;
  --slate-400: 160 174 196;
  --accent-400: 120 180 255;
  --edge: 36 48 72;
  --surface: rgb(var(--ink-900));
  background:
    radial-gradient(70% 90% at 50% 110%, rgb(37 99 235 / 0.38), transparent 70%),
    rgb(8 11 20) !important;
}

/* Le logo (une image violette) prend la teinte de la page. */
:root[data-couleur="peche"] .logo-clair,
:root[data-couleur="peche"] .logo-sombre {
  filter: hue-rotate(94deg) saturate(1.05);
}
:root[data-couleur="bleu"] .logo-clair,
:root[data-couleur="bleu"] .logo-sombre {
  filter: hue-rotate(-50deg) saturate(1.1);
}

/* Couleur de page « rouge ». */
:root:not([data-theme="dark"])[data-couleur="rouge"] {
  --brand-50: 254 242 242;
  --brand-100: 254 226 226;
  --brand-200: 254 202 202;
  --brand-300: 252 165 165;
  --brand-400: 248 113 113;
  --brand-500: 220 38 38;
  --brand-600: 185 28 28;
  --brand-700: 153 27 27;
  --brand-800: 127 29 29;
  --accent-300: 248 113 113;
  --accent-400: 220 38 38;
  --accent-500: 185 28 28;
  --ink-950: 249 240 240;
  --ink-900: 255 251 251;
  --ink-800: 248 236 236;
  --ink-700: 240 224 224;
  --ink-600: 228 206 206;
  --slate-100: 40 18 18;
  --slate-200: 58 28 28;
  --slate-300: 88 50 50;
  --slate-400: 116 80 80;
  --slate-500: 128 94 94;
  --edge: 240 220 220;
  --edge-strong: 224 196 196;
  --ombre-fine: rgba(90, 20, 20, 0.06);
  --ombre-douce: rgba(120, 25, 25, 0.3);
  --ombre-forte: rgba(120, 25, 25, 0.4);
  --violet: rgb(var(--brand-500));
  --violet-fonce: rgb(var(--brand-600));
  --violet-sombre: rgb(var(--brand-700));
  --surface: rgb(var(--ink-900));
}
:root[data-theme="dark"][data-couleur="rouge"] {
  --brand-50: 60 18 18;
  --brand-100: 76 24 24;
  --brand-200: 96 30 30;
  --brand-300: 200 90 90;
  --brand-400: 248 113 113;
  --brand-500: 239 68 68;
  --brand-600: 252 165 165;
  --brand-700: 254 202 202;
  --brand-800: 254 226 226;
  --accent-300: 252 165 165;
  --accent-400: 248 113 113;
  --accent-500: 239 68 68;
  --ink-950: 20 10 11;
  --ink-900: 30 15 16;
  --ink-800: 42 21 23;
  --ink-700: 56 29 31;
  --ink-600: 72 38 40;
  --slate-100: 252 240 240;
  --slate-200: 240 220 220;
  --slate-300: 220 190 190;
  --slate-400: 196 160 160;
  --slate-500: 176 140 140;
  --edge: 64 36 38;
  --edge-strong: 92 54 56;
  --ombre-fine: rgba(0, 0, 0, 0.5);
  --ombre-douce: rgba(0, 0, 0, 0.6);
  --ombre-forte: rgba(0, 0, 0, 0.7);
  --violet: rgb(var(--brand-500));
  --violet-fonce: rgb(var(--brand-600));
  --violet-sombre: rgb(var(--brand-700));
  --surface: rgb(var(--ink-900));
}
:root[data-couleur="rouge"] .bande-sombre:not(.entete-photo) {
  --ink-950: 20 9 10;
  --ink-900: 30 14 15;
  --ink-800: 42 20 22;
  --slate-100: 252 240 240;
  --slate-300: 220 190 190;
  --slate-400: 196 160 160;
  --accent-400: 248 113 113;
  --edge: 64 36 38;
  --surface: rgb(var(--ink-900));
  background:
    radial-gradient(70% 90% at 50% 110%, rgb(220 38 38 / 0.32), transparent 70%),
    rgb(18 8 9) !important;
}
:root[data-couleur="rouge"] .logo-clair,
:root[data-couleur="rouge"] .logo-sombre {
  filter: hue-rotate(89deg) saturate(1.25);
}

/* Couleur de page « vert ». */
:root:not([data-theme="dark"])[data-couleur="vert"] {
  --brand-50: 240 253 244;
  --brand-100: 220 252 231;
  --brand-200: 187 247 208;
  --brand-300: 134 239 172;
  --brand-400: 110 231 150;
  --brand-500: 74 222 128;
  --brand-600: 34 197 94;
  --brand-700: 22 163 74;
  --brand-800: 21 128 61;
  --accent-300: 34 197 94;
  --accent-400: 22 140 64;
  --accent-500: 21 128 61;
  --ink-950: 240 247 242;
  --ink-900: 251 254 252;
  --ink-800: 236 246 239;
  --ink-700: 224 238 228;
  --ink-600: 205 225 211;
  --slate-100: 16 32 22;
  --slate-200: 28 48 35;
  --slate-300: 52 76 60;
  --slate-400: 74 98 82;
  --slate-500: 96 118 103;
  --edge: 218 234 223;
  --edge-strong: 196 218 203;
  --ombre-fine: rgba(20, 70, 40, 0.06);
  --ombre-douce: rgba(20, 90, 50, 0.28);
  --ombre-forte: rgba(20, 90, 50, 0.38);
  --sur-violet: #052e16;
  --violet: rgb(var(--brand-500));
  --violet-fonce: rgb(var(--brand-600));
  --violet-sombre: rgb(var(--brand-700));
  --surface: rgb(var(--ink-900));
}
:root[data-theme="dark"][data-couleur="vert"] {
  --brand-50: 14 40 24;
  --brand-100: 18 52 31;
  --brand-200: 24 68 40;
  --brand-300: 60 160 100;
  --brand-400: 134 239 172;
  --brand-500: 74 222 128;
  --brand-600: 134 239 172;
  --brand-700: 187 247 208;
  --brand-800: 220 252 231;
  --accent-300: 187 247 208;
  --accent-400: 110 231 150;
  --accent-500: 74 222 128;
  --ink-950: 10 18 13;
  --ink-900: 15 26 19;
  --ink-800: 22 36 27;
  --ink-700: 30 48 36;
  --ink-600: 40 62 47;
  --slate-100: 236 250 240;
  --slate-200: 214 236 221;
  --slate-300: 180 210 190;
  --slate-400: 150 184 162;
  --slate-500: 132 166 144;
  --edge: 30 52 38;
  --edge-strong: 46 72 54;
  --ombre-fine: rgba(0, 0, 0, 0.5);
  --ombre-douce: rgba(0, 0, 0, 0.6);
  --ombre-forte: rgba(0, 0, 0, 0.7);
  --sur-violet: #052e16;
  --violet: rgb(var(--brand-500));
  --violet-fonce: rgb(var(--brand-600));
  --violet-sombre: rgb(var(--brand-700));
  --surface: rgb(var(--ink-900));
}
:root[data-couleur="vert"] .bande-sombre:not(.entete-photo) {
  --ink-950: 8 16 11;
  --ink-900: 13 24 17;
  --ink-800: 20 34 25;
  --slate-100: 236 250 240;
  --slate-300: 180 210 190;
  --slate-400: 150 184 162;
  --accent-400: 110 231 150;
  --edge: 30 52 38;
  --surface: rgb(var(--ink-900));
  background:
    radial-gradient(70% 90% at 50% 110%, rgb(74 222 128 / 0.28), transparent 70%),
    rgb(7 14 10) !important;
}
:root[data-couleur="vert"] .logo-clair,
:root[data-couleur="vert"] .logo-sombre {
  filter: hue-rotate(-129deg) saturate(1.1) brightness(1.08);
}

/* Vert clair : un texte blanc posé sur la couleur de page (avatar, pastilles,
   badges) ne se lirait pas — il passe en vert très foncé. */
:root[data-couleur="vert"] :is(.bg-brand-500, .bg-accent-400, .bg-accent-500, .bg-accent-500\/85).text-white {
  color: #052e16;
}

/* La vague derrière « Rendus finaux » : deux teintes et un voile. */
.vague-a { stop-color: #4f8dff; }
.vague-b { stop-color: #a855f7; }
.vague-c { stop-color: #7c5cff; }
:root[data-couleur="bleu"] .vague-b { stop-color: #38bdf8; }
:root[data-couleur="bleu"] .vague-c { stop-color: #3b82f6; }

/* Bannières photo des pages (Mes projets, Mes collections) : la photo en
   fond, le titre en blanc à gauche sur un dégradé sombre — le sujet de la
   photo reste dégagé à droite ; sur téléphone, sujet en haut et texte centré
   en bas sur un voile. Chaque page donne sa photo et son cadrage
   (`--entete-image`, `--entete-cadrage`, `--entete-cadrage-mobile`). Couleurs
   fixes, quel que soit le thème. Photos encodées depuis leurs PNG d'origine
   (WebP qualité 94) ; écrans haute densité : version 2× agrandie et affinée
   (`image-set`), plus nette que l'agrandissement du navigateur. */
.entete-projets {
  --entete-image: image-set(url("/projets/entete-coucher.webp") 1x, url("/projets/entete-coucher@2x.webp") 2x);
  --entete-cadrage: center 30%;
  --entete-cadrage-mobile: 50% 20%;
}
.entete-collections {
  --entete-image: image-set(url("/albums/entete.webp") 1x, url("/albums/entete@2x.webp") 2x);
  --entete-cadrage: 72% 30%;
  --entete-cadrage-mobile: 58% 25%;
}
.entete-pilote {
  --entete-image: image-set(url("/bannieres/pilote.webp") 1x, url("/bannieres/pilote@2x.webp") 2x);
  --entete-cadrage: center 40%;
  --entete-cadrage-mobile: 38% 30%;
}
.bande.entete-photo-page {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 19rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  color: #fff;
  background:
    linear-gradient(to right, rgb(24 10 18 / 0.85) 0%, rgb(24 10 18 / 0.62) 32%, rgb(24 10 18 / 0.15) 58%, transparent 75%),
    var(--entete-image) var(--entete-cadrage) / cover no-repeat,
    rgb(60 30 40) !important;
}
@media (max-width: 639px) {
  .bande.entete-photo-page {
    min-height: 24rem;
    align-items: flex-end;
    background:
      linear-gradient(to bottom, transparent 30%, rgb(24 10 18 / 0.7) 62%, rgb(24 10 18 / 0.9)),
      var(--entete-image) var(--entete-cadrage-mobile) / cover no-repeat,
      rgb(60 30 40) !important;
  }
}
@media (min-width: 1024px) {
  .bande.entete-photo-page { min-height: 21rem; }
}
/* Variante « texte à droite » : quand le sujet de la photo est à gauche
   (Pilote auto). Le dégradé part de la droite. */
.bande.entete-photo-page.entete-photo-droite {
  background:
    linear-gradient(to left, rgb(24 10 18 / 0.85) 0%, rgb(24 10 18 / 0.62) 32%, rgb(24 10 18 / 0.15) 58%, transparent 75%),
    var(--entete-image) var(--entete-cadrage) / cover no-repeat,
    rgb(60 30 40) !important;
}
@media (max-width: 639px) {
  .bande.entete-photo-page.entete-photo-droite {
    background:
      linear-gradient(to bottom, transparent 30%, rgb(24 10 18 / 0.7) 62%, rgb(24 10 18 / 0.9)),
      var(--entete-image) var(--entete-cadrage-mobile) / cover no-repeat,
      rgb(60 30 40) !important;
  }
}
.entete-photo-page .bande-titre {
  text-shadow: 0 2px 24px rgb(20 6 12 / 0.55);
}
.entete-photo-page .bande-soustitre {
  color: #ffe9e1;
  text-shadow: 0 1px 12px rgb(20 6 12 / 0.65);
}
/* Tuile « + Nouveau », à côté des projets. */
.projet-nouveau {
  display: flex;
  min-height: 16rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  border: 2px dashed rgb(var(--edge-strong));
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.projet-nouveau:hover {
  border-color: rgb(var(--accent-400));
  background: rgb(var(--accent-400) / 0.06);
}
.projet-nouveau:focus-visible {
  outline: 2px solid rgb(var(--accent-400));
  outline-offset: 4px;
}

/* Tuile « + Nouvel album », à côté des albums : même format que leurs
   cartes (couverture 4:3, légende dessous). */
.album-nouveau {
  /* Un <button> centre son contenu en hauteur : on le cale en haut, comme
     les cartes voisines. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  border-radius: 1.25rem;
}
.album-nouveau-tuile {
  aspect-ratio: 4 / 3;
  min-height: 0;
  border-radius: 1.25rem;
}
.album-nouveau:hover .album-nouveau-tuile {
  border-color: rgb(var(--accent-400));
  background: rgb(var(--accent-400) / 0.06);
}
.album-nouveau:focus-visible {
  outline: 2px solid rgb(var(--accent-400));
  outline-offset: 4px;
}

/* ── Page Montage (app/montage/page.tsx) ──────────────────────────────────
   Zone de dépôt de la vidéo, et maquette de l'éditeur à venir. */
.depot-video {
  display: flex;
  width: 100%;
  min-height: 14rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  border: 2px dashed rgb(var(--edge-strong));
  background: rgb(var(--ink-800) / 0.6);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.depot-video:hover,
.depot-video-survol {
  border-color: rgb(var(--accent-400));
  background: rgb(var(--accent-400) / 0.07);
}
.depot-video:focus-visible {
  outline: 2px solid rgb(var(--accent-400));
  outline-offset: 4px;
}
.editeur-maquette {
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgb(var(--edge));
  background: rgb(var(--ink-900));
}
.editeur-maquette-ecran {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  background:
    radial-gradient(60% 80% at 50% 40%, rgb(var(--accent-400) / 0.25), transparent 70%),
    rgb(var(--ink-950));
}
.editeur-maquette-badge {
  border-radius: 9999px;
  background: rgb(var(--voile) / 0.1);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--slate-100));
}
.editeur-maquette-pistes {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
}
.editeur-maquette-pistes > span {
  display: block;
  height: 1.6rem;
  border-radius: 0.5rem;
}
.piste-texte { background: rgb(var(--accent-400) / 0.7); }
.piste-video {
  background: repeating-linear-gradient(90deg, rgb(var(--ink-700)) 0 3.5rem, rgb(var(--ink-600)) 3.5rem 3.6rem);
}
.piste-audio {
  background:
    repeating-linear-gradient(90deg, rgb(34 197 94 / 0.55) 0 2px, transparent 2px 5px),
    rgb(34 197 94 / 0.18);
}

/* ── Montage par IA, façon conversation (app/montage/ia/page.tsx) ─────────
   Le fil et la barre de saisie à gauche, l'aperçu à droite ; sur grand écran
   les deux tiennent dans la hauteur de la fenêtre (chacun défile à part). */
.atelier-ia {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1rem 0 1.5rem;
}
@media (min-width: 1024px) {
  .atelier-ia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    height: calc(100dvh - 6.5rem);
    min-height: 34rem;
  }
}
.atelier-conversation,
.atelier-apercu {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgb(var(--edge));
  background: var(--surface);
}
@media (max-width: 1023px) {
  .atelier-conversation { min-height: 34rem; }
}
.atelier-fil {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
}
.atelier-bulle-moi {
  max-width: 85%;
  border-radius: 1.25rem 1.25rem 0.4rem 1.25rem;
  background: rgb(var(--ink-800));
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgb(var(--slate-100));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.atelier-suggestion {
  border-radius: 0.9rem;
  border: 1px solid rgb(var(--edge));
  padding: 0.7rem 1rem;
  text-align: left;
  font-size: 0.875rem;
  color: rgb(var(--slate-300));
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.atelier-suggestion:hover {
  border-color: rgb(var(--accent-400) / 0.6);
  background: rgb(var(--accent-400) / 0.06);
  color: rgb(var(--slate-100));
}
.atelier-saisie {
  margin: 0 0.75rem 0.75rem;
  border-radius: 1.25rem;
  border: 1px solid rgb(var(--edge-strong));
  background: rgb(var(--ink-900));
  padding: 0.5rem 0.5rem 0.5rem;
  box-shadow: 0 10px 30px -22px var(--ombre-douce);
}
.atelier-saisie:focus-within {
  border-color: rgb(var(--accent-400) / 0.7);
}
.atelier-champ {
  min-width: 0;
  flex: 1;
  resize: none;
  background: transparent;
  padding: 0.55rem 0.25rem;
  font-size: 1rem;
  line-height: 1.45;
  color: rgb(var(--slate-100));
  outline: none;
  max-height: 180px;
}
.atelier-champ::-moz-placeholder {
  color: rgb(var(--slate-500));
}
.atelier-champ::placeholder {
  color: rgb(var(--slate-500));
}
.atelier-point {
  display: inline-block;
  height: 0.6rem;
  width: 0.6rem;
  border-radius: 9999px;
  background: rgb(var(--accent-400));
  animation: atelier-pulse 1.1s ease-in-out infinite;
}
@keyframes atelier-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}
.atelier-apercu-scene {
  position: relative;
  display: grid;
  flex: 1;
  min-height: 18rem;
  /* Une seule case qui fait toute la scène : la vidéo s'y ajuste
     (sans ça, la rangée prend la hauteur de la vidéo et déborde). */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  padding: 1rem;
  background: rgb(var(--ink-950));
}
.atelier-apercu-video {
  display: block;
  margin: 0 auto;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  border-radius: 1rem;
  background: #000;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 1023px) {
  .atelier-apercu-video { max-height: 70vh; }
}
.atelier-apercu-scene > .relative {
  display: grid;
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
}
.atelier-apercu-voile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(2px);
}
.atelier-apercu-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.875rem;
  color: rgb(var(--slate-400));
}
.atelier-depot {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  border: 3px dashed rgb(var(--accent-400));
  background: rgb(var(--ink-950) / 0.8);
  font-size: 1.25rem;
  font-weight: 600;
  color: rgb(var(--slate-100));
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .atelier-point { animation: none; }
}

/* ── Collections de clips (components/Albums.tsx) ─────────────────────────
   Carte d'album à la Pinterest : une grande image et deux petites, coins
   arrondis, léger zoom au survol. Clip rangé : vignette verticale. */
.album-carte:focus-visible,
.clip-epingle:focus-visible {
  outline: 2px solid rgb(var(--accent-400));
  outline-offset: 4px;
  border-radius: 1.25rem;
}
.album-mosaique {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 1.25rem;
  background: rgb(var(--edge));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.album-carte:hover .album-mosaique {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgb(0 0 0 / 0.6);
}
.album-mosaique > * {
  width: 100%;
  height: 100%;
  min-height: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.album-mosaique .album-grande {
  grid-row: span 2;
}
.album-vide {
  display: block;
  background: rgb(var(--ink-800));
}
.clip-epingle {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 1.25rem;
  background: rgb(var(--ink-900));
  cursor: pointer;
}
/* Couverture choisie : une seule image, toute la carte. */
.album-mosaique-unique {
  display: block;
}
.album-mosaique-unique > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* Fenêtre « Nouvel album » (components/FenetreAlbum.tsx). */
.fenetre-album {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}
.fenetre-album-image {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 2px dashed rgb(var(--edge-strong));
  background: rgb(var(--ink-800));
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.fenetre-album-image:hover,
.fenetre-album-survol {
  border-color: rgb(var(--accent-400));
  background: rgb(var(--accent-400) / 0.08);
}
.fenetre-album-image:focus-visible {
  outline: 2px solid rgb(var(--accent-400));
  outline-offset: 3px;
}
@media (max-width: 639px) {
  .fenetre-album-image { aspect-ratio: 16 / 9; }
}
.champ-album {
  width: 100%;
  border-radius: 0.9rem;
  border: 1px solid rgb(var(--edge-strong));
  background: transparent;
  padding: 0.75rem 0.9rem;
  font-size: 1rem;
  color: rgb(var(--slate-100));
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.champ-album::-moz-placeholder {
  color: rgb(var(--slate-500));
}
.champ-album::placeholder {
  color: rgb(var(--slate-500));
}
.champ-album:focus {
  border-color: rgb(var(--accent-400));
  box-shadow: 0 0 0 3px rgb(var(--accent-400) / 0.2);
}

/* Barre du mode « Sélectionner », collée en bas de l'écran. */
.barre-selection {
  position: sticky;
  bottom: 1rem;
  z-index: 30;
  margin: 0 auto 1rem;
  width: min(100% - 2rem, 46rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid rgb(var(--edge));
  background: rgb(var(--ink-950) / 0.92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 18px 40px -20px rgb(0 0 0 / 0.6);
}
@media (max-width: 639px) {
  .barre-selection { border-radius: 1.25rem; }
}
/* Annonce brève (« 3 clips rangés dans … »). */
.annonce {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1.5rem;
  z-index: 110;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  padding: 0.7rem 1.2rem;
  border-radius: 9999px;
  background: rgb(20 16 28 / 0.94);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 14px 34px -14px rgb(0 0 0 / 0.7);
}

/* La roue de la page Preview : les clips posés en cercle, en 3D. L'anneau
   recule d'un rayon (le clip de devant garde sa taille) et tourne d'un cran
   par clip ; chaque carte est tournée de sa place sur le cercle puis poussée
   d'un rayon vers l'extérieur. Le rayon se déduit de la largeur des cartes
   et de leur nombre (`--n`) pour qu'elles se touchent presque. Bords fondus
   dans le décor. */
.roue {
  --carte: 9rem;
  --rayon: calc((var(--carte) + 1.25rem) / 2 / tan(180deg / max(var(--n, 12), 3)));
  position: relative;
  width: var(--largeur-page, 100vw);
  margin-left: calc(50% - var(--largeur-page, 100vw) / 2);
  height: calc(var(--carte) * 16 / 9 + 3.5rem);
  perspective: 1600px;
  perspective-origin: 50% 40%;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.4) 12%, #000 34%, #000 66%, rgb(0 0 0 / 0.4) 88%, transparent);
  mask-image: linear-gradient(to right, transparent, rgb(0 0 0 / 0.4) 12%, #000 34%, #000 66%, rgb(0 0 0 / 0.4) 88%, transparent);
}
@media (min-width: 640px) {
  .roue { --carte: 11rem; }
}
@media (min-width: 1280px) {
  .roue { --carte: 12rem; }
}
.roue-glisse { cursor: grabbing; }
.roue-anneau {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.roue-carte {
  position: absolute;
  top: 0.75rem;
  left: calc(50% - var(--carte) / 2);
  width: var(--carte);
  border-radius: 1rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: opacity 0.9s ease;
}
.roue-glisse .roue-anneau,
.roue-glisse .roue-carte {
  transition: none;
}
.roue-carte:focus-visible {
  outline: 2px solid rgb(var(--accent-400));
  outline-offset: 4px;
}
.roue-carte video { -webkit-user-drag: none; }

/* En-tête de la page Preview : le grand titre dans le ciel, la photo en
   dessous, bord à bord, collée au bas de la bande. Le fond reprend le bleu
   du haut de la photo (plus sombre vers le haut, pour le texte blanc) et la
   photo s'y fond. */
.bande-sombre.entete-photo {
  --slate-400: 226 236 255;
  padding-bottom: 0;
  background:
    linear-gradient(to bottom, rgb(16 42 104 / 0.6), transparent 14rem),
    linear-gradient(to right, rgb(60 120 204), rgb(84 138 213) 36%, rgb(110 158 227) 60%, rgb(110 157 228) 84%, rgb(93 147 225)) !important;
}
.entete-photo .bande-titre {
  color: #fff;
  text-shadow: 0 2px 30px rgb(10 30 80 / 0.35);
}
.entete-photo .bande-soustitre {
  text-shadow: 0 1px 12px rgb(10 30 80 / 0.4);
}
.entete-photo-image {
  width: var(--largeur-page, 100vw);
  margin-left: calc(50% - var(--largeur-page, 100vw) / 2);
  height: 20rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%);
  mask-image: linear-gradient(to bottom, transparent, #000 16%);
}
@media (min-width: 640px) {
  .entete-photo-image { height: 28rem; }
}
@media (min-width: 1024px) {
  .entete-photo-image { height: 34rem; }
}
.entete-photo-image img {
  width: 100%;
  max-width: none;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 0;
     object-position: 50% 0;
}

/* La vague derrière « Rendus finaux » : lignes en dégradé bleu-violet qui
   glissent d'une largeur en boucle, un halo autour, les bords fondus. */
.vague {
  position: absolute;
  inset: 1.5rem 0 auto;
  height: 11rem;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
}
@media (min-width: 640px) {
  .vague { inset: 2.5rem 0 auto; height: 13rem; }
}
.vague-ligne,
.vague-voile {
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
  height: 100%;
  animation: vague-glisse 16s linear infinite;
}
.vague-ligne {
  filter: drop-shadow(0 0 6px rgb(124 92 255 / 0.9)) drop-shadow(0 0 18px rgb(79 141 255 / 0.5));
}
.vague-ligne:nth-of-type(3) { animation-direction: reverse; }
.vague-voile { animation-duration: 20s; }
@keyframes vague-glisse {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Tuile « Format 9:16 » : les quatre coins du cadre vertical. */
.rendu-coins {
  background:
    linear-gradient(#fff, #fff) top left / 1.25rem 3px,
    linear-gradient(#fff, #fff) top left / 3px 1.25rem,
    linear-gradient(#fff, #fff) top right / 1.25rem 3px,
    linear-gradient(#fff, #fff) top right / 3px 1.25rem,
    linear-gradient(#fff, #fff) bottom left / 1.25rem 3px,
    linear-gradient(#fff, #fff) bottom left / 3px 1.25rem,
    linear-gradient(#fff, #fff) bottom right / 1.25rem 3px,
    linear-gradient(#fff, #fff) bottom right / 3px 1.25rem;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.6));
}

@keyframes rendu-surgit {
  0% { opacity: 0; transform: translateY(26px) scale(0.78); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: none; }
}
@keyframes rendu-info {
  0% { opacity: 0; transform: translateX(-14px); }
  100% { opacity: 1; transform: none; }
}
@keyframes rendu-progression {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes rendu-marque {
  0% { opacity: 0; transform: scale(0.3); }
  100% { opacity: 1; transform: none; }
}
@keyframes rendu-onde {
  0% { opacity: 0.9; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.9); }
}
@keyframes rendu-fleche-texte {
  0% { opacity: 0; transform: translateX(var(--dx, 0)); }
  100% { opacity: 1; transform: none; }
}
@keyframes rendu-trait {
  0% { opacity: 0; transform: scaleX(0); }
  100% { opacity: 1; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .rendu-vedette, .rendu-info, .rendu-marque, .rendu-fleche-texte, .rendu-fleche-trait, .roue-anneau, .roue-carte {
    transition: none;
    animation: none;
  }
  .rendu-marque::after, .rendu-progression, .vague-ligne, .vague-voile { animation: none; }
  .rendu-progression { transform: scaleX(1); opacity: 0.5; }
}

@keyframes demo-frappe {
  0% { width: 0; }
  35%, 100% { width: 30ch; }
}
@keyframes demo-clignote {
  to { visibility: hidden; }
}
@keyframes demo-appui {
  0%, 40% { transform: none; filter: none; }
  44% { transform: scale(0.94); filter: brightness(1.15); }
  49%, 100% { transform: none; filter: none; }
}
@keyframes demo-etape {
  0%, 45% { opacity: 0; transform: translateY(6px); }
  53%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
@keyframes demo-tete {
  from { left: 0%; }
  to { left: 100%; }
}
@keyframes demo-moment {
  0% { opacity: 0; transform: scale(0.92); }
  4%, 58% { opacity: 1; transform: none; }
  66%, 100% { opacity: 0; }
}
@keyframes demo-jauge {
  0% { width: 0; }
  30%, 88% { width: var(--v); }
  100% { width: 0; }
}
@keyframes demo-mot {
  0% { opacity: 0; transform: scale(0.8); }
  4% { opacity: 1; transform: scale(1.1); }
  8%, 19% { opacity: 1; transform: none; }
  21%, 100% { opacity: 0; }
}
@keyframes demo-sous-titre {
  0% { opacity: 0; transform: scale(0.7); }
  3% { opacity: 1; transform: scale(1.12); }
  6%, 23% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; }
}
@keyframes demo-export {
  0% { width: 0; }
  70%, 100% { width: 100%; }
}
@keyframes demo-avant-fin {
  0% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes demo-apres-fin {
  0% { opacity: 0; }
  70%, 100% { opacity: 1; }
}
@keyframes demo-vignette {
  0% { opacity: 0; transform: scale(0.85); }
  8%, 90% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* Mouvement réduit : pas de boucle, l'état final de chaque démo, lisible. */
html[data-mouvement="reduit"] .demo-ecran *{animation:none!important}
html[data-mouvement="reduit"] .demo-frappe{width:auto}
html[data-mouvement="reduit"] .demo-curseur,html[data-mouvement="reduit"] .demo-tete{display:none}
html[data-mouvement="reduit"] .demo-etape,html[data-mouvement="reduit"] .demo-moment,html[data-mouvement="reduit"] .demo-telephone,html[data-mouvement="reduit"] .demo-vignette,html[data-mouvement="reduit"] .demo-export-fini{opacity:1;transform:none}
html[data-mouvement="reduit"] .demo-export-en-cours{opacity:0}
html[data-mouvement="reduit"] .demo-jauge{width:var(--v)}
html[data-mouvement="reduit"] .demo-export{width:100%}
html[data-mouvement="reduit"] .demo-mot,html[data-mouvement="reduit"] .demo-sous-titre{opacity:0}
html[data-mouvement="reduit"] .demo-mot:first-child,html[data-mouvement="reduit"] .demo-sous-titre:first-child{opacity:1}
html[data-animations="reduites"] .demo-ecran *{animation:none!important}
html[data-animations="reduites"] .demo-frappe{width:auto}
html[data-animations="reduites"] .demo-curseur,html[data-animations="reduites"] .demo-tete{display:none}
html[data-animations="reduites"] .demo-etape,html[data-animations="reduites"] .demo-moment,html[data-animations="reduites"] .demo-telephone,html[data-animations="reduites"] .demo-vignette,html[data-animations="reduites"] .demo-export-fini{opacity:1;transform:none}
html[data-animations="reduites"] .demo-export-en-cours{opacity:0}
html[data-animations="reduites"] .demo-jauge{width:var(--v)}
html[data-animations="reduites"] .demo-export{width:100%}
html[data-animations="reduites"] .demo-mot,html[data-animations="reduites"] .demo-sous-titre{opacity:0}
html[data-animations="reduites"] .demo-mot:first-child,html[data-animations="reduites"] .demo-sous-titre:first-child{opacity:1}
@media (prefers-reduced-motion: reduce) {
html .demo-ecran *{animation:none!important}
html .demo-frappe{width:auto}
html .demo-curseur,html .demo-tete{display:none}
html .demo-etape,html .demo-moment,html .demo-telephone,html .demo-vignette,html .demo-export-fini{opacity:1;transform:none}
html .demo-export-en-cours{opacity:0}
html .demo-jauge{width:var(--v)}
html .demo-export{width:100%}
html .demo-mot,html .demo-sous-titre{opacity:0}
html .demo-mot:first-child,html .demo-sous-titre:first-child{opacity:1}
}

/* ── Grand menu de la barre (components/TabBar.tsx, GrandMenu) ──────────
   À la manière d'apple.com : le panneau descend comme un rideau (clip-path,
   pas de hauteur animée — rien ne se recalcule), ses liens arrivent en
   cascade (`--d`), la page derrière se floute. Remontée plus courte que la
   descente : on veut voir arriver, pas attendre que ça parte. */
.mega {
  background: rgb(var(--ink-950) / 0.94);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  animation: mega-descente 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mega-sortie {
  animation: mega-remontee 0.24s cubic-bezier(0.4, 0, 1, 1) both;
}
.mega-item {
  animation: mega-cascade 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(60ms + var(--d, 0ms));
}
.mega-sortie .mega-item {
  animation: none;
}
.mega-voile {
  background: rgb(var(--ink-950) / 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: mega-voile-in 0.35s ease both;
}
.mega-voile-sortie {
  animation: mega-voile-out 0.24s ease both;
}
@keyframes mega-descente {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes mega-remontee {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 100% 0); }
}
@keyframes mega-cascade {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes mega-voile-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mega-voile-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ── Loupe qui s'étire en barre de recherche (components/Recherche.tsx) ──
   La pastille de 36 px s'allonge jusqu'à `--largeur` ; sur téléphone, elle
   couvre la rangée du haut. Le champ apparaît une fois la barre ouverte. */
.recherche-barre {
  /* 16rem : la place laissée par le logo, les six onglets, le compte et
     l'engrenage sur un écran de 1280 px — plus large, « Aide » passait
     dessous. */
  --largeur: 16rem;
  width: var(--largeur);
  animation: recherche-etire 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (max-width: 1099px) {
  .recherche-barre {
    --largeur: 13rem;
  }
}
@media (max-width: 767px) {
  .recherche-barre {
    --largeur: calc(100% - 2rem);
  }
  /* Par-dessus le logo et le compte : opaque, sinon on les lit à travers.
     `.verre` en plus dans le sélecteur : sa règle vient plus bas. */
  .verre.recherche-barre,
  .verre.recherche-barre:hover {
    background: rgb(var(--ink-950));
  }
}
.recherche-barre .recherche-champ {
  animation: mega-voile-in 0.25s ease 0.12s both;
}
.recherche-sortie {
  animation: recherche-replie 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes recherche-etire {
  from { width: 2.25rem; }
  to { width: var(--largeur); }
}
@keyframes recherche-replie {
  from { width: var(--largeur); opacity: 1; }
  to { width: 2.25rem; opacity: 0.4; }
}

/* ── Apparition au défilement (components/ApparitionAuDefilement.tsx) ──────
   Une case surgit quand elle entre à l'écran : elle monte, dépasse un peu sa
   taille et se pose — la courbe `cubic-bezier(.34, 1.56, .64, 1)` va au-delà
   de 1 avant de revenir, c'est elle qui donne l'effet « pop ». Sans la classe
   `pop-actif` (JavaScript absent), rien n'est caché : le texte reste lisible. */
.pop-actif [data-pop] {
  transition:
    opacity 0.45s ease,
    transform 0.62s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--delai, 0ms);
}
.pop-actif [data-pop]:not(.pop-visible) {
  opacity: 0;
  transform: translateY(28px) scale(0.9);
}
/* Même principe pour la bande d'en-tête (`animate-fade-up`) : le rectangle
   reste en place, son contenu monte. */
.bande.animate-fade-up {
  animation: none;
}
.bande.animate-fade-up > * {
  animation: fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Bandes et tuiles pleine largeur : c'est leur CONTENU qui surgit, pas le
   rectangle. Animé en entier, il rétrécissait et laissait voir le fond de la
   page autour de lui — les sections doivent rester collées. */
.pop-actif .bande[data-pop],
.pop-actif .tuile[data-pop] {
  transition: none;
}
.pop-actif .bande[data-pop]:not(.pop-visible),
.pop-actif .tuile[data-pop]:not(.pop-visible) {
  opacity: 1;
  transform: none;
}
.pop-actif .bande[data-pop] > *,
.pop-actif .tuile[data-pop] > * {
  transition:
    opacity 0.45s ease,
    transform 0.62s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--delai, 0ms);
}
.pop-actif .bande[data-pop]:not(.pop-visible) > *,
.pop-actif .tuile[data-pop]:not(.pop-visible) > * {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
}

/* ── Croix de suppression ──────────────────────────────────────────────────
   Petite pastille de verre carrée. Au repos elle se fait oublier ; au survol
   elle s'allume d'une lueur rouge carrée — on voit ce qu'elle fait avant de
   cliquer, sans qu'une corbeille rouge crie en permanence dans la liste. */

.croix {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 7px;
  font-size: 1.05rem;
  line-height: 1;
  color: rgb(var(--slate-400));
}
.verre.croix:hover,
.verre.croix:focus-visible {
  color: rgb(220 38 38);
  background: rgb(239 68 68 / 0.1);
  border-color: rgb(239 68 68 / 0.55);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / var(--eclat-arete)),
    0 0 0 1px rgb(239 68 68 / 0.35),
    0 0 16px 2px rgb(239 68 68 / 0.45);
}
:root[data-theme="dark"] .verre.croix:hover,
:root[data-theme="dark"] .verre.croix:focus-visible {
  color: rgb(248 113 113);
}

/* ── Panneau latéral ───────────────────────────────────────────────────────
   Il s'ouvre SOUS la barre d'onglets et pousse la page vers la gauche, au
   lieu de passer par-dessus : on garde la navigation et ce qu'on lisait. */

.page-decalee {
  transition: padding-right 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 900px) {
  .page-decalee[data-panneau="ouvert"] {
    padding-right: var(--largeur-panneau, 380px);
  }
}

.panneau {
  position: fixed;
  top: var(--hauteur-barre, 64px);
  right: 0;
  bottom: 0;
  width: min(100vw, var(--largeur-panneau, 380px));
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: rgb(var(--ink-950) / 0.86);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-left: 1px solid rgb(var(--edge));
  box-shadow: -24px 0 60px -40px var(--ombre-forte);
  animation: panneau-entre 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes panneau-entre {
  from {
    transform: translateX(14px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Sous 900 px la page ne se décale pas (il ne resterait rien à lire) : le
   panneau se met alors par-dessus, et un voile ferme au clic. */
.voile-panneau {
  position: fixed;
  inset: var(--hauteur-barre, 64px) 0 0 0;
  z-index: 29;
  background: rgb(var(--voile) / 0.18);
  animation: fade-in 0.3s ease both;
}
@media (min-width: 900px) {
  .voile-panneau {
    display: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Fond animé ────────────────────────────────────────────────────────────
   Trois voiles violets, très flous, qui dérivent lentement derrière tout le
   site. Ils sont posés en `fixed` sous le contenu (z-index négatif) : la page
   défile, le fond reste — c'est ce qui donne la profondeur sans jamais bouger
   sous le texte.

   Seule la TRANSFORMATION est animée, jamais la position ni le flou : le
   navigateur garde les voiles sur la carte graphique et n'a rien à repeindre.
   Ils sont discrets sur le crème (le texte passe par-dessus) et plus francs
   la nuit, où ils remplacent l'à-plat noir. */

.fond-anime {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Un voile de la couleur de la page : les taches se fondent dedans au lieu
     de flotter sur un fond d'une autre teinte. */
  background: rgb(var(--ink-950));
}

.fond-anime span {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
  opacity: var(--force-fond, 0.55);
}

:root {
  --force-fond: 0.5;
}
:root[data-theme="dark"] {
  --force-fond: 0.42;
}

.fond-anime span:nth-child(1) {
  top: -18%;
  left: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgb(var(--brand-400) / 0.55), transparent 68%);
  animation: derive-a 34s ease-in-out infinite alternate;
}
.fond-anime span:nth-child(2) {
  top: 10%;
  right: -16%;
  width: 52vw;
  height: 52vw;
  background: radial-gradient(circle, rgb(var(--brand-300) / 0.5), transparent 68%);
  animation: derive-b 41s ease-in-out infinite alternate;
}
.fond-anime span:nth-child(3) {
  bottom: -24%;
  left: 22%;
  width: 66vw;
  height: 66vw;
  background: radial-gradient(circle, rgb(var(--brand-500) / 0.4), transparent 70%);
  animation: derive-c 47s ease-in-out infinite alternate;
}

@keyframes derive-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(14vw, 10vh, 0) scale(1.18);
  }
}
@keyframes derive-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1.1);
  }
  100% {
    transform: translate3d(-12vw, 16vh, 0) scale(0.92);
  }
}
@keyframes derive-c {
  0% {
    transform: translate3d(0, 0, 0) scale(0.95);
  }
  100% {
    transform: translate3d(10vw, -12vh, 0) scale(1.15);
  }
}

/* Sur téléphone, trois disques de 60 vw floutés à 80 px coûtent cher pour un
   décor : on réduit le flou et on en retire un. */
@media (max-width: 640px) {
  .fond-anime span {
    filter: blur(52px);
  }
  .fond-anime span:nth-child(3) {
    display: none;
  }
}

/* ── Logo 3D (accueil) ─────────────────────────────────────────────────────
   Un vrai volume rendu en WebGL (components/logo3d.ts) : géométrie extrudée,
   deux lampes, Fresnel sur les arêtes, et une caméra qui tourne autour. Net à
   toutes les tailles, rien à télécharger. */

.logo-tournant {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: grid;
  /* Calé en BAS de l'accroche : le logo monte derrière le titre, et son sol
     mouillé s'étale sous les boutons, dans l'espace libre avant les étapes. */
  place-items: end center;
  /* Bords seulement : le sol et son reflet se fondent dans la page au lieu de
     s'arrêter net sur les côtés du canevas. */
  -webkit-mask-image: radial-gradient(64% 72% at 50% 58%, #000 62%, transparent 100%);
  mask-image: radial-gradient(64% 72% at 50% 58%, #000 62%, transparent 100%);
}

.logo-tournant canvas {
  /* 100 % de l'accroche et non 98vw : l'accroche a déjà ses marges, et 98vw
     débordait de dix pixels sur téléphone — toute la page défilait de côté. */
  width: min(920px, 100%);
  aspect-ratio: 16 / 11;
  opacity: var(--opacite-logo);
  /* Le halo ne sort pas du shader : c'est une ombre portée violette, moins
     chère qu'un vrai bloom et suffisante derrière un titre. */
  filter: drop-shadow(0 26px 54px rgb(var(--brand-700) / 0.35));
}

/* Opacité de décor : le titre, le texte et les boutons passent par-dessus.
   Plus haute la nuit, où le fond sombre supporte davantage de couleur. */
:root {
  --opacite-logo: 0.55;
}
:root[data-theme="dark"] {
  --opacite-logo: 0.78;
}

/* Le paragraphe de l'accroche passe devant le logo : un halo de la couleur de
   la page, autour de chaque lettre, le détache du violet sans cacher le logo
   derrière un bandeau. C'est ce qui permet au logo de rester franc. */
.halo-texte {
  text-shadow:
    0 0 12px rgb(var(--ink-950)),
    0 0 24px rgb(var(--ink-950)),
    0 0 2px rgb(var(--ink-950));
}

/* Sur téléphone, le titre occupe quatre lignes : on atténue un peu. */
@media (max-width: 640px) {
  :root {
    --opacite-logo: 0.45;
  }
  :root[data-theme="dark"] {
    --opacite-logo: 0.62;
  }
}

/* ── Clap de cinéma (components/Clap.tsx) ──────────────────────────────── */

/* Balancement doux, autour du bas de la planche, comme posé sur une table. */
@keyframes clap-balance {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
.clap-balance {
  transform-origin: 50% 96%;
  animation: clap-balance 3.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 5px rgba(60, 40, 30, 0.18));
}

/* Charnière : centre du rivet du haut, mesuré sur l'image (127 ; 386 px sur
   1283 x 1226). */
.clap-bras {
  transform-origin: 9.9% 31.48%;
}

/* Claquement : le bras prend un peu d'élan, se rabat d'un coup sec — il
   tourne de 16,29° et remonte de 1,64 % pour se poser pile sur la barre —,
   reste fermé un instant, puis se rouvre. */
@keyframes clap-claque {
  0% {
    transform: translateY(0) rotate(0deg);
    animation-timing-function: ease-out;
  }
  18% {
    transform: translateY(0) rotate(-7deg);
    animation-timing-function: cubic-bezier(0.6, 0, 1, 1);
  }
  34% {
    transform: translateY(-1.64%) rotate(16.29deg);
  }
  54% {
    transform: translateY(-1.64%) rotate(16.29deg);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}
.clap-claque {
  animation: clap-claque 1s both;
}

/* Choc : la planche encaisse le coup à l'instant où le bras la frappe. */
@keyframes clap-choc {
  0%,
  33% {
    transform: scale(1);
  }
  38% {
    transform: translateY(1.5%) scale(1.035, 0.965);
  }
  48% {
    transform: scale(0.99, 1.01);
  }
  60%,
  100% {
    transform: scale(1);
  }
}
.clap-choc {
  transform-origin: 50% 100%;
  animation: clap-choc 1s both;
}

/* Étoiles qui jaillissent à l'impact : elles éclosent, filent en tournant
   vers leur point d'arrivée (--dx, --dy) puis rapetissent et s'effacent. Le
   retard (inline) les cale sur l'instant où le bras frappe la planche.
   translate / rotate / scale séparés : le trajet reste un seul élan (vif puis
   freiné) pendant que la taille et l'opacité suivent leur propre rythme. */
@keyframes clap-etoile {
  0% {
    opacity: 0;
    translate: 0 0;
    rotate: 0deg;
    scale: 0.2;
  }
  12% {
    opacity: 1;
    scale: 1.15;
  }
  55% {
    opacity: 1;
    scale: 1;
    animation-timing-function: ease-in;
  }
  100% {
    opacity: 0;
    translate: var(--dx) var(--dy);
    rotate: var(--rot);
    scale: 0.5;
  }
}
.clap-etoile {
  opacity: 0;
  animation: clap-etoile 0.85s cubic-bezier(0.15, 0.75, 0.3, 1) both;
}
.placeholder\:text-slate-500::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--slate-500) / var(--tw-text-opacity));
}
.placeholder\:text-slate-500::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--slate-500) / var(--tw-text-opacity));
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}
.after\:rounded-none::after {
  content: var(--tw-content);
  border-radius: 0px;
}
.first\:border-t-0:first-child {
  border-top-width: 0px;
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.target\:ring-2:target {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.target\:ring-accent-400\/60:target {
  --tw-ring-color: rgb(var(--accent-400) / 0.6);
}
.hover\:border-edge-strong:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--edge-strong) / var(--tw-border-opacity));
}
.hover\:bg-accent-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--accent-500) / var(--tw-bg-opacity));
}
.hover\:bg-accent-500\/10:hover {
  background-color: rgb(var(--accent-500) / 0.1);
}
.hover\:bg-accent-500\/25:hover {
  background-color: rgb(var(--accent-500) / 0.25);
}
.hover\:bg-black\/85:hover {
  background-color: rgb(0 0 0 / 0.85);
}
.hover\:bg-ink-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ink-800) / var(--tw-bg-opacity));
}
.hover\:bg-red-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.hover\:bg-voile\/\[0\.02\]:hover {
  background-color: rgb(var(--voile) / 0.02);
}
.hover\:bg-voile\/\[0\.035\]:hover {
  background-color: rgb(var(--voile) / 0.035);
}
.hover\:bg-voile\/\[0\.03\]:hover {
  background-color: rgb(var(--voile) / 0.03);
}
.hover\:bg-voile\/\[0\.04\]:hover {
  background-color: rgb(var(--voile) / 0.04);
}
.hover\:bg-voile\/\[0\.05\]:hover {
  background-color: rgb(var(--voile) / 0.05);
}
.hover\:bg-voile\/\[0\.06\]:hover {
  background-color: rgb(var(--voile) / 0.06);
}
.hover\:bg-voile\/\[0\.08\]:hover {
  background-color: rgb(var(--voile) / 0.08);
}
.hover\:text-accent-300:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-300) / var(--tw-text-opacity));
}
.hover\:text-accent-400:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-400) / var(--tw-text-opacity));
}
.hover\:text-accent-500:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-500) / var(--tw-text-opacity));
}
.hover\:text-slate-100:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--slate-100) / var(--tw-text-opacity));
}
.hover\:text-slate-200:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--slate-200) / var(--tw-text-opacity));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.focus\:border-accent-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--accent-400) / var(--tw-border-opacity));
}
.focus\:border-brand-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--brand-400) / var(--tw-border-opacity));
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-brand-500\/30:focus {
  --tw-ring-color: rgb(var(--brand-500) / 0.3);
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:after\:ring-2:focus-visible::after {
  content: var(--tw-content);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:after\:ring-brand-400\/60:focus-visible::after {
  content: var(--tw-content);
  --tw-ring-color: rgb(var(--brand-400) / 0.6);
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.group[open] .group-open\:rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.04\] {
  --tw-scale-x: 1.04;
  --tw-scale-y: 1.04;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-accent-400 {
  --tw-text-opacity: 1;
  color: rgb(var(--accent-400) / var(--tw-text-opacity));
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:ring-accent-400\/60 {
  --tw-ring-color: rgb(var(--accent-400) / 0.6);
}
.group:focus-visible .group-focus-visible\:opacity-100 {
  opacity: 1;
}
@media not all and (min-width: 768px) {

  .max-md\:absolute {
    position: absolute;
  }

  .max-md\:right-4 {
    right: 1rem;
  }

  .max-md\:top-1\/2 {
    top: 50%;
  }

  .max-md\:z-20 {
    z-index: 20;
  }

  .max-md\:-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
@media (min-width: 640px) {

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:\!mx-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .sm\:\!ml-auto {
    margin-left: auto !important;
  }

  .sm\:\!mr-0 {
    margin-right: 0px !important;
  }

  .sm\:mt-14 {
    margin-top: 3.5rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:h-32 {
    height: 8rem;
  }

  .sm\:h-52 {
    height: 13rem;
  }

  .sm\:h-64 {
    height: 16rem;
  }

  .sm\:w-32 {
    width: 8rem;
  }

  .sm\:w-48 {
    width: 12rem;
  }

  .sm\:w-72 {
    width: 18rem;
  }

  .sm\:w-80 {
    width: 20rem;
  }

  .sm\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[13rem_1fr\] {
    grid-template-columns: 13rem 1fr;
  }

  .sm\:grid-cols-\[minmax\(0\2c 300px\)_1fr\] {
    grid-template-columns: minmax(0,300px) 1fr;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .sm\:pt-24 {
    padding-top: 6rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-right {
    text-align: right;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-\[7rem\] {
    font-size: 7rem;
  }

  .sm\:text-\[9rem\] {
    font-size: 9rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 768px) {

  .md\:col-start-1 {
    grid-column-start: 1;
  }

  .md\:col-start-2 {
    grid-column-start: 2;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:min-h-\[24rem\] {
    min-height: 24rem;
  }

  .md\:max-w-\[22rem\] {
    max-width: 22rem;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-\[1\.4fr_1fr_1fr\] {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .md\:justify-self-end {
    justify-self: end;
  }

  .md\:pr-12 {
    padding-right: 3rem;
  }
}
@media (min-width: 1024px) {

  .lg\:hidden {
    display: none;
  }

  .lg\:w-\[21rem\] {
    width: 21rem;
  }

  .lg\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[minmax\(0\2c 400px\)_1fr\] {
    grid-template-columns: minmax(0,400px) 1fr;
  }

  .lg\:pr-20 {
    padding-right: 5rem;
  }

  .lg\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }
}
@media (min-width: 1280px) {

  .xl\:w-\[23rem\] {
    width: 23rem;
  }

  .xl\:max-w-\[24rem\] {
    max-width: 24rem;
  }
}
.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display: none;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!./node_modules/next/font/local/target.css?{"path":"app\\layout.tsx","import":"","arguments":[{"src":[{"path":"./fonts/Aether-Light.woff2","weight":"300","style":"normal"},{"path":"./fonts/Aether-Regular.woff2","weight":"400","style":"normal"},{"path":"./fonts/Aether-Medium.woff2","weight":"500","style":"normal"},{"path":"./fonts/Aether-Semibold.woff2","weight":"600","style":"normal"},{"path":"./fonts/Aether-Bold.woff2","weight":"700","style":"normal"}],"display":"swap","variable":"--font-aether","fallback":["-apple-system","BlinkMacSystemFont","Segoe UI","system-ui","sans-serif"]}],"variableName":"aether"} ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: '__aether_9b29c3';
src: url(/_next/static/media/47a45855bde4c7da-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: '__aether_9b29c3';
src: url(/_next/static/media/079ec9ebd6b9d3b0-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: '__aether_9b29c3';
src: url(/_next/static/media/ec6a9401ce4de008-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: '__aether_9b29c3';
src: url(/_next/static/media/0ef82b20a2b26a9c-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: '__aether_9b29c3';
src: url(/_next/static/media/af73b1201ebf6710-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 700;
font-style: normal;
}@font-face {font-family: '__aether_Fallback_9b29c3';src: local("Arial");ascent-override: 98.56%;descent-override: 24.54%;line-gap-override: 0.00%;size-adjust: 98.29%
}.__className_9b29c3 {font-family: '__aether_9b29c3', '__aether_Fallback_9b29c3', -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, sans-serif
}.__variable_9b29c3 {--font-aether: '__aether_9b29c3', '__aether_Fallback_9b29c3', -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, sans-serif
}