/* ==========================================================================
   SERVICES — grille de cards (fond sombre, voir .services sur critical.css
   via --color-primary), icône + titre + texte. Mobile-first : 1 colonne,
   2 à partir de la tablette, 3 à partir du desktop (voir maquette).
   ========================================================================== */
.services {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 4rem 0; */
    padding: 3rem 0;
    /* background-color: var(--color-primary); */
    text-align: center;
}

.services__label {
    font-size: var(--font-size-sm);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.services__title {
    margin-top: 0.5rem;
    font-family: var(--font-primary);
    /* font-size: var(--font-size-h2); */
    font-size: 1.1rem;
    font-weight: 400;
    /* color: var(--color-text-light); */
    color: var(--color-text);
    /* padding: 0 1rem; */
    padding: 0 .4rem;
}

.services__subtitle {
    /* max-width: 40rem; */
    max-width: 575px;
    /* margin: 1rem auto 0; */
    /* color: var(--color-text-light); */
    color: var(--color-text-grey);
    /* opacity: 0.7; */
    font-size: min(max(.6rem, 1.2vw), .9rem);
    padding: 0 .4rem;
}

@media (min-width: 340px) {

    .services__subtitle {
        padding: 0 1rem;
    }

}

@media (min-width: 360px) {

    .services__title {
        font-size: clamp(1.2rem, 1.2vw + 1rem, 2.25rem);
    }

}

@media (min-width: 390px) {

    .services__subtitle {
        padding: 0 2rem;
    }

}

@media (min-width: 460px) {

    .services__subtitle {
        font-size: min(max(.7rem, 1.2vw), .85rem);
        padding: 0 3rem;
    }

}

@media (min-width: 530px) {

    .services__subtitle {
        padding: 0 3rem;
    }

}

@media (min-width: 470px) {

    .services__title {
        font-size: var(--font-size-h2);
    }
}

@media (min-width: 768px) {

    /* .services__title {
        font-size: var(--font-size-h2);
    } */

    .services__subtitle {
        padding: 0 1.7rem;
    }
}

@media (min-width: 868px) {
    .services__subtitle {
        padding: 0 .7rem;
    }
}

@media (min-width: 930px) {
    .services__subtitle {
    padding: 0rem;
    }
}

.services__grid {
    /* display: grid; */
    /* grid-template-columns: 100%; */
    gap: .5rem;
    margin-top: 3rem;

    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-flow: row wrap;
}

.services__card {
    /* padding: .8rem; */
    /* padding: .5rem .7rem; */
    padding: 1rem;
    /* border: 1px solid rgba(255, 255, 255, 0.15); */
    border: 1px solid var(--color-secondary);
    text-align: left;
    width: 47%;
    width: 40%;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 580px) {
    .services__card {
        padding: 1.5rem;
    }
}

@media (min-width: 768px) {
    .services__card {
        width: 40%;
        padding: 2rem;
    }
}

@media (min-width: 1000px) {

    .services__card {
        width: 30%;
    }

}

/* .services__icon {
    display: block;
    width: 48px;
    height: 48px;
} */

/* Icône inline uniquement (voir services.php, $service["inline"]) : le SVG
   est un <span> qui contient directement le code SVG (pas un <img src="">),
   seul moyen pour le CSS d'atteindre les <path> à l'intérieur et les
   animer. svg doit remplir le <span> comme le ferait l'<img> ci-dessus. */
.services__icon svg {
    display: block;
    /* width: 48px; */
    /* height: 48px; */
    width: 25px;
    height: 25px;
    /* width: clamp(25px, 4vw, 48px); */
    min-height: clamp(25px, 3.1vw + 1rem, 48px);
    min-width: clamp(25px, 3.2vw + 1rem, 48px);
    /* height: 100%;
    width: 100%; */
}

/* Fumée du café — ondule légèrement et s'estompe/réapparaît au survol de la
   card, comme de la vapeur. translateY plutôt que top/margin : ne force pas
   de recalcul de mise en page, juste le compositeur graphique. */
@keyframes steam-rise {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-1.5px);
        opacity: 1;
    }
}

.icon-steam {
    transform-origin: center bottom;
}

.services__card:hover .icon-steam {
    animation: steam-rise 1.4s ease-in-out infinite;
}

/* Wifi — plein par défaut (comme hors survol/animation). Au survol, chaque
   arc se vide puis se remplit à nouveau, l'un après l'autre du centre vers
   l'extérieur, en boucle. */
@keyframes wifi-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
}

.services__card:hover .icon-wifi-arc--1 {
    animation: wifi-pulse 1.6s ease-in-out infinite;
}

.services__card:hover .icon-wifi-arc--2 {
    animation: wifi-pulse 1.6s ease-in-out infinite;
    animation-delay: 0.15s;
}

.services__card:hover .icon-wifi-arc--3 {
    animation: wifi-pulse 1.6s ease-in-out infinite;
    animation-delay: 0.3s;
}

/* Concierge — l'aiguille de la boussole oscille comme si elle cherchait le
   nord avant de se stabiliser, l'anneau reste fixe. transform-box: fill-box
   nécessaire pour que "center" se calcule sur la boîte englobante réelle de
   l'aiguille (par défaut, transform-origin se base sur le viewBox entier du
   SVG, pas sur l'élément — l'aiguille tournerait alors autour du coin
   supérieur gauche de l'icône au lieu de son propre centre). La forme de
   l'aiguille étant à peu près symétrique, son centre coïncide ici avec
   celui du cercle. */
.icon-compass-needle {
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes compass-wobble {
    0%, 100% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(20deg);
    }
    45% {
        transform: rotate(-14deg);
    }
    70% {
        transform: rotate(6deg);
    }
    85% {
        transform: rotate(-2deg);
    }
}

.services__card:hover .icon-compass-needle {
    animation: compass-wobble 1.8s ease-in-out infinite;
}

/* Bagagerie — version "roulettes" : poignée et corps pivotent ensemble,
   comme une valise qui bascule légèrement d'un côté à l'autre en roulant.
   transform-origin en bas (pivot au niveau du sol/des roulettes, pas du
   centre de l'icône) sur les deux éléments, pour qu'ils bougent comme un
   seul bloc rigide plutôt que chacun sur son propre axe. */
.icon-luggage-handle,
.icon-luggage-body {
    transform-box: fill-box;
    transform-origin: bottom center;
}

@keyframes luggage-roll {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-6deg);
    }
    75% {
        transform: rotate(6deg);
    }
}

.services__card:hover .icon-luggage-handle,
.services__card:hover .icon-luggage-body {
    animation: luggage-roll 1s ease-in-out infinite;
}

/* Voiturage — les roues tournent en continu (linear, pas ease : une vraie
   roue ne ralentit/accélère pas à chaque tour), la carrosserie avance
   légèrement d'avant en arrière, comme une voiture qui démarre. Chaque roue
   a son propre centre de rotation (fill-box : sa boîte englobante propre,
   pas celle de toute l'icône). */
.icon-car-wheel {
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes car-wheel-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes car-drive {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(1px);
    }
}

.services__card:hover .icon-car-wheel {
    animation: car-wheel-spin 0.6s linear infinite;
}

.services__card:hover .icon-car-body {
    animation: car-drive 0.6s ease-in-out infinite;
}

/* Room Service — la cloche sonne : balancement rapide, pivot en haut (là où
   elle est accrochée), amplitude qui diminue à chaque oscillation comme une
   vraie cloche qui se stabilise. Corps et battant pivotent ensemble (même
   transform-origin, fill-box sur chacun) pour bouger comme un seul bloc. */
.icon-bell-body,
.icon-bell-clapper {
    transform-box: fill-box;
    transform-origin: top center;
}

@keyframes bell-ring {
    0%, 100% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(18deg);
    }
    20% {
        transform: rotate(-16deg);
    }
    30% {
        transform: rotate(12deg);
    }
    40% {
        transform: rotate(-8deg);
    }
    50% {
        transform: rotate(4deg);
    }
    60% {
        transform: rotate(-2deg);
    }
}

.services__card:hover .icon-bell-body,
.services__card:hover .icon-bell-clapper {
    animation: bell-ring 1.2s ease-in-out infinite;
}

.services.is-revealed .icon-bell-body,
.services.is-revealed .icon-bell-clapper {
    animation: bell-ring 1.2s ease-in-out 2;
}

/* "Teaser" d'arrivée sur la section — .services.is-revealed ajoutée une
   seule fois en JS (voir main.js) quand la section entre dans le viewport.
   Mêmes animations que celles au survol, rejouées 2 fois (pas "infinite")
   pour attirer l'œil sans tomber sous le coup du WCAG 2.2.2 (contenu
   animé automatiquement > 5s doit être contrôlable) — ici ça se termine
   tout seul en quelques secondes, puis redevient sobre (seul le survol
   réanime ensuite). */
.services.is-revealed .icon-steam {
    animation: steam-rise 1.4s ease-in-out 2;
}

.services.is-revealed .icon-wifi-arc--1 {
    animation: wifi-pulse 1.6s ease-in-out 2;
}

.services.is-revealed .icon-wifi-arc--2 {
    animation: wifi-pulse 1.6s ease-in-out 2;
    animation-delay: 0.15s;
}

.services.is-revealed .icon-wifi-arc--3 {
    animation: wifi-pulse 1.6s ease-in-out 2;
    animation-delay: 0.3s;
}

.services.is-revealed .icon-compass-needle {
    animation: compass-wobble 1.8s ease-in-out 2;
}

.services.is-revealed .icon-luggage-handle,
.services.is-revealed .icon-luggage-body {
    animation: luggage-roll 1s ease-in-out 2;
}

.services.is-revealed .icon-car-wheel {
    animation: car-wheel-spin 0.6s linear 2;
}

.services.is-revealed .icon-car-body {
    animation: car-drive 0.6s ease-in-out 2;
}

.services__card-title {
    /* margin-top: 1.25rem; */
    font-family: var(--font-primary);
    /* font-size: var(--font-size-h3); */
    /* font-size: 1.8rem; */
    font-size: min(max(1.1rem, 2.5vw), 1.8rem);
    font-weight: 400;
    /* color: var(--color-text-light); */
    color: var(--color-secondary);
    line-height: 1;
}

.services__card-text {
    /* margin-top: 0.5rem; */
    /* font-size: var(--font-size-sm); */
    /* font-size: min(max(0.55rem, 1vw), 1rem); */
    font-size: min(max(0.4rem, 1vw), 1rem);
    color: var(--color-text-grey);
    /* opacity: 0.7; */
    /* Réserve la place du texte le plus long (3 lignes) — un texte plus
       court laisse juste du vide en dessous de lui (comportement par défaut
       d'un bloc, pas besoin de flex ici), sans décaler le bouton ou la
       bordure de la card. Reprend la même formule fluide que font-size
       ci-dessus (pas une valeur figée) : sinon, à 1rem (taille max sur grand
       écran), 3 lignes à line-height 1.6 font 4.8rem — plus que n'importe
       quelle valeur fixe choisie pour les petits écrans. */
    /* min-height: calc(min(max(0.6rem, 1vw), 1rem) * 1.6 * 3.7); */
    min-height: calc(min(max(0.4rem, 1vw), 1rem) * 1.6 * 3);

    display: none;
}

/* calc(100% / n) déborderait : le gap s'ajoute en plus du 100%, pas dedans —
   on le déduit donc du calcul (gap × (n-1) réparti sur les n colonnes). */
@media (min-width: 768px) {
    .services__grid {
        grid-template-columns: calc((100% - 1.5rem) / 2) calc((100% - 1.5rem) / 2);
    }
}

@media (min-width: 1100px) {
    .services__grid {
        grid-template-columns: calc((100% - 3rem) / 3) calc((100% - 3rem) / 3) calc((100% - 3rem) / 3);
    }
}