@media (max-width: 992px) { .back-to-top { top: auto; bottom: 24px; left: auto; right: 16px; padding: 8px 12px; z-index: 50; } /* Texte "Haut de page" supprimé sur mobile : au tactile, :hover reste "collé" après le tap (pas de vrai hover-out comme à la souris), donc le tooltip restait affiché en permanence après le clic. Plus simple de le masquer complètement sur ce breakpoint plutôt que de gérer un état sticky en JS — le bouton (icône seule) reste assez explicite. */ .back-to-top .tooltip-text { display: none; } } /* ------------------------- Header -------------------------- */ /* BLOC HISTORIQUE SUPPRIMÉ (bug réel trouvé, cf. demande "Navigation/Mon compte pas responsive + nav du footer invisible") : cet ancien bloc ciblait l'ancienne barre
horizontale (.site-header, .header-inner, bouton hamburger #nav-toggle/.hamburger, .nav-left/.nav-right, panneau mobile plein écran) — entièrement retirée depuis (cf. partials/header.php, "Ancienne barre
horizontale ... entièrement retirée, remplacée par 2 widgets flottants"). .site-header/.header-inner/.nav-toggle/ .hamburger/.lang-switcher/.lang n'existent plus du tout dans le HTML actuel (mort, sans effet) — mais .main-nav, lui, a été RÉUTILISÉ tel quel comme classe sur les 2 nouveaux composants qui partagent le même moteur JS de sous-menus (#main-nav, le widget flottant "Navigation" en haut à gauche, ET #footer-mini-nav, la mini-nav du vrai pied de page). Ce bloc forçait donc encore .main-nav en "position:fixed; opacity:0; visibility:hidden; pointer-events:none" (état "replié", pensé pour être levé par la classe .open ajoutée au clic sur #nav-toggle) — sauf que #nav-toggle n'existe plus, cette classe .open n'est donc PLUS JAMAIS ajoutée : les 2 nouveaux composants restaient invisibles et inutilisables en permanence dès que la fenêtre descendait sous 992px de large. C'est ce qui rendait le widget "Navigation" cassé sur mobile ET faisait disparaître entièrement la nav du vrai footer (ne laissant que .footer-bottom, le copyright/réseaux sociaux, visible). Les styles mobile propres aux nouveaux composants vivent désormais dans style.css (.hud-widget--nav/--account à 992px et 640px, #main-nav/#footer-mini-nav à 640px) — cf. plus bas dans ce fichier pour le reste du footer (section suivante), déjà inoffensif de son côté (.footer-top/.footer-sitemap n'existent plus non plus, mais .footer-bottom y est correctement sur-spécifié par style.css, donc sans conflit contrairement à .main-nav ici). */ /* ------------------------- Footer -------------------------- */ @media (max-width: 992px) { .site-footer { bottom: 10px; width: 100%; padding: 26px 16px 20px; } /* Le logo est retiré du haut du footer en mobile : ".footer-top" n'a donc plus rien à afficher sur cette largeur d'écran, on le masque entièrement plutôt que de laisser une barre/bordure vide. Les boutons (Accueil / Mon compte / S'inscrire) sont désormais juste au-dessus du sitemap (cf. ".footer-top-actions--mobile" plus bas et partials/footer.php) — le bas du footer ne garde que le copyright (+ réseaux sociaux). */ .footer-top { display: none; } /* Bascule entre les 2 copies du bloc de boutons (cf. partials/footer.php + commentaire dans style.css) : en mobile, la copie du haut (à côté du logo, déjà masqué) laisse place à celle placée juste au-dessus du sitemap. */ .footer-top-actions--desktop { display: none; } /* Délimiteur entre les 3 boutons et le sitemap : même traitement que celui utilisé entre le sitemap et le pied du footer (cf. .footer-sitemap dans style.css — border-bottom + padding-bottom assortis). */ .footer-top-actions--mobile { display: inline-flex; width: 100%; justify-content: center; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); } /* 3 boutons côte à côte, groupés et centrés (plus au bord). flex-wrap en filet de sécurité sur les très petits écrans si les 3 ne tiennent pas sur une ligne. */ .footer-top-actions { width: 100%; justify-content: center; flex-wrap: wrap; row-gap: 10px; gap: 10px; } /* "Accueil" et "S'inscrire" : boutons secondaires, plus discrets que "Mon compte" qui reste mis en avant. */ .footer-home-btn, .footer-register-btn { display: inline-flex; text-align: center; padding: 10px 16px; font-size: 0.85rem; box-sizing: border-box; justify-content: center; } .footer-cta { display: inline-flex; width: auto; text-align: center; padding: 12px 20px; font-size: 0.95rem; box-sizing: border-box; justify-content: center; order: 2; } .footer-home-btn { order: 1; } .footer-register-btn { order: 3; } .footer-sitemap { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; padding-bottom: 18px; margin-bottom: 18px; } .footer-col-title { font-size: .68rem; } .footer-col-links a { font-size: 0.88rem; } .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 14px; } .footer-copy { text-align: center; font-size: 0.78rem; } } /* ------------------------- landing-page -------------------------- */ @media (max-width: 992px) { .section-company-hero { padding-top: 250px; padding-bottom: 60px; } .company-inner { gap: 10px; padding: 20px 16px; } .company-logomain img { max-width: min(260px, 75vw); margin-bottom: 24px; } .site_description { font-size: 1.1rem; line-height: 1.7; } .site_description_devise { font-size: 0.82rem; margin: 6px auto 14px; } .hero-actions { margin-top: 30px; margin-bottom: 6px; } .rocket-icon { width: 50px; height: 50px; } .company-logo img { max-width: 80px; margin-top: 16px; margin-bottom: 24px; } } @media (max-width: 480px) { .section-company-hero { padding-top: 90px; padding-bottom: 40px; } .company-logomain img { max-width: min(200px, 70vw); margin-bottom: 16px; } .site_description { font-size: 0.95rem; line-height: 1.65; } /* Sur écran très étroit, le sitemap passe en 1 colonne : les liens (".footer-col-links a" est display:inline-block) étaient centrés par héritage de ce text-align, alors que les titres de colonne (en flex) restaient à gauche — décalage entre les deux. On aligne tout à gauche pour que titres et liens soient sur le même bord. */ .footer-sitemap { grid-template-columns: 1fr; gap: 20px; text-align: left; } } @media (prefers-reduced-motion: reduce) { .company-logomain img, .company-logooffre img, .company-logo img, .site_description, .site_description_devise, .hero-actions { animation: none; opacity: 1; } } @media (max-width: 960px) { /* height:auto + overflow:visible (bug réel trouvé, demande explicite : "le titre se retrouve coupé/tronqué en mobile") : le commentaire ci-dessous ("garde min-height:92dvh") est resté figé alors que la règle desktop (cf. style.css, .problem) est depuis passée à height:94dvh + overflow:hidden — un plafond RÉEL, pas un minimum — pensé pour un habillage desktop où le titre et les points tiennent sur peu de lignes. Sur mobile, la largeur bien plus étroite fait davantage retourner à la ligne le titre + les points, dépassant les 94dvh alloués : le surplus (le bas du titre ou des points suivants) se retrouvait purement et simplement rogné par overflow:hidden au lieu de simplement pousser la section à défiler. La mise en page colonne (.problem-layout ci-dessous) n'a de toute façon plus besoin de tenir sur un seul écran comme la version desktop. */ .problem { height: auto; overflow: visible; padding: 64px 0 0; } .problem-layout { flex-direction: column-reverse; gap: 40px; align-items: stretch; } /* demande explicite : "enlève l'image (en responsive uniquement), le but est d'avoir la section Pourquoi avoir un site soit visible entièrement" — l'image (fusee.png) + sa légende ajoutaient trop de hauteur en colonne sur mobile/tablette. display:none (pas de suppression du DOM) : desktop inchangé, et .problem-content (flex:1) récupère naturellement toute la largeur puisque .problem-visual est le seul autre enfant flex de .problem-layout. */ .problem-visual { display: none; } } @media (max-width: 600px) { .problem { padding: 48px 0 0; } .problem-content { padding: 24px 20px; /* overflow:hidden (cf. style.css, .problem-content) est un filet anti-débordement pensé pour desktop : sans effet gênant tant que .problem (parent) plafonnait aussi la hauteur, mais devient un second point de troncature possible du texte maintenant que .problem a overflow:visible en mobile (cf. @media 960px ci-dessus) — repassé à visible ici par cohérence. */ overflow: visible; } .problem-content h2 { font-size: 1.4rem; } .problem-content p { font-size: .88rem; } .problem-result { font-size: .95rem !important; } .problem-points li { font-size: .85rem; padding: 10px 12px; } .problem-visual { max-width: 260px; } } @media (prefers-reduced-motion: reduce) { .problem-points li, .problem-visual img { transition: none; } } /* Hébergement / Accompagnement / Refonte / Programmation : 4 planètes sur la même ligne en desktop large, 2x2 en tablette, empilées verticalement en mobile (demande explicite). */ @media (max-width: 1000px) { .home-service-planet-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; max-width: 520px; } } @media (max-width: 640px) { .home-service-planet-grid { grid-template-columns: 1fr; gap: 40px; max-width: 320px; } } @media (max-width: 860px) { .why-target { padding: 64px 0 140px; } .why-target-grid { grid-template-columns: 1fr; gap: 16px; } /* La carte fusionnée #why-target repasse en 1 colonne : le trait vertical devient un trait horizontal entre les 2 blocs empilés. */ #why-target .why-box { border-right: none; border-bottom: 1px solid rgba(255,255,255,.09); padding: 0 28px 28px; } #why-target .target-box { padding: 28px 28px 0; } .why-target-cta { margin-top: 56px; } .wt-cta-sep { height: 36px; margin-bottom: 36px; } } @media (max-width: 480px) { .why-target { padding: 48px 0 120px; } .why-box, .target-box { padding: 24px 20px; gap: 16px; } #why-target .why-box { padding: 24px 20px 20px; } #why-target .target-box { padding: 20px 20px 24px; } .why-box h2, .target-box h2 { font-size: 1.25rem; } .feature-list li { font-size: .85rem; padding: 10px 12px; } .why-target-cta h2 { font-size: 1.35rem; } .cta-text { font-size: .88rem; } .btn-accueil { padding: 13px 32px; font-size: .96rem; } } @media (prefers-reduced-motion: reduce) { .feature-list li, .btn-accueil { transition: none; } } /* ------------------------- accueil -------------------------- */ @media (max-width: 768px) { /* Sur mobile, le menu est un panneau fixed indépendant (pas un dropdown ancré sous chaque lien) : pas besoin de la réserve desktop pensée pour le sous-menu "Services" (cf. .hero-window-area, style.css). */ .hero-window-area { padding-top: 100px; } main .hero .logo img { max-width: 160px; } main .hero h1 { font-size: 1.9rem; } main .hero .subtitle { font-size: 1rem; } .hero-window-content { padding: 24px 16px; margin-top: 14px; } main .hero-points { flex-direction: column; align-items: stretch; max-width: 340px; width: 100%; } main .hero-points li { white-space: normal; text-align: left; } /* Demande explicite : "enlève le clique sur les planètes et leur titre" en responsive mobile — la planète centrale bleue (conservée, cf. règle plus bas) redevient purement décorative sur mobile : plus de navigation directe vers la page liée, ni de déclenchement de la séquence trou noir (cf. main.js) au tap. Le bouton "Explorer" reste, lui, cliquable (avale alors les 5 planètes comme sur desktop). */ .hero-central-planet { pointer-events: none; } /* Bug trouvé en auditant la séquence d'intro au chargement (cf. style.css, .hero.hero-intro-revealed .hero-central-planet, qui repasse pointer-events à "auto" une fois le fondu terminé) : cette règle est plus spécifique (type "main" + 2 classes) que celle juste au-dessus, elle rendrait donc la planète bleue de nouveau cliquable sur mobile dès la fin de l'intro — contraire à la demande "enlève le clique sur les planètes... en responsive mobile". Même sélecteur redéclaré ici (avec le type "main" pour égaler sa spécificité), responsive.css étant chargé après style.css : reprend la main et garde le non-clic sur mobile, y compris après l'intro. */ main .hero.hero-intro-revealed .hero-central-planet { pointer-events: none; } /* Demande explicite (3e passe) : "enlève carrément les planètes en responsive mobile, garde que la planète bleue ; les planètes apparaissent qu'en cas de clic sur Explorer" — les 4 planètes latérales décoratives sont entièrement retirées de l'affichage au repos sur mobile (display:none, pas juste invisibles/non cliquables comme précédemment) ; seule la planète centrale bleue reste visible. Règle suivante (.hero.is-launching .home-hero-planet) les fait réapparaître UNIQUEMENT pendant la séquence trou noir déclenchée par "Explorer" (demande explicite "comme ça on conserve quand même l'animation sur mobile") : l'avalement des 5 planètes reste donc visible, seul leur affichage permanent hors animation disparaît. Leurs titres (cf. .home-hero-planet-label plus bas) restent masqués même pendant cette réapparition (déjà cachés en display:none sur mobile, et de toute façon déjà masqués pendant is-launching sur tous les formats, cf. style.css). */ .home-hero-planet { display: none; } .hero.is-launching .home-hero-planet { display: block; } /* Demande explicite (2e passe) : "rendre invisible les titres des planètes sur responsive mobile" — les 5 légendes (cf. .home-hero-planet-label dans accueil.php) disparaissent complètement sur mobile plutôt que de rester affichées à côté de planètes devenues non cliquables. */ .home-hero-planet-label { display: none; } /* Exception à la règle ci-dessus, planète centrale bleue uniquement (demande explicite : "change Création site web et Voir les tarifs, en nom sous la planète, toujours uniquement pour mobile") : bascule "Création site web" (--dsk-text) -> "Voir les tarifs" (--tarifs-text) sous 768px. Spécificité de classe (2 classes) l'emporte sur la règle générale .home-hero-planet-label ci-dessus, qui reste inchangée pour les 4 planètes latérales. */ .home-hero-planet-label--dsk-text { display: none; } .home-hero-planet-label--tarifs-text { display: block; } } @media (max-width: 480px) { main .hero h1 { font-size: 1.55rem; } .hero-window-content { padding: 18px 14px; } } @media (max-width: 1100px) { .sol-off-inner { gap: 60px; } .sol-off-rocket-area { grid-template-columns: 280px 145px; } } @media (max-width: 960px) { .sol-off { height: auto; overflow: visible; } .sol-off-inner { flex-direction: column; align-items: center; gap: 32px; overflow: visible; padding: 40px clamp(1rem, 4vw, 2rem); } .sol-off-content { width: 100%; max-width: 600px; text-align: center; } .sol-off-content h2 { margin-bottom: 24px; } .solution-image { margin: 0 auto; } .pricing-spacer, .pricing-card { display: none; } .sol-off-rocket-area { grid-template-columns: 1fr; width: 100%; max-width: 320px; margin: 0 auto; } .rocketv-wrapper { grid-column: 1; grid-row: 1 / 6; width: 100%; } .sol-off-offers-title { margin-top: 24px; } } @media (max-width: 600px) { .rocketv-fin { display: none; } .sol-off-content { max-width: 100%; } } @media (max-width: 400px) { .rocketv-sas { gap: 10px; padding: 12px 14px; } .rocketv-porthole { width: 32px; height: 32px; } .rocketv-porthole::before, .rocketv-porthole::after { display: none; } .rocketv-porthole-core { width: 14px; height: 14px; } .rocketv-sas-body h3 { font-size: .8rem; } .rocketv-sas-body p { font-size: .7rem; } .rocketv-sas-cta { display: none; } } @media (prefers-reduced-motion: reduce) { .rocketv-flame, .rocketv-porthole-core, .rocketv-nose-window, .rocketv-ribbon { animation: none; } } @media (max-width: 992px) { .rocketv-sas-body p { opacity: 1; max-height: 200px; } } @media (prefers-reduced-motion: reduce) { main .modules-list li, .modules-cta-link { transition: none; } } @media (max-width: 860px) { .modules-layout { grid-template-columns: 1fr; gap: 28px; } .modules-block--included::before, .modules-block--optional::before { display: none; } } @media (max-width: 600px) { main .modules { /* demande explicite : espace entre le titre et le haut de la section sur mobile — 48px seul laissait le titre trop proche du bandeau .section-sas (min 64px de haut, cf. style.css), qui reste inchangé sur mobile. Seul le padding-top est augmenté, le bas ne change pas. */ padding: 100px 0 48px; } .modules-block { padding: 20px 16px; } .modules-block-label h3 { white-space: normal; } main .modules-list li { font-size: .84rem; padding: 10px 12px 10px 16px; } .modules-cta-link { font-size: .88rem; padding: 12px 20px; } /* Tooltips — lisibilité mobile */ .modules-list li::after { top: auto; bottom: calc(100% + 8px); left: 0; transform: translateY(6px); white-space: normal; max-width: min(260px, 85vw); text-align: left; font-size: .82rem; font-weight: 500; line-height: 1.45; color: #ffffff; background: rgba(6,10,28,1); border: 1px solid rgba(255,255,255,.22); padding: 8px 14px; } .modules-list li:hover::after, .modules-list li:focus::after, .modules-list li:focus-within::after { opacity: 1; transform: translateY(0) !important; } } @media (max-width: 860px) { /* La grille passe en 1 colonne (6 étapes empilées) : les faire tenir dans 100dvh comme sur desktop n'est plus réaliste. On repasse en hauteur naturelle et en défilement normal sous ce seuil. */ .method { height: auto; overflow: visible; display: block; /* demande explicite : espace entre le titre et le haut de la section sur mobile — même raison que main .modules ci-dessus (bandeau .section-sas, min 64px de haut, sinon trop proche du titre). */ padding: 110px 0 0; } .method-grid { grid-template-columns: 1fr; gap: 12px; } .method-header { margin-bottom: 40px; } } @media (max-width: 480px) { .method { /* même raison qu'au seuil 860px ci-dessus : garder de l'espace sous le bandeau .section-sas. */ padding: 96px 0 0; } .method-step { /* padding-top relevé (18px -> 40px, demande explicite : "les badges se superposent avec le titre de l'étape, il faut mieux aérer") — .method-step-badge reste position:absolute; top:12px (inchangé, cf. style.css), avec une hauteur réelle d'environ 20-24px (.badge : font-size .75rem + padding vertical 3px) : son bord bas retombe donc vers ~34-38px. Avec seulement 18px de padding-top ici, le titre (.method-step-body h3) démarrait en plein dans cette zone et passait sous le badge. 40px laisse une vraie marge de respiration sous le badge avant le début du texte. */ padding: 40px 16px 16px; gap: 12px; } .method-step-num { font-size: 2rem; } .method-step-body h3 { font-size: .88rem; } .method-step-body p { font-size: .79rem; } .method-header { margin-bottom: 28px; } } @media (prefers-reduced-motion: reduce) { .method-step { transition: none; } } /* ------------------------- services -------------------------- */ @media (prefers-reduced-motion: reduce) { .page-service .intro-text, .page-service .intro-text.is-crawling { animation: none; opacity: 1; transform: none; mask-image: none; -webkit-mask-image: none; } } @media (hover: none), (max-width: 960px) { .title-bubble .section-title-sub { opacity: 1; } } @media (max-width: 960px) { /* Logo du titre agrandi (x2) sur mobile/tablette (demande explicite) : cf. .services-hero-logo dans style.css pour la taille desktop de base. */ .services-hero-logo { width: clamp(320px, 40vw, 520px); } /* Bouton "Explorer" retiré en mobile/tablette (demande explicite : "enlever le bouton Explorer en haut de page, mais le logo doit rester à la même hauteur/décalage qu'actuellement"). Ce bloc affichait jusqu'ici ce bouton ici (display:inline-block) — désormais visibility:hidden (PAS display:none) : l'élément reste dans le flux, garde exactement sa taille/marge (margin:0 auto 14px, cf. style.css), donc réserve toujours le même espace au-dessus du logo — seul son rendu visuel/l'interaction disparaissent. display:none aurait fait remonter le logo de la hauteur du bouton, contraire à la demande. */ .services-hero-explore-title { display: inline-block; visibility: hidden; pointer-events: none; } /* Gap énorme avant le CTA final "trou noir", pour donner l'impression de voyager loin (demande explicite) — uniquement en mobile, le desktop garde l'enchaînement normal entre "Conseil et accompagnement" et le CTA final. Le divider "trou noir" (masqué par défaut, cf. style.css) est réaffiché et centré au milieu de cet espace. */ .services-mobile-void-divider { display: flex; margin: 30vh 0; } .hero-grid .service-capsule { flex: 1 1 100%; max-width: 100%; } .layout-split { flex-direction: column; gap: 50px; } .layout-right { flex-direction: column; } .title-bubble { width: 240px; height: 240px; font-size: .95rem; flex: none; } .planet-info { width: 200px; height: 200px; } .planet-sphere { width: 200px; height: 200px; } .layout-split .offers-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 200px)); gap: 40px 28px; } } @media (max-width: 540px) { .title-bubble { width: 210px; height: 210px; font-size: .85rem; } .planet-sphere { width: 170px; height: 170px; } .planet-info { width: 170px; height: 170px; padding: 0 18px; } .planet-info h3 { font-size: .78rem; } .planet-info p { font-size: .63rem; } .layout-split .offers-grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; } /* #section-offers (demande explicite : "les 3 planètes Express/Business/ Premium sont collées au bord de l'écran mobile, il faut qu'elles soient plus centrées") : la règle générique ci-dessus force 2 colonnes pour TOUTES les grilles de planètes, adaptée aux sections à 2 offres (Refonte/Hébergement/Programmation/Conseil) mais pas à celle-ci qui en a 3 — en 2 colonnes, la 3e carte tombe seule dans la colonne de GAUCHE (pas de centrage possible avec des colonnes 1fr 1fr explicites), collée au bord. Spécificité ID (#section-offers) plus forte que .layout-split (classe) : reprend le comportement auto-fit + justify-content:center de la règle de base (cf. style.css, .layout-split .offers-grid), qui centre naturellement une carte isolée au lieu de la caler à gauche. */ #section-offers .offers-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 200px)); } } /* ------------------------- offre site -------------------------- */ @media (max-width: 900px) { .offer-intro-block { height: auto; } .page-offers .offer-hero { padding-top: clamp(90px, 12dvh, 140px); } .offer-levels { grid-template-columns: 1fr; max-width: 480px; padding-bottom: 30px; } .offer-options { grid-template-columns: 1fr; } .offer-comparison { padding: 0 12px 40px; } .offer-modalities { padding-bottom: 300px; } } @media (max-width: 480px) { .offer-intro-block { height: auto; } .page-offers .offer-hero { padding-top: 100px; } .offer-card h2 { font-size: 1.1rem; } .offer-card p { font-size: .82rem; } .offer-planet img { width: 52px; height: 52px; } .cta-buttons { flex-direction: column; align-items: stretch; } .cta-btn, .cta-btn--featured { text-align: center; transform: none; } .cta-btn--featured:hover { transform: translateY(-3px); } .offer-modalities { padding-bottom: 300px; } } /* ─── MOBILE — sticky first column ─── */ @media (max-width: 640px) { .section-divider.divider-to-options { display: none !important; } .offer-comparison { height: auto; padding: 0 0 60px; } .table-scroll-hint { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: rgba(255,255,255,.4); letter-spacing: .06em; text-transform: uppercase; padding: 0 4px 10px; justify-content: flex-end; } .table-scroll-hint::before, .table-scroll-hint::after { content: '←'; font-size: .8rem; } .table-scroll-hint::after { content: '→'; } .table-wrapper { border-radius: 12px; overflow-x: auto; padding-top: 0; position: relative; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .table-wrapper::after { content: ''; position: absolute; top: 0; right: 0; width: 40px; height: 100%; background: linear-gradient(to right, transparent, rgba(6,10,28,.85)); pointer-events: none; border-radius: 0 12px 12px 0; transition: opacity .3s; } .offer-comparison table { min-width: 440px; width: 100%; } .offer-comparison td, .offer-comparison th { padding: 11px 10px; font-size: .78rem; } .offer-comparison td:first-child, .offer-comparison th:first-child { position: sticky; left: 0; z-index: 2; width: 105px; min-width: 105px; max-width: 105px; font-size: .74rem; padding: 11px 8px 11px 10px; background: rgba(6,10,28,.98) !important; box-shadow: 4px 0 12px rgba(0,0,0,.5); white-space: normal; word-break: break-word; border-right: 1px solid rgba(255,255,255,.06); } .offer-comparison thead th:first-child { border-radius: 12px 0 0 0; } .offer-comparison td:not(:first-child), .offer-comparison th:not(:first-child) { min-width: 100px; text-align: center; } .offer-comparison .price-row th { font-size: .9rem; padding: 14px 10px; } .offer-comparison .price-row th:nth-child(3) { font-size: 1rem; } .offer-comparison thead th { padding-top: 18px; padding-bottom: 14px; font-size: .82rem; } .offer-comparison tr.table-section-label td { font-size: .7rem; padding: 8px 10px; } .tooltip-text { min-width: 160px; max-width: 200px; white-space: normal; } } /* ------------------------- siteessentiel -------------------------- */ @media (max-width: 768px) { .offer-info-grid,.options-grid { grid-template-columns: 1fr; } /* Bannière "E-commerce, SaaS, Marketplace, E-learning" (sitevitrine.php / sitepro.php / surmesure.php, .vit-adv-callout-label — demande explicite : "le texte est tronqué" en mobile). La règle de base (cf. style.css) pose white-space:nowrap + flex-shrink:0 sur ce label pour qu'il reste toujours lisible SUR UNE LIGNE aux côtés du texte voisin sur desktop — mais sur un écran étroit, "E-commerce, SaaS, Marketplace, E-learning" à lui seul dépasse déjà la largeur disponible : comme il refuse à la fois de rétrécir ET de retourner à la ligne, l'excédent se fait couper par les protections anti-débordement globales du site (overflow-x:hidden sur html/body). Autorise ici le retour à la ligne normal : le label passe sur 2 lignes si besoin au lieu d'être tronqué, .vit-adv-callout-inner (flex-wrap:wrap, inchangé) réorganise le reste du contenu (texte/lien) en conséquence. */ .vit-adv-callout-label { white-space: normal; flex-shrink: 1; } } @media (max-width: 900px) { .after-delivery-grid { grid-template-columns: 1fr; } .vitrine-cards { grid-template-columns: 1fr; } .vitrine-options-grid { grid-template-columns: 1fr 1fr; } .vitrine-options-grid .option-card, .vitrine-options-grid .option-card:nth-child(4), .vitrine-options-grid .option-card:nth-child(5), .vitrine-options-grid .option-card:nth-child(7) { grid-column: span 1; } } @media (max-width: 580px) { .vitrine-offer-nav { top: 80px; } .vitrine-offer-track { display: none; } .vitrine-options-grid { grid-template-columns: 1fr; } .vitrine-cta { padding-bottom: 300px; } } /* ------------------------- siteepro -------------------------- */ @media (max-width: 900px) { .pro-cards { grid-template-columns: 1fr; } .pro-options-grid { grid-template-columns: 1fr 1fr; } .pro-options-grid .option-card, .pro-options-grid .option-card:nth-child(4), .pro-options-grid .option-card:nth-child(5) { grid-column: span 1; } } @media (max-width: 580px) { .pro-offer-nav { top: 80px; } .pro-options-grid { grid-template-columns: 1fr; } } /* ------------------------- surmesure -------------------------- */ @media (max-width: 580px) { .sur-offer-nav { top: 80px; } } /* ------------------------- siteecustom (obsolète, cf. surmesure ci-dessus : les classes .custom-* n'existent plus dans pages/surmesure.php, remplacées par .sur-* ; conservé tel quel pour ne rien casser d'éventuel) -------------------------- */ @media (max-width: 900px) { .custom-cards { grid-template-columns: 1fr; } .custom-options-grid { grid-template-columns: 1fr 1fr; } .custom-options-grid .option-card, .custom-options-grid .option-card:nth-child(4), .custom-options-grid .option-card:nth-child(5) { grid-column: span 1; } } @media (max-width: 580px) { .custom-offer-nav { top: 80px; } .custom-options-grid { grid-column: 1fr; } } /* ------------------------- hm -------------------------- */ @media (max-width: 1000px) { .hm-plans-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .hm-plans-grid { grid-template-columns: 1fr; } .hm-hero-cta, .hm-cta-buttons { flex-direction: column; align-items: stretch; } .hm-btn-secondary { text-align: center; justify-content: center; } } @media (max-width: 580px) { .hmg-offer-track { display: none; } .hmg-nav { /* Header mobile fixe = 78px de haut (cf. règle @media 992px plus haut) : on laisse une vraie marge de respiration en dessous au lieu de coller les pastilles de navigation juste sous le header. */ top: 118px; } .hmg-nav-spacer { width: 60px; } } /* ------------------------- hebergement -------------------------- */ @media (max-width: 900px) { .heberg-infomaniak .heberg-section-inner { flex-direction: column; gap: 32px; } .heberg-badges { width: 100%; } .heberg-pillars-grid { grid-template-columns: 1fr; } .heberg-includes-grid { grid-template-columns: 1fr 1fr; } .heberg-monitoring-inner { flex-direction: column; gap: 28px; } .heberg-monitoring-list { width: 100%; } } @media (max-width: 580px) { .heberg-includes-grid { grid-template-columns: 1fr; } .heberg-badges { grid-template-columns: 1fr; } .heberg-cta-buttons { flex-direction: column; align-items: stretch; } .heberg-btn-secondary { justify-content: center; } } /* ------------------------- maintenance -------------------------- */ @media (max-width: 900px) { .maint-why-grid, .maint-pillars-grid, .maint-approach-grid, .maint-serenity-inner { grid-template-columns: 1fr; } .maint-includes-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 580px) { .maint-includes-grid { grid-template-columns: 1fr; } .maint-cta-buttons { flex-direction: column; align-items: stretch; } .maint-btn-secondary { justify-content: center; } } /* ------------------------- conseil et accompagement-------------------------- */ @media (max-width: 1000px) { .conseil-offers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .conseil-expert-grid, .conseil-philosophy-grid { grid-template-columns: 1fr; } .conseil-domains-grid { grid-template-columns: 1fr; } .conseil-approach-results ul { grid-template-columns: 1fr; } } @media (max-width: 600px) { .conseil-offers-grid { grid-template-columns: 1fr; } .conseil-cta-buttons { flex-direction: column; align-items: stretch; } .conseil-btn-secondary { justify-content: center; } } /* ------------------------- conseil -------------------------- */ @media (max-width: 900px) { .cw-why-grid, .cw-vs-grid { grid-template-columns: 1fr; } .cw-domains-grid { grid-template-columns: 1fr 1fr; } .cw-offer-card { grid-template-columns: 1fr; } .cw-offer-left { border-right: none; border-bottom: 1px solid rgba(99,102,241,.20); } } @media (max-width: 580px) { .cw-domains-grid { grid-template-columns: 1fr; } } /* ------------------------- conseilaccompagnement (hub) -------------------------- */ @media (max-width: 700px) { .hub-services-grid { grid-template-columns: 1fr; } .hub-service-card { flex-direction: column; } } /* ------------------------- accompagnement -------------------------- */ @media (max-width: 900px) { .acmp-why-grid, .acmp-philosophy-grid { grid-template-columns: 1fr; } .acmp-includes-grid, .acmp-offers-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 580px) { .acmp-includes-grid, .acmp-offers-grid { grid-template-columns: 1fr; } .acmp-cycle { flex-direction: column; } .acmp-cycle-arrow { transform: rotate(90deg); } .acmp-vs-grid { grid-template-columns: 1fr; } } /* ------------------------- about -------------------------- */ @media (max-width: 900px) { .about-hero-layout { flex-direction: column-reverse; align-items: center; gap: 40px; } .about-subtitle { max-width: 100%; } .about-hero-content h1 { text-align: center; } .about-subtitle { text-align: center; } /* Le bloc "Suivez-moi" + icônes LinkedIn/Discord suit le même centrage que le titre et le sous-titre sous 900px (sinon le texte du h3 reste aligné à gauche et la rangée d'icônes colle au bord gauche). */ .about-social-heading { text-align: center; } .about-hero-content .contact-social-links { justify-content: center; } .about-grid { grid-template-columns: 1fr; } .philosophy-grid { grid-template-columns: 1fr; } .partners-grid { grid-template-columns: 1fr; } .projet-showcase { grid-template-columns: 1fr; gap: 24px; } .projet-showcase--reverse .projet-showcase-preview, .projet-showcase--reverse .projet-showcase-info { order: initial; } .about-card, .about-single { padding: 26px 22px; } /* Le comparatif générique/personnalisé n'a plus la place pour 3 colonnes sous 900px : on empile label / solution générique / mon approche. */ .about-compare-row { grid-template-columns: 1fr; gap: 6px; text-align: left; } } @media (max-width: 480px) { /* 140px (au lieu de 110px) : la navigation inter-pages Présentation (.hmg-nav) reste visible en absolute au-dessus, même sans les points de progression masqués sous 580px. */ .about-hero { padding: 140px 16px 60px; } /* La photo reste discrète sur mobile aussi, sans redevenir trop petite. */ .about-hero-image img { width: 152px; height: 152px; } .about-hero-image { flex: 0 0 172px; } } /* ------------------------- contact -------------------------- */ @media (max-width: 900px) { .contact-info { grid-template-columns: repeat(2, 1fr); } .contact-client-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .contact-info { grid-template-columns: 1fr; } .contact-call-btn { width: 100%; padding: 13px 20px; font-size: .92rem; } } @media (max-width: 480px) { .contact { padding: 110px 16px 40px; } .btn-contact { width: 100%; justify-content: center; } } /* ------------------------- siteexemple -------------------------- */ @media (max-width: 768px) { .exemple-card { width: 280px; } .browser-preview { height: 200px; } }