/* ============================================================
   REPTHOCI.NET — Diaporama Hero
   Fichier : css/hero-slideshow.css

   CE FICHIER N'EXISTAIT PAS.
   Les douze pages du site le referencent en <link>, mais il n'a
   jamais ete livre. Sans lui, les diapositives n'ont aucun
   positionnement : au lieu de se superposer, elles s'empilent
   les unes sous les autres, toutes visibles en meme temps, et
   debordent de la largeur de la page. C'est exactement le rendu
   observe sur l'accueil.

   Contrat impose par js/repthoci-api.js — les noms de classes
   ci-dessous sont ceux qu'il ecrit, ils ne doivent pas changer :

     section.rh-hero[data-hauteur][data-effect]
       .rh-hero-slides
         .rh-hero-slide[data-effect][style="background-image:…; --overlay:…"]
            .rh-active   diapositive affichee
            .rh-leaving  diapositive qui sort
            .rh-no-image aucune image : fond degrade
           .rh-hero-content[data-pos=gauche|centre|droite]
             .rh-hero-text
               .rh-hero-eyebrow / .rh-hero-title / .rh-hero-subtitle / .rh-hero-cta
       button.rh-hero-arrow.rh-prev / .rh-next
       .rh-hero-dots > button.rh-hero-dot(.rh-active)
       .rh-hero-counter
     .rh-paused  survol : defilement en pause
   ============================================================ */

/* ------------------------------------------------------------
   1. Cadre
   ------------------------------------------------------------ */
.rh-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #241a12;
    isolation: isolate;
}

/* Hauteurs. 'auto' reprend la proportion des heros d'origine ;
   une hauteur fixe en vh casse la lecture sur les petits ecrans,
   d'ou le min-height plutot que height. */
.rh-hero[data-hauteur="auto"]    { min-height: 460px; }
.rh-hero[data-hauteur="compact"] { min-height: 320px; }
.rh-hero[data-hauteur="plein"]   { min-height: 70vh; }

/* ------------------------------------------------------------
   2. Pile de diapositives

   La premiere reste DANS LE FLUX : c'est elle qui donne sa
   hauteur au conteneur. Si toutes etaient en position absolue,
   .rh-hero-slides n'aurait aucune hauteur propre et le diaporama
   se replierait a zero pixel.
   ------------------------------------------------------------ */
.rh-hero-slides {
    position: relative;
    width: 100%;
    min-height: inherit;
}

.rh-hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, transform .8s ease;
    z-index: 1;
}

/* La premiere diapositive reste dans le flux pour donner sa hauteur au
   conteneur ; encore faut-il qu'elle atteigne elle-meme la hauteur
   minimale du cadre, sinon le fond s'arrete avant le bas du bloc. */
.rh-hero-slide:first-child {
    position: relative;
    min-height: inherit;
}

.rh-hero-slide.rh-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.rh-hero-slide.rh-leaving {
    opacity: 0;
    visibility: visible;
    z-index: 1;
}

/* Voile sombre : sans lui, un titre clair sur une photo claire
   devient illisible. L'intensite vient de la base, via --overlay. */
.rh-hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(36, 26, 18, calc(var(--overlay, .5) + .15)) 0%,
        rgba(36, 26, 18, var(--overlay, .5)) 55%,
        rgba(36, 26, 18, calc(var(--overlay, .5) * .55)) 100%
    );
    z-index: 1;
}

.rh-hero-slide.rh-no-image {
    background-image: linear-gradient(135deg, #3a2413 0%, #241a12 60%, #1a1109 100%);
}

/* ------------------------------------------------------------
   3. Contenu
   ------------------------------------------------------------ */
.rh-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 64px 24px;
    display: flex;
}

.rh-hero-content[data-pos="gauche"] { justify-content: flex-start; text-align: left; }
.rh-hero-content[data-pos="centre"] { justify-content: center;     text-align: center; }
.rh-hero-content[data-pos="droite"] { justify-content: flex-end;   text-align: right; }

.rh-hero-text {
    max-width: 660px;
    color: #fff;
}

.rh-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #EF9F27;
    background: rgba(239, 159, 39, .13);
    border: 1px solid rgba(239, 159, 39, .32);
    padding: 6px 13px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.rh-hero-title {
    font-size: clamp(28px, 4.4vw, 52px);
    line-height: 1.12;
    font-weight: 800;
    margin: 0 0 16px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .38);
}

/* Le formulaire d'administration autorise <em> dans le titre :
   c'est le seul balisage conserve, il met un mot en valeur. */
.rh-hero-title em {
    font-style: normal;
    color: #EF9F27;
}

.rh-hero-subtitle {
    font-size: clamp(14.5px, 1.5vw, 18px);
    line-height: 1.6;
    margin: 0 0 26px;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .34);
}

.rh-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #B8451F;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    padding: 13px 26px;
    border-radius: 8px;
    transition: background .2s, transform .2s;
}

.rh-hero-cta:hover {
    background: #9c3717;
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   4. Commandes
   ------------------------------------------------------------ */
.rh-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(36, 26, 18, .42);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.rh-hero-arrow:hover {
    background: rgba(184, 69, 31, .9);
    border-color: transparent;
}

.rh-hero-arrow.rh-prev { left: 18px; }
.rh-hero-arrow.rh-next { right: 18px; }

.rh-hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 6;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.rh-hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .42);
    cursor: pointer;
    transition: width .25s, background .2s, border-radius .25s;
}

.rh-hero-dot.rh-active {
    width: 26px;
    border-radius: 5px;
    background: #EF9F27;
}

.rh-hero-counter {
    position: absolute;
    right: 22px;
    bottom: 20px;
    z-index: 6;
    font-size: 12.5px;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .7);
}

.rh-hero-counter strong {
    color: #EF9F27;
    font-size: 15px;
}

/* ------------------------------------------------------------
   5. Effets de transition, choisis par bannière dans l'admin.
      L'effet est porte par le CONTENEUR (data-effect), pose par
      heroShowSlide() a chaque changement.
   ------------------------------------------------------------ */
.rh-hero[data-effect="slide"] .rh-hero-slide            { transform: translateX(6%); }
.rh-hero[data-effect="slide"] .rh-hero-slide.rh-active  { transform: translateX(0); }
.rh-hero[data-effect="slide"] .rh-hero-slide.rh-leaving { transform: translateX(-6%); }

.rh-hero[data-effect="zoom"] .rh-hero-slide             { transform: scale(1.06); }
.rh-hero[data-effect="zoom"] .rh-hero-slide.rh-active   { transform: scale(1); }

.rh-hero[data-effect="kenburns"] .rh-hero-slide.rh-active {
    animation: rh-kenburns 12s ease-out forwards;
}

@keyframes rh-kenburns {
    from { transform: scale(1);    }
    to   { transform: scale(1.09); }
}

/* ------------------------------------------------------------
   6. Petits écrans
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .rh-hero[data-hauteur="auto"]    { min-height: 380px; }
    .rh-hero[data-hauteur="compact"] { min-height: 280px; }
    .rh-hero[data-hauteur="plein"]   { min-height: 62vh; }

    .rh-hero-content { padding: 44px 18px; }

    /* Sur mobile, un texte aligne a droite se lit mal : tout revient
       a gauche, quel que soit le reglage choisi dans l'administration. */
    .rh-hero-content[data-pos="droite"] { justify-content: flex-start; text-align: left; }

    .rh-hero-arrow { width: 36px; height: 36px; font-size: 17px; }
    .rh-hero-arrow.rh-prev { left: 10px; }
    .rh-hero-arrow.rh-next { right: 10px; }

    .rh-hero-counter { display: none; }
}

/* ------------------------------------------------------------
   7. Accessibilité — mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .rh-hero-slide { transition: opacity .01ms; transform: none !important; }
    .rh-hero[data-effect="kenburns"] .rh-hero-slide.rh-active { animation: none; }
}