/* ==========================================================================
   Coralie-J Robin — thème enfant YOOtheme (templates/yootheme_coralie)
   Compositions des pages, animations et polices locales.
   Les petites règles génériques (accent rouge, boutons, libellés) sont dans
   le Customizer › Paramètres › CSS/LESS.

   Les classes « cr-… » se posent dans le Builder (champ « Classe » d'une
   section, d'une rangée, d'une colonne ou d'un élément) :
     cr-reveal         photo qui se dévoile au défilement (écrin qui s'ouvre)
     cr-tall           photo haute (560 à 880 px)       cr-wide   photo pleine largeur
     cr-bleed-l / -r   photo qui sort jusqu'au bord gauche / droit de l'écran
     cr-duo            colonne « photo + seconde photo sur passe-partout »
     cr-inset-l / -r   la seconde photo, à gauche / à droite
     cr-ratio-4-5, cr-ratio-3-4, cr-ratio-4-3   format de recadrage
     cr-paper, cr-lift, cr-shift-1/2/3          passe-partout, remontée, décalages
     cr-sketch cr-sketch-<variante>             croquis décoratif en fond
     cr-sec-sketch     section qui accueille un croquis (le contient)
     cr-clip           section dont les photos débordent (coupe l'excédent)
   ========================================================================== */

/* --- Polices locales (Jost ; Tenor Sans en repli de Granville) ------------ */
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(../fonts/jost-variable-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: "Tenor Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/tenor-sans-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;
}

/* --- Animations ----------------------------------------------------------- */
@keyframes cr-hero-in { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
@keyframes cr-copy-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cr-unveil  { from { clip-path: inset(16% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cr-settle  { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes cr-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- En-tête (repris de la maquette) -----------------------------------------
   Fixé en haut dès l'ouverture, transparent sur la photo. Pendant les 240
   premiers pixels de défilement, il suit le geste : un fond blanc flouté
   apparaît, une ombre se pose et le logo passe de 84 à 46 px (64 à 40 px
   sur mobile). Le « sticky » de YOOtheme est désactivé (Customizer › En-tête
   › Navbar › Sticky : aucun) : c'est ce bloc qui fait tout.
   Navigateurs sans animations liées au défilement (Firefox) : js/custom.js
   pose la classe cr-scrolled après 40 px et l'effet se fait en transition. */
.tm-header,
.tm-header-mobile { position: fixed; top: 0; left: 0; right: 0; z-index: 980; }
.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container { padding: 22px 0 8px; background: transparent; }
.tm-header .uk-logo,
.tm-header-mobile .uk-logo { min-height: 0; }
.tm-header .uk-logo img { display: block; height: 84px; width: auto; }
.tm-header-mobile .uk-logo img { display: block; height: 64px; width: auto; }
/* L'en-tête fixe sort du flux. Les pages à ouverture « en-tête transparent »
   (tm-header-overlay) réservent sa hauteur d'elles-mêmes ; les autres (pages
   légales, vues Joomla sans layout) la réservent ici. Hauteurs mesurées en
   haut de page : 114 px au bureau, 94 px au téléphone. */
.tm-header-mobile:not(.tm-header-overlay) ~ #tm-main { padding-top: 94px; }
@media (min-width: 960px) {
  .tm-header:not(.tm-header-overlay) ~ #tm-main { padding-top: 114px; }
}

@keyframes cr-hdr-bg {
  from { background-color: rgba(255, 255, 255, 0); -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); box-shadow: 0 10px 24px -18px rgba(43, 38, 33, 0); padding-top: 22px; }
  to   { background-color: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 10px 24px -18px rgba(43, 38, 33, .3); padding-top: 8px; }
}
@keyframes cr-hdr-logo   { from { height: 84px; } to { height: 46px; } }
@keyframes cr-hdr-logo-m { from { height: 64px; } to { height: 40px; } }

@supports (animation-timeline: scroll()) {
  .tm-header .uk-navbar-container,
  .tm-header-mobile .uk-navbar-container,
  .tm-header .uk-logo img,
  .tm-header-mobile .uk-logo img { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root); animation-range: 0 240px; }
  .tm-header .uk-navbar-container,
  .tm-header-mobile .uk-navbar-container { animation-name: cr-hdr-bg; }
  .tm-header .uk-logo img { animation-name: cr-hdr-logo; }
  .tm-header-mobile .uk-logo img { animation-name: cr-hdr-logo-m; }
}

.cr-js-sticky .tm-header .uk-navbar-container,
.cr-js-sticky .tm-header-mobile .uk-navbar-container { transition: background-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease, padding .35s ease; }
.cr-js-sticky .uk-logo img { transition: height .35s cubic-bezier(.2, .7, .2, 1); }
.cr-js-sticky.cr-scrolled .tm-header .uk-navbar-container,
.cr-js-sticky.cr-scrolled .tm-header-mobile .uk-navbar-container {
  padding-top: 8px;
  background-color: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 10px 24px -18px rgba(43, 38, 33, .3);
}
.cr-js-sticky.cr-scrolled .tm-header .uk-logo img { height: 46px; }
.cr-js-sticky.cr-scrolled .tm-header-mobile .uk-logo img { height: 40px; }

/* --- Ouverture de l'accueil : vidéo, voile clair, titre ---------------------- */
.cr-hero { min-height: 860px; }
.cr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(420px 220px at 12% 0, rgba(250, 246, 240, .92), rgba(250, 246, 240, 0) 100%),
    linear-gradient(180deg, rgba(246, 241, 234, .82) 0, rgba(246, 241, 234, 0) 190px);
}
.cr-hero > video { animation: cr-hero-in 2.4s cubic-bezier(.2, .7, .2, 1) both; }
.cr-hero-title,
.cr-hero .cr-hero-text > :not(.cr-hero-mobile) { position: relative; z-index: 2; }
.cr-hero-title { max-width: 13ch; letter-spacing: -.01em; }
.cr-hero-text { animation: cr-copy-in 1.2s .35s cubic-bezier(.2, .7, .2, 1) both; }
@media (min-width: 1200px) {
  .cr-hero-row { padding-left: 28%; }
}

/* Ouverture des autres pages : photo à droite qui apparaît en douceur */
.cr-hero-img img.el-image {
  width: 100%;
  height: clamp(520px, 54vw, 780px);
  object-fit: cover;
  object-position: 38% 50%;
  animation: cr-hero-in 2.4s cubic-bezier(.2, .7, .2, 1) both;
}
.cr-title-spaced { letter-spacing: .1em; max-width: 12ch; }
/* Haut des pages intérieures : YOOtheme réserve déjà la hauteur de l'en-tête
   (114 px) ; on n'ajoute que l'écart de la maquette, soit 168 px au total
   (116 px sur mobile). Remplace la marge haute réglée dans le Builder. */
.cr-page-hero.uk-section { padding-top: 54px; }
@media (max-width: 959.98px) { .cr-page-hero.uk-section { padding-top: 22px; } }

/* --- Textes de mise en avant -------------------------------------------- */
.cr-intro-lead p {
  font-weight: 300;
  font-size: clamp(24px, 2.72vw, 39px);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: #5C4834;
  max-width: 24ch;
  text-wrap: pretty;
}
.cr-statement p {
  margin: 0 auto;
  max-width: 27ch;
  font-weight: 300;
  font-size: clamp(26px, 3.06vw, 44px);
  line-height: 1.3;
  color: #5C4834;
  text-wrap: balance;
}
.cr-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(26px, 3.23vw, 46px);
  line-height: 1.3;
  color: #5C4834;
  text-wrap: balance;
}
.cr-quote-line {
  padding-top: 72px;
  border-top: 1px solid #C4B9A4;
  font-size: clamp(24px, 2.89vw, 39px);
}
.cr-monogram img { height: 64px; width: auto; }
.cr-monogram-light img { filter: invert(1); }

/* --- Croquis décoratifs en fond ------------------------------------------- */
.cr-sec-sketch { position: relative; overflow: hidden; }
.cr-sec-sketch .uk-grid > * > :not(.cr-sketch):not(.cr-inset),
.cr-sec-sketch .uk-grid > * > .uk-panel > :not(.cr-sketch):not(.cr-inset) { position: relative; z-index: 1; }
.cr-sketch {
  position: absolute;
  z-index: 0;
  margin: 0 !important;
  pointer-events: none;
  user-select: none;
}
.cr-sketch img { display: block; width: 100%; height: auto; }

.cr-sketch-intro     { top: -184px; left: 774px; width: 812px; opacity: .24; mix-blend-mode: multiply; transform: rotate(18deg); }
/* Ces deux croquis sont repérés sur la colonne de texte, qui s'arrête au bouton :
   accueil, 156 px au-dessus du bas de « Venir à la boutique », bord gauche à -283 px de la section ;
   mon atelier, 25 px au-dessus du haut de « Parlons de votre projet », 20 px à gauche du texte. */
.cr-sketch-invite    { top: calc(100% - 156px); left: calc(-283px - max(40px, (100vw - 1232px) / 2)); width: 970px; opacity: .35; transform: rotate(35deg); }
.cr-sketch-planche   { top: calc(100% - 79px); left: -20px; width: min(720px, 52vw); }
.cr-sketch-statement { left: -230px; top: -120px; width: 835px; opacity: .16; transform: rotate(-10deg); }
.cr-sketch-triboulet { right: -90px; top: -40px; width: 640px; opacity: .75; mix-blend-mode: multiply; transform: rotate(-3deg); }
.cr-sketch-cta       { right: -160px; top: -170px; width: 620px; opacity: .3; transform: rotate(12deg); }
.cr-sketch-galerie   { right: -120px; top: 40px; width: 560px; opacity: .2; mix-blend-mode: multiply; transform: rotate(-6deg); }
.cr-sketch-contact   { right: -140px; top: 10px; width: 520px; opacity: .14; transform: rotate(8deg); }

/* --- Photos qui sortent jusqu'au bord de l'écran ---------------------------- */
.cr-clip { overflow-x: clip; }
.cr-bleed-l { margin-left: calc(-1 * max(40px, (100vw - 1232px) / 2)); }
.cr-bleed-r { margin-right: calc(-1 * max(40px, (100vw - 1232px) / 2)); }

.cr-tall img.el-image {
  display: block;
  width: 100%;
  height: clamp(560px, 62vw, 880px);
  object-fit: cover;
}
.cr-wide img.el-image {
  display: block;
  width: 100%;
  height: clamp(420px, 54vw, 780px);
  object-fit: cover;
  object-position: 62% 45%;
}

/* Formats de recadrage */
.cr-ratio-4-5 img.el-image,
.cr-ratio-3-4 img.el-image,
.cr-ratio-4-3 img.el-image { display: block; width: 100%; height: auto; object-fit: cover; }
.cr-ratio-4-5 img.el-image { aspect-ratio: 4 / 5; }
.cr-ratio-3-4 img.el-image { aspect-ratio: 3 / 4; }
.cr-ratio-4-3 img.el-image { aspect-ratio: 4 / 3; }

/* --- Duo : photo principale + seconde photo posée sur un passe-partout papier */
.cr-duo { position: relative; }
.cr-inset {
  position: absolute;
  z-index: 2;
  bottom: -56px;
  width: clamp(180px, 19vw, 270px);
  margin: 0 !important;
  padding: 10px;
  background: #F6F5F1;
}
.cr-inset-r { right: -64px; }
.cr-inset-l { left: -24px; }
.cr-inset img.el-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* Étiquette « Avant / Après » (élément Overlay) */
.cr-duo .uk-overlay-default,
.cr-duo .uk-tile-default.uk-overlay,
.cr-duo [class*="uk-tile-default"] { background: rgba(246, 245, 241, .92); }
.cr-duo .uk-overlay .uk-text-meta { margin: 0; }

/* --- Rangée asymétrique sous une grande photo (« Quelques créations », matières) */
.cr-paper { padding: 12px; background: #fff; }
.cr-lift { position: relative; z-index: 1; margin-top: clamp(-320px, -20vw, -120px) !important; }
.cr-shift-1 { margin-top: 72px; }
.cr-shift-2 { margin-top: 240px; }
.cr-shift-3 { margin-top: 200px; }
.cr-gal-foot .uk-width-1-2\@m > .cr-lift { width: 84%; margin-left: auto; }
.cr-gal-foot .uk-width-1-2\@m > .cr-lift + * { margin-left: 16%; }

/* --- Dévoilement des photos au défilement --------------------------------
   Visibles par défaut ; seuls les navigateurs qui gèrent les animations
   liées au défilement les animent (et jamais si l'animation est réduite). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cr-reveal {
      animation: cr-unveil linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    .cr-reveal:not(.cr-inset):not(.cr-paper) { overflow: hidden; }
    .cr-reveal:not(.cr-inset):not(.cr-paper) img.el-image {
      animation: cr-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
  }
}

/* --- Galerie : photos encadrées comme dans un salon, filet doré, légende au survol */
.cr-gallery .el-nav { gap: 6px 4px; }
.cr-gallery .el-nav > * > a {
  padding: 8px 14px;
  font-size: 12px;
  color: #5A524A;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.cr-gallery .el-nav > * > a:hover { color: #882220; }
.cr-gallery .el-nav > .uk-active > a { color: #5C4834; border-bottom-color: #882220; }

.cr-gallery .el-item {
  position: relative;
  display: block;
  background: #fff;
  box-shadow: 0 1px 0 rgba(43, 38, 33, .04), 0 38px 60px -42px rgba(43, 38, 33, .55);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease;
}
.cr-gallery .el-item:hover,
.cr-gallery .el-item:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(43, 38, 33, .04), 0 48px 70px -40px rgba(43, 38, 33, .65);
}
/* filet doré intérieur */
.cr-gallery .el-item::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 2;
  border: 1px solid rgba(232, 214, 170, .75);
  pointer-events: none;
  transition: inset .6s cubic-bezier(.2, .7, .2, 1);
}
.cr-gallery .el-item:hover::before { inset: 20px; }
/* voile qui fait ressortir la légende */
.cr-gallery .el-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(43, 38, 33, .88) 0, rgba(43, 38, 33, .72) 35%, rgba(43, 38, 33, .35) 65%, rgba(43, 38, 33, .1) 100%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.cr-gallery .el-item:hover::after,
.cr-gallery .el-item:focus-within::after { opacity: 1; }
/* légende au-dessus du voile : elle est rangée dans le lien de la vignette, pas directement sous .el-item */
.cr-gallery .el-item [class*="uk-position-"]:not(.uk-position-cover) { z-index: 3; }
.cr-gallery .el-title { font-weight: 300; font-style: italic; color: #F6F5F1; }
.cr-gallery .el-meta { color: #F6F5F1; }
.cr-gallery .el-title,
.cr-gallery .el-meta { text-shadow: 0 1px 12px rgba(43, 38, 33, .55); }

/* Étapes « De l'esquisse à l'écrin » : croquis à même hauteur */
.cr-step-img img { height: 200px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* Fiche d'une pièce (galerie) et horaires (contact) */
.cr-specs > li,
.cr-hours > li { padding-top: 14px; padding-bottom: 14px; }

/* --- Formulaire de contact (RSForm, mise en page maison « cr-rsform ») --------- */
.cr-rsform .uk-form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  text-transform: uppercase;
  color: #5C4834;
}
.cr-rsform .formRequired { color: #882220; }
.cr-rsform .uk-input,
.cr-rsform .uk-textarea {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #C4B9A4;
  font-size: 17px;
  color: #5C4834;
  transition: border-color .3s ease;
}
.cr-rsform .uk-textarea { padding-top: 10px; min-height: 150px; resize: vertical; }
.cr-rsform .uk-input:focus,
.cr-rsform .uk-textarea:focus { background: transparent; border-bottom-color: #5C4834; }
.cr-rsform .uk-textarea::placeholder { color: #A39887; font-style: italic; }
.cr-rsform .formDescription,
.cr-rsform .cr-rsform-note { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #8A7F73; }
.cr-rsform .cr-rsform-note a { color: #5C4834; }

/* type de projet : étiquettes à cocher */
.cr-rsform-choix { margin-bottom: 32px; }
.cr-rsform-choix .rsfp-fieldset { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cr-rsform-choix .rsfp-fieldset > label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #C4B9A4;
  background: #fff;
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .04em;
  color: #5C4834;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cr-rsform-choix .rsfp-fieldset > label:hover { border-color: #5C4834; }
.cr-rsform-choix .rsfp-fieldset input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cr-rsform-choix .rsfp-fieldset > label:has(input:checked) { background: #5C4834; border-color: #5C4834; color: #F6F5F1; }
.cr-rsform-choix .rsfp-fieldset > label:has(input:focus-visible) { outline: 2px solid #5C4834; outline-offset: 3px; }

/* consentement */
.cr-rsform-consent label { display: inline-flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; cursor: pointer; }
.cr-rsform-consent .uk-checkbox { flex: none; margin-top: 3px; border-color: #A39887; }
.cr-rsform .uk-checkbox:checked,
.cr-rsform .uk-checkbox:checked:focus { background-color: #5C4834; border-color: #5C4834; }

/* erreurs */
.cr-rsform .formNoError { display: none; }
.cr-rsform .formError { display: block; margin-top: 6px; font-size: 13px; color: #882220; }
.cr-rsform .rsform-error,
.cr-rsform .uk-form-danger { border-bottom-color: #882220 !important; }
.formRed { color: #882220; }
.cr-rsform-actions .uk-button { min-width: 240px; }

/* message de remerciement */
.cr-rsform-merci h3 { margin-top: 8px; }

/* --- Pied de page ---------------------------------------------------------- */
.cr-footer { border-top: 1px solid #4A433B; }
.cr-footer,
.cr-footer .uk-subnav > * > a {
  font-family: Jost, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .01em;
  text-transform: none;
  color: #C4B9A4;
}
.cr-footer-copy p { margin: 0; }
.cr-footer-links > .uk-panel,
.cr-footer-links:not(:has(> .uk-panel)) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 24px;
}
.cr-footer-links .uk-subnav { margin-bottom: 0; }
.cr-footer .uk-subnav > * > a:hover,
.cr-footer-social a:hover { color: #F6F5F1; }
.cr-footer-social a { color: #C4B9A4; }

/* --- Tablette et téléphone (colonnes empilées sous 960 px) ----------------- */
@media (max-width: 959.98px) {
  /* ouverture de l'accueil : photo fixe en fond, texte en haut */
  .cr-hero { min-height: 780px; align-items: flex-start; }
  .cr-hero.uk-section { padding-top: 124px; padding-bottom: 320px; }
  .cr-hero > .uk-width-1-1,
  .cr-hero > .uk-width-1-1 > .uk-container,
  .cr-hero .cr-hero-row,
  .cr-hero .cr-hero-row > .cr-hero-text { position: static !important; } /* le conteneur porte uk-position-relative (!important) */
  .cr-hero .cr-hero-row > .cr-hero-text { animation-name: cr-fade-in; }
  /* le voile passe sur la photo elle-même : le fondu du texte crée un contexte
     d'empilement qui, sinon, glisserait le titre sous le voile de la section */
  .cr-hero::before { content: none; }
  .cr-hero .cr-hero-mobile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(246, 241, 234, .92) 0, rgba(246, 241, 234, .7) 48%, rgba(246, 241, 234, 0) 70%);
  }
  .cr-hero .cr-hero-mobile { position: absolute; inset: 0; z-index: 0; margin: 0; }
  .cr-hero .cr-hero-mobile picture,
  .cr-hero .cr-hero-mobile img { display: block; width: 100%; height: 100%; object-fit: cover; }

  .cr-hero-img img.el-image { height: auto; aspect-ratio: 4 / 5; }

  /* les photos qui débordent prennent toute la largeur */
  .cr-bleed-l, .cr-bleed-r { margin-left: -30px; margin-right: -30px; }
  .cr-tall img.el-image { height: auto; aspect-ratio: 4 / 5; }
  .cr-wide img.el-image { height: 440px; object-position: 66% 45%; }

  .cr-duo { margin-bottom: 40px; }
  .cr-inset { width: 42%; bottom: -40px; }
  .cr-inset-r { right: 12px; }
  .cr-inset-l { left: 12px; }

  /* photo avant le texte */
  .cr-media-first > :last-child,
  .cr-media-first > .uk-grid > :last-child { order: -1; }

  .cr-shift-1, .cr-shift-2, .cr-shift-3 { margin-top: 0; }
  .cr-shift-2 { width: 70%; margin-left: auto; }
  .cr-gal-foot .uk-grid > :last-child { order: -1; }
  .cr-lift { width: 72%; margin-left: auto; margin-top: -120px !important; }
  .cr-gal-foot .uk-width-1-2\@m > .cr-lift { width: 72%; }
  .cr-gal-foot .uk-width-1-2\@m > .cr-lift + * { margin-left: 0; }

  .cr-sketch-intro     { width: 340px; top: -90px; left: auto; right: -130px; opacity: .12; }
  .cr-sketch-invite    { width: 320px; top: auto; left: -110px; bottom: -110px; opacity: .28; }
  .cr-sketch-planche   { display: none; }
  .cr-sketch-statement { width: 300px; left: -110px; top: -80px; opacity: .12; }
  .cr-sketch-triboulet { width: 300px; right: -70px; top: -30px; opacity: .45; }
  .cr-sketch-cta       { width: 320px; right: -120px; top: -110px; opacity: .24; }
  .cr-sketch-galerie   { width: 300px; right: -100px; top: 60px; }
  .cr-sketch-contact   { width: 300px; right: -100px; top: 40px; }

  .cr-footer-links > .uk-panel { justify-content: flex-start; }
}
@media (max-width: 639.98px) {
  .cr-bleed-l, .cr-bleed-r { margin-left: -15px; margin-right: -15px; }
}

/* --- Animations réduites : rien ne bouge, la vidéo laisse place à la photo -- */
@media (prefers-reduced-motion: reduce) {
  .cr-hero > video,
  .cr-hero-text,
  .cr-hero-img img.el-image { animation: none; }
  .cr-hero > video { display: none; }
  .cr-hero .cr-hero-mobile { display: block !important; position: absolute; inset: 0; z-index: 0; margin: 0; }
  .cr-hero .cr-hero-mobile picture,
  .cr-hero .cr-hero-mobile img { display: block; width: 100%; height: 100%; object-fit: cover; }
}