/* migration.css — chargé en dernier, après les CSS d'origine inchangées. On ne corrige ici que ce qui dépendait du runtime Concrete5 ou de timelines GSAP qui ne se déclenchent pas hors de leur contexte d'origine. Aucune décision de design : couleurs, typographie et mise en page viennent intégralement des feuilles du thème. */ /* ---- éléments animés « à l'entrée » ------------------------------------- Ces règles figeaient l'état final parce que GSAP n'était pas chargé : le thème décale le contenu de 200px et compte sur le moteur pour le ramener. GSAP est désormais chargé comme en production (`_assets_body`), et forcer `transform: none !important` le paralysait : en CSS, `!important` bat les styles en ligne que GSAP écrit à chaque image. Carrousels, panneaux et boutons de fermeture restaient donc inertes. Ne subsiste que le filet de sécurité : si le moteur échoue malgré tout, la classe `preloader-done` posée par `_assets_body` après 1,5 s rend le contenu visible plutôt que de laisser une page vide. */ html.preloader-done .modal-animation, html.preloader-done [data-animation], html.preloader-done [data-main-animation], html.preloader-done .content { opacity: 1; visibility: visible; } /* ---- préchargeur -------------------------------------------------------- Plein écran, levé par common.js à la fin de ses timelines. `.new_loader` est rendu et `loader.js` le fait disparaître au chargement. Le préchargeur du thème (`.preloader`, pages du Chalet) était masqué ici d'office, du temps où GSAP ne tournait pas et l'aurait laissé en place. GSAP tourne : filmé sur l'accueil et les appartements du Chalet, il s'affiche comme en production (fond vert, logo du Chalet), puis se lève — `visibility: hidden`, plus rien sous le pointeur. Le masquer privait les pages du Chalet de leur écran d'accueil. */ /* (Le `body { overflow: visible !important }` qui suivait est parti avec : il tenait le défilement ouvert pendant que le préchargeur bloquait la page. Sans lui, le `body` retrouve l'`overflow: hidden scroll` de la production, et la page défile toujours — vérifié sur l'accueil et sur l'accueil du Chalet, préchargeur compris.) */ /* ---- conteneur de défilement ------------------------------------------- Plus aucune règle ici. Le thème pilote son défilement par JS sur `.application`, qu'il tient en `overflow: hidden` ; nous forcions `visible` et une hauteur automatique du temps où ce moteur ne tournait pas. Il tourne : la page défile sans nos règles (vérifié page à page, `scrollTo` puis lecture de `scrollY`), et surtout l'`overflow` du thème redevient celui de la production. Forcé en `visible`, il laissait déborder le texte géant du survol du menu : le document faisait 12 705 px de large sur l'accueil et 14 505 px sur la page Spa, contre 1 440 en production — une barre de défilement horizontale sur ces pages. */ /* ---- images en chargement différé -------------------------------------- Plus aucune règle ici. `img[data-lazy-loading] { opacity: 1 !important }` datait de l'époque où le lazy-loading du thème ne tournait pas. Il tourne désormais (les images reçoivent `loaded` et `data-was-processed`, comme en production), et la règle cassait les cartes `card_image-slide` : leur seconde image — celle du survol — doit rester à opacity 0 jusqu'au survol. Forcée visible, elle recouvrait la première : la carte « Ski » de la galerie montrait le Cervin au lieu du skieur, sur toutes les cartes à deux images du site. */ /* ---- effet roll-hover --------------------------------------------------- Le JS du thème clone le libellé de chaque `[data-role="roll-hover-btn"]` pour l'animation de survol. Le CSS d'origine superpose les deux copies dans un conteneur `.double-text` que le moteur ne construit pas ici : les deux textes s'affichaient donc côte à côte. On masque la copie. */ /* Le JS empile deux copies du libellé dans un conteneur de la hauteur d'une ligne, avec overflow:hidden : seule la première est visible, la seconde monte au survol. Le contenu migré arrive enveloppé dans un

, dont les marges par défaut faisaient dépasser les deux copies hors du clip — d'où le texte affiché en double partout. */ .roll-hover-btn__label > p, .roll-hover-btn__label > *, .double-text__label > p { margin: 0 !important; padding: 0 !important; } .roll-hover-btn__container { overflow: hidden !important; } /* ---- layout two-halves -------------------------------------------------- Le thème calcule la taille de l'image par JS au chargement. Sans cela l'image prend sa taille naturelle et déborde. */ .two-halves__img img, .two-halves__bg img { width: 100%; height: auto; display: block; } .two-halves__img { overflow: hidden; } /* les images de contenu ne débordent jamais de leur colonne. La règle visait aussi `.cell img` : toute image posée dans une cellule de grille, cartes comprises. Or le thème étire l'image d'une carte sur toute la hauteur de sa boîte (position absolue, `object-fit: cover`) ; `height: auto` la ramenait à sa hauteur naturelle — cartes de galerie coupées à 450 px dans une boîte de 530, cartes d'expérience réduites à une bande de 171 px sur 500. Seul le texte éditorial reste borné. */ .application .editable img { max-width: 100%; height: auto; } /* ---- frise chronologique « Our story » ---------------------------------- Plus aucune règle ici. `.history-container { opacity: 1 }` et les étapes forcées dans le flux (`position: relative`, `transform: none`) dataient de l'époque où le moteur ne posait pas `is-active` au défilement. Il le pose : filmée en défilant comme un visiteur, la frise sans ces règles se comporte exactement comme en production (étapes `static`, révélées au passage), alors qu'avec elles les étapes restaient `relative` et insensibles aux transformations du moteur. */ /* ---- pastille de langue active ------------------------------------------ `.lang-list__pointer` est positionné en absolu à 0,0 et le moteur du thème doit le déplacer sur la langue active. Il ne le fait pas ici, laissant un cercle vide collé en haut à gauche de l'en-tête. On dessine donc la pastille directement sur l'élément actif : même rendu, sans dépendre du JS. */ .lang-list__pointer { display: none !important; } .lang-list__item { position: relative; } .lang-list__item.is-active::before { content: ""; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 1px solid currentColor; border-radius: 50%; opacity: .2; pointer-events: none; } /* ---- logos partenaires du pied de page ---------------------------------- Plus aucune règle ici. Ce bloc bornait les logos à 40 px et les ternissait (`opacity: .7`) à l'époque où `new_style.css` n'était pas appliqué — son `` manquait de `rel="stylesheet"`. Une fois celui-ci corrigé, il faisait double emploi sur les pages principales (où l'opacité passait quand même) et contredisait la production sur le Chalet, dont l'en-tête ne charge pas `new_style.css` : les logos y sont à leur taille naturelle. `new_style.css`, identique à la production à l'octet, fait foi. */