/* ══════════════════════════════════════════════════════════════ fiche.css — styles COMMUNS à toutes les fiches (bandeau + largeurs) ────────────────────────────────────────────────────────────── Ce fichier est chargé APRÈS le CSS propre à chaque page : ce que vous modifiez ici s'applique à TOUTES les fiches d'un coup. La photo du bandeau reste propre à chaque page (ligne « background-image » juste sous le lien vers ce fichier). Convention : assets/departement//panorama-.jpg Si la photo n'existe pas encore, le bandeau reste bleu. ══════════════════════════════════════════════════════════════ */ /* ─── LARGEURS : bandeau et colonnes de texte ─────────────────── */ /* Largeur maximale du bandeau photo (réduire pour un bandeau plus étroit) */ .produit-hero { max-width: 1400px; margin-left: auto; margin-right: auto; /* Angles arrondis de la photo (augmenter pour plus d'arrondi) */ border-radius: 16px; overflow: hidden; /* Cadrage de la photo */ background-size: cover; background-position: center; background-repeat: no-repeat; } /* Largeur des colonnes de texte (garder la même valeur que le bandeau) */ .produit-page .container { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; } /* ─── VOILE SUR LA PHOTO ──────────────────────────────────────── */ .produit-hero::before { background: /* Assombrit le côté gauche (zone du titre) */ linear-gradient(to right, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 70%), /* Voile haut/bas */ linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.45) 100%); } /* ─── HAUTEUR DU BANDEAU ──────────────────────────────────────── */ /* Espace au-dessus du logo */ .produit-hero { padding-top: 14px; } /* « Sites Emblématiques » placé juste sous le sous-titre (sans le chevaucher) */ .hero-label-bas { margin-top: -10px; } /* Espace sous le titre (augmenter = bandeau plus haut) */ .produit-hero-body { padding-bottom: 12px; } /* ─── TITRE (style affiche) ───────────────────────────────────── */ .produit-hero-body h1 { color: white; margin-top: 0px; /* espace au-dessus du titre */ margin-bottom: 0px; /* espace sous le titre */ /* Ombre bleue pleine décalée + ombre noire + halo */ text-shadow: 3px 3px 0 #2C4A7C, 6px 6px 0 rgba(0,0,0,0.55), 0 0 30px rgba(0,0,0,0.6); } /* Grandes initiales dorées */ .produit-hero-body h1 em { color: #FAC775; font-style: italic; font-weight: 700; -webkit-text-stroke: 0; text-shadow: 4px 4px 0 #2C4A7C, 8px 8px 0 rgba(0,0,0,0.55); } /* Sous-titre en italique */ .produit-hero-body h1 .sous-titre { display: block; font-size: 0.55em; font-weight: 400; font-style: italic; color: rgba(255,255,255,0.85); margin-top: 6px; text-shadow: 0 2px 6px rgba(0,0,0,0.9); } /* ─── ÉCUSSON ─────────────────────────────────────────────────── */ /* Position verticale (augmenter pour descendre, max ~90px) */ .produit-hero .fiche-hero-ecusson { top: var(--ecusson-top, 70px); } /* ══════════════════════════════════════════════════════════════ PAGES PRINCIPALES DES DÉPARTEMENTS (ex. herault.html) Même esprit que les fiches : photo, arrondis, titre style affiche. La photo est indiquée dans chaque page (panorama-.jpg). ══════════════════════════════════════════════════════════════ */ /* Bandeau : largeur, arrondis, cadrage de la photo */ .fiche-hero { max-width: 1400px; margin-left: auto; margin-right: auto; border-radius: 16px; overflow: hidden; background-color: #2C4A7C; /* couleur si la photo n'existe pas encore */ background-size: cover; background-position: center; background-repeat: no-repeat; } /* Largeur du contenu (même valeur que le bandeau) */ .fiche-page .container { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; } /* Voile sur la photo (côté gauche plus sombre, pour le titre) */ .fiche-hero::before { background: linear-gradient(to right, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 70%), linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.45) 100%); } /* Le texte et la barre d'onglets passent au-dessus du voile */ .fiche-hero > .container, .fiche-tabs-wrap { position: relative; z-index: 1; } /* Titre style affiche */ .fiche-hero-titre h1 { color: white; text-shadow: 3px 3px 0 #2C4A7C, 6px 6px 0 rgba(0,0,0,0.55), 0 0 30px rgba(0,0,0,0.6); } .fiche-hero .titre-initial { color: #FAC775; text-shadow: 4px 4px 0 #2C4A7C, 8px 8px 0 rgba(0,0,0,0.55); } /* Petits textes lisibles sur la photo */ .fiche-logo, .fiche-hero-ancien, .fiche-topbar-btn { text-shadow: 0 2px 6px rgba(0,0,0,0.8); } .fiche-topbar-btn { background: rgba(0,0,0,0.25); } /* Mise en page du bandeau : titre et préfecture à gauche, médaillon à droite */ .fiche-hero-inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "titre medaillon" "ancien medaillon"; align-items: end; column-gap: 24px; min-height: 260px; /* hauteur de la zone photo (augmenter = bandeau plus haut) */ padding-bottom: 24px; } .fiche-hero-titre { grid-area: titre; } .fiche-hero-ancien { grid-area: ancien; margin-top: 10px; } /* Médaillon avec la carte du département */ .fiche-hero-medaillon { grid-area: medaillon; align-self: center; height: 230px; /* taille du médaillon */ width: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45)); } /* Écusson : même position sur toutes les pages, sans être coupé en haut */ .fiche-hero .fiche-hero-ecusson { top: 10px; /* augmenter pour descendre l'écusson, diminuer pour le monter */ } @media (max-width: 680px) { /* Sur téléphone : écusson au-dessus du titre, sans chevauchement */ .fiche-hero .fiche-hero-ecusson { grid-area: ecusson; position: static; transform: none; justify-self: center; } .fiche-hero-inner { grid-template-columns: 1fr; grid-template-areas: "ecusson" "titre" "ancien"; min-height: 0; } .fiche-hero-medaillon { display: none; } } /* ══════════════════════════════════════════════════════════════ TAILLE DU TEXTE DES FICHES Reprend les tailles écrites dans le