/* --- Polices auto-hebergees ------------------------------------------
   Avant : <link> vers fonts.googleapis.com, seule ressource bloquant le
   rendu (803 ms mesures) + chaine DNS/TLS vers un 2e domaine
   (fonts.gstatic.com) pour les fichiers. Le LCP des pages etant du TEXTE,
   il attendait cette chaine. Ici : fichiers variables servis par le meme
   domaine, precharges dans le <head>, avec font-display:swap pour que le
   texte s'affiche tout de suite.
   Graisses : une seule police VARIABLE par famille couvre 400 a 700 (les
   graisses reellement utilisees) ; le 300 charge auparavant ne servait
   nulle part. Sous-ensembles latin ET latin-ext (le œ de « a cœur »
   est en latin-ext). */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Genos';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/genos-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Genos';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/genos-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Kalnia';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/kalnia-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kalnia';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/kalnia-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Elema Agency - feuille de style de base
   --------------------------------------------------------------------------
   Ecrite depuis zero pour Elema : aucune regle heritee d'un autre site.

   Tous les tokens ci-dessous sont RELEVES sur le site source Webflow
   (https://www.elema-agency.com/) au navigateur le 2026-07-27, pas estimes :
     fond            #FFFDF7   (body background-color)
     encre           #212123   (couleur de texte dominante)
     filet           #C5C5C5   (bordure 2px du bouton "Prenons contact")
     lime            #F1F4C4   (pilules fleche, volet des pages interieures)
     volet sante     linear-gradient(rgba(160,219,223,.4), #B8EBE5)
     volet lifestyle linear-gradient(rgba(252,205,177,.4), #F5D1C3)
     bloc central    rgba(218,218,218,.6) en surimpression d'une photo
     rayon volets    12px      rayon cartes/boutons 20px
     easing          cubic-bezier(.77, 0, .175, 1)  (accordeon, .2s a .325s)
     nav             fixed, fond rgba(255,253,247,.7), padding 20px
     footer          45px de haut, liens Genos 18px, copyright a droite
     typo            Kalnia (titres) / Figtree (corps) / Genos (nav, boutons, footer)
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */
:root {
  --cream: #fffdf7;
  --cream-70: rgba(255, 253, 247, 0.7);
  --cream-50: rgba(255, 253, 247, 0.5);
  --ink: #212123;
  --ink-70: rgba(33, 33, 35, 0.7);
  --ink-45: rgba(33, 33, 35, 0.45);
  --line: #c5c5c5;
  --lime: #f1f4c4;
  --stone: rgba(218, 218, 218, 0.6);
  --stone-solid: #ededea;

  --sante-top: rgba(160, 219, 223, 0.4);
  /* Haut du degrade teal en version PLEINE : le volet du pole sante n'a pas de
     photo derriere lui, le site source y sert rgb(160,219,223) sans alpha. */
  --sante-top-plein: #a0dbdf;
  --sante-bottom: #b8ebe5;
  --lifestyle-top: rgba(252, 205, 177, 0.4);
  --lifestyle-bottom: #f5d1c3;

  --font-display: 'Kalnia', Georgia, 'Times New Roman', serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'Genos', 'Figtree', system-ui, sans-serif;

  --r-panel: 12px;
  --r-card: 20px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.77, 0, 0.175, 1);
  /* Courbe des panneaux qui montent du bas : demarrage franc, arrivee posee.
     Meme valeur que la modale projet, qui la declare pour son propre sous-arbre. */
  --ease-tiroir: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 0.3s;

  --nav-h: 110px;
  --footer-h: 45px;
  /* Hauteur de la capsule au pouce : 6 de padding + 8 + icone 20 + 3 + texte 16
     + 7 + 6. Sert a degager le bas des pages et a poser le bouton « haut ». */
  --barre-h: 66px;
  --gutter: clamp(16px, 5vw, 72px);
  --shell-gap: 16px;
}

/* --- Reset --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--cream);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  /* 14px / interligne 1.4 : base reelle du site source (Webflow reset,
     verifiee dans elema-agency.webflow.shared.css). Nous avions 16px/1.55,
     un ecart qui grossit TOUT texte sans classe dediee (paragraphes courants,
     liens de nav/footer sans font-size propre...) puisqu'il herite de cette
     valeur par defaut. Signale par l'operateur (audit typographique du
     2026-08-25, ex. paragraphe d'intro /contact mesure a 20px au lieu de
     14px, nav a interligne 22px au lieu de 30,8px = 22 * 1.4). */
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--nav-h);
}

img,
svg,
video { max-width: 100%; display: block; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  line-height: 1.15;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding-left: 1.25em; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Typographie --------------------------------------------------------- */
.titre-page {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.875rem); /* 30px sur le site source */
  font-weight: 400;
  letter-spacing: 0.01em;
}

.titre-section {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 500;
}

.titre-serif {
  font-family: var(--font-display);
  font-weight: 400;
}

.lead {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--ink);
}

.texte-doux { color: var(--ink-70); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 0 0 var(--r-panel) 0;
}
.skip-link:focus { left: 0; }

/* --- Transitions de page (rideaux du site source) ------------------------- */
/* Le site source (Webflow) couvre le listing talents et les fiches d'un
   rideau BLANC plein ecran qui se leve au chargement (~500 ms, ease-out,
   mesure au navigateur le 2026-08-07), et fait MONTER un second rideau
   depuis le bas avant de naviguer (0,7 s, ease-in-out, navigation a 800 ms).
   Generalise ici a TOUTES les pages, avec deux vitesses :
     - navigation courante  : montee 0,5 s,  navigation a 560 ms ;
     - "reveal" talent      : montee 0,7 s,  navigation a 800 ms (source).
   Le rideau d'ENTREE est purement CSS : si script.js ne se charge pas, il se
   leve quand meme et la page reste utilisable. */
.rideau-entree,
.rideau-sortie {
  position: fixed;
  inset: 0;
  /* Teal de la charte (celui des volets) au lieu du blanc d'origine : la
     transition prolonge l'identite du site au lieu d'un voile neutre.
     Choisi par l'operateur le 2026-08-30 parmi cinq variantes comparees. */
  background: var(--sante-top-plein);
  pointer-events: none;
}

/* FONDU, pas un rideau qui coulisse : l'ecran se teinte puis se dissipe, sans
   aucun deplacement. Retenu pour une navigation frequente, ou un panneau qui
   traverse tout l'ecran a chaque clic finit par peser. Les noms de classe
   (`rideau`, `est-montee`) sont d'epoque et ne decrivent plus le geste : ils
   sont conserves pour ne pas disperser un renommage dans deux fichiers. */
.rideau-entree {
  z-index: 9999;
  animation: rideau-fondu 0.32s var(--ease) forwards;
}
@keyframes rideau-fondu {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

.rideau-sortie {
  z-index: 999999;
  opacity: 0;
  display: none;
}
.rideau-sortie.est-active { display: block; }
.rideau-sortie.est-montee {
  opacity: 1;
  transition: opacity var(--rideau-duree, 0.32s) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .rideau-entree, .rideau-sortie { display: none !important; }
}

/* Fondu d'entree du contenu (pages du pole sante + /legal sur le site source,
   opacite seule, ~400 ms). CSS pur, comme le rideau d'entree : aucun risque
   de contenu invisible si le script ne se charge pas. */
.fade-entree {
  animation: fade-entree 0.4s ease backwards;
  animation-delay: 0.12s;
}
@keyframes fade-entree {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fade-entree { animation: none; }
}

/* --- Nav ----------------------------------------------------------------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  /* Contenu borne a 1440px centre au-dela ("Max Wide" du site source, mesure
     a 1920 : conteneur a x=240) ; 20-40px de padding lateral en dessous. */
  padding: 20px max(clamp(20px, 2.8vw, 40px), calc((100vw - 1440px) / 2));
  background: var(--cream-70);
  backdrop-filter: saturate(1.6) blur(8px);
  -webkit-backdrop-filter: saturate(1.6) blur(8px);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
}
.nav-group--right { justify-content: flex-end; }

.nav-link {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 400;
  /* 1.4, pas 1 : mesure au navigateur le 2026-08-25 sur le site source
     (interligne reel 30.8px = 22px * 1.4, meme ratio que le corps de texte). */
  line-height: 1.4;
  color: var(--ink);
  /* Hauteur de lien 71px sur le site source (padding 20px + interligne). */
  padding: 20px;
  border-radius: var(--r-pill);
  transition: opacity var(--dur) var(--ease);
}
.nav-link:hover { opacity: 0.6; }
/* Pas d'etat "page courante" souligne sur le site source : aria-current reste
   pose pour l'accessibilite, sans style dedie. */

/* Bouton "Prenons contact" : pilule creme, filet 2px #C5C5C5, rayon 20px. */
.nav-cta {
  background: var(--cream);
  border: 2px solid var(--line);
  border-radius: var(--r-card);
  /* 185x55 sur le site source. */
  padding: 14px 20px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-cta:hover {
  opacity: 1;
  background: var(--lime);
  border-color: var(--lime);
}

.nav-brand {
  display: grid;
  justify-items: center;
  gap: 2px;
  flex: 0 0 auto;
  line-height: 1;
}
.brand-mark {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.02em;
}
.brand-sub {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.4vw, 1rem);
  letter-spacing: 0.04em;
}
/* Logo client : wordmark tres large (ratio ~2.5:1), on pilote la HAUTEUR et on
   laisse la largeur suivre, sinon la nav est ecrasee sur mobile. */
.brand-logo {
  display: block;
  height: clamp(30px, 4.4vw, 46px);
  width: auto;
  object-fit: contain;
}

/* --- Barre au pouce (telephone/tablette) ---------------------------------
   Capsule flottante posee en bas d'ecran, quatre emplacements egaux : trois
   raccourcis de page et le declencheur du menu. Elle remplace le burger du haut
   ET le pied de page fixe (masque sous 991px), qui faisaient vivre toute la
   navigation hors de portee du pouce sur un telephone tenu a une main.
   Fond OPAQUE volontairement : un `backdrop-filter` sur un element fixe qui
   accompagne le defilement fait saccader Safari iOS (constate sur un autre site
   de l'operateur), et c'etait precisement le defaut de l'ancien pied de page.
   Ici, un simple aplat creme, sans cout au defilement. */
.barre-pouce {
  display: none;
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 940;
  /* Sur tablette elle ne s'etire pas d'un bord a l'autre : elle reste une
     capsule, centree. */
  max-width: 460px;
  margin-inline: auto;
  gap: 4px;
  padding: 6px;
  background: var(--cream);
  border: 1px solid rgba(33, 33, 35, 0.09);
  border-radius: 26px;
  box-shadow: 0 10px 28px rgba(33, 33, 35, 0.14);
}

.barre-pouce__item {
  /* Teinte de l'emplacement quand il est la page courante. Chaque onglet porte
     la couleur de son univers : Talents prend le peche du pole Lifestyle, Sante
     le teal du pole Sante (celui du rideau de transition), Accueil et Menu
     gardent le lime, la couleur d'action generique du site. */
  --actif: var(--lime);
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px 7px;
  border: 0;
  background: none;
  border-radius: var(--r-card);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  color: var(--ink-45);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              scale 0.14s var(--ease);
}
.barre-pouce__item svg { width: 20px; height: 20px; }
.barre-pouce__item:active { scale: 0.95; }
.barre-pouce__item[data-teinte='lifestyle'] { --actif: var(--lifestyle-bottom); }
.barre-pouce__item[data-teinte='sante'] { --actif: var(--sante-top-plein); }
/* Seul l'emplacement de la page courante se teinte : colorer les quatre en
   permanence ferait un arc-en-ciel et noierait justement l'indication de
   position. L'encre reste a plus de 10 pour 1 de contraste sur les trois fonds. */
.barre-pouce__item[aria-current='page'] {
  color: var(--ink);
  background: var(--actif);
}

/* --- Menu en panneau ------------------------------------------------------
   Le tiroir vivait sous la nav, dans le header fixe. Il monte desormais du bas,
   a cote du pouce qui l'ouvre. Il a donc du SORTIR du header : `backdrop-filter`
   sur .site-nav en fait un bloc conteneur pour ses descendants `fixed`, qui s'y
   seraient ancres au lieu de la fenetre.
   Ouverture pilotee par CLASSE et non par l'attribut `hidden` : une transition
   ne part jamais depuis `display: none`, tandis que `visibility` reste
   `visible` pendant toute la fermeture, ce qui laisse le panneau redescendre
   avant de disparaitre. */
.nav-voile {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(33, 33, 35, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.nav-voile.est-ouvert { opacity: 1; visibility: visible; }

.nav-drawer {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  flex-direction: column;
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 25px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--cream);
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: 0 -10px 30px rgba(33, 33, 35, 0.16);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.36s var(--ease-tiroir), visibility 0.36s;
}
.nav-drawer.est-ouvert { transform: none; visibility: visible; }

.drawer-prise {
  display: flex;
  justify-content: center;
  padding: 10px 0 14px;
  /* Depuis la poignee, le navigateur ne dispute jamais le geste au doigt. */
  touch-action: none;
}
.drawer-prise span {
  display: block;
  width: 44px;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(33, 33, 35, 0.26);
}

.drawer-links { display: grid; }
.drawer-links a {
  font-family: var(--font-ui);
  font-size: 24px;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(33, 33, 35, 0.08);
}
/* Le bouton de contact est LIME au repos ici, alors qu'il est creme a filet gris
   dans la nav. Au doigt il n'y a pas de survol : un bouton qui attend le survol
   pour prendre sa couleur d'action ne la prend jamais et se lit comme inerte. */
.drawer-links .nav-cta {
  margin-top: 16px;
  padding: 14px 20px;
  border: 2px solid var(--lime);
  background: var(--lime);
  text-align: center;
}

.drawer-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--ink-70);
}
.drawer-copy {
  flex-basis: 100%;
  text-align: center;
  font-size: 14px;
  color: var(--ink-45);
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  .nav-voile { transition-duration: 1ms; }
}

/* --- Coque de page ------------------------------------------------------- */
/* Grille du hero : 7% / 1fr / 7% sur le site source, gap 16px.
   "Max Wide" du site source : chaque coque est bornee a 1440px de contenu
   utile et centree au-dela (mesures a 1920 : base-page/grid-2 a x=240). */
.bloc-principal {
  display: grid;
  grid-template-columns: 7% 1fr 7%;
  gap: var(--shell-gap);
  padding-inline: var(--gutter);
  max-width: calc(1440px + 2 * var(--gutter));
  margin-inline: auto;
  min-height: calc(100vh - var(--nav-h) - var(--footer-h) - 60px);
}
/* Variante page interieure : un seul volet a gauche. */
.bloc-principal--simple { grid-template-columns: 7% 1fr; }
/* Variante page Contact : volet decoratif a gauche + colonne laterale
   (reseaux + carte) a droite, plus large que l'accordeon 7% (contenu reel,
   pas un simple libelle vertical). */
.bloc-principal--contact { grid-template-columns: 7% 1fr minmax(300px, 460px); }

.bloc-centre {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: var(--r-panel);
  padding: clamp(24px, 4vw, 60px);
  background: var(--stone-solid);
  /* Grid-item d'une colonne 1fr : sans ce min-width, un slider interne plus
     large que la colonne (5 cartes de 475px) elargit toute la page. */
  min-width: 0;
}
/* Le bloc central du site source superpose un voile gris a une photo satin :
   .bloc-centre--photo attend --photo (url) pose en style inline par la page. */
.bloc-centre--photo {
  background-image: linear-gradient(var(--stone), var(--stone)), var(--photo, none);
  background-size: auto, cover;
  background-position: 0 0, 50% 50%;
}
.bloc-centre--nu { background: transparent; padding-inline: 0; }

/* --- Volet lateral (SidePanel.astro) ------------------------------------- */
.side-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
  border-radius: var(--r-panel);
  color: var(--ink);
  overflow: hidden;
  transition: filter var(--dur) var(--ease);
}
a.side-panel:hover { filter: brightness(0.96); }

.side-panel--sante { background-image: linear-gradient(var(--sante-top), var(--sante-bottom)); }
.side-panel--lifestyle { background-image: linear-gradient(var(--lifestyle-top), var(--lifestyle-bottom)); }
.side-panel--page { background-image: linear-gradient(var(--lime), var(--lime)); }

.side-panel--right { grid-column: 3; }

/* Le site source tourne le libelle avec matrix(0,1,-1,0,...) : lecture de BAS en
   HAUT, tete inclinee a GAUCHE. writing-mode:vertical-rl + rotate(180deg) donnait
   le sens INVERSE (verifie au pixel le 2026-08-25, signale par l'operateur) :
   rotate(180deg) applique un DEMI-TOUR SUPPLEMENTAIRE que le calcul initial
   supposait a tort necessaire. direction:rtl inverse le sens de progression du
   texte a l'interieur de vertical-rl (independant du rotate) et reproduit le
   sens exact du source, sans transform ni casse de la selection de texte. */
.side-panel__label {
  font-family: var(--font-body);
  /* 20px FIXE sur le site source (.texte-vertical), pas une taille fluide :
     le clamp calculait 17.92px a 1280px de large, jamais tout a fait juste
     selon le viewport. Signale par l'operateur (audit du 2026-08-25). */
  font-size: 20px;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
  direction: rtl;
  letter-spacing: 0.02em;
}

.side-panel__arrow {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}
/* Orientation de la fleche des volets, relevee page par page sur le site source le
   2026-08-23 :
     accueil, volet gauche  : `rotate(90deg)`, elle pointe en bas a GAUCHE ;
     accueil, volet droit   : aucune transformation, en bas a droite ;
     agence, talents, strategie, expertise, contact : aucune transformation.
   Une inversion generale etait posee ici, avec deja deux annulations locales. Elle
   laissait Strategie et Contact avec une fleche a l'envers. La supprimer entierement
   a corrige ces deux pages mais casse l'accueil, ou la fleche gauche DOIT etre
   tournee : la regle ne vaut donc que pour l'accueil, seule page a deux volets
   symetriques dont les fleches s'ecartent vers l'exterieur.
   Notre fleche est un trace SVG et non l'image du site source : `scaleX(-1)` y donne
   le meme rendu que son `rotate(90deg)`, verifie a l'ecran. */
body.is-home .side-panel--left .side-panel__arrow { transform: scaleX(-1); }

/* --- Volet du POLE SANTE (PolePanel.astro) -------------------------------- */
/* Gabarit propre, distinct de .side-panel : le site source donne au volet du
   pole une colonne de 150px (et non 7%), un libelle HORIZONTAL 14px (et non le
   libelle vertical 20px majuscules), un degrade teal plein, et une sous-nav de
   4 pilules empilees. Mesure au navigateur le 2026-07-27 sur .acc-1.sant.intal,
   voir l'en-tete de PolePanel.astro pour le detail des valeurs. */
.bloc-principal--pole {
  grid-template-columns: 150px 1fr;
  gap: 30px;
}

.pole-panel {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 700px;
  align-self: start;
  padding: 30px 0;
  border-radius: var(--r-panel);
  background-image: linear-gradient(var(--sante-top-plein), var(--sante-bottom));
  color: var(--ink);
  overflow: hidden;
}

/* Libelle passe en VERTICAL sur le site source (constate le 2026-08-07,
   identique aux autres volets) : l'ancien libelle horizontal 14px de juillet
   n'existe plus. Sens corrige le 2026-08-25 (voir .side-panel__label ci-dessus) :
   direction:rtl remplace rotate(180deg), qui inversait le sens de lecture. */
.pole-panel__label {
  font-family: var(--font-body);
  /* 20px fixe, meme correction que .side-panel__label ci-dessus. */
  font-size: 20px;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
  direction: rtl;
  letter-spacing: 0.02em;
  align-self: center;
}

.pole-subnav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding-inline: 10px;
}

.pole-subnav__lien {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85%;
  padding: 7px 14px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 13px;
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink-70);
  text-align: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pole-subnav__lien:hover {
  background: var(--cream-50);
  color: var(--ink);
}
.pole-subnav__lien[aria-current='page'] {
  background: rgba(255, 255, 255, 0.42);
  color: var(--ink);
}

.pole-panel__arrow {
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
}

/* --- Cartes -------------------------------------------------------------- */
.carte {
  background: var(--cream-50);
  border-radius: var(--r-card);
  padding: 24px 24px 30px;
  backdrop-filter: saturate(2) blur(5px);
  -webkit-backdrop-filter: saturate(2) blur(5px);
}
.carte--pleine { background: var(--cream); }
.carte--lime { background: var(--cream); border: 1px solid var(--lime); }

.carte__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Source : .text-block-18 (Genos 30px/500, pas Figtree 18-24px fluide) et
   .ligne (grille "gris" = ink-70, 2px, mb 20px, pas de mt) - audit du
   2026-08-26, CSS Webflow verifie. */
.carte__titre {
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: 500;
}
.carte__filet {
  height: 2px;
  background: var(--ink-70);
  /* Le site source n'a pas de marge haute ici : sa rangee de titre occupe une
     hauteur en % du bloc (structure qu'on ne reproduit pas telle quelle), d'ou
     un petit espace garde ici pour eviter que le filet ne colle au titre. */
  margin: 12px 0 20px;
}

/* Pilule fleche lime : 95x40, rayon 20px sur le site source. */
.pilule-fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 95px;
  height: 40px;
  border-radius: var(--r-card);
  background: var(--lime);
  transition: transform var(--dur) var(--ease);
}
.pilule-fleche:hover { transform: translate(2px, -2px); }
.pilule-fleche svg { width: 22px; height: 22px; }

/* --- Bouton -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 22px;
  line-height: 1;
  padding: 12px 24px;
  border-radius: var(--r-card);
  border: 2px solid var(--line);
  background: var(--cream);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--lime); border-color: var(--lime); }
.btn--plein { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.btn--plein:hover { background: var(--ink); border-color: var(--ink); opacity: 0.85; }

/* --- Footer -------------------------------------------------------------- */
/* Le pied est COLLE EN BAS DE FENETRE sur toutes les pages, comme le site source.
   Valeurs relevees au navigateur le 2026-08-23 sur /agence, a 1440, 991, 767 et
   390px, sur le .footer-25 REELLEMENT visible : le document en sert plusieurs et
   le premier du DOM est masque, un querySelector naif renvoie un element de 0x0.
     hauteur 45px (55 sous 768px, ou la mention de copyright passe a la ligne) ;
     fond rgba(255,253,247,0.5), soit notre --cream-50 a l'identique ;
     backdrop-filter: saturate(1.3) blur(50px) ;
     liens 18px, « Mentions legales » a 70 % d'encre, les deux reseaux a plein ;
     copyright 14px a 70 %, cale a 40px du bord droit.
   Nous le laissions dans le flux sur les pages interieures pour ne pas recouvrir
   le contenu ; l'operateur a tranche pour la fidelite le 2026-08-23. Le seul
   garde-fou conserve est le padding-bas sur main, qui evite qu'une fin de page
   reste coincee sous le bandeau : chez elle le dernier bloc passe dessous. */
.site-footer {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  /* Hauteur FIXE : son bandeau fait 45px pile. Un min-height laissait le notre a
     48px, le contenu depassant la valeur cible. */
  height: var(--footer-h);
  padding: 0 var(--gutter);
  background: var(--cream-50);
  backdrop-filter: saturate(1.3) blur(50px);
  -webkit-backdrop-filter: saturate(1.3) blur(50px);
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--ink);
}
main { padding-bottom: calc(var(--footer-h) + 16px); }

.footer-links {
  display: flex;
  gap: 36px;
  /* Ses trois liens ne sont pas centres sur la fenetre mais decales de 10px vers
     la gauche, a 1440 comme a 767px (mesure : x=550 la ou un centrage exact
     donnerait 560). Ce demi-ecart reproduit le decalage sans le coder en dur. */
  margin-right: 20px;
}
.footer-links a { color: var(--ink); transition: opacity var(--dur) var(--ease); }
.footer-links a:first-child { color: var(--ink-70); }
.footer-links a:hover { opacity: 0.6; }

/* Hors du flux : les liens sont centres sur la LARGEUR DE LA FENETRE chez elle,
   pas sur la place qui reste a cote du copyright. Laisse dans le flux, le trio
   se decalait de 120px vers la gauche. */
.footer-copy {
  position: absolute;
  right: 40px;
  font-size: 14px;
  /* --ink-45 donnait #9b9a98 sur le creme du pied de page, soit 2,76 de contraste
     pour une norme a 4,5 : la mention de copyright etait a la limite du lisible.
     Son site l'affiche a 70 % d'encre, ce qui la porte a 5,2 : on prend le sien,
     plus fidele ET plus lisible que le 0,65 pose le 2026-08-19. */
  color: rgba(33, 33, 35, 0.7);
}

/* --- Zones tactiles ------------------------------------------------------
   Ajoute le 2026-08-19 apres mesure au navigateur a 390px : le logo de la nav
   (66x26) et les liens du pied de page (28px de haut) sont sous le seuil de
   confort du pouce. On etend la ZONE DE TOUCHE par un pseudo-element, sans
   deplacer ni redimensionner quoi que ce soit a l'ecran : le rendu reste
   identique au site source au pixel pres.
   Le gap de 16px separe deja les liens du pied de page, donc les zones
   elargies ne se recouvrent pas. Sous `pointer: coarse` seulement : rien ne
   change a la souris. */
@media (pointer: coarse) {
  .nav-brand { position: relative; }
  .nav-brand::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .footer-links a { position: relative; }
  .footer-links a::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% + 12px);
    height: 40px;
    transform: translate(-50%, -50%);
  }
}

/* --- Bouton retour en haut ----------------------------------------------- */
/* Ce bouton n'existe pas sur le site source : c'est un ajout assume, sur des pages
   qui montent a 4600px. Il est donc tenu de se faire oublier, d'ou une simple
   fleche plutot que le mot TOP, et un fond translucide au repos qui s'affirme au
   survol. Arbitre par l'operateur le 2026-08-23.
   Il se pose AU-DESSUS du pied fixe : sans ce decalage les deux se chevauchaient
   sur les 35 derniers pixels. */
.go-top {
  position: fixed;
  right: 16px;
  bottom: calc(var(--footer-h) + 14px);
  z-index: 950;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* 0,35 d'encre laissait la fleche a 2,05 de contraste sur le creme du site,
     pour une norme a 3 sur un composant d'interface. 0,55 la porte a 3,54 en
     gardant le fond translucide, on voit toujours la page a travers. */
  background: rgba(33, 33, 35, 0.55);
  color: var(--cream);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.go-top svg { width: 20px; height: 20px; }
.go-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.go-top:hover { background: rgba(33, 33, 35, 0.85); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 991px) {
  :root { --nav-h: 92px; }

  .nav-group { display: none; }
  .site-nav { padding: 16px var(--gutter); }
  /* Le burger cede la place a la barre au pouce : le logo reste seul en haut et
     se centre. .nav-inner conserve la hauteur que lui donnait le burger (52px),
     pour que --nav-h -- qui sert aux calculs de hauteur de section -- reste
     juste et qu'aucune page ne se decale. */
  .nav-inner { justify-content: center; min-height: 52px; }
  .nav-brand { justify-items: center; margin: 0 auto; }

  .barre-pouce { display: flex; }
  .nav-drawer { display: flex; }

  /* Les cartes d'offre de l'accueil ne sont plus posees sur la photo du hero
     depuis la reorganisation mobile du 2026-08-31 : leur `backdrop-filter` ne
     floute plus rien et se paie en images par seconde au defilement.
     PIEGE : cette neutralisation doit vivre ICI et non dans le <style> de la
     page. Le minifieur d'Astro (lightningcss) SUPPRIME `backdrop-filter: none`
     en le prenant pour une valeur initiale superflue -- il ne voit pas la
     declaration de `.carte` quelques centaines de lignes plus haut dans cette
     feuille, qui reprend donc la main. Il ne gardait que la variante -webkit-,
     si bien que Chromium continuait d'appliquer le flou. Ce fichier vit dans
     public/, il est copie tel quel, aucune declaration n'y est retiree. */
  .offres-grille .carte {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Le pied de page fixe cede lui aussi la place : ses trois liens et le
     copyright sont repris dans le panneau de menu. Deux bandeaux empiles en bas
     d'ecran auraient mange plus de 130px de hauteur utile. */
  .site-footer { display: none; }
  /* Hauteur a degager sous le contenu pour que rien de fixe ne recouvre jamais la
     fin d'une page. Exposee en variable parce que l'accueil surcharge le padding
     de `main` avec un selecteur plus specifique (`body.is-home main`) et doit
     pouvoir reprendre la meme valeur.

     CE QU'IL FAUT DEGAGER, corrige le 2026-09-07. La valeur ne couvrait que la
     capsule au pouce (`--barre-h` + 34). Or le bouton de retour en haut se pose
     AU-DESSUS d'elle : `bottom: var(--barre-h) + 30px` sur 44px de haut, donc son
     bord haut est a `--barre-h` + 74px du bas de la fenetre. Les 40 derniers pixels
     de chaque page vivaient sous ce bouton.

     Invisible tant que le dernier bloc d'une page etait decoratif, et c'est pour ca
     que personne ne l'avait vu. Mesure au navigateur a 390x844 sur les 4 pages
     principales : la tuile du pole createurs de l'accueil recouverte sur 1782 px2,
     un lien de fiche sur /talents sur 660 px2, /agence et /contact indemnes. Le
     defaut de /talents est anterieur, celui de l'accueil date de la reorganisation
     mobile du jour : deux symptomes d'une seule cause, corrigee ici plutot que deux
     fois a cote.

     74 pour degager le bouton, 12 pour qu'il ne colle pas au dernier bloc. */
  :root { --degagement-bas: calc(var(--barre-h) + 86px + env(safe-area-inset-bottom, 0px)); }
  main { padding-bottom: var(--degagement-bas); }
  .go-top { bottom: calc(var(--barre-h) + 30px + env(safe-area-inset-bottom, 0px)); }

  /* Les volets passent en barres horizontales pleine largeur, empilees sous
     le bloc central (verifie a 390px sur le site source). */
  .bloc-principal,
  .bloc-principal--simple,
  .bloc-principal--contact,
  .bloc-principal--pole {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    min-height: 0;
  }
  .bloc-principal--pole { gap: 40px; }

  /* Le volet du pole reste AU-DESSUS du contenu (ordre du DOM), contrairement
     aux volets .side-panel que le site source renvoie sous le bloc central. */
  .pole-panel {
    height: auto;
    min-height: 0;
    /* align-self:start du desktop = largeur du contenu une fois en colonne flex.
       On repasse en stretch pour la barre pleine largeur du site source. */
    align-self: stretch;
    justify-content: flex-start;
    gap: 20px;
    padding: 24px 20px;
    grid-column: auto;
  }
  /* Libelle du pole a l'HORIZONTALE sous 991px, comme .side-panel__label plus
     bas : il etait reste en vertical, oubli du passage responsive. Consequence
     mesuree sur iPhone (capture operateur du 2026-08-29) : "PÔLE SANTÉ" ecrit
     verticalement occupait a lui seul pres d'un tiers de la hauteur d'ecran,
     repoussant "Nos talents" et les fiches sous la ligne de flottaison. A
     l'horizontale, le volet se replie sur deux lignes de texte. */
  .pole-panel__label {
    writing-mode: horizontal-tb;
    direction: ltr;
    font-size: 25px;
    align-self: flex-start;
  }
  .pole-subnav { padding-inline: 0; }
  .pole-subnav__lien { width: 100%; }
  /* .fleche-acc.outoftablet : masquee sous tablette sur le site source. */
  .pole-panel__arrow { display: none; }
  .bloc-centre { order: 0; }
  .side-panel {
    /* AU-DESSUS du contenu, pas en dessous. Le commentaire d'origine affirmait que
       le site source renvoyait ces volets sous le bloc central : c'est faux, mesure
       au navigateur a 768px le 2026-08-19 sur quatre pages du site de la cliente
       (contact, agence, strategie, talents), son volet y est a y=150 ou 160, donc
       en tete de page dans les quatre cas. Chez nous seul le listing des talents
       le faisait ; sur contact la barre « Reprenons contact » se retrouvait en
       dernier, apres le formulaire, a 793px du haut. */
    order: -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 104px;
    padding: 0 24px;
    grid-column: auto;
  }
  .side-panel__label {
    writing-mode: horizontal-tb;
    transform: none;
    /* 25px sur le site source a cette largeur (.texte-vertical repasse en
       horizontal ET grandit, ne redescend a 20px qu'en dessous). */
    font-size: 25px;
  }
  .side-panel--left .side-panel__arrow { transform: none; }

}

/* Les reglages du pied de page sous 768 et sous 480px ont ete retires le
   2026-08-30 : le pied fixe ne s'affiche plus du tout sous 991px, la barre au
   pouce ayant repris ses liens. Ils ne decrivaient plus rien d'affiche. */

@media (max-width: 560px) {
  .brand-mark { font-size: 1.375rem; }
  .brand-logo { height: 26px; }
  .carte { padding: 20px 20px 24px; }
}

@media (max-width: 379px) {
  /* Tres petits ecrans (iPhone SE et en dessous) : quatre libelles de capsule
     tiennent encore, mais serres. On rogne le texte plutot que la zone tactile. */
  .barre-pouce__item { font-size: 15px; padding-inline: 2px; }
}

/* --- Bandeau de consentement (GA4) -----------------------------------
   Pose par public/data/consent.js, et UNIQUEMENT quand un identifiant GA4 est
   renseigne dans site-config.js : sans GA4, ces regles ne servent jamais.
   z-index 960 : au-dessus de la barre au pouce (940) et du voile de menu, en
   dessous des rideaux de transition. Les deux boutons ont le MEME poids visuel
   (meme taille, meme graisse, meme surface tactile) : la CNIL exige que refuser
   soit aussi simple qu'accepter, un lien texte discret face a un bouton plein
   ne passe pas. */
.consent {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 960;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--cream);
  box-shadow: 0 10px 30px rgba(33, 33, 35, 0.16);
}

.consent__texte {
  margin: 0;
  flex: 1 1 260px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-70);
}

.consent__texte a { color: var(--ink); text-underline-offset: 3px; }

.consent__actions { display: flex; gap: 8px; }

.consent__btn {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1;
  /* 44px de haut au total : cible tactile confortable au pouce. */
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, scale 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Le bouton repond au doigt AVANT que quoi que ce soit d'autre ne bouge. C'est
   le seul retour qui arrive dans les 100 ms, et c'est lui qui fait que le clic
   est « entendu ». Propriete `scale` et non `transform` : la barre au pouce du
   site l'utilise deja ainsi, et ca laisse transform libre. */
.consent__btn:active { scale: 0.97; }

/* Libelle du bouton « Accepter », remplace par « Merci » au clic. Il vit dans son
   propre span pour pouvoir fondre sans emporter le fond ni la bordure du bouton.
   Le flou pendant l'echange (2 px, jamais plus, c'est cher en Safari) empeche de
   voir deux mots se croiser : l'oeil percoit une transformation, pas un swap. */
.consent__lib {
  display: inline-block;
  transition: opacity 0.13s ease, filter 0.13s ease, transform 0.13s cubic-bezier(0.23, 1, 0.32, 1);
}

.consent__lib--sort {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(-3px);
}

.consent__btn--refus { background: transparent; color: var(--ink); }
.consent__btn--refus:hover { background: var(--stone-solid); }
.consent__btn--ok { background: var(--ink); color: var(--cream); }
.consent__btn--ok:hover { background: #000; }

/* Tant que le bandeau est la, la barre au pouce monte au-dessus de lui plutot
   que de disparaitre dessous : sans ce decalage ses quatre raccourcis sont
   couverts sur telephone et deviennent incliquables.
   Le decalage passe par `transform` et non par `bottom` : `bottom` se repeint a
   chaque image, `transform` part sur le GPU, et surtout il se TRANSITIONNE. La
   barre redescend donc en meme temps que le bandeau s'en va, au lieu de sauter
   d'un coup a la fin. */
.barre-pouce { transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1); }
body.a-consent .barre-pouce { transform: translateY(calc(-1 * var(--consent-h, 132px))); }

/* Entree et sortie du bandeau.
   Fréquence : une fois par visiteur, tous les 6 mois. C'est le cas rare ou une
   animation se justifie pleinement, personne ne la subira deux fois.
   Sortie en ease-out fort (la courbe de tiroir iOS) : le mouvement demarre tout
   de suite, ce qui fait paraitre la disparition plus rapide qu'elle ne l'est.
   240 ms, sous les 300 ms au-dela desquels une interface commence a trainer.
   Le bandeau part VERS LE BAS, d'ou il est venu : le meme chemin dans les deux
   sens, sinon le geste ne raconte rien. */
.consent {
  transition:
    transform 0.24s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

/* translateY en POURCENTAGE : le bandeau se pousse de sa propre hauteur, qu'il
   fasse deux lignes sur ordinateur ou quatre sur telephone. Le 112% ajoute la
   marge basse, sinon un liseré reste visible au repos. Jamais de scale(0) ni de
   translation nulle : on part d'un etat qui existe deja a l'ecran. */
.consent--cache {
  transform: translateY(112%);
  opacity: 0;
}

@media (max-width: 520px) {
  .consent { flex-direction: column; align-items: stretch; }
  /* flex: none OBLIGATOIRE ici. En colonne, le `flex-basis: 260px` de la regle
     large devient une HAUTEUR minimale : le bandeau faisait 350 px de haut sur
     telephone, avec 200 px de vide entre le texte et les boutons (constate au
     navigateur en 390x844 avant correction). */
  .consent__texte { flex: none; }
  .consent__actions { justify-content: stretch; }
  .consent__btn { flex: 1; }
}

/* Mouvement reduit : on garde le fondu, qui explique ce qui se passe, et on
   retire tout deplacement. « Reduit » ne veut pas dire « supprime » : un
   element qui disparait d'une image a l'autre se lit comme un bug. */
@media (prefers-reduced-motion: reduce) {
  /* Le « Merci » RESTE : c'est du texte, pas du mouvement, et le retirer priverait
     de la reponse ceux qui ont justement demande moins d'animation. Seuls le
     deplacement et le flou disparaissent. */
  .consent__lib { transition: opacity 0.13s ease; }
  .consent__lib--sort { filter: none; transform: none; }
  .consent { transition: opacity 0.16s ease; }
  .consent--cache { transform: none; opacity: 0; }
  .consent__btn { transition: background-color 0.2s ease, color 0.2s ease; }
  .consent__btn:active { scale: 1; }
  .barre-pouce { transition: none; }
}