/*
Theme Name: OLRAF — correctifs d'interface
Author: Intside
Description: correctifs mobile + composants maison — Bootstrap, rem, mobile-first
Version: 1.0
*/

/**
 * Chargé APRÈS style.css et skin-4.css : ce fichier a le dernier mot.
 * On n'édite jamais style.css (thème acheté).
 *
 * Table of Contents:
 *
 * 1.0 - Variables
 * 2.0 - Menu mobile
 * 3.0 - Filtres boutique
 * 4.0 - Pastilles flottantes
 * 5.0 - Visuel produit
 * 6.0 - Confort tactile
 * 7.0 - Mode de réception (paiement)
 * 8.0 - Hero de l'accueil
 * ----------------------------------------------------------------------------
 */

/* ─────────────────────────────────────────────────────────────
   1.0 Variables
   --primary, --primary-dark, --rgba-primary-* viennent de skin-4.css :
   on les réutilise au lieu de les redéfinir, sinon un changement de skin
   ne se propagerait pas ici.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Texte */
  --text-main: #070120;
  --text-muted: #666e82;
  --text-subtle: #9a9aae;

  /* Fonds */
  --bg-card: #fff;
  --bg-section: #f3f3f8;
  --bg-soft: #f8f9fb;

  /* Bordures */
  --border: #e6e6ef;

  /* Sémantique */
  --success: #28a745;
  --destructive: #dc3545;

  /* Voiles */
  --overlay: rgba(7, 1, 32, 0.5);
  --overlay-soft: rgba(7, 1, 32, 0.45);

  /* Radius */
  --r-sm: 0.25rem;
  --r-md: 0.625rem;
  --r-lg: 0.75rem;

  /* Ombres */
  --shadow-sm: 0 4px 10px rgba(7, 1, 32, 0.12);
  --shadow-md: 0 8px 24px rgba(7, 1, 32, 0.16);
  --shadow-lg: 0 0 40px rgba(7, 1, 32, 0.25);

  /* Pastilles flottantes — mobile d'abord */
  --fab-size: 2.75rem;
  --fab-gap: 0.625rem;
  --fab-edge: 0.75rem;
}

/* ─────────────────────────────────────────────────────────────
   2.0 Menu mobile

   EXCEPTION mobile-first assumée : ce bloc corrige des règles du thème
   qui vivent elles-mêmes dans `@media (max-width: 991px)`. Les écrire en
   base puis les neutraliser en `min-width` reviendrait à réaffirmer des
   valeurs desktop du thème qu'on ne maîtrise pas — et à risquer une
   régression sur toutes les pages. Tout le reste du fichier est
   strictement mobile-first.
   ───────────────────────────────────────────────────────────── */

.mobile-menu-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 98;
  background: var(--overlay);
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  visibility: hidden;
}

.mobile-menu-backdrop.active {
  opacity: 1;
  visibility: visible;
}

@media only screen and (max-width: 991px) {
  /* Le thème ouvre le tiroir en 0.8–1s : beaucoup trop lent au pouce.
     z-index au-dessus de `.main-bar` (990) : le tiroir ne doit être recouvert
     par aucun élément de l'en-tête, sinon les taps sur sa croix de fermeture
     atterrissent sur la barre du haut. Sans effet hors ouverture, le tiroir
     étant sinon hors écran. */
  .header-nav {
    left: -20rem;
    z-index: 1001;
    width: 18.75rem;
    padding-bottom: 2.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: left 0.28s ease-out;
    -webkit-overflow-scrolling: touch;
  }

  .header-nav.show {
    left: 0;
    width: 18.75rem;
    box-shadow: var(--shadow-lg);
    transition: left 0.28s ease-out;
  }

  /* Le thème fait flotter la liste à droite : débordements dans un tiroir. */
  .header-nav .nav {
    float: none;
    width: 100%;
    padding: 0 1.25rem;
  }

  .header-nav .nav > li > a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.8125rem 0;
    font-size: 1rem;
    line-height: 1.3;
  }

  /* Le logo occupe toute la largeur en haut du tiroir : on lui réserve la
     place de la croix pour éviter tout recouvrement. */
  .header-nav .logo-header {
    width: auto;
    padding: 1.5rem 4.25rem 1rem 1.25rem;
  }

  .header-nav .dlab-social-icon {
    padding: 1.25rem;
  }

  .header-nav .dlab-social-icon ul li a {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
  }

  /* Bouton de fermeture du tiroir (ajouté dans header.blade.php).
     z-index élevé et position fixe dans le tiroir : il doit rester au-dessus
     du logo et de la liste, et rester atteignable même après défilement du
     menu. Zone tactile de 2.75rem, minimum confortable au pouce. */
  .header-nav .menu-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bg-section);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--text-main);
    /* Sur mobile, un tap doit agir tout de suite. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .header-nav .menu-close:active {
    background: var(--border);
  }

  /* L'icône ne doit pas intercepter le tap à la place du bouton. */
  .header-nav .menu-close i {
    pointer-events: none;
  }

  /* Le CTA « Obtenir un Devis » est masqué par le thème sous 576px :
     on le rend disponible dans le tiroir. */
  .header-nav .mobile-cta {
    padding: 0.25rem 1.25rem 1rem;
  }

  .header-nav .mobile-cta .btn {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Zone tactile du hamburger : 20×18px, trop petit pour un pouce. On
     élargit par le padding — les barres sont en position absolue et se
     calent sur la boîte de padding, donc elles restent centrées. */
  .navbar-toggler.navicon {
    box-sizing: content-box;
    padding: 0.875rem 0.75rem;
  }

  /* Menu ouvert : le thème transforme le hamburger en croix, ce qui faisait
     deux croix à l'écran avec celle du tiroir. On ne garde que celle du
     tiroir, dans le pouce et clairement rattachée au panneau. */
  body.mobile-menu-open .navbar-toggler {
    opacity: 0;
    pointer-events: none;
  }
}

@media (min-width: 992px) {
  .mobile-menu-backdrop,
  .header-nav .menu-close,
  .header-nav .mobile-cta {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   3.0 Filtres boutique
   Sur mobile la colonne de filtres se plaçait avant les produits : il
   fallait faire défiler catégories + prix avant de voir un seul article.
   Elle devient un panneau replié derrière un bouton.
   ───────────────────────────────────────────────────────────── */

.shop-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3.125rem;
  padding: 0.8125rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-card);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-main);
}

.shop-filter-toggle .count {
  margin-right: 0.375rem;
  margin-left: auto;
  padding: 0.0625rem 0.5625rem;
  border-radius: 999px;
  background: var(--primary);
  font-size: 0.75rem;
  color: #fff;
}

.shop-filter-toggle .chevron {
  transition: transform 0.2s ease;
}

.shop-filter-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.shop-filters {
  margin-top: 0.75rem;
}

/* Replié : pas de marge fantôme sous le bouton. */
.shop-filters.collapse:not(.show) {
  margin-top: 0;
}

@media (min-width: 992px) {
  .shop-filters {
    margin-top: 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   4.0 Pastilles flottantes (remonter / panier / assistant)
   Elles se chevauchaient : chaque bouton avait sa taille et sa position
   définies dans un fichier différent, sans coordination. Elles sont
   désormais empilées à partir de trois variables, ce qui rend le
   chevauchement impossible quelle que soit la taille d'écran.
   ───────────────────────────────────────────────────────────── */

/* Barreau 1 : retour en haut (masqué tant qu'on n'a pas défilé) */
button.scroltop {
  right: var(--fab-edge);
  bottom: var(--fab-edge);
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  line-height: var(--fab-size);
}

/* Barreau 2 : panier (styles rapatriés du <style> inline de start.blade.php,
   où ils étaient chargés après ce fichier et annulaient ses réglages) */
.cart-btn {
  position: fixed;
  right: var(--fab-edge);
  bottom: calc(var(--fab-edge) + var(--fab-size) + var(--fab-gap));
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fab-size);
  height: var(--fab-size);
  border: none;
  border-radius: 50%;
  background-color: var(--primary);
  box-shadow: var(--shadow-sm);
  color: #fff;
  transition: transform 0.2s ease;
}

.cart-btn:hover {
  transform: scale(1.08);
}

.cart-count {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: 999px;
  background-color: var(--destructive);
  font-size: 0.6875rem;
  color: #fff;
}

.cart-item {
  transition: background-color 0.2s ease;
}

.cart-item:hover {
  background-color: var(--bg-soft);
}

/* Barreau 3 : assistant FAQ (le gabarit est piloté ici, l'apparence reste
   dans faq-widget.blade.php) */
.faq-btn {
  right: var(--fab-edge);
  bottom: calc(var(--fab-edge) + 2 * (var(--fab-size) + var(--fab-gap)));
  width: var(--fab-size);
  height: var(--fab-size);
  font-size: 1.1875rem;
}

/* Les trois pastilles sont sous le z-index du panneau de l'assistant (9999) :
   quand il passe en plein écran, elles sont couvertes sans qu'on ait à les
   masquer. Seul le défilement de la page doit être bloqué. */
body.faq-open {
  overflow: hidden;
}

/* Même seuil que le panneau (voir faq-widget.blade.php) : au-dessus il
   redevient une bulle, la page doit pouvoir défiler. */
@media (min-width: 768px) {
  body.faq-open {
    overflow: visible;
  }
}

@media (min-width: 992px) {
  :root {
    --fab-size: 3rem;
    --fab-gap: 0.75rem;
    --fab-edge: 1rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   5.0 Visuel produit
   Les photos fournies sont majoritairement carrées sur fond blanc.
   Recadrées en `object-fit: cover` dans une boîte de 300px, elles ne
   montraient qu'une étendue blanche. On les affiche entières sur une
   plaque neutre, et les produits sans photo reçoivent un vrai marqueur
   plutôt qu'un trou.
   ───────────────────────────────────────────────────────────── */

.product-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12.5rem;
  background: var(--bg-section);
  overflow: hidden;
}

.product-media img {
  object-fit: contain;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.product-media-empty {
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--text-subtle);
}

.product-media-empty i {
  font-size: 2rem;
}

/* Sur fond clair, les flèches et les puces blanches de Bootstrap étaient
   invisibles. */
.product-carousel .carousel-control-prev,
.product-carousel .carousel-control-next {
  top: 50%;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--overlay-soft);
  opacity: 1;
  transform: translateY(-50%);
}

.product-carousel .carousel-control-prev {
  left: 0.625rem;
}

.product-carousel .carousel-control-next {
  right: 0.625rem;
}

/* Les puces passent sous l'image : au-dessus, elles masquaient le produit. */
.product-carousel .carousel-indicators {
  position: static;
  margin: 0.625rem 0 0;
}

.product-carousel .carousel-indicators [data-bs-target] {
  width: 1.625rem;
  height: 0.25rem;
  border: 0;
  border-radius: var(--r-sm);
  background-color: var(--text-main);
  opacity: 0.25;
}

.product-carousel .carousel-indicators .active {
  background-color: var(--primary);
  opacity: 1;
}

@media (min-width: 992px) {
  .product-media {
    height: 16.25rem;
  }
}

/* ─── État du matériel (neuf / occasion) ─────────────────────── */

.product-media-wrap {
  position: relative;
}

/* Sur une vignette, l'état doit se lire sans ouvrir la fiche. */
.condition-badge {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--text-main);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

.condition-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.condition-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  font-size: 0.875rem;
  color: var(--text-main);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.condition-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.condition-chip.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.condition-chip-sm {
  padding: 0.3125rem 0.6875rem;
  font-size: 0.8125rem;
}

.condition-chip .count {
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--rgba-primary-1);
  font-size: 0.75rem;
  color: var(--primary);
}

.condition-chip.is-active .count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.condition-block {
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
}

.condition-block.is-second-hand {
  border-color: var(--primary);
  background: var(--rgba-primary-05);
}

.condition-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  color: var(--primary);
}

.condition-block-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
}

.condition-block-origin {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--rgba-primary-1);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}

.condition-block-help {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.condition-block-note {
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-main);
}

/* ─────────────────────────────────────────────────────────────
   6.0 Confort tactile
   ───────────────────────────────────────────────────────────── */

/* 1rem : en dessous, iOS zoome sur le champ à la mise au point. */
.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"] {
  min-height: 3rem;
  font-size: 1rem;
}

textarea.form-control {
  min-height: 6rem;
}

.btn {
  min-height: 2.875rem;
}

.btn-sm {
  min-height: 2.375rem;
}

/* Pagination : pastilles trop serrées pour un pouce. */
.pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.625rem;
  min-height: 2.625rem;
}

/* Titre de bannière : les mots longs débordaient sur écran étroit. */
.dlab-bnr-inr .dlab-bnr-inr-entry h1 {
  word-break: break-word;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Les panneaux latéraux (panier, fiche produit) font 400px dans Bootstrap :
   plus large que l'écran d'un téléphone. */
.offcanvas-start,
.offcanvas-end {
  width: 100%;
  max-width: 100%;
}

.offcanvas-header {
  padding: 0.875rem 1rem;
}

.offcanvas-body {
  padding: 1rem;
}

/* Garde-fou : aucune page ne doit défiler horizontalement sur mobile. */
body {
  overflow-x: hidden;
}

@media (min-width: 992px) {
  .offcanvas-start,
  .offcanvas-end {
    width: 25rem;
    max-width: 25rem;
  }

  .offcanvas-header {
    padding: 1rem;
  }

  .offcanvas-body {
    padding: 1rem;
  }

  /* `overflow-x` sur <body> casse `position: sticky` : on le lève dès que
     la largeur ne pose plus de problème. */
  body {
    overflow-x: visible;
  }
}

/* ─────────────────────────────────────────────────────────────
   7.0 Mode de réception (page de paiement)
   ───────────────────────────────────────────────────────────── */

.delivery-options {
  display: grid;
  gap: 0.75rem;
}

.delivery-option {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.875rem;
  margin: 0;
  padding: 0.875rem;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.delivery-option:hover {
  border-color: var(--primary);
}

.delivery-option.is-selected {
  border-color: var(--primary);
  background: var(--rgba-primary-05);
}

.delivery-option.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.delivery-option.is-disabled:hover {
  border-color: var(--border);
}

/* La puce radio reste accessible (clavier, lecteurs d'écran) mais c'est la
   carte entière qui sert de zone tactile. */
.delivery-option-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.delivery-option-input:focus-visible + .delivery-option-icon {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.delivery-option-icon {
  flex: 0 0 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--rgba-primary-1);
  font-size: 1.125rem;
  color: var(--primary);
}

.delivery-option-body {
  flex: 1 1 auto;
  min-width: 0;
}

.delivery-option-title {
  display: block;
  margin-bottom: 0.125rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
}

.delivery-option-desc {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.delivery-option-price {
  flex: 1 1 100%;
  padding-left: 3.625rem;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: left;
  color: var(--primary);
}

.delivery-option-price small {
  display: inline !important;
  margin-left: 0.25rem;
}

.checkout-amount-card {
  padding: 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
}

@media (min-width: 576px) {
  .delivery-option {
    flex-wrap: nowrap;
    padding: 1rem;
  }

  .delivery-option-price {
    flex: 0 0 auto;
    padding-left: 0;
    text-align: right;
    white-space: nowrap;
  }

  .delivery-option-price small {
    display: block !important;
    margin-left: 0;
  }

  /* Bouton pleine largeur sur mobile uniquement. */
  .w-sm-auto {
    width: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   8.0 Hero de l'accueil

   Photo de l'équipe sous un voile violet, teinte reprise des visuels
   de campagne (#7c77cc). Le voile est plus dense côté texte pour tenir
   le contraste AA du texte blanc, et s'éclaircit vers la droite pour
   laisser voir la photo. Sur mobile le texte couvre toute la largeur :
   voile uniforme.
   ───────────────────────────────────────────────────────────── */

:root {
  --hero-violet: 124, 119, 204;       /* #7c77cc — teinte de l'affiche */
  --hero-violet-deep: 76, 66, 180;    /* #4c42b4 — côté texte */
  --hero-ink: #2e2494;                /* texte du bouton plein */
}

.olraf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Le header est transparent et posé sur le hero : on réserve sa place. */
  padding: 7.5rem 0 4rem;
  background-color: rgb(var(--hero-violet-deep));
  color: #fff;
}

.olraf-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}

.olraf-hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(var(--hero-violet-deep), 0.9);
}

.olraf-hero-inner {
  position: relative;
}

.olraf-hero-content {
  max-width: 40rem;
}

.olraf-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.olraf-hero-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 2rem;
  height: 2px;
  background: currentColor;
}

.olraf-hero-title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 1.35rem + 3.2vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.olraf-hero-text {
  margin: 0 0 2rem;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
}

.olraf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.olraf-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.olraf-hero-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.olraf-hero-btn:active {
  transform: scale(0.97);
}

.olraf-hero-btn--solid {
  background: #fff;
  color: var(--hero-ink);
}

.olraf-hero-btn--solid:hover {
  background: transparent;
  color: #fff;
}

.olraf-hero-btn--ghost {
  background: transparent;
  color: #fff;
}

.olraf-hero-btn--ghost:hover {
  background: #fff;
  color: var(--hero-ink);
}

/* Entrée discrète, une seule fois : pas d'animation longue ni en boucle. */
@media (prefers-reduced-motion: no-preference) {
  .olraf-hero-content > * {
    animation: olraf-hero-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .olraf-hero-content > :nth-child(2) { animation-delay: 0.08s; }
  .olraf-hero-content > :nth-child(3) { animation-delay: 0.16s; }
  .olraf-hero-content > :nth-child(4) { animation-delay: 0.24s; }
}

@keyframes olraf-hero-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@media (min-width: 576px) {
  .olraf-hero-actions {
    gap: 1rem;
  }
}

@media (min-width: 768px) {
  .olraf-hero {
    min-height: 40rem;
    padding: 9rem 0 5rem;
  }

  .olraf-hero-text {
    font-size: 1.125rem;
  }

  /* Le texte n'occupe plus que la gauche : le voile s'ouvre à droite. */
  .olraf-hero-veil {
    background: linear-gradient(
      90deg,
      rgba(var(--hero-violet-deep), 0.93) 0%,
      rgba(var(--hero-violet-deep), 0.86) 40%,
      rgba(var(--hero-violet), 0.62) 75%,
      rgba(var(--hero-violet), 0.5) 100%
    );
  }
}

@media (min-width: 1200px) {
  .olraf-hero {
    min-height: min(100svh, 52rem);
  }

  .olraf-hero-photo {
    object-position: center;
  }
}