/* ========================================================================== CONVENTION COMMUNE DES TROIS IMAGES DE CHAQUE RUBRIQUE [nom-rubrique]-reseaux-sociaux.webp Format obligatoire : 1800 × 945. Réservée aux balises Open Graph et Twitter placées dans le de chaque page HTML. [nom-rubrique]-ordinateur-tablette.webp Image horizontale du bandeau principal sur ordinateur et tablette. [nom-rubrique]-mobile.webp Affiche verticale dédiée à tous les formats de téléphones. Important : les balises og:image et twitter:image restent dans le HTML ; le CSS contient la mise en page commune et cette convention de nommage. ========================================================================== */ /* ========================================================================== 1. Variables et fondations ========================================================================== */ :root { /* Charte typographique commune : accueil, Top 10, guides et itinéraires. */ --font-sans: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --title-1: clamp(2.2rem,4vw,4.1rem); --title-2: clamp(1.55rem,2.2vw,2.25rem); --title-3: clamp(1.15rem,1.55vw,1.4rem); --title-4: clamp(1.02rem,1.25vw,1.2rem); --title-5: clamp(.95rem,1.05vw,1.08rem); --title-6: clamp(.84rem,.9vw,.95rem); /* Écart total entre deux rubriques successives. Chaque section en utilise la moitié en haut et la moitié en bas. */ --section-gap: 96px; /* Marge identique au-dessus et au-dessous du contenu des héros sur ordinateur et tablette. */ --hero-content-edge-space: 60px; /* Partie du moteur de recherche qui remonte sur le héros. Elle est intégrée au calcul pour obtenir le même vide visible en haut et en bas. */ --search-panel-overlap: 34px; --ink: #10253f; --muted: #5c6f82; --paper: #f5f8fb; --white: #fff; --blue: #087aa8; --blue-dark: #07506f; --aqua: #dff5f5; --coral: #ff7657; --sun: #ffc857; --line: #dbe5ec; --shadow: 0 20px 60px rgba(16,37,63,.12); --radius: 22px; --max: 1180px ; /* Réglages communs des photographies 1 = image d'origine. Exemple : 1.05 augmente la valeur de 5 %. */ --photo-brightness: 1; --photo-contrast: 1.04; --photo-saturation: 1.06; /* Voile des grands bandeaux : gauche, centre et droite. */ --hero-veil-left: .92; --hero-veil-center: .66; --hero-veil-right: .12; --hero-veil-bottom: .60; /* Voile des cartes illustrées : bas, milieu et haut. */ --card-veil-bottom: .88; --card-veil-center: .30; --card-veil-top: .06; } /* ========================================================================== 1.1 Réglages individuels des photographies Chaque bloc hérite des réglages généraux ci-dessus. Seules les différences utiles sont précisées ici : lumière, couleur, voile et cadrage. ========================================================================== */ .photo-home-hero { --photo-contrast: 1.05; --photo-saturation: 1.04; } /* Image principale des pages Guides : réglage commun ordinateur et tablette. */ .photo-guide-hero { --photo-brightness: 1.04; --photo-contrast: 1.03; --photo-saturation: 1.08; --hero-veil-left: .76; --hero-veil-center: .42; --hero-veil-right: .05; } .photo-top10-hero { --photo-brightness: 1.03; --photo-contrast: 1.05; --photo-saturation: 1.05; --hero-veil-left: .90; --hero-veil-center: .64; } .photo-continent-europe { --photo-brightness: 1.04; --photo-saturation: 1.04; --card-veil-bottom: .84; } .photo-continent-afrique { --photo-brightness: 1.03; --photo-saturation: 1.08; --card-veil-bottom: .86; } .photo-continent-amerique { --photo-brightness: 1.02; --photo-contrast: 1.05; --card-veil-bottom: .86; } .photo-continent-asie { --photo-brightness: 1.04; --photo-saturation: 1.05; --card-veil-bottom: .84; } .photo-continent-oceanie { --photo-brightness: 1.03; --photo-saturation: 1.07; --card-veil-bottom: .83; } .photo-route-bordeaux { --photo-brightness: 1.02; --photo-contrast: 1.04; --photo-saturation: 1.03; } .photo-route-rome { --photo-brightness: 1.02; --photo-contrast: 1.05; --photo-saturation: 1.03; } .photo-route-prague { --photo-brightness: 1.03; --photo-contrast: 1.04; --photo-saturation: 1.02; } .photo-route-barcelone { --photo-brightness: 1; --photo-contrast: 1.04; --photo-saturation: 1.03; } .photo-pays-inde, .photo-pays-sri-lanka, .photo-pays-colombie { --photo-brightness: 1.04; --photo-saturation: 1.07; } .photo-pays-pakistan, .photo-pays-nepal, .photo-pays-georgie { --photo-brightness: 1.05; --photo-contrast: 1.06; } .photo-pays-egypte, .photo-pays-tunisie, .photo-pays-paraguay, .photo-pays-turquie { --photo-brightness: 1.03; --photo-saturation: 1.05; } * { box-sizing: border-box ; } html { scroll-behavior: smooth ; } body { margin: 0; max-width: 100%; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.65 ; } img { display: block; max-width: 100% ; } a { color: inherit; text-decoration: none ; } button,input { font: inherit ; } button { cursor: pointer ; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .75rem 1rem; z-index: 100 ; } .skip-link:focus { left: 1rem; top: 1rem ; } .container { width: min(calc(100% - 40px),var(--max)); margin-inline: auto ; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--blue); font-size: .78rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase ; } .eyebrow:before { content: ""; width: 26px; height: 2px; background: var(--coral) ; } /* Axe éditorial commun : tous les titres partent du bord gauche du contenu. */ main h1, main h2, main h3, main h4, main h5, main h6 { text-align: left; } /* ========================================================================== CHARTE TYPOGRAPHIQUE RESPONSIVE — TOUTES LES PAGES ET TOUS LES ÉCRANS H1 : titre unique de la page H2 : grandes rubriques H3 : cartes et sous-rubriques H4 à H6 : subdivisions complémentaires Les boutons et liens d’action héritent de la même famille de caractères. ========================================================================== */ h1,h2,h3,h4,h5,h6 { margin: 0; font-family: var(--font-sans) !important; font-weight: 900; line-height: 1.08; letter-spacing: -.035em ; } h1 { font-size: var(--title-1) !important; } h2 { color: var(--blue); font-size: var(--title-2) !important; } h3 { color: var(--ink); font-size: var(--title-3) !important; } h4 { color: var(--ink); font-size: var(--title-4) !important; } h5 { color: var(--ink); font-size: var(--title-5) !important; } h6 { color: var(--muted); font-size: var(--title-6) !important; letter-spacing: -.015em; } p,li { font-family: var(--font-sans); } .btn, .text-link, button, input, select, textarea { font-family: var(--font-sans); } .lead { font-size: clamp(1.05rem,1.5vw,1.25rem); color: var(--muted); max-width: 720px ; } .btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .6rem; border: 1px solid transparent; border-radius: 999px; padding: .72rem 1.2rem; font-weight: 800; transition: .25s ease ; } .btn-primary { background: var(--coral); color: #fff; box-shadow: 0 10px 24px rgba(255,118,87,.26) ; } .btn-primary:hover { background: #e8593c; transform: translateY(-2px) ; } .btn-secondary { background: #fff; border-color: var(--line); color: var(--ink) ; } .btn-secondary:hover { border-color: var(--blue); color: var(--blue) ; } .btn-light { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); color: #fff ; } .btn-light:hover { background: #fff; color: var(--blue-dark) ; } /* ========================================================================== 2. En-tête et navigation principale ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); border-bottom: 1px solid rgba(219,229,236,.85); backdrop-filter: blur(16px) ; } .nav-wrap { height: 76px; display: flex; align-items: center; gap: 28px ; } .brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; } .brand-name { display: grid; gap: .28rem; line-height: 1; white-space: nowrap; } .brand-name strong { color: var(--ink); font-size: .9rem; letter-spacing: .035em; text-transform: uppercase; } .brand-name small { color: var(--blue); font-size: .6rem; font-weight: 800; letter-spacing: .14em; } .brand-logo { display: block; width: 58px; height: 58px; object-fit: contain; border-radius: 50%; box-shadow: 0 7px 18px rgba(16,37,63,.18); } .brand-logo-footer { width: 82px; height: 82px; box-shadow: 0 10px 24px rgba(0,0,0,.22); } .main-nav { display: flex; align-items: center; gap: 4px ; } .nav-link,.nav-button { border: 0; background: transparent; padding: .65rem .78rem; border-radius: 10px; color: #334a60; font-size: .88rem; font-weight: 750; white-space: nowrap ; } .nav-link:hover,.nav-button:hover,.nav-link[aria-current="page"],.nav-button[aria-current="page"] { background: #eaf5f8; color: var(--blue-dark) ; } .nav-item { position: relative ; } .nav-button:after { content: "⌄"; margin-left: .35rem ; } .dropdown { position: absolute; top: calc(100% + 10px); right: 0; display: none; width: max-content; min-width: 320px; max-width: min(420px,calc(100vw - 32px)); padding: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow) ; } .nav-item.open .dropdown { display: grid ; } .dropdown a { padding: .65rem .75rem; border-radius: 9px; color: #41576b; font-size: .9rem; white-space: nowrap ; } .dropdown a:hover { background: #edf7f9; color: var(--blue) ; } .dropdown-top10 { min-width: 330px; } .dropdown-separator { margin-top: .35rem; padding-top: 1rem !important; border-top: 1px solid var(--line); } .menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 0 ; } .menu-toggle:before,.menu-toggle:after,.menu-toggle span { content: ""; display: block; width: 20px; height: 2px; margin: 5px auto; background: var(--ink); transition: .2s ; } .menu-toggle.is-open span { opacity: 0 ; } .menu-toggle.is-open:before { transform: translateY(7px) rotate(45deg) ; } .menu-toggle.is-open:after { transform: translateY(-7px) rotate(-45deg) ; } /* ========================================================================== 3. Page d'accueil : introduction et recherche ========================================================================== */ .hero-static-artwork { background: #063e62; overflow: hidden; } .hero-static-artwork img { display: block; width: min(100%, 793px); height: auto; margin: 0 auto; } .home-mobile-poster, .top10-mobile-poster { display: none; } /* Quand l'introduction est déjà écrite sur le hero des grands écrans, elle reste disponible uniquement sur mobile, où l'affiche ne porte pas ce texte. */ @media (min-width: 701px) { .mobile-only-intro { display: none; } } .home-intro { padding: clamp(34px, 5vw, 72px) 0 clamp(18px, 3vw, 42px); text-align: left; } .home-intro-content, .top10-intro-content { max-width: 920px; } .home-intro-title, .top10-intro-title { color: var(--blue); font-size: clamp(1.7rem, 4vw, 3.25rem); line-height: 1.08; } .home-intro-title { margin: 0; } .home-intro-kicker { margin: .8rem 0 1.25rem; color: var(--ocean); font-size: clamp(.9rem, 1.7vw, 1.25rem); font-weight: 900; letter-spacing: .12em; } .home-intro-text, .top10-intro p { max-width: 780px; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.7; } .home-intro-cta, .top10-intro-cta { justify-content: center; gap: .8rem; min-height: 56px; margin-top: 26px; padding: .9rem 1.35rem; border: 0; background: #3ea6f8; color: #fff; font-weight: 900; text-align: center; box-shadow: 0 12px 28px rgba(62,166,248,.24); } .home-intro-cta:hover, .top10-intro-cta:hover { background: #218bdc; color: #fff; } .home-intro-cta span { font-size: 1.25em; } #europe-showcase-title { scroll-margin-top: 110px; } @media (min-width: 901px) { .hero-proof-mobile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; } .hero-proof-mobile span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .9rem; font-weight: 800; } .hero-proof-mobile span:before { content: "✓"; margin-right: .5rem; color: var(--coral); } } @media (max-width: 700px) { .home-desktop-hero, .top10-desktop-hero { display: none !important; } .home-mobile-poster, .top10-mobile-poster { display: block !important; } .home-intro { padding-top: 30px; } .home-intro-content, .top10-intro-content { width: min(100% - 32px, 920px); } .home-intro-title, .top10-intro-title { font-size: clamp(1.55rem, 7.5vw, 2.2rem); } .home-intro-kicker { letter-spacing: .08em; } .home-intro-text, .top10-intro p { font-size: 1rem; line-height: 1.6; } .home-intro-cta, .top10-intro-cta { width: 100%; } } .hero { position: relative; min-height: 690px; display: grid; align-items: end; overflow: hidden; background: #0b4966; color: #fff ; } .hero-picture { position: absolute; inset: 0; } .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: brightness(var(--photo-brightness)) contrast(var(--photo-contrast)) saturate(var(--photo-saturation)); } .hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(6,38,57,var(--hero-veil-left)) 0%, rgba(6,38,57,var(--hero-veil-center)) 47%, rgba(6,38,57,var(--hero-veil-right)) 100% ), linear-gradient( 0deg, rgba(5,36,54,var(--hero-veil-bottom)), transparent 45% ) ; } .hero-content { position: relative; z-index: 1; padding: 110px 0 76px ; } .hero h1 { max-width: 850px ; } .hero h1 em { color: var(--sun); font-style: normal ; } .hero .lead { color: #edf8fa; margin: 1.5rem 0 2rem ; } .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem ; } .hero-proof { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 2rem; color: #d6ebef; font-size: .9rem ; } .hero-proof span:before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: .5rem; background: rgba(255,255,255,.14); border-radius: 50%; color: var(--sun) ; } .hero-proof-mobile { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .search-panel { position: relative; z-index: 3; margin-top: -34px ; } .search-card { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px; background: #fff; border-radius: 20px; box-shadow: var(--shadow) ; } .search-card label { display: flex; align-items: center; gap: .8rem; padding: 0 .5rem 0 1rem; color: var(--blue); font-weight: 900 ; } .search-card input { width: 100%; border: 0; outline: 0; color: var(--ink); font-size: 1rem ; } .search-card input::placeholder { color: #8b9baa ; } .search-card button { border: 0 ; } /* Emplacement publicitaire commun, fluide et sans débordement. */ .ad-placement { position: relative; z-index: 1; width: min(100% - 40px,var(--max)); margin-top: 18px; margin-bottom: 18px; overflow: hidden; text-align: center; } .ad-placement .adsbygoogle { width: 100%; max-width: 100%; } /* ========================================================================== 4. Page d'accueil : destinations, étapes et itinéraires ========================================================================== */ .section { padding: calc(var(--section-gap) / 2) 0 ; } /* Rythme vertical commun à l’accueil, aux Top 10 et aux futures pages. */ .section, .ranking, .budget-section, .faq, .related { padding-top: calc(var(--section-gap) / 2) !important; padding-bottom: calc(var(--section-gap) / 2) !important; } .section-intro { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: end; margin-bottom: 42px ; } .section-intro .lead { margin: 0 ; } /* Titre éditorial : casse naturelle, sans transformation en capitales. */ .section-intro h2 { text-transform: none; } .destinations-panel { padding: 48px; border: 1px solid #cfe1f1; border-radius: 28px; background: linear-gradient(135deg,#f4faff 0%,#eaf5ff 100%); } .destinations-head { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 58px; margin-bottom: 34px; } .destinations-copy h2 { margin: 12px 0 14px; font-family: inherit; font-size: clamp(2.3rem,3.3vw,3.7rem); line-height: 1.05; text-transform: uppercase; } .destinations-copy .lead { margin: 0; color: var(--muted); font-size: 1.05rem; } .destination-search-card { margin-top: 28px; padding: 24px; border: 1px solid #d5e4f0; border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 12px 28px rgba(16,37,63,.08); text-align: center; } .destination-search-card h3 { margin: 0 0 8px; color: var(--ink); font-size: clamp(.88rem,1vw,1.05rem); white-space: nowrap; } .destination-search-card p { margin: 0 0 16px; color: var(--muted); font-size: .94rem; line-height: 1.45; } .destination-search-card form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; } .destination-search-card input { min-width: 0; min-height: 50px; padding: 0 16px; border: 2px solid #42a5ff; border-radius: 12px; color: var(--ink); font: inherit; outline: 0; } .destination-search-card input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21,146,230,.14); } .destination-search-button { min-height: 50px; padding: 0 22px; border: 0; border-radius: 12px; background: #42a5ff; color: #fff; font-size: .84rem; font-weight: 900; text-transform: uppercase; cursor: pointer; } .destination-search-card small { display: block; margin-top: 14px; color: var(--muted); font-size: .78rem; } .destinations-visual { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; box-shadow: 0 18px 42px rgba(16,37,63,.13); } .continent-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 18px; } .continent-card { min-height: 132px; position: relative; display: flex; align-items: center; gap: 18px; padding: 24px 54px 24px 24px; border: 1px solid #d5e4f0; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 10px 24px rgba(16,37,63,.06); transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease; } .continent-card-featured { grid-row: span 2; min-height: 282px; border: 2px solid #42a5ff; } .continent-card:hover { transform: translateY(-4px); border-color: #42a5ff; box-shadow: 0 16px 34px rgba(16,37,63,.12); } .continent-card-icon { flex: 0 0 54px; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid #cce6fa; border-radius: 50%; background: #edf8ff; color: #178edf; font-size: 1.1rem; } .continent-card-copy { display: grid; gap: 3px; } .continent-card strong { color: var(--ink); font-size: 1.18rem; line-height: 1.25; } .continent-card small { color: var(--muted); font-size: .86rem; line-height: 1.45; } .continent-card em { width: max-content; margin-bottom: 8px; padding: 4px 10px; border: 1px solid #bde0fb; border-radius: 999px; background: #edf8ff; color: #087bc8; font-size: .7rem; font-style: normal; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } .continent-card b { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: #1592e6; font-size: 1.75rem; font-weight: 400; } .steps { background: #fff; } .steps-heading { max-width: 1050px; margin: 0 auto 0 0; text-align: left; } .steps-heading h2 { margin: 10px 0 14px; font-family: inherit; font-size: clamp(2rem,3vw,3rem); text-transform: uppercase; } .steps-heading p { margin: 0; color: var(--muted); font-size: 1.05rem; } .steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; margin-top: 40px; } .step-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-top: 4px solid #176ddc; border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgba(16,37,63,.09); } .step-card:nth-child(2) { border-top-color: #42af49; } .step-card:nth-child(3) { border-top-color: #ff6b00; } .step-card > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .step-card-body { flex: 1; display: flex; flex-direction: column; padding: 24px; } .step-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 15px; } .step-number { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #176ddc; color: #fff; font-size: .9rem; font-weight: 900; } .step-card:nth-child(2) .step-number { background: #42af49; } .step-card:nth-child(3) .step-number { background: #ff6b00; } .step-icon { color: #176ddc; font-size: 1.8rem; font-weight: 900; } .step-card:nth-child(2) .step-icon { color: #42af49; } .step-card:nth-child(3) .step-icon { color: #ff6b00; } .step-card h3 { margin: 0 0 14px; color: var(--ink); font-size: 1.28rem; } .step-card p { margin: 0 0 24px; color: var(--muted); font-size: .94rem; } .step-button { margin-top: auto; padding: 14px 18px; border-radius: 11px; background: #176ddc; color: #fff; font-size: .82rem; font-weight: 900; text-align: center; text-transform: uppercase; transition: transform .2s ease,filter .2s ease; } .step-card:nth-child(2) .step-button { background: #42af49; } .step-card:nth-child(3) .step-button { background: #ff6b00; } .step-button:hover { transform: translateY(-2px); filter: brightness(.95); } .step-button:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; } .routes-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; margin-top: 42px ; } .route-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: #fff; box-shadow: 0 10px 30px rgba(16,37,63,.08); transition: .25s ; } .route-card:hover { transform: translateY(-5px); box-shadow: var(--shadow) ; } .route-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: brightness(var(--photo-brightness)) contrast(var(--photo-contrast)) saturate(var(--photo-saturation)) ; } .photo-route-bordeaux img { object-position: center 54%; } .photo-route-rome img { object-position: center 48%; } .photo-route-prague img { object-position: center 46%; } .photo-route-barcelone img { object-position: center 52%; } .route-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 26px 28px 28px ; } .route-card p { color: var(--muted); font-size: .92rem ; } .route-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; margin-top: auto; padding: 14px 22px; border-radius: 10px; background: var(--blue); color: #fff; font-size: .9rem; font-weight: 850; text-transform: uppercase; letter-spacing: .02em; box-shadow: 0 10px 24px rgba(0,119,175,.2); transition: transform .2s ease,background-color .2s ease,box-shadow .2s ease ; } .route-button::after { content: "→"; font-size: 1.15em ; } .route-button:hover { transform: translateY(-2px); background: var(--blue-dark); box-shadow: 0 14px 28px rgba(0,63,105,.24) ; } .route-button:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px ; } .text-link { color: var(--blue); font-weight: 850 ; } .text-link:after { content: " →" ; } .europe-showcase { background: #fff; } .europe-showcase-intro { max-width: 1120px; margin-bottom: 38px; } .europe-showcase-intro h2 { margin: 12px 0 16px; font-family: inherit; font-size: clamp(2rem,3vw,3rem); text-transform: uppercase; letter-spacing: -.02em; } .europe-showcase-intro p { max-width: 980px; margin: 0; color: var(--muted); font-size: 1.05rem; } .europe-showcase-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; } .europe-showcase-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(16,37,63,.08); transition: transform .25s ease,box-shadow .25s ease; } .europe-showcase-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .europe-showcase-card:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; } .europe-showcase-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: brightness(var(--photo-brightness)) contrast(var(--photo-contrast)) saturate(var(--photo-saturation)); } .europe-showcase-copy { display: grid; gap: 7px; padding: 22px 24px 25px; } .europe-showcase-icon { color: var(--blue); font-size: 1.65rem; line-height: 1; } .europe-showcase-copy strong { color: var(--ink); font-size: 1.18rem; } .europe-showcase-copy small { color: var(--muted); font-size: .9rem; line-height: 1.55; } .photo-europe-routes { --photo-brightness: 1.02; --photo-contrast: 1.04; --photo-saturation: 1.03; } .photo-europe-guides { --photo-brightness: 1.03; --photo-contrast: 1.03; --photo-saturation: 1.02; } .photo-europe-photos { --photo-brightness: 1.04; --photo-contrast: 1.02; --photo-saturation: 1.03; } .photo-europe-videos { --photo-brightness: 1.02; --photo-contrast: 1.04; --photo-saturation: 1.04; } .photo-europe-3d { --photo-brightness: 1.03; --photo-contrast: 1.03; --photo-saturation: 1.02; } .photo-europe-tips { --photo-brightness: 1.02; --photo-contrast: 1.03; --photo-saturation: 1.04; } .morocco-showcase { padding-top: 34px; background: #fff; } .morocco-showcase-panel { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 54px; padding: 36px; border: 1px solid #efd6be; border-radius: 22px; background: #fffaf5; } .morocco-showcase-copy h2 { max-width: 680px; margin: 14px 0 14px; font-family: inherit; font-size: clamp(2rem,3vw,3rem); line-height: 1.12; text-transform: uppercase; letter-spacing: -.02em; } .morocco-showcase-copy p { max-width: 650px; margin: 0; color: var(--muted); font-size: 1.02rem; } .morocco-showcase-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .morocco-showcase-actions a { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 18px; border: 1px solid #e8c8aa; border-radius: 10px; background: #fff; color: var(--ink); font-size: .82rem; font-weight: 850; text-transform: uppercase; transition: transform .2s ease,border-color .2s ease,background-color .2s ease; } .morocco-showcase-actions a:hover { transform: translateY(-2px); border-color: var(--coral); background: #fff3e9; } .morocco-showcase-actions a:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; } .morocco-showcase-panel img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 17px; filter: brightness(1.02) contrast(1.04) saturate(1.04); } .top10-discovery { background: #fff; } .top10-discovery-heading { max-width: 1180px; margin-bottom: 38px; } .top10-discovery-heading h2 { margin: 10px 0 12px; font-family: inherit; font-size: clamp(2rem,3vw,3rem); line-height: 1.1; text-transform: uppercase; } .top10-discovery-heading p { margin: 0; color: var(--muted); font-size: 1.04rem; } .top10-discovery-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; } .top10-discovery-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(16,37,63,.08); transition: transform .25s ease,box-shadow .25s ease; } .top10-discovery-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .top10-discovery-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .top10-discovery-body { flex: 1; display: flex; flex-direction: column; padding: 22px; } .top10-discovery-body h3 { margin: 0 0 12px; color: var(--ink); font-size: 1.14rem; line-height: 1.3; } .top10-discovery-body p { margin: 0 0 22px; color: var(--muted); font-size: .9rem; line-height: 1.6; } .top10-discovery-body a { margin-top: auto; padding: 13px 16px; border-radius: 10px; background: var(--blue); color: #fff; font-size: .8rem; font-weight: 900; text-align: center; text-transform: uppercase; transition: transform .2s ease,background-color .2s ease; } .top10-discovery-body a:hover { transform: translateY(-2px); background: #0876b9; } .top10-discovery-body a:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; } .mobile-guide { background: #fff; } .mobile-guide-panel { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 48px; padding: 46px; border: 1px solid #cfe1f1; border-radius: 28px; background: linear-gradient(135deg,#f4faff 0%,#eaf5ff 100%); } .mobile-guide-media { overflow: hidden; border-radius: 20px; box-shadow: 0 18px 42px rgba(16,37,63,.13); } .mobile-guide-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .mobile-guide-copy h2 { margin: 10px 0 18px; font-family: inherit; font-size: clamp(2rem,3vw,3rem); line-height: 1.05; text-transform: uppercase; } .mobile-guide-copy p { margin: 0 0 14px; color: var(--muted); font-size: 1rem; } .mobile-guide-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 24px 0; padding: 0; list-style: none; } .mobile-guide-benefits li { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 8px 13px; border: 1px solid #d8e6f2; border-radius: 999px; background: #fff; color: var(--ink); font-size: .78rem; font-weight: 800; text-align: center; box-shadow: 0 5px 14px rgba(16,37,63,.05); } .mobile-guide-benefits li:before { content: "✓"; margin-right: 7px; color: var(--blue); } .mobile-guide-button { display: inline-flex; align-items: center; gap: 10px; padding: 15px 20px; border-radius: 11px; background: var(--blue); color: #fff; font-size: .82rem; font-weight: 900; text-transform: uppercase; transition: transform .2s ease,background-color .2s ease; } .mobile-guide-button:hover { transform: translateY(-2px); background: #0876b9; } .mobile-guide-button:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; } .mobile-guide-copy > small { display: block; margin-top: 22px; color: var(--muted); font-size: .84rem; line-height: 1.55; } .feature { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 500px; background: var(--aqua); border-radius: 32px; overflow: hidden ; } .feature img { width: 100%; height: 100%; object-fit: cover ; } .feature-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px,6vw,74px) ; } .feature-copy p { color: #3e6170 ; } .feature-copy .btn { align-self: flex-start; margin-top: 12px ; } .downloads { background: #fff ; } .downloads-panel { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(34px,5vw,72px); align-items: center; padding: clamp(34px,5vw,58px); background: linear-gradient(135deg,#f1f8ff 0%,#eaf5ff 100%); border: 1px solid #d7e9f8; border-radius: 26px; box-shadow: 0 18px 48px rgba(20,68,105,.08) ; } .downloads-copy h2 { max-width: 650px; margin: 12px 0 16px; color: var(--blue); font-family: var(--font-sans); font-size: clamp(2rem,3vw,3rem); line-height: 1.02; text-transform: uppercase ; } /* Le titre Top 10 tient sur une ligne sur les écrans suffisamment larges. */ @media (min-width: 1100px) { .top10-discovery-heading h2 { white-space: nowrap; } } .downloads-copy > p { max-width: 650px; color: #48677c; font-size: 1.05rem; line-height: 1.65 ; } .downloads-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 24px 0 28px; padding: 0; list-style: none ; } .downloads-benefits li { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 8px 14px; background: #fff; border: 1px solid #dbeaf6; border-radius: 999px; color: var(--ink); font-size: .9rem; font-weight: 800; text-align: center; box-shadow: 0 5px 14px rgba(20,68,105,.05) ; } .downloads-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; padding: 0 28px; background: var(--blue); border-radius: 12px; color: #fff; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 12px 24px rgba(28,135,217,.22); transition: transform .2s ease,box-shadow .2s ease ; } .downloads-button:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(28,135,217,.28) ; } .download-formats { display: grid; gap: 14px ; } .format { display: flex; align-items: flex-start; gap: 18px; padding: 20px; background: #fff; border: 1px solid #d7e6f1; border-radius: 17px; box-shadow: 0 8px 22px rgba(20,68,105,.06) ; } .format-icon { display: grid; place-items: center; flex: 0 0 62px; height: 62px; background: #edf7ff; border: 1px solid #d6eafa; border-radius: 15px; color: var(--blue); font-size: 1.85rem; font-weight: 800 ; } .format h3 { margin: 0 0 3px; color: var(--ink); font-size: 1.55rem ; } .format p { margin: 0 0 7px; color: var(--muted); font-size: .9rem; line-height: 1.45 ; } .format a { color: var(--blue); font-size: .85rem; font-weight: 900; letter-spacing: .035em; text-transform: uppercase ; } .footer { background: #081f31; color: #d5e2e8; padding: 58px 0 30px ; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 38px ; } .footer h3 { margin-bottom: 14px; color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .1em ; } /* Identité de marque dans le pied de page : blanche et toujours en capitales. */ .footer .brand-name strong { color: #fff; text-transform: uppercase; } .footer a { display: block; margin: .45rem 0; color: #b9cbd4; font-size: .9rem ; } .footer a:hover { color: #fff ; } .footer .brand { display: flex; align-items: center; justify-content: flex-start; gap: .85rem; color: #fff ; } /* Alignement constant du nom par rapport au logo, sur tous les écrans. */ .footer .brand-name { transform: translateY(5px); } .footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 45px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: #8fa7b3 ; } /* ========================================================================== 5. Page Top 10 : introduction, classement et budgets ========================================================================== */ .article-hero { position: relative; min-height: 690px; display: grid; align-items: end; padding: 0; background: #0b4d68; color: #fff; overflow: hidden ; } .article-hero-picture { position: absolute; inset: 0; } .article-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: brightness(var(--photo-brightness)) contrast(var(--photo-contrast)) saturate(var(--photo-saturation)); } .article-hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(5,37,58,var(--hero-veil-left)) 0%, rgba(5,37,58,var(--hero-veil-center)) 50%, rgba(5,37,58,var(--hero-veil-right)) 100% ), linear-gradient( 0deg, rgba(5,35,53,var(--hero-veil-bottom)), transparent 55% ); } .article-hero > .container { position: relative; z-index: 1; padding: 110px 0 76px; } .article-hero h1 { max-width: 1180px; font-size: clamp(2.8rem,5.4vw,6.25rem) ; } .article-hero h1 em { color: var(--sun); font-style: normal; } .article-hero .lead { color: #d9edf2 ; } .article-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px ; } .ranking { padding: 90px 0 ; } .ranking-head { max-width: 1180px; margin-bottom: 40px ; } .ranking-head h2, .budget-section h2, .faq-heading h2, .top10-library-head h2 { color: var(--blue); font-family: var(--font-sans); font-weight: 900; text-transform: uppercase ; } .ranking-head .lead { max-width: 1120px; line-height: 1.7 ; } .ranking-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px ; } .destination-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 14px 34px rgba(16,37,63,.09) ; } .destination-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden ; } .destination-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(var(--photo-brightness)) contrast(var(--photo-contrast)) saturate(var(--photo-saturation)) ; } .photo-pays-inde img, .photo-pays-nepal img, .photo-pays-sri-lanka img { object-position: center; } .photo-pays-pakistan img, .photo-pays-georgie img, .photo-pays-turquie img { object-position: 54% center; } .photo-pays-egypte img, .photo-pays-tunisie img, .photo-pays-paraguay img, .photo-pays-colombie img { object-position: 48% center; } .rank { position: absolute; left: 14px; top: auto; bottom: -60px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--coral); color: #fff; font: 600 1.45rem Georgia,serif; box-shadow: 0 8px 20px rgba(0,0,0,.2) ; } .destination-body { display: flex; flex-direction: column; padding: 28px 30px 30px 84px ; } .capital { color: #092746 !important; font-size: clamp(1.25rem,2vw,1.65rem); font-weight: 900; text-transform: uppercase; letter-spacing: .01em ; } .destination-body h3 { display: none ; } .destination-body p { color: var(--muted); font-size: 1rem; line-height: 1.65 ; } .stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: auto; margin-left: -54px ; } .stat { padding: 10px 8px; background: var(--paper); border-radius: 10px ; } .stat b { display: block; color: var(--ink); font-size: .88rem ; } .stat small { color: var(--muted); font-size: .69rem ; } .card-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 20px 0 0 -54px; font-size: .84rem ; } .card-links .text-link { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 14px; border-radius: 11px; background: var(--blue); color: #fff; font-weight: 900; letter-spacing: .02em; text-align: center; text-transform: uppercase; box-shadow: 0 9px 18px rgba(28,135,217,.18); transition: transform .2s ease,box-shadow .2s ease ; } .card-links .text-link:nth-child(2) { background: #ff7900; box-shadow: 0 9px 18px rgba(255,121,0,.18) ; } .card-links .text-link:hover { transform: translateY(-2px); box-shadow: 0 13px 22px rgba(16,37,63,.2) ; } .budget-section { padding: 90px 0; background: #fff; color: var(--ink) ; } .budget-section .lead { max-width: 1180px; color: var(--muted) ; } .budget-profiles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 30px ; } .budget-profiles article { display: flex; align-items: center; gap: 18px; padding: 20px 26px; background: #f5f9fd; border: 1px solid #dce8f2; border-radius: 16px ; } .budget-profiles article > span { font-size: 1.8rem ; } .budget-profiles h3, .budget-profiles p { margin: 0 ; } .budget-profiles h3 { color: var(--ink); font-size: 1rem; text-transform: uppercase ; } .budget-profiles p { color: var(--muted); font-size: .9rem ; } .budget-table-wrap { overflow-x: auto; margin-top: 36px; border-radius: 18px; background: #fff ; } .table-swipe-hint { display: none; } .budget-table { width: 100%; border-collapse: collapse; color: var(--ink); min-width: 650px ; } .budget-table th,.budget-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line) ; } .budget-table th { background: #172f55; color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em ; } .budget-table tr:last-child td { border-bottom: 0 ; } .budget-table td:nth-child(n+2) { font-weight: 750 ; } .budget-table td:nth-child(n+2):after { content: " / jour"; color: var(--muted); font-size: .84em; font-weight: 600 ; } .method { color: var(--muted); font-size: .82rem; margin-top: 18px ; } .faq { padding: 90px 0 ; } .faq-panel { padding: clamp(30px,4vw,46px); background: #f5f9fd; border: 1px solid #dce8f2; border-radius: 24px ; } .faq-heading { max-width: 1100px; margin-bottom: 28px ; } .faq-heading h2 { color: var(--blue); font-family: var(--font-sans); font-size: clamp(2rem,3vw,2.8rem); text-transform: uppercase ; } .faq-list { display: grid; gap: 12px ; } .faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 20px ; } .faq summary { display: flex; justify-content: space-between; gap: 15px; padding: 18px 0; font-weight: 800; cursor: pointer; list-style: none ; } .faq summary:after { content: "+"; display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; margin: -7px 0; border-radius: 50%; background: var(--blue); color: #fff; font-size: 1.3rem ; } .faq details[open] summary:after { content: "−" ; } .faq details p { margin-top: 0; color: var(--muted) ; } .related { padding: 85px 0; background: #fff ; } .top10-library-head { padding: clamp(28px,4vw,44px); background: linear-gradient(135deg,#f1f8ff,#eaf5ff); border: 1px solid #d7e9f8; border-radius: 24px ; } .top10-library-head h2 { margin: 12px 0 10px; color: var(--blue); font-family: var(--font-sans); font-size: clamp(2rem,3vw,2.8rem); text-transform: uppercase ; } .top10-library-head p { max-width: 1120px; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65 ; } .related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 30px ; } .related-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; min-width: 0; padding: 20px; background: #fff; border: 1px solid #dce8f2; border-radius: 16px; box-shadow: 0 8px 22px rgba(16,37,63,.06); transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease ; } .related-card .related-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0; background: #eef7ff; border-radius: 13px; font-size: 1.35rem ; } .related-card small { display: block; margin-bottom: 4px; color: var(--blue); font-size: .7rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase ; } .related-card strong { display: block; color: var(--ink); font-size: 1rem ; } .related-card p { margin: 5px 0 0; color: var(--muted); font-size: .82rem; font-weight: 500; line-height: 1.4 ; } .related-card > b { color: var(--blue); font-size: 1.25rem ; } .related-card.is-current { background: #f3f9ff; border-color: var(--blue) ; } .related-card:hover { transform: translateY(-3px); border-color: #9fd3fa; box-shadow: 0 15px 30px rgba(16,37,63,.12) ; } /* ========================================================================== 6. Animations et éléments fixes ========================================================================== */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease,transform .65s ease ; } .reveal.visible { opacity: 1; transform: none ; } .to-top { position: fixed; right: 22px; bottom: 22px; z-index: 30; display: grid; place-items: center; width: 56px; height: 56px; border: 3px solid #fff; border-radius: 50%; background: var(--blue); color: #fff; font-size: 0; box-shadow: 0 12px 30px rgba(7,80,111,.38); opacity: 0; pointer-events: none; transition: .2s ; } .to-top::before { content: "➜"; display: block; font-size: 1.7rem; font-weight: 900; line-height: 1; transform: rotate(-90deg); } .to-top:hover, .to-top:focus-visible { background: var(--coral); transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 34px rgba(16,37,63,.42); } .to-top.visible { opacity: 1; pointer-events: auto ; } /* ======================================================================== Affichage d'accueil complet sur les ordinateurs La hauteur et les espacements ci-dessous permettent de voir dès l'ouverture : le titre, le texte, les boutons, les avantages et la recherche. Les règles tablette et mobile restent indépendantes. ======================================================================== */ @media(min-width:1200px) { :root { --hero-shell-height: calc(100svh - 145px); } .site-header .container { width: min(calc(100% - 32px),1450px); } .nav-wrap { gap: 16px; } .main-nav { gap: 2px; } .nav-link,.nav-button { padding-inline: .62rem; } .nav-cta { padding-inline: 1.35rem; white-space: nowrap; } .hero { height: var(--hero-shell-height); min-height: var(--hero-shell-height); align-items: center; } .article-hero { height: var(--hero-shell-height); min-height: var(--hero-shell-height); align-items: center; } .hero-content { padding-top: var(--hero-content-edge-space); padding-bottom: calc(var(--hero-content-edge-space) + var(--search-panel-overlap)); } .article-hero > .container { padding-top: var(--hero-content-edge-space); padding-bottom: calc(var(--hero-content-edge-space) + var(--search-panel-overlap)); } .hero h1 { max-width: 1180px; font-size: clamp(4.5rem,5.4vw,6.25rem); } .hero .lead { margin: 1rem 0 1.25rem; } .hero-proof { margin-top: 1.25rem; } } /* ========================================================================== 7. Adaptation aux tablettes et aux téléphones ========================================================================== */ @media(max-width:1199px) { .menu-toggle { display: block ; } .main-nav { position: fixed; inset: 76px 0 auto; display: none; max-height: calc(100vh - 76px); overflow: auto; align-items: stretch; padding: 14px 20px 24px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow) ; } .main-nav.open { display: grid ; } .nav-link,.nav-button { text-align: left; width: 100%; padding: .85rem ; } .nav-item { position: static ; } .dropdown { position: static; width: auto; min-width: 0; max-width: none; margin: 0 0 8px 12px; box-shadow: none; border: 0; border-left: 2px solid var(--aqua); border-radius: 0 ; } .dropdown a { white-space: normal; } .nav-cta { display: none ; } .continent-grid { grid-template-columns: 1fr 1fr ; } .continent-card-featured { grid-column: span 2; grid-row: auto ; } .routes-grid { grid-template-columns: 1fr 1fr ; } .europe-showcase-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .morocco-showcase-panel { grid-template-columns: 1fr; gap: 28px; } .top10-discovery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .ranking-grid { grid-template-columns: 1fr ; } .footer-grid { grid-template-columns: 1fr 1fr ; } .related-grid { grid-template-columns: 1fr 1fr ; } } /* La grille Europe reste en 3 × 2 sur ordinateur, y compris sur les portables compacts. Elle ne passe à deux colonnes que sur tablette. */ @media(min-width:701px) and (max-width:980px) { :root { --title-1: clamp(2.15rem,5.4vw,3.2rem); --title-2: clamp(1.5rem,3.5vw,2rem); --title-3: clamp(1.12rem,2.5vw,1.3rem); --title-4: clamp(1rem,2vw,1.15rem); --title-5: 1rem; --title-6: .88rem; --section-gap: 80px; } .destinations-head { grid-template-columns: 1fr; gap: 28px; } .europe-showcase-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .steps-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .step-card:last-child { grid-column: span 2; } .mobile-guide-panel { grid-template-columns: 1fr; } } @media(max-width:700px) { :root { --title-1: clamp(1.85rem,7.4vw,2.25rem); --title-2: clamp(1.42rem,6vw,1.72rem); --title-3: clamp(1.08rem,4.8vw,1.25rem); --title-4: clamp(1rem,4.2vw,1.12rem); --title-5: .96rem; --title-6: .84rem; --section-gap: 56px; --mobile-hero-top-gap: 18px; --mobile-hero-height: 500px; } .container { width: min(calc(100% - 28px),var(--max)) ; } .brand-logo { width: 52px; height: 52px; } .brand-name strong { font-size: .75rem; } .brand-name small { font-size: .48rem; letter-spacing: .09em; } .footer .brand { display: inline-flex; align-items: center; gap: .9rem; margin-right: 0; } .footer .brand-logo-footer { width: 76px; height: 76px; } .footer .brand-name { display: grid; gap: .35rem; transform: translateY(4px); opacity: 1; visibility: visible; } .footer .brand-name strong { color: #fff; font-size: .92rem; line-height: 1.15; letter-spacing: .045em; } .footer .brand-name small { color: #42c8e8; font-size: .58rem; line-height: 1.25; letter-spacing: .11em; } .to-top { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); width: 46px; height: 46px; border-width: 2px; background: var(--coral); box-shadow: 0 7px 18px rgba(16,37,63,.34); } .to-top::before { font-size: 1.4rem; } .hero, .article-hero { height: auto; min-height: 0; align-items: start; } .hero:after { background: linear-gradient(0deg,rgba(6,38,57,.93),rgba(6,38,57,.35)) ; } .hero-content { display: flex; flex-direction: column; box-sizing: border-box; height: auto; padding: var(--mobile-hero-top-gap) 0 28px ; } .article-hero > .container { display: flex; flex-direction: column; box-sizing: border-box; height: auto; padding: var(--mobile-hero-top-gap) 0 28px; } /* Réglage mobile commun : contenu du héros remonté pour laisser apparaître le moteur de recherche dès le premier écran sur toutes les pages. */ .hero .eyebrow, .article-hero .eyebrow { margin-bottom: 8px; font-size: .68rem; } .hero h1, .article-hero h1 { margin-bottom: 12px; font-size: clamp(2.05rem, 8.6vw, 2.65rem); line-height: 1; } .hero .lead, .article-hero .lead { margin: 0; font-size: .9rem; line-height: 1.45; } .hero-actions, .article-actions { gap: 16px; margin-top: 24px; } .hero-actions .btn, .article-actions .btn { min-height: 44px; padding: .58rem 1rem; font-size: .88rem; } .hero-proof { display: none; } .hero-proof span:before { width: 18px; height: 18px; margin-right: .35rem; } .hero-proof-mobile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 6px; width: min(calc(100% - 20px), 680px); margin: 16px auto 0; color: var(--ink); } .hero-proof-mobile span { display: flex; min-width: 0; min-height: 42px; align-items: center; justify-content: center; padding: 5px 2px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: clamp(.48rem, 2.35vw, .62rem); font-weight: 800; text-align: center; line-height: 1; white-space: nowrap; } .hero-proof-mobile span:before { content: "✓"; display: inline-grid; place-items: center; width: 15px; height: 15px; flex: 0 0 15px; margin-right: 2px; border-radius: 50%; background: rgba(65,165,254,.12); color: var(--coral); font-size: .68rem; font-weight: 900; } .search-card { grid-template-columns: 1fr; gap: 16px; } .search-panel { margin-top: clamp(44px, 8svh, 72px); } .search-card label { min-height: 52px ; } .search-card .btn { width: 100% ; } .ad-placement { width: calc(100% - 24px); margin-top: 12px; margin-bottom: 12px; } .section-intro { grid-template-columns: 1fr; gap: 18px ; } .destinations-panel { padding: 24px; border-radius: 22px; } .destinations-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; } .destinations-head > *, .destinations-copy, .destination-search-card, .continent-card-copy { min-width: 0; max-width: 100%; } .destination-search-card { margin-top: 22px; padding: 20px; } .destination-search-card h3 { white-space: normal; overflow-wrap: anywhere; } .destination-search-card p, .destination-search-card small, .destinations-copy .lead, .continent-card-copy { overflow-wrap: anywhere; } .destination-search-card form { grid-template-columns: 1fr; } .destination-search-button { width: 100%; } .continent-grid,.steps-grid,.routes-grid,.feature,.downloads-panel,.faq-layout { grid-template-columns: 1fr ; } .step-card:last-child { grid-column: auto; } .europe-showcase-grid { grid-template-columns: 1fr; } .morocco-showcase-panel { padding: 24px; } .morocco-showcase-actions { display: grid; } .morocco-showcase-actions a { justify-content: center; } .top10-discovery-grid { grid-template-columns: 1fr; } .mobile-guide-panel { grid-template-columns: 1fr; gap: 26px; padding: 24px; border-radius: 22px; } .mobile-guide-benefits { grid-template-columns: 1fr; } .mobile-guide-button { justify-content: center; width: 100%; } .downloads-panel { padding: 24px; border-radius: 22px; } .downloads-benefits { grid-template-columns: 1fr; } .downloads-button { width: 100%; padding-inline: 18px; text-align: center; } .continent-card-featured { grid-column: auto ; grid-row: auto; min-height: 180px; } .routes-grid { gap: 14px ; } .route-card { display: block; } .route-card-body { align-items: stretch; } .route-button { width: 100%; } .route-card img { width: 100%; height: auto; min-height: 0; aspect-ratio: 3 / 2; } .feature img { height: 300px ; } .feature-copy { padding: 34px 25px ; } .destination-card { grid-template-columns: 1fr ; } .destination-media { height: 220px ; } .destination-body { padding: 28px 22px 24px 74px ; } .stats { grid-template-columns: 1fr 1fr ; margin-left: -52px ; } .stat:first-child { grid-column: span 2 ; } .card-links { grid-template-columns: 1fr; margin-left: -52px ; } .budget-profiles { grid-template-columns: 1fr ; } .table-swipe-hint { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px 0 10px; color: var(--muted); font-size: .82rem; font-weight: 750; line-height: 1.2; text-align: center; } .table-swipe-hint span { color: var(--coral); font-size: 1.25rem; line-height: 1; } .table-swipe-hint + .budget-table-wrap { margin-top: 0; } .faq-panel { padding: 24px ; } .footer-grid { grid-template-columns: 1fr ; } .footer-bottom { flex-direction: column ; } .related-grid { grid-template-columns: 1fr ; } } /* ======================================================================== Hero adaptatif sur tout le cycle d'écrans Les paliers de largeur choisissent la composition. Les requêtes de hauteur ci-dessous empêchent le contenu de sortir du premier écran en paysage. ======================================================================== */ /* Tablettes et petits ordinateurs : le contenu reste visible sans attendre le bas d'un bandeau de hauteur fixe. */ @media (min-width: 701px) and (max-width: 1199px) { :root { --hero-content-edge-space: clamp(42px, 7vh, 76px); /* Réserve toujours la hauteur nécessaire au moteur de recherche lorsque la fenêtre passe progressivement de l'ordinateur au format mobile. */ --hero-shell-height: clamp(500px, calc(100svh - 160px), 650px); } .hero, .article-hero { height: var(--hero-shell-height); min-height: var(--hero-shell-height); align-items: center; } .hero-content, .article-hero > .container { width: min(calc(100% - 48px), var(--max)); padding-top: var(--hero-content-edge-space); padding-bottom: calc(var(--hero-content-edge-space) + var(--search-panel-overlap)); } .hero h1, .article-hero h1 { max-width: 820px; font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: .98; } .hero .lead, .article-hero .lead { max-width: 720px; margin: 1rem 0 1.25rem; font-size: clamp(1rem, 1.8vw, 1.2rem); } .hero-proof { margin-top: 1.25rem; } } /* Fenêtres larges mais basses : téléphones en paysage, tablettes paysage, petits portables et fenêtres redimensionnées. */ @media (min-width: 701px) and (max-height: 620px) { :root { --hero-content-edge-space: 28px; --hero-shell-height: max(390px, calc(100svh - 70px)); --search-panel-overlap: 28px; } .site-header .container { min-height: 70px; } .brand-logo { width: 54px; height: 54px; } .hero, .article-hero { height: var(--hero-shell-height); min-height: var(--hero-shell-height); align-items: center; } .hero-content, .article-hero > .container { width: min(calc(100% - 48px), var(--max)); padding-top: var(--hero-content-edge-space); padding-bottom: calc(var(--hero-content-edge-space) + var(--search-panel-overlap)); } .hero h1, .article-hero h1 { max-width: 900px; margin-bottom: 10px; font-size: clamp(2.25rem, 5.5vw, 4rem); line-height: .95; } .hero .lead, .article-hero .lead { max-width: 760px; margin: .7rem 0 1rem; font-size: clamp(.94rem, 1.65vw, 1.08rem); line-height: 1.38; } .hero-actions, .article-actions { gap: 10px; } .hero-actions .btn, .article-actions .btn { min-height: 42px; padding: .62rem 1rem; } .hero-proof { margin-top: .9rem; gap: 1rem; } .search-panel { margin-top: -28px; } } /* Téléphone paysage : mêmes informations qu'en portrait, mais disposées sur deux colonnes pour utiliser la largeur sans imposer un long défilement. */ @media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) { :root { --mobile-hero-height: auto; --section-gap: 28px; } .hero, .article-hero { height: auto; min-height: max(350px, calc(100svh - 66px)); align-items: center; } .hero-content, .article-hero > .container { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr); grid-template-rows: auto auto auto; column-gap: 24px; align-content: center; height: auto; padding: 24px 0 42px; } .hero .eyebrow, .article-hero .eyebrow, .hero h1, .article-hero h1, .hero .lead, .article-hero .lead { grid-column: 1; } .hero .eyebrow, .article-hero .eyebrow { margin-bottom: 6px; } .hero h1, .article-hero h1 { margin: 0 0 8px; font-size: clamp(2rem, 5.4vw, 3.2rem); line-height: .95; } .hero .lead, .article-hero .lead { font-size: .88rem; line-height: 1.35; } .hero-actions, .article-actions { grid-column: 2; grid-row: 1 / 4; align-self: center; display: grid; margin: 0; } .hero-actions .btn, .article-actions .btn { width: 100%; justify-content: center; min-height: 42px; padding: .55rem .7rem; font-size: .78rem; white-space: nowrap; } .hero-proof { display: none; } .hero-proof-mobile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 8px; width: min(calc(100% - 32px), var(--max)); margin: 12px auto 0; color: var(--ink); } .hero-proof-mobile span { display: flex; min-width: 0; min-height: 38px; align-items: center; justify-content: center; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .72rem; font-weight: 800; line-height: 1; text-align: center; white-space: nowrap; } .hero-proof-mobile span:before { content: "✓"; display: inline-grid; place-items: center; width: 16px; height: 16px; flex: 0 0 16px; margin-right: 4px; border-radius: 50%; background: rgba(65,165,254,.12); color: var(--coral); font-size: .68rem; font-weight: 900; } .search-panel { margin-top: -24px; } .section { padding-top: calc(var(--section-gap) / 2); padding-bottom: calc(var(--section-gap) / 2); } } /* Très petits téléphones : les trois repères restent sur une seule rangée. */ @media (max-width: 360px) { .hero-proof-mobile { gap: 4px; width: calc(100% - 12px); } .hero-proof-mobile span { min-height: 40px; padding-inline: 1px; font-size: .47rem; } .hero-proof-mobile span:before { width: 13px; height: 13px; flex-basis: 13px; font-size: .58rem; } } /* Très petits téléphones en portrait : aucune largeur fixe ni débordement. */ @media (max-width: 420px) and (orientation: portrait) { .hero-actions, .article-actions { display: grid; grid-template-columns: 1fr; } .hero-actions .btn, .article-actions .btn { width: 100%; justify-content: center; } } /* ========================================================================== MODÈLE MOBILE COMMUN À TOUTES LES PAGES Réutiliser mobile-poster-fold, mobile-poster et mobile-poster-search sur chaque nouvelle page : affiche verticale complète, puis recherche dessous. ========================================================================== */ .standard-mobile-poster { display: none; overflow: hidden; background: #fff; } .standard-mobile-intro { padding: clamp(34px, 5vw, 72px) 0 clamp(28px, 4vw, 58px); background: linear-gradient(135deg, #f4faff 0%, #edf7ff 100%); } @media (max-width: 700px) { .standard-desktop-hero { display: none !important; } .standard-mobile-poster { display: block !important; /* Dimensions exactes de l'affiche mobile du modèle d'accueil. */ aspect-ratio: 793 / 945; } .mobile-poster img { display: block; width: 100%; height: 100%; margin-inline: auto; object-fit: cover; object-position: center; } .mobile-poster-fold { display: block; min-height: 0; padding-bottom: 0; } .mobile-poster + .mobile-poster-search { position: relative !important; left: auto !important; bottom: auto !important; width: min(calc(100% - 28px), var(--max)) !important; /* Même séparation que sur l'accueil et le Top 10 : le panneau commence sous l'affiche et ne la recouvre jamais. */ margin-top: 10px !important; margin-bottom: max(18px, env(safe-area-inset-bottom)) !important; transform: none !important; } .mobile-poster-proof { display: none !important; } .standard-mobile-intro { padding: 30px 0 38px; } .standard-mobile-intro .btn { width: 100%; } } @media(prefers-reduced-motion:reduce) { * { scroll-behavior: auto!important; transition: none!important ; } .reveal { opacity: 1; transform: none ; } } /* -------------------------------------------------------------------------- CHARTE ÉDITORIALE COMMUNE — RÈGLE FINALE PRIORITAIRE Ajoutez .editorial-heading au bloc qui contient le surtitre, le titre et son texte d'introduction. Cette règle est commune à l'accueil, aux Top 10 et à toutes les futures pages, sur ordinateur, tablette et mobile. -------------------------------------------------------------------------- */ .editorial-heading .eyebrow { margin: 0 0 14px; font-size: clamp(.76rem, .7rem + .18vw, .88rem); line-height: 1.35; letter-spacing: .14em; } .editorial-heading .eyebrow:before { flex: 0 0 32px; width: 32px; } .editorial-heading h2 { max-width: 1100px; margin: 0 0 20px; color: var(--blue); font-family: var(--font-sans); font-size: clamp(2rem, 1.7rem + 1vw, 2.7rem); font-weight: 900; line-height: 1.08; letter-spacing: -.025em; text-transform: uppercase; } .editorial-heading > p, .editorial-heading > .lead, .editorial-heading > div > .lead { max-width: 1120px; margin: 0; color: var(--muted); font-size: clamp(1rem, .96rem + .18vw, 1.1rem); line-height: 1.7; } @media (max-width: 700px) { .editorial-heading .eyebrow { margin-bottom: 12px; font-size: .76rem; line-height: 1.4; letter-spacing: .12em; } .editorial-heading .eyebrow:before { flex-basis: 28px; width: 28px; } .editorial-heading h2 { margin-bottom: 18px; font-size: clamp(1.65rem, 7.2vw, 2rem); line-height: 1.1; } .editorial-heading > p, .editorial-heading > .lead, .editorial-heading > div > .lead { font-size: 1rem; line-height: 1.65; } } /* -------------------------------------------------------------------------- AFFICHE PRINCIPALE COMMUNE AUX NOUVELLES PAGES L'image reste toujours entière. Son contenu HTML vient immédiatement après, avec la même construction sur ordinateur, tablette et tous les mobiles. -------------------------------------------------------------------------- */ .page-poster { overflow: hidden; background: #fff; } .page-poster > img, .page-poster > picture, .page-poster > picture > img { display: block; width: min(100%, 1800px); height: auto; margin-inline: auto; object-fit: contain; } .page-poster-intro { padding: clamp(34px, 5vw, 72px) 0 clamp(28px, 4vw, 58px); background: linear-gradient(135deg, #f4faff 0%, #edf7ff 100%); } .page-poster-copy { max-width: 1120px; } .page-poster-copy h1 { max-width: 1000px; margin: 0 0 20px; color: var(--blue); font-family: var(--font-sans); font-size: clamp(2.2rem, 1.75rem + 1.55vw, 3.35rem); font-weight: 900; line-height: 1.06; letter-spacing: -.03em; text-transform: uppercase; } .page-poster-copy > p { max-width: 980px; margin: 0; color: var(--muted); font-size: clamp(1rem, .96rem + .22vw, 1.14rem); line-height: 1.7; } /* Variante commune avec texte superposé. À réutiliser sur les futures pages avec : .page-poster.page-poster--overlay > img + .page-poster-intro */ .page-poster--overlay { position: relative; height: var(--hero-shell-height, 690px); min-height: var(--hero-shell-height, 690px); background: #071f36; } .page-poster--overlay > img, .page-poster--overlay > picture, .page-poster--overlay > picture > img { display: block; width: 100%; max-width: none; min-height: inherit; object-fit: cover; } .page-poster--overlay::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 77, 143, .68) 0%, rgba(0, 91, 164, .48) 35%, rgba(0, 91, 164, .12) 57%, rgba(0, 91, 164, 0) 72%); content: ""; pointer-events: none; } .page-poster--overlay .page-poster-intro { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding: clamp(40px, 6vw, 90px) 0; background: transparent; } .page-poster--overlay .page-poster-copy { width: min(calc(100% - 48px), 1480px); max-width: 1480px; } .page-poster--overlay .page-poster-copy h1 { max-width: 720px; color: #fff; font-size: clamp(2.75rem, 3.8vw, 4.8rem); text-shadow: 0 3px 18px rgba(0, 45, 84, .34); } .page-poster--overlay .page-poster-copy > p { max-width: 690px; color: rgba(255, 255, 255, .94); font-size: clamp(1.05rem, 1vw, 1.28rem); } .page-poster--overlay .eyebrow { color: #74c9ff; } @media (max-width: 700px) { .page-poster > img, .page-poster > picture, .page-poster > picture > img { width: 100%; max-width: none; height: auto; object-fit: contain; } .page-poster-intro { padding: 30px 0 38px; } .page-poster-copy { width: min(calc(100% - 32px), 1120px); } .page-poster-copy h1 { margin-bottom: 18px; font-size: clamp(1.75rem, 8vw, 2.15rem); line-height: 1.08; } .page-poster-copy > p { font-size: 1rem; line-height: 1.65; } .page-poster--overlay { min-height: 0; overflow: visible; background: #fff; } .page-poster--overlay > img, .page-poster--overlay > picture, .page-poster--overlay > picture > img { min-height: 0; aspect-ratio: auto; object-fit: contain; } .page-poster--overlay::after { display: none; } .page-poster--overlay .page-poster-intro { position: static; display: block; padding: 30px 0 38px; background: linear-gradient(135deg, #f4faff 0%, #edf7ff 100%); } .page-poster--overlay .page-poster-copy { width: min(calc(100% - 32px), 1120px); } .page-poster--overlay .page-poster-copy h1 { color: var(--blue); font-size: clamp(1.75rem, 8vw, 2.15rem); text-shadow: none; } .page-poster--overlay .page-poster-copy > p { color: var(--muted); font-size: 1rem; } .page-poster--overlay .eyebrow { color: var(--blue); } }