/* Ajouts Laravel à la charte du designer (css/hotella.css).
   Uniquement des composants que les maquettes HTML n'avaient pas :
   lien des cartes d'articles, page article, messages de formulaire, modale devis.
   Toutes les valeurs viennent des variables de :root du designer. */

/* ---- Cartes d'articles : toute la carte est cliquable ---- */
.vcard { position: relative; }
.vcard h3 a { color: inherit; text-decoration: none; }
.vcard h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vcard h3 a:focus-visible { outline: none; }
.vcard:has(h3 a:focus-visible) { outline: 2px solid var(--electric); outline-offset: 4px; }

/* ---- Page article ---- */
.article { max-width: 760px; color: var(--body); font-size: 17px; line-height: 1.75; }
.article__chapo { font-size: clamp(19px, 2vw, 22px); line-height: 1.55; color: var(--ink); font-weight: 500; margin: 0 0 8px; }
.article h2 { color: var(--ink); font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -.02em; font-weight: 700; margin: 52px 0 14px; }
.article h3 { color: var(--ink); font-size: 20px; font-weight: 600; margin: 32px 0 10px; }
.article p { margin: 0 0 18px; }
.article ul, .article ol { margin: 0 0 22px; padding-left: 22px; }
.article li { margin: 0 0 10px; padding-left: 4px; }
.article ul li::marker { color: var(--electric); }
.article ol li::marker { color: var(--teal); font-weight: 600; }
.article figure { margin: 36px 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); }
.article figure img { display: block; width: 100%; height: auto; }
.article__partage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; }
.article__partage span { color: var(--muted); }
.article__partage a { color: var(--azure); font-weight: 600; text-decoration: none; }
.article__partage a:hover { text-decoration: underline; }

/* ---- Messages de formulaire (devis, contact) ---- */
.form__msg { border-radius: var(--r-md); padding: 16px 18px; margin: 0 0 20px; font-size: 15px; line-height: 1.55; }
.form__msg--ok { background: var(--ivory-2); color: var(--ink); border: 1px solid var(--line-strong); }
.form__msg--ok strong { display: block; margin-bottom: 2px; }
.form__msg--err { background: #FFF4F4; color: #9B1C1C; border: 1px solid #F3C6C6; }
.field__err { display: block; margin-top: 6px; font-size: 13px; color: #B42318; }
.form__trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- Modale « Demande de devis » (même mécanique que la fenêtre vidéo .lb) ---- */
.devis-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 16px; }
.devis-modal.est-ouverte, .devis-modal:target { display: flex; }
.devis-modal__fond { position: absolute; inset: 0; background: rgba(4, 5, 15, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: devis-fondu .3s var(--ease-out) both; }
.devis-modal__boite { position: relative; width: 100%; max-width: 760px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; background: var(--ivory); border-radius: var(--r-xl); padding: 32px 20px 28px; box-shadow: var(--sh-lg); animation: devis-apparition .45s var(--ease-out) both; }
@media (min-width: 768px) { .devis-modal__boite { padding: 44px 44px 36px; } }
.devis-modal__fermer { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.devis-modal__fermer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.devis-modal__fermer:hover { background: var(--ivory-2); }
.devis-modal .sec__head { margin-bottom: 24px; padding-right: 40px; text-align: left; }
@keyframes devis-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes devis-apparition { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .devis-modal__fond, .devis-modal__boite { animation: none; } }

/* ======================================================================
   Cartes .icard — « border beam » (trait de lumière qui fait le tour du
   bord), halo qui suit la souris, icône animée. Surcharge du designer :
   ne touche pas css/hotella.css.
   ====================================================================== */
@property --beam-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.icard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
/* Dans une grille à 4 colonnes, l'icône passe au-dessus : le texte garde toute la largeur. */
.g4 > .icard { flex-direction: column; gap: 18px; }

/* Le trait de lumière : un dégradé conique qui tourne, limité au contour (masque). */
.icard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--beam-angle),
    transparent 0deg, transparent 250deg,
    rgba(53, 214, 255, .0) 262deg, var(--cyan) 312deg, var(--electric) 336deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease-out);
  animation: beam-tour 3.4s linear infinite paused;
}
/* Le halo qui suit le curseur (--mx / --my posés par js/site.js). */
.icard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(53, 214, 255, .12), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
  pointer-events: none;
}
.icard:hover, .icard:focus-within {
  transform: translateY(-6px);
  border-color: rgba(11, 169, 238, .28);
  box-shadow: 0 26px 60px -30px rgba(11, 120, 190, .45), var(--sh-sm);
}
.icard:hover::before, .icard:focus-within::before { opacity: 1; animation-play-state: running; }
.icard:hover::after, .icard:focus-within::after { opacity: 1; }

/* L’icône : prend le dégradé de marque (sans rotation). */
.icard__ic { transition: background .45s var(--ease-out), transform .55s var(--ease-out), box-shadow .45s var(--ease-out); }
.icard__ic svg { transition: stroke .35s; }
.icard:hover .icard__ic, .icard:focus-within .icard__ic {
  background: var(--grad);
  box-shadow: 0 10px 22px -10px rgba(11, 169, 238, .8);
  transform: scale(1.06);
}
.icard:hover .icard__ic svg, .icard:focus-within .icard__ic svg { stroke: #fff; }
.icard h3 { transition: color .35s; }
.icard:hover h3 { color: var(--azure); }

@keyframes beam-tour { to { --beam-angle: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .icard, .icard__ic { transition: none; }
  .icard::before { animation: none; --beam-angle: 300deg; }
  .icard:hover, .icard:hover .icard__ic { transform: none; }
}

/* ======================================================================
   Cartes .ocard (Hotella IA, Services) — une seule carte : visuel en
   tête sur toute la largeur, texte dessous, même survol que .icard.
   ====================================================================== */
.ocard {
  position: relative;
  isolation: isolate;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.ocard__panel {
  border: 0;
  border-radius: 0;
  aspect-ratio: 16 / 10;
  background: var(--ivory);          /* fond neutre commun à tous les visuels */
  border-bottom: 1px solid var(--line);
}
.ocard__panel > img { transition: transform .9s var(--ease-out); }
/* Visuel détouré (fond transparent) : posé en bas du cadre, entier. */
.ocard__panel--detoure > img {
  position: absolute; left: 0; right: 0; bottom: 0; top: 7%;
  width: 100%; height: 93%;
  object-fit: contain; object-position: center bottom; transform-origin: center bottom;
}
.ocard__panel--shot > img { transition: transform .9s var(--ease-out), box-shadow .5s var(--ease-out); }
.ocard__txt {
  display: block;
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.6vw, 36px) clamp(26px, 2.8vw, 38px);
}
.ocard__txt h3 { margin-bottom: 10px; transition: color .35s; }
.ocard__txt h3::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 16px;
  border-radius: 3px;
  background: var(--grad);
  transition: width .5s var(--ease-out);
}
.ocard__txt p { max-width: 62ch; }

/* Survol : soulèvement, zoom doux du visuel, trait de lumière sur le bord. */
.ocard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--beam-angle),
    transparent 0deg, transparent 250deg,
    rgba(53, 214, 255, 0) 262deg, var(--cyan) 312deg, var(--electric) 336deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease-out);
  animation: beam-tour 4.2s linear infinite paused;
}
.ocard:hover, .ocard:focus-within {
  transform: translateY(-6px);
  border-color: rgba(11, 169, 238, .28);
  box-shadow: 0 30px 70px -34px rgba(11, 120, 190, .45), var(--sh-sm);
}
.ocard:hover::before, .ocard:focus-within::before { opacity: 1; animation-play-state: running; }
.ocard:hover .ocard__panel > img { transform: scale(1.04); }
.ocard:hover .ocard__panel--shot > img { transform: scale(1.03); box-shadow: 0 26px 56px -22px rgba(2, 6, 20, .55); }
.ocard:hover .ocard__txt h3 { color: var(--azure); }
.ocard:hover .ocard__txt h3::before { width: 64px; }

@media (prefers-reduced-motion: reduce) {
  .ocard, .ocard__panel > img { transition: none; }
  .ocard::before { animation: none; --beam-angle: 300deg; }
  .ocard:hover, .ocard:hover .ocard__panel > img { transform: none; }
}

/* ======================================================================
   Grandes tuiles produit (.plat-card accueil, .appcard Guest App / Tab) :
   même « border beam » que les cartes (sans halo : les photos ont leur propre fond),
   titre qui passe en bleu.
   ====================================================================== */
.plat-card, .appcard, .vcard--entiere { isolation: isolate; }
.vcard--entiere { position: relative; }
.plat-card::before, .appcard::before, .vcard--entiere::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--beam-angle),
    transparent 0deg, transparent 240deg,
    rgba(53, 214, 255, 0) 255deg, var(--cyan) 310deg, var(--electric) 338deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease-out);
  animation: beam-tour 4.6s linear infinite paused;
}
.plat-card:hover, .plat-card:focus-visible, .appcard:hover, .vcard--entiere:hover {
  border-color: rgba(11, 169, 238, .3);
  box-shadow: 0 34px 80px -38px rgba(11, 120, 190, .5), var(--sh-sm);
}
.plat-card:hover::before, .plat-card:focus-visible::before, .appcard:hover::before, .vcard--entiere:hover::before { opacity: 1; animation-play-state: running; }
.plat-card__body h3, .appcard h3, .vcard--entiere h3 { transition: color .35s; }
.plat-card:hover .plat-card__body h3, .appcard:hover h3, .vcard--entiere:hover h3 { color: var(--azure); }
.plat-card:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .plat-card::before, .appcard::before, .vcard--entiere::before { animation: none; --beam-angle: 300deg; }
}

/* ======================================================================
   Page Contact
   ====================================================================== */
/* Bannière : moins haute que les pages produit, texte plus sobre. */
.phero--compact h1 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1.08; max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.phero--compact .lede { font-size: clamp(16px, 1.25vw, 18.5px); max-width: 52ch; margin-top: 18px; }
.phero--compact .btns { justify-content: center; }

/* Les trois cartes occupent exactement la hauteur du formulaire. */
@media (min-width: 1081px) {
  .contact-row { align-items: stretch; }
  .contact-col .ccard { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
}

/* Page article : bannière adaptée à des titres longs (phrases complètes). */
.phero--article h1 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.12; max-width: 24ch; text-wrap: balance; }
.phero--article .lede { font-size: clamp(14.5px, 1.05vw, 16px); margin-top: 18px; color: var(--muted-d); }

/* ---------------------------------------------------------------------------
   Guest App (.appcard téléphone) : le téléphone entier dans la tuile, en 3D.
   Le designer le rognait par le bas. Incliné vers l'arrière (perspective), il
   tient en entier sans agrandir la tuile. Au survol, il s'oriente vers la
   souris (--tx / --ty de -1 à 1, posés par js/site.js) sans jamais sortir de la tuile.
   La variante tablette (.appgrid--tab) garde le réglage du designer.
--------------------------------------------------------------------------- */
.appgrid:not(.appgrid--tab) .appcard__media {
  perspective: 1200px;
  perspective-origin: 50% 0%;
  align-items: center;
}
.appgrid:not(.appgrid--tab) .appcard__media img {
  width: auto;
  height: 102%;
  max-width: none;
  border-radius: 12% / 6%;
  transform-origin: 50% 40%;
  transform:
    translateY(-5%)
    scale(var(--zoom, 1))
    rotateX(calc(30deg + var(--ty, 0) * 5deg))
    rotateY(calc(var(--tx, 0) * 13deg))
    rotateZ(calc(-7deg + var(--tx, 0) * 3deg));
  transition: transform .9s var(--ease);
  will-change: transform;
}
.appgrid:not(.appgrid--tab) .appcard.is-tilting .appcard__media img { transition: transform .18s ease-out; }
.appgrid:not(.appgrid--tab) .appcard:hover .appcard__media { --zoom: .9; }
/* Ombre portée au sol : elle glisse à l'opposé de l'inclinaison. */
.appgrid:not(.appgrid--tab) .appcard__media::after {
  content: ""; position: absolute; left: 50%; bottom: 3%; width: 46%; height: 9%;
  transform: translateX(calc(-50% - var(--tx, 0) * 14px)); border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(4, 5, 15, .24), transparent);
  transition: transform .9s var(--ease);
}
.appgrid:not(.appgrid--tab) .appcard.is-tilting .appcard__media::after { transition: transform .18s ease-out; }

/* ---------------------------------------------------------------------------
   Dashboard Hôtel · « Tout l'hôtel sur un seul écran »
   Vitrine : onglets à gauche, écran réel du tableau de bord à droite, dans le
   cadre lumineux de l'accueil (.dash-wrap, .dash-glow, .dash-pill du designer).
--------------------------------------------------------------------------- */
.pilot { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 4vw, 64px); align-items: center; }
.pilot__onglets { display: flex; flex-direction: column; gap: 10px; }
.pilot__onglet {
  position: relative; display: flex; gap: 16px; align-items: flex-start; width: 100%;
  padding: 18px 20px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-lg);
  transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.pilot__onglet:hover { background: rgba(11, 169, 238, .05); }
.pilot__onglet.is-actif { background: #fff; border-color: var(--line); box-shadow: var(--sh-sm); }
.pilot__num { flex: none; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); padding-top: 4px; transition: color .45s; }
.pilot__onglet.is-actif .pilot__num { color: var(--electric); }
.pilot__onglet b { display: block; font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.pilot__onglet small {
  display: block; font-size: 14.5px; line-height: 1.55; color: var(--body);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease), opacity .5s var(--ease), margin .5s var(--ease);
}
.pilot__onglet.is-actif small { max-height: 90px; opacity: 1; margin-top: 6px; }
/* Barre de progression de l'onglet actif pendant le défilement automatique. */
.pilot__onglet::after {
  content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--electric), var(--cyan));
  transform: scaleX(0); transform-origin: left;
}
.pilot.is-auto .pilot__onglet.is-actif::after { animation: pilot-progres 5.5s linear forwards; }
@keyframes pilot-progres { to { transform: scaleX(1); } }

.pilot__ecran {
  margin: 0; position: relative; z-index: 1; overflow: hidden; aspect-ratio: 16 / 10;
  border-radius: var(--r-lg); background: #121314; box-shadow: var(--sh-lg);
  border: 1px solid rgba(255, 255, 255, .06);
}
.pilot__ecran img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top;
  opacity: 0; transform: scale(1.03); transition: opacity .7s var(--ease), transform 1.2s var(--ease);
}
.pilot__ecran img.is-actif { opacity: 1; transform: none; }
.pilot__vitrine .dash-pill { bottom: 7%; }
.pilot.is-in .dash-pill { opacity: 1; } /* le designer l'affiche via .dash-wrap.is-in */
@media (max-width: 980px) {
  .pilot { grid-template-columns: minmax(0, 1fr); }
  .pilot__vitrine { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .pilot__ecran img { transition: none; transform: none; }
  .pilot.is-auto .pilot__onglet.is-actif::after { animation: none; }
}

/* Frise « Le cycle d'une demande » : 1 → 6 s'allument à tour de rôle, en boucle.
   Classes posées par js/site.js : .is-active (étape en cours), .is-done (passées). */
.cycle-bloc { margin-top: clamp(64px, 7vw, 104px); text-align: center; }
.cycle { list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.cycle li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 4px; }
.cycle li > b {
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 700;
  background: #fff; color: var(--teal); border: 1px solid var(--line-strong);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.cycle li > span { font-size: 14px; line-height: 1.5; color: var(--body); max-width: 22ch; transition: color .35s var(--ease); }
/* Trait gris entre deux pastilles, puis trait bleu qui se trace par-dessus. */
.cycle li::before, .cycle li::after {
  content: ""; position: absolute; top: 21px; left: calc(50% + 22px); width: calc(100% - 26px); height: 2px; border-radius: 2px;
}
.cycle li::before { background: var(--line-strong); }
.cycle li::after { background: linear-gradient(90deg, var(--electric), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.cycle li:last-child::before, .cycle li:last-child::after { display: none; }
.cycle li.is-done::after { transform: scaleX(1); }
.cycle li.is-done > b { background: var(--electric); border-color: var(--electric); color: #fff; }
.cycle li.is-active > b {
  background: linear-gradient(135deg, var(--teal), var(--electric)); border-color: transparent; color: #fff;
  transform: scale(1.14); animation: cycle-halo 1.1s ease-out infinite;
}
.cycle li.is-active > span { color: var(--ink); }
@keyframes cycle-halo {
  0%   { box-shadow: 0 0 0 0 rgba(11, 169, 238, .5); }
  100% { box-shadow: 0 0 0 14px rgba(11, 169, 238, 0); }
}
@media (max-width: 900px) {
  .cycle { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .cycle li:nth-child(3n)::before, .cycle li:nth-child(3n)::after { display: none; }
}
@media (max-width: 560px) {
  .cycle { grid-template-columns: minmax(0, 1fr); row-gap: 0; text-align: left; }
  .cycle li { flex-direction: row; align-items: flex-start; gap: 16px; padding: 0 0 22px; }
  .cycle li > span { max-width: none; padding-top: 10px; text-align: left; }
  .cycle li::before, .cycle li::after { top: 44px; left: 21px; width: 2px; height: calc(100% - 44px); }
  .cycle li::after { transform: scaleY(0); transform-origin: top; }
  .cycle li.is-done::after { transform: scaleY(1); }
  .cycle li:nth-child(3n)::before, .cycle li:nth-child(3n)::after { display: block; }
  .cycle li:last-child::before, .cycle li:last-child::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cycle li.is-active > b { animation: none; }
}

/* ---------------------------------------------------------------------------
   Hotella Tab (.appgrid--tab) : même 3D que les téléphones de la Guest App.
   Tablette entière, inclinée vers l'arrière ; au survol elle suit la souris
   (--tx / --ty posés par js/site.js) sans sortir de la tuile.
--------------------------------------------------------------------------- */
.appgrid--tab .appcard__media {
  perspective: 1400px;
  perspective-origin: 50% 0%;
  align-items: center;
}
.appgrid.appgrid--tab .appcard .appcard__media img,
.appgrid.appgrid--tab .appcard:hover .appcard__media img {
  width: auto;
  height: 90%;
  max-width: none;
  transform-origin: 50% 45%;
  transform:
    translateY(-1%)
    scale(var(--zoom, 1))
    rotateX(calc(24deg + var(--ty, 0) * 4deg))
    rotateY(calc(var(--tx, 0) * 10deg))
    rotateZ(calc(-4deg + var(--tx, 0) * 2deg));
  transition: transform .9s var(--ease);
  will-change: transform;
}
.appgrid.appgrid--tab .appcard.is-tilting .appcard__media img { transition: transform .18s ease-out; }
.appgrid--tab .appcard:hover .appcard__media { --zoom: .94; }
.appgrid--tab .appcard__media::after {
  content: ""; position: absolute; left: 50%; bottom: 4%; width: 62%; height: 9%;
  transform: translateX(calc(-50% - var(--tx, 0) * 14px)); border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(4, 5, 15, .2), transparent);
  transition: transform .9s var(--ease);
}
.appgrid--tab .appcard.is-tilting .appcard__media::after { transition: transform .18s ease-out; }

/* ---------------------------------------------------------------------------
   Menu mobile plein écran (partials/menu-mobile, sous 1180 px).
   Le bouton ☰ du designer l'ouvre (js/site.js) ; « Solutions » s'y déplie
   et montre les 4 produits, absents du menu compact d'origine.
--------------------------------------------------------------------------- */
.mmenu {
  position: fixed; inset: 0; z-index: 79; /* juste sous la barre de navigation (.nav : 80) */
  padding: 92px 18px 24px; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(120% 60% at 50% 0%, rgba(11, 169, 238, .16), transparent 60%), rgba(4, 5, 15, .97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.mmenu.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.mmenu__in { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; min-height: 100%; }
.mmenu__in > * { transform: translateY(14px); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.mmenu.is-open .mmenu__in > * { transform: none; opacity: 1; }
.mmenu.is-open .mmenu__in > :nth-child(2) { transition-delay: .06s; }
.mmenu.is-open .mmenu__in > :nth-child(3) { transition-delay: .12s; }

.mmenu__lien {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 15px 6px; font: inherit; font-size: 22px; font-weight: 600; letter-spacing: -.02em;
  color: #fff; text-decoration: none; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .09);
  cursor: pointer; text-align: left;
}
.mmenu__lien:hover, .mmenu__lien:focus-visible { color: var(--cyan); }
.mmenu__declic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.mmenu__declic[aria-expanded="false"] svg { transform: rotate(-90deg); }

.mmenu__produits { list-style: none; margin: 0; padding: 8px 0 10px; display: grid; gap: 6px; overflow: hidden; max-height: 520px; transition: max-height .45s var(--ease), padding .45s var(--ease); }
.mmenu__declic[aria-expanded="false"] + .mmenu__produits { max-height: 0; padding-block: 0; }
.mmenu__produits a {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; text-decoration: none;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(173, 205, 255, .12);
  transition: background .3s, border-color .3s;
}
.mmenu__produits a:hover, .mmenu__produits a:focus-visible { background: rgba(11, 169, 238, .12); border-color: rgba(53, 214, 255, .4); }
.mmenu__ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(11, 169, 238, .28), rgba(5, 116, 160, .18)); border: 1px solid rgba(53, 214, 255, .3);
}
.mmenu__ic svg { width: 21px; height: 21px; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mmenu__produits b { display: block; font-size: 16px; font-weight: 650; color: #fff; }
.mmenu__produits small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: rgba(214, 226, 245, .66); }
.mmenu__produits a.mmenu__ensemble {
  justify-content: space-between; background: none; border-color: transparent; padding: 10px 12px;
  font-size: 14.5px; font-weight: 600; color: var(--cyan);
}
.mmenu__ensemble svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mmenu__pages { display: flex; flex-direction: column; }
.mmenu__bas { margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 14px; align-items: stretch; text-align: center; }
.mmenu__bas .btn { justify-content: center; width: 100%; }
.mmenu__tel { font-size: 14px; font-weight: 600; color: rgba(214, 226, 245, .8); text-decoration: none; padding: 6px; }
.mmenu__tel:hover { color: #fff; }

/* Bouton ☰ qui devient une croix quand le menu est ouvert. */
.nav__burger span, .nav__burger span::before, .nav__burger span::after { transition: transform .3s var(--ease), background .3s, top .3s var(--ease); }
.nav.is-mmenu .nav__burger span { background: transparent !important; }
.nav.is-mmenu .nav__burger span::before { top: 0; transform: rotate(45deg); background: #fff; }
.nav.is-mmenu .nav__burger span::after { top: 0; transform: rotate(-45deg); background: #fff; }
.nav.is-mmenu { background: rgba(7, 11, 28, .9); border-color: rgba(255, 255, 255, .16); }
.nav.is-mmenu .nav__burger { border-color: rgba(255, 255, 255, .28); background: transparent; }
body.is-mmenu { overflow: hidden; }
@media (min-width: 1181px) { .mmenu { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mmenu, .mmenu__in > *, .mmenu__produits { transition: none; }
}

/* ---------------------------------------------------------------------------
   Finalisation v2.2 (02/11/2026, dossier « 00 - FINALISATION SITE WEB HOTELLA »).
   Rendu validé dans la simulation : titres moins gras, sans capitales forcées.
--------------------------------------------------------------------------- */
h1, h2, h3 { font-weight: 600 !important; text-transform: none !important; }
h1 { letter-spacing: -.02em !important; }
h2 { letter-spacing: -.015em !important; }

/* Accueil : slogan en titre, une phrase dessous. */
.hero__sub { max-width: 880px; margin: 18px auto 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: #D6DEEA; text-wrap: pretty; }

/* Bandeau « Programme Hôtels fondateurs », sous le héros. */
.fondateurs { padding: 40px 0 0; }
.fondateurs__in {
  max-width: 1120px; margin: 0 auto; padding: 28px 32px; border-radius: 20px; background: #E6F6FD;
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between;
}
.fondateurs__eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #0343CF; }
.fondateurs p { margin: 6px 0 0; color: #2B3A55; font-size: 17px; line-height: 1.5; max-width: 640px; }
@media (max-width: 1180px) { .fondateurs__in { margin-inline: 18px; } }
@media (max-width: 560px) { .fondateurs__in { padding: 24px 22px; } .fondateurs .btn { width: 100%; justify-content: center; } }

/* Les chiffres : titre visible, nombre en grand, phrase courte dessous. */
.chif__titre { margin: 0 auto 44px; max-width: 900px; text-align: center; color: #fff; text-wrap: balance; }
.lev--chiffre .lev__claim { display: flex; flex-direction: column; gap: 14px; }
.lev--chiffre .lev__claim b { display: block; font-size: clamp(56px, 6vw, 76px); line-height: 1; letter-spacing: -.03em; font-weight: 600;
  background: linear-gradient(120deg, #0343CF, #0BA9EE 70%, #6FECF1); -webkit-background-clip: text; background-clip: text; }
.lev--chiffre .lev__claim span { display: block; font-size: 17px; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: #0B1A2E; max-width: 300px; }

/* Innovation : la capture Hotella Pilot remplace le film du tableau de bord (même cadrage 1212/686). */
.dash .dash__capture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.chif__titre .grad-text { background: none; -webkit-text-fill-color: #0BA9EE; color: #0BA9EE; }

/* Hotella AI Agent : grille des sept langues (sans drapeaux). */
.langs7 { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 40px auto 0; max-width: 1040px; }
.langs7__carte { flex: 0 0 calc(25% - 11px); min-width: 200px; padding: 26px 22px; border-radius: 20px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: left; }
.langs7__carte b { display: block; font-size: 30px; font-weight: 600; line-height: 1.15; color: #fff; letter-spacing: -.01em; white-space: nowrap; }
.langs7__carte span { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6FECF1; }
.langs7__note { margin: 26px auto 0; text-align: center; color: #C9D6EA; font-size: 16px; line-height: 1.5; }
@media (max-width: 760px) { .langs7__carte { flex-basis: calc(50% - 7px); min-width: 0; } .langs7__carte b { font-size: 24px; } }

/* Formules : la phrase sur le matériel, sous les trois cartes. */
.price__note { max-width: 760px; margin: clamp(28px, 3vw, 44px) auto 0; text-align: center; font-size: 15.5px; line-height: 1.6; color: var(--body); }
/* Hotella Pilot : les nouvelles captures ont leur propre fond clair. */
.pilot__ecran { background: #EEF4FB; border-color: var(--line); }

/* Sélecteur de langue FR | EN : dans la barre, avant le bouton de démonstration ; dans le menu mobile. */
.nav__langue { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 14px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.nav__langue a { color: inherit; opacity: .55; text-decoration: none; padding: 6px 2px; transition: opacity .2s; }
.nav__langue a:hover, .nav__langue a[aria-current="true"] { opacity: 1; }
.nav__langue span { opacity: .35; }
@media (max-width: 1180px) { .nav__langue { display: none; } }
.mmenu__langue { display: flex; gap: 10px; padding-top: 22px; }
.mmenu__langue a { flex: 1; text-align: center; padding: 11px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); color: rgba(214,226,245,.75); font-size: 14px; font-weight: 600; text-decoration: none; }
.mmenu__langue a[aria-current="true"] { color: #fff; border-color: rgba(53,214,255,.5); background: rgba(11,169,238,.12); }
/* La barre est centrée par left:50% : sans largeur explicite, elle est bornée à la moitié de l'écran
   et le bouton « Réserver une démonstration » débordait. */
.nav { width: max-content; }
.nav__langue { color: #fff; }
.nav__langue a { opacity: .6; }
.nav.is-stuck .nav__langue { color: var(--ink); }
@media (max-width: 1320px) { .nav__links a { padding-inline: 11px; } .nav__langue { margin-right: 8px; } }

/* Cartes de la page Plateforme : cadre au format des captures (1258 x 648), rien n'est rogné */
.vcard--entiere figure { aspect-ratio: 1258 / 648; }
.vcard--entiere figure img, .vcard--entiere:hover figure img { object-fit: contain; transform: none; }

/* ======================================================================
   Animations du dossier « Animations » (2026-11-06), JS : js/animations.js
   Scène commune 1920 × 1080 (export Figma) mise à l'échelle de son cadre (--fit).
   ====================================================================== */
.anim-scene {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--fit, .5)); transform-origin: 50% 50%;
}
.anim-scene img { max-width: none; }

/* Accueil, section « Chaque hôtel, sa signature » : la grille claire remplace le film des maquettes.
   Le panneau passe en clair : voile clair sous le texte, titre et texte foncés (classes du site, sans .on-dark). */
.anim-grille-claire { position: absolute; inset: 0; overflow: hidden; background: #eef0f3; }
.anim-grille-claire .anim-scene { background: linear-gradient(118deg, #f7f8fa 0%, #f1f2f5 48%, #e7e9ed 100%); }
.anim-grille-claire__tel {
  position: absolute; left: 0; top: 0; width: 479px; height: 1000px;
  margin: -500px 0 0 -239.5px; border-radius: 15.8% / 7.57%;
  will-change: transform, opacity; backface-visibility: hidden;
}
.anim-grille-claire__tel img { display: block; width: 100%; height: 100%; border-radius: inherit; user-select: none; }
.anim-grille-claire__tel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--ombre-tel); }
.charte__panel--claire { background: #eef0f3; }
/* halo clair autour des lettres : lisible sur les téléphones sans élargir le voile */
.charte__panel--claire .charte__in .lede { text-shadow: 0 0 18px rgba(246, 247, 250, .95), 0 0 6px rgba(246, 247, 250, .9); }
.charte__panel--claire .charte__scrim {
  /* voile clair resserré sur le texte seulement : les téléphones restent nets autour */
  background: radial-gradient(32% 36% at 50% 50%, rgba(246, 247, 250, .92), rgba(246, 247, 250, .8) 55%, rgba(246, 247, 250, 0) 100%);
}

/* Page Hotella Tab, « À vos couleurs » : le carrousel remplace l'image des cinq tablettes. */
.anim-carrousel {
  position: relative; overflow: hidden; aspect-ratio: 1920 / 760; /* la bande utile de la scène, sans le vide au-dessus et en dessous */
  background: #f4f5f7; border-radius: var(--r-big, 28px);
}
@media (max-width: 700px) {
  /* sur mobile : cadre plus haut, la tablette centrale grandit, les bords sortent du cadre */
  .anim-carrousel { aspect-ratio: 4 / 3; border-radius: var(--r-lg, 24px); }
}
.anim-carrousel__tab {
  position: absolute; left: 0; top: 0; width: 803px; height: 572.5px;
  margin: -286.25px 0 0 -401.5px; border-radius: 3.987% / 5.593%;
  will-change: transform, opacity; backface-visibility: hidden;
}
.anim-carrousel__tab img { display: block; width: 100%; height: 100%; border-radius: inherit; user-select: none; }
.anim-carrousel__tab::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: 0 19px 38px rgba(0, 0, 0, .2); opacity: var(--ombre, 1);
}
/* Sans JavaScript (ou avant son démarrage) : la composition de départ, La Cigale au centre. */
.anim-carrousel:not(.is-anim) .anim-carrousel__tab:nth-child(1) { transform: translate3d(275px, 540px, 0) scale(.62516); z-index: 800; }
.anim-carrousel:not(.is-anim) .anim-carrousel__tab:nth-child(2) { transform: translate3d(560.5px, 540px, 0) scale(.78082); z-index: 900; }
.anim-carrousel:not(.is-anim) .anim-carrousel__tab:nth-child(3) { transform: translate3d(960.5px, 540px, 0); z-index: 1000; }
.anim-carrousel:not(.is-anim) .anim-carrousel__tab:nth-child(4) { transform: translate3d(1360.5px, 540px, 0) scale(.78082); z-index: 900; }
.anim-carrousel:not(.is-anim) .anim-carrousel__tab:nth-child(5) { transform: translate3d(1645px, 540px, 0) scale(.62516); z-index: 800; }
@media (max-width: 760px) {
  /* sur mobile le texte occupe toute la largeur : voile clair plus large et plus couvrant */
  .charte__panel--claire .charte__scrim {
    background: radial-gradient(85% 50% at 50% 50%, rgba(246, 247, 250, .8), rgba(246, 247, 250, .5) 60%, rgba(246, 247, 250, .1) 100%);
  }
}

/* Page Guest App, « À vos couleurs » : les téléphones flottants remplacent l'image des cinq téléphones. */
.anim-flottants {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  background: #d7d8da; border-radius: var(--r-big, 28px);
}
.anim-flottants img { position: absolute; display: block; user-select: none; pointer-events: none; }
.anim-flottants__fond { left: 0; top: 0; width: 1920px; height: 1080px; }
.anim-flottants__tel, .anim-flottants__ombre { will-change: transform, opacity; backface-visibility: hidden; }
@media (max-width: 700px) { .anim-flottants { border-radius: var(--r-lg, 24px); } }

/* Accueil : le « y » de « your hotel. » était coupé par .line (overflow:hidden, line-height 1, pour l'effet de montée).
   Un peu de place sous la ligne pour les jambages, rendue par une marge négative : la mise en page ne bouge pas. */
.hero h1 .line { padding-bottom: .16em; margin-bottom: -.16em; }

/* Accueil, bandeau des chiffres : image de fond modifiable (bloc accueil.s04.fond, variable posée par la vue). */
.band::before { background-image: var(--band-bg, url(../images/sections/band-bg.webp)); }

/* ---- Plan du site pour les visiteurs (/sitemap, /fr/plan-du-site) ---- */
.plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); align-items: start; }
.plan__rubrique:first-child { grid-column: 1 / -1; } /* Accueil : une seule entrée, sur toute la largeur */
.plan__rubrique { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg, 22px); padding: clamp(22px, 2.4vw, 32px); }
.plan__rubrique h2 { margin: 0 0 14px; color: var(--ink); font-size: clamp(20px, 2vw, 24px); line-height: 1.25; letter-spacing: -.02em; font-weight: 700; }
.plan__rubrique ul { list-style: none; margin: 0; padding: 0; }
.plan__rubrique li { padding: 12px 0; border-top: 1px solid var(--line); }
.plan__rubrique li:first-child { border-top: 0; padding-top: 0; }
.plan__rubrique a { color: var(--azure, #116BC7); font-weight: 600; text-decoration: none; }
.plan__rubrique a:hover, .plan__rubrique a:focus-visible { text-decoration: underline; }
.plan__rubrique li span { display: block; margin-top: 3px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 860px) { .plan { grid-template-columns: 1fr; } }

/* ---------- Accueil : « Chaque hôtel, sa propre signature », mise en page du designer (10/11) ---------- */
.sig{padding:clamp(74px,8vw,124px) 0}
.sig__grid{max-width:var(--maxw,1320px);margin:0 auto;padding:0 var(--gut,clamp(20px,5vw,72px));
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.sig__media{position:relative;margin:0;aspect-ratio:16/10;border-radius:var(--r-xl,32px);overflow:hidden;
  background:#EEF2F7;box-shadow:0 40px 80px -40px rgba(11,27,51,.45),0 0 0 1px rgba(11,27,51,.05)}
.sig__media video,.sig__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sig__media video{opacity:1}
.sig__in .h-sec{margin:0;text-wrap:balance}
.sig__in .lede{margin-top:18px;max-width:46ch}
.sig__in .btns{margin-top:30px}
@media (max-width:860px){
  .sig__grid{grid-template-columns:minmax(0,1fr)}
  .sig__in .btns .btn{width:100%}
}

/* ---------- Accueil : section « Brochure » (designer, 10/11) ---------- */
.dl{padding:0 0 clamp(74px,8vw,124px)}
.dl__panel{position:relative;isolation:isolate;overflow:hidden;
  margin:0 clamp(12px,2vw,28px);border-radius:var(--r-big,48px);background:#00051B;
  min-height:clamp(420px,46vw,680px);display:flex;align-items:center;
  padding:clamp(40px,6vw,88px) clamp(26px,6vw,104px)}
.dl__media{position:absolute;inset:0;z-index:0;margin:0}
.dl__media img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;display:block}
.dl__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,5,27,.55) 0%,rgba(0,5,27,.25) 34%,rgba(0,5,27,0) 52%)}
.dl__in{position:relative;z-index:2;max-width:min(500px,40%)}
.dl__eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
  font:600 13px/1 var(--sans,Inter,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#6FECF1}
.dl__eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.dl .h-sec{margin:0;color:#F4FAFF;text-wrap:balance}
.dl .lede{margin-top:18px;max-width:34ch;color:rgba(226,240,255,.84)}
.dl__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:32px}
.dl .btn svg{transition:transform .28s var(--ease,ease)}
.dl .btn:hover svg{transform:translateY(3px)}
.dl__meta{font:400 14px/1.4 var(--sans,Inter,sans-serif);color:rgba(203,224,255,.7)}
/* Écrans intermédiaires : l'image glisse vers la droite et se fond dans le bleu nuit, le texte garde un fond net */
@media (min-width:861px) and (max-width:1240px){
  .dl__media{left:16%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
  .dl__media img{object-position:78% 50%}
}
@media (min-width:861px) and (max-width:1020px){
  .dl__media{left:26%}
  .dl .lede{max-width:30ch}
}
@media (max-width:860px){
  .dl__panel{aspect-ratio:auto;min-height:0;display:block;padding:0}
  .dl__media{position:relative;aspect-ratio:4/3}
  .dl__media img{object-position:76% 50%}
  .dl__scrim{display:none}
  .dl__in{max-width:none;padding:28px 24px 36px}
  .dl .lede{max-width:none}
  .dl__cta .btn{width:100%}
}

/* =========================================================
   Cas d'usage (designer, 12/11) : onglet actif aux couleurs de la charte,
   fondu de la photo et du texte. Limité aux onglets .tabs--large (pas ceux du Contact).
   ========================================================= */
.tabs--large .tab[aria-selected="true"]{
  background:linear-gradient(118deg,#0343CF 0%,#0BA9EE 100%);
  border-color:transparent;color:#fff;
  box-shadow:0 12px 28px -14px rgba(11,169,238,.8)}
.tabs--large .tab[aria-selected="true"]:hover{color:#fff}
.caspanel:not([hidden]) .caspanel__media img{animation:casFade .55s cubic-bezier(.22,.8,.26,1) both}
.caspanel:not([hidden]) .caspanel__body{animation:casFade .45s .05s cubic-bezier(.22,.8,.26,1) both}
@keyframes casFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Bouton « Revenir en haut » (toutes les pages, layouts/site.blade.php + js/site.js) :
   rond blanc, flèche foncée, anneau aux couleurs de la charte qui se remplit avec le défilement. */
.totop{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:60;
  width:52px;height:52px;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;
  background:#fff;color:var(--ink,#00051B);
  box-shadow:0 10px 26px -10px rgba(0,5,27,.45),0 0 0 1px rgba(0,5,27,.06);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,box-shadow .2s ease}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(11,169,238,.6),0 0 0 1px rgba(0,5,27,.06)}
.totop:focus-visible{outline:2px solid #0BA9EE;outline-offset:3px}
.totop__fleche{width:20px;height:20px;position:relative;z-index:1}
.totop__anneau{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop__piste{fill:none;stroke:rgba(0,5,27,.08);stroke-width:2.5}
.totop__progres{fill:none;stroke:url(#totopDegrade);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .12s linear}
@media (prefers-reduced-motion:reduce){
  .caspanel:not([hidden]) .caspanel__media img,.caspanel:not([hidden]) .caspanel__body{animation:none}
  .totop,.totop__progres{transition:none}}