/* Theme Name: Albert County Tourism Theme URI: https://albertcountytourism.com Author: Albert County Tourism Description: Les sorties outdoor encadrées de France — conditions d'admission, cotation du milieu, prix à l'heure encadrée. Version: 1.0.0.1 Text Domain: act */ /* ========================================================================= 0. POLICES — self-hosted (P-086). Les fichiers binaires (.woff2) doivent être déposés dans assets/fonts/ ; cette feuille les référence déjà. ========================================================================= */ @font-face { font-family: 'Big Shoulders Display'; src: url('assets/fonts/BigShouldersDisplay-Variable.woff2') format('woff2-variations'), url('assets/fonts/BigShouldersDisplay-Variable.woff2') format('woff2'); font-weight: 600 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Bitter'; src: url('assets/fonts/Bitter-Variable.woff2') format('woff2-variations'), url('assets/fonts/Bitter-Variable.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Bitter'; src: url('assets/fonts/Bitter-Italic-Variable.woff2') format('woff2-variations'), url('assets/fonts/Bitter-Italic-Variable.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; } /* ========================================================================= 1. JETONS DE COULEUR — clair ET sombre à parité (P-351, P-110). ========================================================================= */ :root { --brume: #E4E1E9; --feuille: #F2F0F6; --falaise: #CFC9DA; /* DA-v2 §3 : terre de la carte, bandes intermédiaires, cases du cartouche */ --encre: #14111C; --encre-2: #4A4458; --roche: #12101A; /* fixe dans les deux thèmes */ --roche-haute: #1E1B28; /* fixe */ --fluo: #BFE514; /* fixe — aplat uniquement, jamais du texte (procédé 5) */ --encre-fixe: #14111C; /* fixe — texte porté par --fluo */ --papier-fixe: #EDEBF2; /* fixe — texte porté par --roche */ --sur-roche-2: #A9A2BC; /* texte secondaire sur bande sombre, fixe (2,0:1 sinon) */ --font-titre: 'Big Shoulders Display', 'Arial Narrow', 'Helvetica Neue Condensed', Impact, sans-serif; --font-corps: 'Bitter', Rockwell, 'Roboto Slab', Georgia, serif; --rythme: 8px; --contenu-max: 1240px; --gouttiere: 24px; --rayon: 4px; } /* ========================================================================= 1 bis. MODE CLAIR UNIQUEMENT (CM-0417, 15/09/2026) — le réseau retire le mode sombre sur tous les sites. Palette claire uniquement, aucune bascule, aucun @media (prefers-color-scheme: dark), aucun [data-theme]. ========================================================================= */ /* ========================================================================= 2. RESET & BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; max-width: 100%; /* Correctif verdict 2 (C10/C2) : overflow-x:hidden retiré d'ici — posé sur BODY (pas sur le html racine), il force overflow-y à "auto" (CSS Overflow §2) et fait de un conteneur de défilement à part entière. C'est ce conteneur intermédiaire qui empêchait `.fiche-sidebar` (position:sticky) de coller à l'écran : la colonne défilait avec la page au lieu de suivre le lecteur. `html { overflow-x:hidden }` (racine, sans effet sur le sticky) suffit déjà à empêcher le débordement horizontal. */ background: var(--brume); color: var(--encre); font-family: var(--font-corps); font-size: 17px; line-height: 1.7; font-variant-numeric: lining-nums tabular-nums; } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3 { font-family: var(--font-titre); font-weight: 700; line-height: 1.05; margin: 0 0 24px; } h1 { font-size: 40px; } h2 { font-size: 28px; margin-top: 64px; } h3 { font-size: 20px; font-weight: 600; } p { margin: 0 0 1em; } em { font-style: italic; } button { font: inherit; } @media (min-width: 1024px) { body { font-size: 18px; } h1 { font-size: 68px; } h2 { font-size: 40px; } h3 { font-size: 24px; } } .lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--fluo); color: var(--encre-fixe); padding: 12px 20px; } .lien-evitement:focus { left: 8px; top: 8px; } .conteneur { max-width: var(--contenu-max); margin-inline: auto; padding-inline: 20px; } @media (min-width: 1024px) { .conteneur { padding-inline: var(--gouttiere); } } .conteneur--lecture { max-width: 780px; } .contenu-texte :is(h2, h3) { margin-top: 48px; } .contenu-texte p { max-width: 68ch; } .contenu-texte ol, .contenu-texte ul { list-style: decimal; padding-left: 1.4em; margin-bottom: 1em; } .contenu-texte ul { list-style: none; padding-left: 0; } .contenu-texte ul li { position: relative; padding-left: 1.4em; margin-bottom: .4em; } .contenu-texte ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 3px; background: var(--encre-2); } /* Tableaux (l'enveloppe .sbs_tableau vient du socle) */ .sbs_tableau { overflow-x: auto; margin: 24px 0; border: 1px solid var(--encre-2); } .sbs_tableau table { border-collapse: collapse; width: 100%; min-width: 480px; font-variant-numeric: tabular-nums; } .sbs_tableau th, .sbs_tableau td { padding: 12px 16px; border-bottom: 1px solid var(--encre-2); text-align: left; } .sbs_tableau th { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 14px; } /* ========================================================================= 3. BANDES — rythme de fond, jamais deux identiques d'affilée ========================================================================= */ .bande { padding-block: 56px; } @media (min-width: 1024px) { .bande { padding-block: 96px; } } .bande--brume { background: var(--brume); color: var(--encre); } .bande--feuille { background: var(--feuille); color: var(--encre); } .bande--roche { background: var(--roche); color: var(--papier-fixe); } .bande--roche h1, .bande--roche h2, .bande--roche h3 { color: var(--papier-fixe); } .bande--roche p, .bande--roche .seuil-ligne__libelle { color: var(--sur-roche-2); } .bande__vide { color: var(--encre-2); font-style: italic; } .bande--roche .bande__vide { color: var(--sur-roche-2); } /* ========================================================================= 4. EN-TÊTE / NAVIGATION — flex, sans puces (P-004) ========================================================================= */ .entete { position: sticky; top: 0; z-index: 100; background: var(--feuille); color: var(--encre); border-bottom: 1px solid var(--encre-2); } .entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; } .marque { display: flex; align-items: center; gap: 10px; color: var(--encre); text-decoration: none; } .marque__svg { display: inline-flex; align-items: center; gap: 8px; color: var(--encre); } .marque__svg--pied { color: var(--papier-fixe); } .marque__symbole { color: var(--fluo); width: 26px; height: 36px; flex: none; } .bande--roche .marque__symbole { color: var(--fluo); } .entete .marque__symbole { color: var(--encre); } /* logo tête = encre (DA-v2 §2), jamais fluo sur fond clair */ .marque__mot { display: flex; flex-direction: column; font-family: var(--font-titre); line-height: .92; letter-spacing: .02em; } .marque__mot-1 { font-weight: 800; font-size: 19px; } .marque__mot-2 { font-weight: 600; font-size: 13px; opacity: .82; } .entete__bascule { background: none; border: 2px solid var(--encre); color: var(--encre); padding: 6px 14px; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .06em; } .nav-principale { display: none; } .nav-principale--ouverte { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--feuille); border-bottom: 1px solid var(--encre-2); padding: 16px 20px; max-height: calc(100vh - 100%); overflow-y: auto; } .nav-principale__liste { display: flex; flex-direction: column; gap: 14px; } .nav-principale__liste a { text-decoration: none; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 15px; display: flex; align-items: center; gap: 8px; } .nav-principale__code { font-size: 11px; font-weight: 800; background: var(--roche); color: var(--papier-fixe); padding: 2px 6px; letter-spacing: .04em; } .entete__reserver { order: 3; } @media (min-width: 1024px) { .entete__bascule { display: none; } .nav-principale { display: block; } .nav-principale__liste { flex-direction: row; gap: 24px; align-items: center; } } /* Procédé 5 : le fluo n'apparaît que sur ce qui mène à une réservation. */ .btn { display: inline-block; text-decoration: none; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 15px; padding: 12px 22px; border-radius: var(--rayon); border: 2px solid transparent; } .btn--fluo { background: var(--fluo); color: var(--encre-fixe); border-color: var(--fluo); } .btn--fluo:hover, .btn--fluo:focus { background: var(--encre-fixe); color: var(--fluo); border-color: var(--fluo); } .btn--filet { background: transparent; border: 2px solid currentColor; color: currentColor; } /* ========================================================================= 5. HERO — 60vh, voile roche 55% uniquement sur la zone de texte ========================================================================= */ .hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end; overflow: hidden; } .hero__scene { position: absolute; inset: 0; } .hero__scene img, .hero__scene svg { width: 100%; height: 100%; object-fit: cover; } .hero__voile { position: relative; width: 100%; background: rgba(18, 16, 26, .55); padding-block: 40px; } .hero__voile .conteneur > * { color: var(--papier-fixe); } .hero__titre { max-width: 20ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0; } .hero__preuve { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 15px; } .hero--fiche, .hero--territoire { min-height: 46vh; } /* Accueil v2 : hero + colonne "dernières fiches" (remplace "Le Relevé" en liste de texte). */ .hero--accueil { min-height: auto; padding-block: 40px; align-items: stretch; } .hero--accueil .hero__voile { padding-block: 0; } .hero__grille { display: grid; gap: 32px; } @media (min-width: 1024px) { .hero__grille { grid-template-columns: 1fr 320px; align-items: start; } } .hero__selecteur { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; } .hero__selecteur select { font: inherit; padding: 12px 14px; border: 1px solid var(--papier-fixe); background: var(--roche-haute); color: var(--papier-fixe); min-width: 180px; flex: 1 1 180px; } .hero__dernieres { background: rgba(30, 27, 40, .85); padding: 20px; border: 1px solid var(--sur-roche-2); } .hero__dernieres h2 { font-size: 18px; margin: 0 0 12px; color: var(--papier-fixe); } .hero__dernieres-liste { display: flex; flex-direction: column; gap: 12px; } .hero__derniere-lien { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--papier-fixe); } .hero__derniere-vignette { width: 56px; height: 56px; flex: none; overflow: hidden; } .hero__derniere-vignette img, .hero__derniere-vignette svg { width: 100%; height: 100%; object-fit: cover; } .hero__derniere-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hero__derniere-titre { font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .hero__derniere-date { font-size: 12px; color: var(--sur-roche-2); font-variant-numeric: tabular-nums; } /* Bande "falaise" (nouvelle valeur de bande, DA-v2 §3/§5) + tuiles d'activités. */ .bande--falaise { background: var(--falaise); color: var(--encre); } .bande--falaise h1, .bande--falaise h2, .bande--falaise h3 { color: var(--encre); } .activites__grille { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 24px; } @media (min-width: 768px) { .activites__grille { grid-template-columns: repeat(3, 1fr); } } .activite-tuile { position: relative; display: flex; align-items: flex-end; min-height: 220px; background-size: cover; background-position: center; background-color: var(--roche-haute); text-decoration: none; color: var(--papier-fixe); } .activite-tuile__voile { width: 100%; padding: 16px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(180deg, rgba(18,16,26,0) 0%, rgba(18,16,26,.88) 70%); } .activite-tuile__nom { font-family: var(--font-titre); font-weight: 800; font-size: 18px; text-transform: uppercase; } .activite-tuile__nombre { font-size: 13px; color: var(--sur-roche-2); } /* ========================================================================= 6. PROCÉDÉ 1 — LE CARTOUCHE D'ADMISSION ========================================================================= */ .cartouche { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .06em; font-size: 15px; border-top: 2px solid currentColor; border-bottom: 1px solid currentColor; padding-block: 12px; margin: 24px 0 40px; } .cartouche li { padding-right: 20px; border-right: 1px solid currentColor; } .cartouche li:last-child { border-right: none; padding-right: 0; } .cartouche--court { font-size: 13px; margin: 12px 0; gap: 6px 14px; } .cartouche--hero { border-color: var(--papier-fixe); } @media (min-width: 1024px) { .cartouche { font-size: 16px; } } /* ========================================================================= 7. PROCÉDÉ 2 — LA COTATION DU MILIEU ========================================================================= */ .cotation { margin: 20px 0; } .cotation__code { font-family: var(--font-titre); font-weight: 800; text-transform: uppercase; font-size: 40px; margin: 0; } .cotation__texte { font-style: italic; color: var(--encre-2); margin-top: 4px; } .bande--roche .cotation__texte { color: var(--sur-roche-2); } /* ========================================================================= 8. PROCÉDÉ 3 — LE SEUIL EN LIGNE PLEINE ========================================================================= */ .seuils { display: flex; flex-direction: column; } .seuil-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 1px solid var(--encre-2); padding-block: 12px; font-family: var(--font-corps); } .seuils > .seuil-ligne:last-child { border-bottom: 1px solid var(--encre-2); } .seuil-ligne__valeur { font-family: var(--font-titre); font-weight: 700; font-size: 28px; } .seuil-ligne__libelle { text-align: right; color: var(--encre-2); text-transform: uppercase; letter-spacing: .04em; font-size: 14px; } .seuil-ligne--maitre .seuil-ligne__valeur { font-size: 60px; } @media (min-width: 1024px) { .seuil-ligne--maitre .seuil-ligne__valeur { font-size: 96px; } } .seuils--preuve { flex-direction: row; flex-wrap: wrap; gap: 24px; margin: 24px 0; } .seuils--preuve .seuil-ligne { border: none; padding: 0; flex-direction: column; align-items: flex-start; } .seuils--preuve .seuil-ligne__valeur { font-size: 22px; } .seuils--preuve .seuil-ligne__libelle { color: var(--papier-fixe); opacity: .85; } /* Correctif aperçu 1 (15/09/2026) : cause RÉELLE du débordement 390→760px de page-hub.php. `.seuil-ligne` est en `display:flex` SANS `flex-wrap`, et le seuil "maître" (act_seuils(...,true), utilisé par page-hub.php) affiche un texte long à 60px (ex. "Débit > 42 m³/s") : la valeur ET le libellé posés côte à côte sans jamais pouvoir passer à la ligne poussaient la largeur du flex bien au-delà de 390px, et donc toute la page. Un `.seuils` normal (act_seuils sans $avec_maitre) n'est pas concerné (police plus petite), et la rubrique speleologie (vide, aucun seuil affiché) ne débordait pas — ce qui confirme le diagnostic. */ @media (max-width: 480px) { .seuil-ligne { flex-wrap: wrap; row-gap: 4px; } .seuil-ligne__libelle { text-align: left; flex-basis: 100%; } .seuil-ligne--maitre .seuil-ligne__valeur { font-size: 40px; word-break: break-word; } } /* ========================================================================= 9. PROCÉDÉ 4 — LE DIPTYQUE LIEU + GESTE ========================================================================= */ .diptyque { display: grid; grid-template-columns: 2fr 1fr; gap: 0; margin: 32px 0 8px; } .diptyque__img { width: 100%; height: 240px; object-fit: cover; } .diptyque figcaption { grid-column: 1 / -1; font-size: 14px; color: var(--encre-2); padding-top: 8px; } @media (min-width: 1024px) { .diptyque__img { height: 340px; } } /* ========================================================================= 10. PROCÉDÉ 7 — LE PRIX EN HEURE ENCADRÉE ========================================================================= */ .prix-bloc { background: var(--feuille); border: 1px solid var(--encre-2); padding: 24px; margin: 32px 0; } .prix-bloc__montant { font-family: var(--font-titre); font-size: 40px; font-weight: 700; margin: 0; } .prix-bloc__duree { font-size: 20px; color: var(--encre-2); } .prix-bloc__horaire { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 18px; margin-top: 4px; } .prix-bloc__detail { font-size: 15px; } .mention-affiliation { font-size: 14px; color: var(--encre-2); border-top: 1px solid var(--encre-2); padding-top: 12px; margin-top: 16px; } /* ========================================================================= 11. PROCÉDÉ 6 — LA BANDE "CE QUI FAIT ANNULER" ========================================================================= */ .bande-annulation__grille { display: grid; gap: 24px; margin-top: 24px; } .bande-annulation__item { border-top: 2px solid var(--papier-fixe); padding-top: 12px; } .bande-annulation__seuil { font-family: var(--font-titre); font-size: 24px; font-weight: 700; margin: 0; } .bande-annulation__libelle { color: var(--sur-roche-2); } @media (min-width: 768px) { .bande-annulation__grille { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================= 12. CARTES ========================================================================= */ .grille-cartes { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 24px; } @media (min-width: 768px) { .grille-cartes { grid-template-columns: repeat(3, 1fr); } } .grille-cartes--2col { grid-template-columns: 1fr; } @media (min-width: 768px) { .grille-cartes--2col { grid-template-columns: repeat(2, 1fr); } } .carte { border: 1px solid var(--encre-2); background: var(--feuille); border-radius: var(--rayon); overflow: hidden; } .carte__lien { display: block; text-decoration: none; color: inherit; padding-bottom: 16px; } .carte__figure { position: relative; display: block; } .carte img, .carte svg { width: 100%; height: 180px; object-fit: cover; } .carte__rang { position: absolute; left: 12px; bottom: 12px; background: var(--roche); color: var(--papier-fixe); font-family: var(--font-titre); font-weight: 800; font-size: 32px; line-height: 1; padding: 6px 10px; } .carte--rang .carte__titre { font-size: 24px; } .carte__titre { font-size: 20px; margin: 12px 16px 4px; } .carte .cotation { margin: 0 16px 8px; } .carte .cotation__code { font-size: 24px; } .carte .cartouche--court { margin: 0 16px 8px; } .carte__prix { margin: 0 16px; font-family: var(--font-titre); font-weight: 700; } /* ========================================================================= 13. SECTIONS D'ACCUEIL SPÉCIFIQUES ========================================================================= */ .bande-releve__lignes { display: flex; flex-direction: column; margin-top: 16px; } .bande-releve__ligne { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--sur-roche-2); padding-block: 14px; text-decoration: none; color: var(--papier-fixe); font-family: var(--font-corps); } .bande-releve__lignes .bande-releve__ligne:last-child { border-bottom: 1px solid var(--sur-roche-2); } .bande-releve__lieu { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; } .bande-releve__date { color: var(--sur-roche-2); font-variant-numeric: tabular-nums; } .elements__grille { display: grid; gap: 24px; margin-top: 24px; } @media (min-width: 768px) { .elements__grille { grid-template-columns: repeat(3, 1fr); } } .elements__bloc { border-top: 2px solid var(--encre); padding-top: 12px; } .elements__bloc ul { margin-top: 8px; } .elements__bloc li { margin-bottom: 6px; } .elements__bloc a { text-decoration: underline; } .territoires__grille { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 24px; } @media (min-width: 768px) { .territoires__grille { grid-template-columns: repeat(4, 1fr); } } .territoires__carte { text-decoration: none; color: inherit; display: block; } .territoires__img { height: 130px; object-fit: cover; margin-bottom: 8px; } .territoires__carte span { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; } .bande-methode__grille { display: grid; gap: 32px; margin-top: 24px; } @media (min-width: 768px) { .bande-methode__grille { grid-template-columns: repeat(3, 1fr); } } .bande-action__contenu { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .bande-action h2 { max-width: 16ch; } /* ========================================================================= 14. PIED DE PAGE — 5 colonnes ========================================================================= */ .pied__grille { display: grid; gap: 32px; grid-template-columns: 1fr; } @media (min-width: 1024px) { .pied__grille { grid-template-columns: repeat(5, 1fr); } } .pied__titre { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; } .pied__colonne ul { display: flex; flex-direction: column; gap: 8px; } .pied__colonne a { text-decoration: underline; } .pied__texte { color: var(--sur-roche-2); font-size: 15px; } .pied__vide { color: var(--sur-roche-2); font-style: italic; } .pied__bas { display: flex; align-items: center; justify-content: space-between; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--sur-roche-2); flex-wrap: wrap; gap: 16px; } .pied__bas p { margin: 0; color: var(--sur-roche-2); } .pied__colonne--marque { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } /* ========================================================================= 15. FORMULAIRES (P-cadre visuel — le traitement/table vient du socle) ========================================================================= */ .formulaire { display: flex; flex-direction: column; gap: 16px; max-width: 520px; margin: 24px 0; } .formulaire label { display: block; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 14px; margin-bottom: 4px; } .formulaire input, .formulaire textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--encre-2); background: var(--brume); color: var(--encre); border-radius: var(--rayon); } .formulaire__leurre { position: absolute; left: -9999px; } .formulaire__ok { background: var(--feuille); border-left: 4px solid var(--fluo); padding: 12px 16px; } /* ========================================================================= 16. ACTU / PAGES DIVERSES ========================================================================= */ .actu__meta { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 14px; color: var(--encre-2); } .actu__image, .page__image { margin: 16px 0; height: 320px; object-fit: cover; } .bloc-verification { border-top: 4px solid var(--fluo); } /* -------------------------------------------------------------------------- BLOCS DE CORPS PARTAGÉS — dépliants, figures, bandes de poursuite. Couleurs jamais posées en dur : tout hérite de la bande qui les porte, sinon le mode sombre casse le contraste (P-351). -------------------------------------------------------------------------- */ details.elements__bloc > summary, details.bloc-transparence > summary { cursor: pointer; color: inherit; } details.elements__bloc > summary h3 { display: inline; } details.bloc-transparence { border-top: 1px solid currentColor; padding: calc(var(--rythme) * 2) 0; color: inherit; } details.bloc-transparence > summary { font-family: var(--font-titre); font-size: 1.25rem; letter-spacing: .02em; } details.bloc-transparence > p { margin-top: var(--rythme); } figure.figure-donnees, figure.figure-releve { margin: 0; color: inherit; } figure.figure-donnees > figcaption, figure.figure-releve > figcaption { font-size: .9rem; margin-bottom: calc(var(--rythme) * 1.5); color: inherit; } .poursuivre__liste, .pages-liees__liste { list-style: none; margin: calc(var(--rythme) * 2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gouttiere); } .poursuivre__liste a, .pages-liees__liste a { color: inherit; } .page__figure { margin: 0 0 calc(var(--rythme) * 3); } .page__figure > figcaption, .av-chiffre { font-size: .9rem; color: inherit; } .av-note { border-left: 3px solid currentColor; padding-left: var(--gouttiere); margin: calc(var(--rythme) * 3) 0; color: inherit; } .av-citation { margin: calc(var(--rythme) * 3) 0; font-family: var(--font-titre); font-size: 1.4rem; color: inherit; } .av-essentiel { font-weight: 700; color: inherit; } /* 14/09/2026 — points 28-31 RETOURS-TRANSVERSES */ .fiche__corps { max-width: 780px; } .diptyque__img { min-width: 0; } .dossiers__groupe { margin-bottom: 48px; } .dossiers__groupe:last-child { margin-bottom: 0; } .dossiers__groupe h2 { margin-bottom: 16px; } .dossiers__liste { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; } .dossiers__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--encre-2); flex-wrap: wrap; } .dossiers__date { color: var(--encre-2); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 14/09/2026 — transformation hôte : carnet de séjour (sorties + festivals) + carte festival accueil */ .hero__sous-titre { max-width: 46ch; font-size: 17px; margin: 8px 0 0; color: var(--papier-fixe); opacity: .92; } .bande-carnet__intro, .bande-festivals__intro { max-width: 62ch; margin: 8px 0 24px; } .carte--festival .carte__lien { padding-bottom: 20px; } .carte__chapo { margin: 0 16px; color: var(--encre-2); } .bande-festivals__cta { margin-top: 24px; } .formulaire select { width: 100%; padding: 10px 12px; border: 1px solid var(--encre-2); background: #fff; color: var(--encre); font-family: var(--font-corps); font-size: 16px; } /* ========================================================================= 17. AUDIT-FINAL-1409 — le carnet (bloc de leads) et la bande festivals n'étaient qu'un formulaire de contact générique posé sur l'accueil, sans lien avec l'identité "carnet de terrain" du reste du site (cartouche, cotation, seuils). Corrigé : disposition à 2 colonnes, repères chiffrés, formulaire groupé par ligne ; carte festival unique traitée en vedette horizontale (jamais une grille à 2 colonnes pour 1 seule carte — carte orpheline, RETOURS-TRANSVERSES point 27). ========================================================================= */ .bande-carnet__disposition { display: grid; gap: 40px; align-items: start; } @media (min-width: 1024px) { .bande-carnet__disposition { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 64px; } } .bande-carnet__pitch { position: sticky; top: 96px; } @media (max-width: 1023px) { .bande-carnet__pitch { position: static; } } .bande-carnet__reperes { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 28px; border-top: 1px solid var(--encre-2); padding-top: 16px; } .bande-carnet__reperes .seuil-ligne { border: none; padding: 0; flex-direction: column; align-items: flex-start; } .bande-carnet__reperes .seuil-ligne__valeur { font-size: 32px; } .bande-carnet__reperes .seuil-ligne__libelle { color: var(--encre-2); } .formulaire--carnet { max-width: none; background: var(--brume); border: 1px solid var(--encre-2); padding: 24px; gap: 20px; } .formulaire--carnet .formulaire__ligne { display: grid; gap: 16px; margin: 0; } @media (min-width: 600px) { .formulaire--carnet .formulaire__ligne { grid-template-columns: 1fr 1fr; } } .formulaire--carnet .formulaire__ligne p { margin: 0; } .carte--vedette { border: 1px solid var(--encre-2); background: var(--feuille); margin-top: 24px; } .carte__lien--horizontal { display: grid; grid-template-columns: 1fr; padding-bottom: 0; } @media (min-width: 768px) { .carte__lien--horizontal { grid-template-columns: 1.1fr 1fr; align-items: stretch; } } .carte__media { overflow: hidden; } .carte__media img, .carte__media svg { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; } .carte__texte { padding: 24px; display: flex; flex-direction: column; gap: 8px; } .carte--vedette .carte__titre { margin: 0; font-size: 26px; } .carte--vedette .carte__chapo { margin: 0; } .carte__lire { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 14px; margin-top: 8px; color: var(--encre); } /* ========================================================================= 18. AUDIT-FINAL-1409, tour 2 (retour de Mathias sur le jugement expert-design) ========================================================================= */ /* "Le Relevé" : colonne "lieu" en grid à largeur fixe — avant, le flex + space-between faisait démarrer le titre à une position différente sur chaque ligne (largeur du texte de catégorie variable). Mobile : catégorie sur sa propre ligne (jamais 3 lignes empilées un mot par ligne). */ .bande-releve__ligne { display: grid; grid-template-columns: 180px 1fr auto; align-items: baseline; gap: 16px; } .bande-releve__lieu { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bande-releve__date { text-align: right; white-space: nowrap; } @media (max-width: 640px) { .bande-releve__ligne { grid-template-columns: 1fr auto; grid-template-areas: "lieu date" "titre titre"; row-gap: 4px; } .bande-releve__lieu { grid-area: lieu; max-width: 70vw; } .bande-releve__date { grid-area: date; } .bande-releve__titre { grid-area: titre; } } /* "Choisir par élément" : 3 tuiles photo (avant : liens soulignés sans image). */ .elements__bloc { position: relative; min-height: 300px; background-size: cover; background-position: center; border-top: none; padding: 0; display: flex; align-items: flex-end; overflow: hidden; } .elements__voile { width: 100%; background: linear-gradient(180deg, rgba(20,17,28,0) 0%, rgba(20,17,28,.92) 65%); padding: 28px 20px 20px; color: var(--papier-fixe); } .elements__nombre { display: block; font-family: var(--font-titre); font-weight: 800; font-size: 56px; line-height: 1; color: var(--fluo); } .elements__voile h3 { color: var(--papier-fixe); margin: 2px 0 12px; } .elements__voile ul { margin-top: 0; } .elements__voile li { margin-bottom: 6px; } .elements__voile a { color: var(--papier-fixe); text-decoration: underline; } .elements__voile .pied__vide { color: var(--sur-roche-2); } /* "Ce qui fait annuler" : les seuils (42 m³/s, 25 km/h, 11 °C) sont la bande signature du site — avant, ~24px gris terne, indistincts du reste. Passés en très gros chiffre fluo. */ .bande-annulation__seuil { font-size: 40px; font-weight: 800; color: var(--fluo); } @media (min-width: 1024px) { .bande-annulation__seuil { font-size: 60px; } } /* Carte sortie sans prix : catégorie réelle affichée à la place du vide (jamais un cartouche creux). */ .carte__categorie { margin: 0 16px 8px; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 14px; color: var(--encre-2); } /* ========================================================================= 19. REFONTE v2 (15/09/2026) — PALMARÈS "Les sorties les plus fichées" 1 grande + 4, DA-v2 §6 procédé 7. ========================================================================= */ .palmares { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 24px; } .palmares__grande { } .palmares__grande .carte__figure img, .palmares__grande .carte__figure svg { height: 260px; } .palmares__reste { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 640px) { .palmares__reste { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .palmares { grid-template-columns: repeat(3, 1fr); } .palmares__grande { grid-column: 1 / 3; grid-row: 1 / 3; } .palmares__grande .carte__figure img, .palmares__grande .carte__figure svg { height: 100%; min-height: 420px; } .palmares__grande .carte__lien { height: 100%; display: flex; flex-direction: column; } .palmares__reste { grid-column: 3 / 4; grid-template-columns: 1fr; } } @media (max-width: 639px) { .palmares__reste { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 -20px; padding-inline: 20px; } .palmares__reste .carte { flex: 0 0 82%; scroll-snap-align: start; } } /* ========================================================================= 20. GABARIT ARTICLE — colonne latérale collante SANS défilement interne (P-207 KIT-DESIGNER : la colonne ne défile jamais elle-même). ========================================================================= */ .fiche-disposition { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; } @media (min-width: 1100px) { .fiche-disposition { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } } .fiche-sidebar { display: flex; flex-direction: column; gap: 24px; background: var(--feuille); border: 1px solid var(--falaise); padding: 20px; } @media (min-width: 1100px) { .fiche-sidebar { position: sticky; top: 88px; max-height: calc(100vh - 104px); display: grid; grid-template-rows: auto auto auto auto 1fr; overflow: visible; } .fiche-sidebar__pub { align-self: end; } } .fiche-sidebar__module { border-top: 1px solid var(--encre-2); padding-top: 16px; } .fiche-sidebar__module:first-child { border-top: none; padding-top: 0; } .fiche-sidebar__module h3 { margin: 0 0 10px; font-size: 16px; } .fiche-sidebar__liste { display: flex; flex-direction: column; gap: 10px; } .fiche-sidebar__lien { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .fiche-sidebar__lien img, .fiche-sidebar__lien svg { width: 64px; height: 64px; object-fit: cover; flex: none; } .fiche-sidebar__pub { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); text-align: center; border: 1px dashed var(--encre-2); padding: 20px 12px; } .fiche-entete { padding-block: 40px 0; } .fiche-entete .fil-ariane { font-size: 14px; color: var(--encre-2); margin-bottom: 12px; } .fiche-entete .chapo { font-size: 21px; max-width: 62ch; } .fiche-entete .fiche-meta { font-size: 14px; color: var(--encre-2); display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 24px; } .fiche-image-une { max-height: 340px; overflow: hidden; margin: 0; width: 100%; } .fiche-image-une img, .fiche-image-une svg { width: 100%; height: 100%; max-height: 340px; object-fit: cover; } .fiche-image-legende { font-size: 14px; color: var(--encre-2); margin: 0 0 24px; } .bloc-auteur { display: flex; gap: 16px; align-items: flex-start; border-top: 1px solid var(--encre-2); padding-top: 24px; margin-top: 40px; } .bloc-auteur { background: var(--feuille); border: 1px solid var(--falaise); border-radius: var(--rayon); padding: 24px; } .bloc-auteur__ecusson { width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--roche); color: var(--papier-fixe); display: flex; align-items: center; justify-content: center; font-family: var(--font-titre); font-weight: 800; font-size: 22px; overflow: hidden; } .bloc-auteur__ecusson img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .bloc-auteur__role { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; } .bloc-auteur__nom { font-family: var(--font-titre); font-weight: 700; margin: 0; } .bloc-auteur__role, .bloc-auteur__methode { color: var(--encre-2); margin: 2px 0 0; font-size: 15px; } /* ========================================================================= 21. GABARIT DE RUBRIQUE (category.php) — les articles avant le texte. ========================================================================= */ /* Correctif verdict 2 (C6) : en-tête roche propre au site (code en filigrane), au lieu du bandeau gris nu indiscernable d'une archive WordPress. */ .categorie-entete { padding-block: 0; position: relative; overflow: hidden; } .categorie-entete__interieur { position: relative; padding-block: 48px; } .categorie-entete__code { position: absolute; right: 0; bottom: -0.15em; font-family: var(--font-titre); font-weight: 800; font-size: 220px; line-height: 1; color: var(--falaise); opacity: .18; pointer-events: none; user-select: none; } @media (max-width: 599px) { .categorie-entete__code { font-size: 120px; } } .categorie-entete .fil-ariane { color: var(--sur-roche-2); margin-bottom: 8px; } .categorie-sidebar__texte-liste { display: flex; flex-direction: column; gap: 10px; } .categorie-sidebar__texte-liste a { text-decoration: underline; } /* Pagination WordPress (the_posts_pagination) : boutons carrés 44px (C6). */ .pagination { margin-top: 48px; } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--encre-2); text-decoration: none; color: var(--encre); font-family: var(--font-titre); } .pagination .page-numbers.current { background: var(--roche); color: var(--papier-fixe); border-color: var(--roche); } .categorie-liste { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 768px) { .categorie-liste { grid-template-columns: repeat(3, 1fr); } } /* Rubrique à 0-3 articles (ex. spéléologie) : pas de grande carte, grille qui ne laisse jamais de colonne vide (auto-fit au lieu d'un repeat figé). */ .categorie-liste--simple { grid-template-columns: 1fr; } @media (min-width: 640px) { .categorie-liste--simple { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } .categorie-liste__une { grid-column: 1 / -1; } @media (min-width: 768px) { .categorie-liste__une .carte__lien { display: grid; grid-template-columns: 1.2fr 1fr; } .categorie-liste__une .carte__figure img, .categorie-liste__une .carte__figure svg { height: 100%; min-height: 320px; } } .categorie-intro { max-width: 68ch; margin-top: 56px; } .categorie-intro h2 { margin-top: 0; } .actu__meta--carte { margin: 0 16px 12px; display: block; } /* ========================================================================= 22. PAGE ACTIVITÉ + SPOT (page-spot.php) ========================================================================= */ .spot-entete { padding-block: 40px; } .spot-entete .fil-ariane { font-size: 14px; color: var(--encre-2); } .spot-entete .spot-lieu-ligne { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; color: var(--encre-2); margin: 4px 0 24px; } .spot-disposition { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; } @media (min-width: 1100px) { .spot-disposition { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } } .spot-formulaire { background: var(--feuille); border: 1px solid var(--falaise); padding: 24px; } @media (min-width: 1100px) { .spot-formulaire { position: sticky; top: 88px; } } .spot-formulaire h2 { margin-top: 0; font-size: 24px; } .spot-formulaire__reassurance { font-size: 13px; color: var(--encre-2); margin-top: 12px; } .spot-cotation-admission { display: grid; gap: 24px; grid-template-columns: 1fr; margin: 24px 0; } @media (min-width: 640px) { .spot-cotation-admission { grid-template-columns: 1fr 1fr; align-items: start; } } .spot-mini-carte { background: var(--roche); color: var(--papier-fixe); padding: 24px; } .spot-mini-carte svg { width: 100%; height: auto; } .spot-saison-table { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 16px; } @media (min-width: 640px) { .spot-saison-table { grid-template-columns: repeat(12, 1fr); } } .spot-saison-table span { display: block; text-align: center; padding: 10px 0; font-size: 12px; font-family: var(--font-titre); border: 1px solid var(--encre-2); } .spot-saison-table span.plein { background: var(--fluo); color: var(--encre-fixe); border-color: var(--fluo); } /* Barre collante mobile de demande (procédé 5) : jamais masquée par le pop-up (§9). */ .barre-fluo-collante { display: none; } @media (max-width: 1099px) { .barre-fluo-collante { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--fluo); } .barre-fluo-collante a { display: block; text-align: center; padding: 16px 0; min-height: 56px; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--encre-fixe); text-decoration: none; } /* Pas de panneau JS (simplifié, budget de ce tour) : la barre collante mène par ancre (#demande) au formulaire posé en ligne après le contenu — déjà conforme à la DA-v2 ("le formulaire est aussi posé en ligne après les parcours"). Un padding évite que la barre ne masque la fin du formulaire. */ .spot-disposition { padding-bottom: 72px; } } /* ========================================================================= 23. CARTE DE FRANCE (page-carte.php) — dessin propre au site, pas de lib. ========================================================================= */ .carte-outil { display: grid; gap: 32px; grid-template-columns: 1fr; } @media (min-width: 1100px) { .carte-outil { grid-template-columns: 7fr 5fr; align-items: start; } } .carte-outil__filtre { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; } .carte-outil__filtre button { flex: none; font: inherit; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; background: var(--feuille); color: var(--encre); border: 1px solid var(--encre-2); padding: 10px 14px; min-height: 44px; cursor: pointer; } .carte-outil__filtre button.est-actif { background: var(--roche); color: var(--papier-fixe); border-color: var(--roche); } .carte-france-scene { position: relative; background: var(--roche); padding: 16px; margin-top: 24px; } .carte-france-svg { width: 100%; height: auto; display: block; } .carte-france-svg .terre { fill: var(--falaise); stroke: var(--roche); stroke-width: 1; } .carte-france-svg .riviere { stroke: var(--sur-roche-2); stroke-width: 1.5; fill: none; } .carte-epingle { cursor: pointer; } .carte-epingle circle.coeur { fill: var(--fluo); } .carte-epingle path, .carte-epingle circle.contour { stroke: var(--papier-fixe); } .carte-epingle text { font-family: var(--font-titre); font-weight: 800; font-size: 9px; fill: var(--roche); } .carte-epingle[hidden] { display: none; } .carte-outil__accordeon { display: flex; flex-direction: column; gap: 4px; } .carte-outil__region { border: 1px solid var(--encre-2); } .carte-outil__region > summary { cursor: pointer; padding: 14px 16px; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; display: flex; justify-content: space-between; gap: 12px; } .carte-outil__spot { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--encre-2); text-decoration: none; color: inherit; } .carte-outil__spot .nav-principale__code { flex: none; } .carte-outil__recherche { width: 100%; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--encre-2); background: var(--brume); color: var(--encre); font: inherit; } /* ========================================================================= 24. PAGE CONTACT — non scrollable à 1440×900 et 390×844 (§7.7). ========================================================================= */ .contact-ecran { min-height: calc(100vh - 73px); display: flex; align-items: center; } .contact-grille { display: grid; gap: 32px; grid-template-columns: 1fr; width: 100%; } @media (min-width: 1024px) { .contact-grille { grid-template-columns: 1fr 1fr; } } .contact-pitch { display: flex; flex-direction: column; justify-content: center; gap: 12px; } .contact-pitch h1 { margin-bottom: 4px; } .contact-pitch p { margin: 0; } .contact-formulaire { display: flex; flex-direction: column; gap: 12px; } .contact-formulaire textarea { min-height: 72px; } @media (max-width: 480px) { .contact-ecran { min-height: calc(100svh - 64px); padding-block: 16px; } .contact-pitch p { font-size: 15px; } } /* ========================================================================= 25. SURCHARGE MOBILE DU POP-UP PUBLICITAIRE (mu-plugin sb-popups, HORS thème) Contrainte KIT §9 : ≤35% de hauteur d'écran, croix 48px contrastée. Le mu-plugin n'est pas dans ce thème : sélecteurs par motif de classe/ID pour couvrir sa nomenclature réelle, à vérifier sur le rendu et resserrer si besoin (act_page_par_gabarit ne peut pas inspecter du PHP hors thème). ========================================================================= */ /* ========================================================================= 27. CORRECTIFS VERDICT 2 (15/09/2026) — barre de progression de lecture (CM-0484), sommaire à état actif (CM-0485), encart de capture de leads au milieu d'un article long (CM-0481). Discret, sans jamais recouvrir l'en-tête sticky (bande fine SOUS l'en-tête, jamais par-dessus le logo/la nav). ========================================================================= */ .progression-lecture { position: sticky; top: 72px; z-index: 90; height: 3px; background: var(--falaise); } .progression-lecture__barre { display: block; height: 100%; width: 0%; background: var(--fluo); transition: width .1s linear; } .sommaire { background: var(--feuille); border: 1px solid var(--falaise); border-radius: var(--rayon); padding: 16px 20px; margin: 24px 0; } .sommaire > summary { cursor: pointer; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; } .sommaire__liste { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .sommaire__lien { text-decoration: none; color: var(--encre-2); border-left: 2px solid transparent; padding-left: 10px; } .sommaire__lien.est-actif { color: var(--encre); border-left-color: var(--fluo); font-weight: 600; } .encart-demande { background: var(--falaise); border-radius: var(--rayon); padding: 24px; margin: 40px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .encart-demande__accroche { font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 14px; margin: 0; color: var(--encre-2); } .encart-demande h3 { margin: 0 0 4px; } /* ========================================================================= 26. CORRECTIFS VERDICT 1 (15/09/2026, VERDICT-DESIGN-2026-09-15.md) ========================================================================= */ /* Bande fluo = la demande de sortie (DA-v2 P5), jamais un encadre gris. */ .bande--fluo { background: var(--fluo); color: var(--encre-fixe); } .bande--fluo h1, .bande--fluo h2, .bande--fluo h3 { color: var(--encre-fixe); } .bande--fluo .bande-carnet__intro, .bande--fluo .seuil-ligne__libelle { color: var(--encre-fixe); opacity: .75; } .bande--fluo .bande-carnet__reperes { border-top-color: var(--encre-fixe); } .bande--fluo .btn--fluo { background: var(--roche); color: var(--fluo); border-color: var(--roche); } .bande--fluo .btn--fluo:hover, .bande--fluo .btn--fluo:focus { background: var(--encre-fixe); color: var(--roche); } .entete__reserver-court { display: none; } /* Select en sombre : fond blanc fixe corrige (B9/B10 — Contact, carnet, spot). */ .formulaire select { background: var(--feuille); color: var(--encre); } /* Palmares (B1) : grille 12 colonnes, grande carte 6 colonnes / 2 rangs, les 4 autres en 2x2 dans les 6 colonnes restantes (DA-v2 P7). Avant : la grande spanait 2 rangs pendant que les 4 autres s'empilaient sur 4 rangs, ce qui laissait un vide sous la carte 01. */ @media (min-width: 1024px) { .palmares { grid-template-columns: repeat(12, 1fr); } .palmares__grande { grid-column: 1 / 7; grid-row: 1 / 3; height: 100%; } .palmares__reste { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 20px; } /* Correctif verdict 2 (B1-4, PARTIEL) : la carte 01 s'arrêtait ~150px avant la 2e rangée de droite. `.palmares__grande` (stretch par défaut du grid) avait bien la hauteur de la ligne, mais `.carte` (l'article, à l'intérieur) n'héritait cette hauteur nulle part : elle restait à sa hauteur de contenu naturelle, plus courte. On propage la hauteur jusqu'à la figure, puis on laisse la figure absorber l'espace restant (flex:1) pendant que titre/cotation/prix gardent leur hauteur naturelle. */ .palmares__grande .carte { height: 100%; display: flex; flex-direction: column; } .palmares__grande .carte__lien { flex: 1; } .palmares__grande .carte__figure { flex: 1; min-height: 0; } .palmares__grande .carte__figure img, .palmares__grande .carte__figure svg { height: 100%; min-height: 0; } } /* Tuiles d'activites (B1) : le badge de code etait etire pleine largeur car .activite-tuile__voile est en display:flex column (align-items:stretch par defaut) : un span devient une barre. */ .activite-tuile__voile { align-items: flex-start; } .activite-tuile__voile .nav-principale__code { align-self: flex-start; } @media (min-width: 1024px) { .activites__grille { grid-template-columns: repeat(4, 1fr); } } .activite-tuile { aspect-ratio: 4 / 5; min-height: 180px; } /* Pastille de code d'activite en surimpression sur les cartes (P3). */ .carte__code { position: absolute; top: 12px; left: 12px; } /* Nouvelle bande "Dernieres fiches et guides" (accueil, B1) : 1 grande + reste. */ .grille-cartes--une { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 24px; } @media (min-width: 768px) { .grille-cartes--une { grid-template-columns: repeat(3, 1fr); } .grille-cartes--une .carte--une { grid-column: 1 / 3; } } /* Rubrique vide (B3/B4) : message court + liens vers les rubriques voisines. */ .categorie-vide__liens { margin-top: 12px; color: var(--encre-2); } .categorie-vide__liens a { color: var(--encre); } /* En-tete mobile (B2) : le bouton MENU ne coupe plus le logo, "Demander une sortie" tient sur une ligne, hauteur de tete compactee. */ @media (max-width: 599px) { .entete__barre { padding-block: 8px; gap: 8px; flex-wrap: nowrap; } .marque__mot { display: none; } .entete__bascule { width: 44px; height: 44px; padding: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; } .entete__bascule .lien-evitement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .entete__bascule::before { content: ""; width: 20px; height: 2px; background: var(--encre); box-shadow: 0 -6px 0 var(--encre), 0 6px 0 var(--encre); } .entete__reserver { padding: 10px 14px; white-space: nowrap; } .entete__reserver-long { display: none; } .entete__reserver-court { display: inline; } } /* Contact 390 (B10, BLOQUANT) : bouton visible sans defiler. */ .contact-pitch__mobile { display: none; } @media (max-width: 599px) { .contact-pitch__mobile { display: block; margin: 0; font-size: 15px; } .contact-pitch__desktop { display: none; } .contact-ecran { min-height: 0; padding-block: 12px; } .contact-grille { gap: 16px; } .contact-formulaire { gap: 10px; } .contact-formulaire textarea { min-height: 56px; } } /* Article (B5/B7) : colonne laterale sans hauteur figee — le cadre --feuille s'arretait avant la fin du contenu, qui debordait dessous. Le module de pub etant retire tant qu'aucune creation reelle n'existe (jamais un encadre "Publicite" vide), un simple sticky suffit desormais. */ @media (min-width: 1100px) { .fiche-sidebar { max-height: none; display: flex; overflow: visible; } } /* Module de demande dans le corps, visible seulement sous 1100px (B6/B8) : sur desktop, le meme module vit deja dans la colonne laterale. */ .module-demande-mobile { margin: 24px 0; padding: 20px; background: var(--feuille); border: 1px solid var(--falaise); } @media (min-width: 1100px) { .module-demande-mobile { display: none; } } /* Correctif verdict 2 (C4) : rubans de chiffres qui se chevauchaient à 390px ("6 ACTIVITÉS0 RÉGIONS", "DÉLAI DE RÉPONSERÉGIONS COUVERTES"). Les deux rubans (.seuils--preuve du hero, .bande-carnet__reperes du carnet) passent en grille 2 colonnes sous 480px : chaque chiffre a sa cellule, le libellé peut revenir à la ligne sans jamais chevaucher son voisin. */ @media (max-width: 480px) { .seuils--preuve, .bande-carnet__reperes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; } .seuils--preuve .seuil-ligne, .bande-carnet__reperes .seuil-ligne { min-width: 0; } .seuils--preuve .seuil-ligne__libelle, .bande-carnet__reperes .seuil-ligne__libelle { white-space: normal; } } @media (max-width: 599px) { [class*="sb-popup"]:not([class*="fermer"]):not([class*="close"]), [id*="sb-popup"] { max-height: 35vh !important; bottom: 0 !important; top: auto !important; width: 100% !important; left: 0 !important; right: 0 !important; border-radius: var(--rayon) var(--rayon) 0 0 !important; } [class*="sb-popup"] img { max-height: 60% !important; object-fit: contain !important; background: var(--roche) !important; } /* Correctif verdict 2 (C5, charte) : mêmes réserves qu'en §25 (sélecteurs par motif, mu-plugin hors thème, à resserrer sur le rendu réel — P-204). Le titre/étiquette suit la charte du site plutôt que la police système et le vert qu'affichait le rendu passe2. */ [class*="sb-popup"] { font-family: var(--font-corps) !important; } [class*="sb-popup"] h1, [class*="sb-popup"] h2, [class*="sb-popup"] h3, [class*="sb-popup"] [class*="titre"], [class*="sb-popup"] [class*="title"] { font-family: var(--font-titre) !important; color: var(--encre) !important; } [class*="sb-popup"] [class*="label"], [class*="sb-popup"] [class*="badge"], [class*="sb-popup"] [class*="tag"] { font-family: var(--font-corps) !important; text-transform: uppercase !important; letter-spacing: .04em !important; color: var(--encre-2) !important; background: transparent !important; } [class*="sb-popup"] [class*="close"], [class*="sb-popup"] [class*="fermer"], [id*="sb-popup"] [class*="close"], [id*="sb-popup"] [class*="fermer"] { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--feuille) !important; color: var(--encre) !important; border: 2px solid var(--encre) !important; font-size: 20px !important; line-height: 1 !important; opacity: 1 !important; /* Bouton replacé DANS la carte (au-dessus de l'image) : un décalage négatif le faisait sortir de son conteneur et le rognait, invisible malgré une taille/contraste corrects. */ position: absolute !important; top: 8px !important; right: 8px !important; bottom: auto !important; left: auto !important; z-index: 2 !important; border-radius: 50% !important; } } /* ========================================================================= 28. PASSE 4 (15/09/2026) — retours Mathias à 1440 : nav sur une ligne, hero avec marge interne, vraie carte de France, tuiles avec photo. ========================================================================= */ /* --- 28.1 En-tête : logo + Activités (déroulant) + La carte + Contact + bouton --- */ .nav-principale__liste a, .nav-principale__deroulant, .entete__reserver, .marque__mot > span { white-space: nowrap; } .nav-principale__deroulant { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: var(--encre); font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 15px; display: flex; align-items: center; gap: 8px; min-height: 44px; } .nav-principale__chevron { transition: transform .15s ease; flex: none; } .nav-principale__item--deroulant.est-ouvert .nav-principale__chevron { transform: rotate(180deg); } .nav-principale__sous { display: none; list-style: none; margin: 0; padding: 0; } .nav-principale__item--deroulant.est-ouvert > .nav-principale__sous { display: flex; flex-direction: column; } .nav-principale__sous a { min-height: 44px; } .nav-principale__liste > li > a { min-height: 44px; } @media (min-width: 1024px) { .entete__barre { gap: 32px; flex-wrap: nowrap; } .nav-principale { margin-left: auto; } .nav-principale__liste { gap: 32px; flex-wrap: nowrap; } .entete__reserver { flex: none; } .nav-principale__item--deroulant { position: relative; } .nav-principale__sous { position: absolute; top: 100%; left: -18px; min-width: 250px; z-index: 120; background: var(--feuille); border: 1px solid var(--encre-2); border-top: 3px solid var(--fluo); box-shadow: 0 12px 28px rgba(18, 16, 26, .18); padding: 6px 0; } .nav-principale__sous a { padding: 10px 18px; display: flex; align-items: center; } .nav-principale__sous a:hover, .nav-principale__sous a:focus-visible { background: var(--brume); } } /* Panneau mobile / tablette : sous l'en-tête collant, jamais plus large que l'écran. */ @media (max-width: 1023px) { .entete__barre { position: relative; } .nav-principale--ouverte { position: absolute; left: 0; right: 0; top: 100%; width: 100%; box-sizing: border-box; padding: 8px 20px 20px; box-shadow: 0 16px 32px rgba(18, 16, 26, .2); max-height: calc(100svh - 64px); overflow-y: auto; } .nav-principale__liste { gap: 0; } .nav-principale__liste > li { border-bottom: 1px solid var(--falaise); } .nav-principale__liste > li > a, .nav-principale__deroulant { width: 100%; justify-content: space-between; font-size: 17px; min-height: 52px; } .nav-principale__sous { padding: 0 0 10px 14px; border-left: 3px solid var(--fluo); margin-bottom: 8px; } .nav-principale__sous a { font-size: 15px; } } /* --- 28.2 Hero accueil : vraie marge interne, colonnes alignées en haut --- */ .hero--accueil { padding-block: 48px; } .hero--accueil .hero__voile { padding-block: 32px; } .hero--accueil .hero__grille { align-items: start; } .hero--accueil .hero__titre { margin-top: 0; font-size: clamp(36px, 4.2vw, 60px); max-width: 22ch; } .hero--accueil .hero__dernieres { margin-top: 0; } @media (min-width: 1024px) { .hero--accueil { padding-block: 64px; } .hero--accueil .hero__voile { padding-block: 48px; } .hero--accueil .hero__grille { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; } } /* --- 28.3 Carte de France : contours réels, palette du site --- */ .carte-france-scene { background: var(--feuille); padding: 20px; border-radius: var(--rayon); color: var(--encre); } .carte-france { position: relative; } .carte-france-svg { width: 100%; height: auto; display: block; max-height: 640px; margin-inline: auto; } .carte-france--outil .carte-france-svg { max-height: 760px; } .carte-france-svg .terre { fill: var(--falaise); stroke: var(--feuille); stroke-width: 1.4; stroke-linejoin: round; } .carte-france-svg .terre:hover { fill: #C2BBD0; } .carte-epingle { cursor: pointer; outline: none; } .carte-epingle__attache { stroke: var(--roche); stroke-width: 1.2; } .carte-epingle__lieu { fill: var(--roche); } .carte-epingle__disque { fill: var(--roche); stroke: var(--fluo); stroke-width: 2.4; } .carte-epingle__code { font-family: var(--font-titre); font-weight: 800; font-size: 8.5px; fill: var(--papier-fixe); letter-spacing: .02em; pointer-events: none; } .carte-epingle:hover .carte-epingle__disque, .carte-epingle:focus-visible .carte-epingle__disque, .carte-epingle--focus .carte-epingle__disque { fill: var(--fluo); stroke: var(--roche); stroke-width: 3; } .carte-epingle:hover .carte-epingle__code, .carte-epingle:focus-visible .carte-epingle__code, .carte-epingle--focus .carte-epingle__code { fill: var(--encre-fixe); } .carte-epingle[hidden] { display: none; } .carte-infobulle { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 16px)); background: var(--roche); color: var(--papier-fixe); border-left: 4px solid var(--fluo); padding: 8px 12px; font-size: 14px; line-height: 1.3; max-width: 260px; width: max-content; box-shadow: 0 8px 20px rgba(18,16,26,.3); } .carte-infobulle strong { display: block; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; color: var(--sur-roche-2); } .carte-france .carte-legende { margin: 12px 0 0; font-size: 14px; color: var(--encre-2); text-align: center; } .carte-outremer { margin-top: 12px; border: 1px solid var(--encre-2); padding: 12px 16px; } .carte-outremer__titre { margin: 0 0 6px; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .04em; color: var(--encre); } .carte-outremer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .carte-outremer a { color: var(--encre); display: flex; gap: 8px; align-items: center; } .carte-outremer__code { background: var(--roche); color: var(--papier-fixe); font-family: var(--font-titre); font-size: 11px; padding: 2px 6px; } @media (max-width: 599px) { .carte-france-scene { padding: 12px; } .carte-epingle__marque > * { transform: scale(1.25); } .carte-epingle__code { display: none; } .carte-infobulle { max-width: 220px; } } /* --- 28.4 Tuiles d'activités : la photo est toujours là --- */ .activite-tuile { background-color: var(--roche-haute); } /* --- 28.5 Correctifs après captures passe 4 --- */ /* Le code d'activité était peint en --roche par l'ancienne règle `.carte-epingle text` (0,1,1) : invisible sur le disque. */ .carte-epingle .carte-epingle__code { font-size: 8.5px; fill: var(--papier-fixe); } .carte-epingle:hover .carte-epingle__code, .carte-epingle:focus-visible .carte-epingle__code, .carte-epingle--focus .carte-epingle__code { fill: var(--encre-fixe); } @media (max-width: 599px) { .carte-epingle .carte-epingle__code { display: none; } .carte-epingle__marque > * { transform: none; } } /* /carte/ à 390 : la barre de filtres (nowrap) élargissait la colonne de grille → page de 643 px. */ .carte-outil > * { min-width: 0; } .carte-outil__filtre button.est-actif { background: var(--fluo); color: var(--encre-fixe); border-color: var(--fluo); } /* Mobile : burger à droite, à côté du bouton de demande. */ @media (max-width: 1023px) { .entete__reserver { order: 3; margin-left: auto; } .entete__bascule { order: 4; } } /* Pied : libellés courts sur une ligne (titre complet en infobulle). */ @media (min-width: 1024px) { .pied__grille { grid-template-columns: 1.1fr 1fr 1.6fr 1.6fr 1fr; gap: 32px; } .pied li a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; } } /* --- 28.6 Passe 4 bis (retour Mathias : « fond noir moche, hero moche ») --- */ /* Carte sur fond clair : la France ressort en ton soutenu de la palette, contraste net. */ .carte-france-scene { background: var(--feuille); border: 1px solid var(--falaise); box-shadow: 0 1px 0 rgba(18,16,26,.04); } .carte-france-svg .terre { fill: var(--sur-roche-2); stroke: var(--feuille); stroke-width: 1.6; } .carte-france-svg .terre:hover { fill: #968EAB; } .carte-epingle__disque { fill: var(--roche); stroke: var(--fluo); stroke-width: 2.6; } .carte-epingle__attache { stroke: var(--roche); stroke-width: 1.4; } #carte .bande-action__contenu { margin-top: 24px; } /* Hero de /carte/ : photo, voile en dégradé derrière le texte seulement, marges généreuses. */ .hero--carte { min-height: 440px; align-items: stretch; } .hero--carte .hero__voile { display: flex; align-items: center; padding-block: 56px; background: linear-gradient(90deg, rgba(18,16,26,.82) 0%, rgba(18,16,26,.6) 45%, rgba(18,16,26,.12) 100%); } .hero--carte .hero-carte__contenu { width: 100%; } .hero--carte .fil-ariane, .hero--carte .fil-ariane a { color: var(--papier-fixe); opacity: .9; font-size: 15px; margin: 0 0 16px; } .hero--carte .hero__titre { margin: 0 0 16px; max-width: 16ch; font-size: clamp(40px, 5vw, 72px); } .hero--carte .hero__sous-titre { max-width: 52ch; font-size: 18px; line-height: 1.55; } .hero--carte .seuils--preuve { margin: 28px 0 0; } @media (min-width: 1024px) { .hero--carte .hero__voile { padding-block: 88px; } .hero--carte .hero__sous-titre { font-size: 20px; } } @media (max-width: 599px) { .hero--carte { min-height: 0; } .hero--carte .hero__voile { padding-block: 40px; background: rgba(18,16,26,.7); } } /* Filtres juste sous le hero : boutons propres sur une ligne, défilement horizontal propre sur mobile. */ .bande-filtres { background: var(--feuille); border-bottom: 1px solid var(--falaise); padding-block: 16px; } .bande-filtres .carte-outil__filtre { margin: 0; padding-bottom: 2px; scrollbar-width: none; scroll-snap-type: x proximity; } .bande-filtres .carte-outil__filtre::-webkit-scrollbar { display: none; } .bande-filtres .carte-outil__filtre button { white-space: nowrap; scroll-snap-align: start; border-radius: 999px; padding: 10px 18px; min-height: 44px; background: var(--feuille); color: var(--encre); border: 1.5px solid var(--encre-2); font-size: 14px; } .bande-filtres .carte-outil__filtre button:hover { border-color: var(--encre); background: var(--brume); } .bande-filtres .carte-outil__filtre button.est-actif { background: var(--roche); color: var(--papier-fixe); border-color: var(--roche); box-shadow: inset 0 -3px 0 var(--fluo); } .bande--carte-outil { padding-block: 40px 72px; } .bande--carte-outil .carte-france-scene { margin-top: 0; } .bande--carte-outil .carte-outil__recherche { background: var(--feuille); } .bande--carte-outil .carte-outil__region { background: var(--feuille); border-color: var(--falaise); } .bande--carte-outil .carte-outil__spot:hover { background: var(--brume); } .carte-outremer__liens { display: flex; flex-direction: column; gap: 6px; } /* --- 28.7 Rubans de chiffres à 390 : valeur au-dessus du libellé, jamais au-delà de l'écran (r=405 mesuré). --- */ @media (max-width: 480px) { .seuils--preuve .seuil-ligne { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; min-width: 0; } .seuils--preuve .seuil-ligne__libelle { text-align: left; flex-basis: auto; max-width: 100%; font-size: 12px; letter-spacing: .02em; overflow-wrap: anywhere; } } @media (max-width: 480px) { /* `1fr` = minmax(auto,1fr) : la colonne grandissait jusqu'au mot le plus long (r=391 mesuré). */ .seuils--preuve, .bande-carnet__reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { /* « régions couvertes » (bande carnet) dépassait de 1 px : même disposition en colonne que le ruban du hero. */ .bande-carnet__reperes .seuil-ligne { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; min-width: 0; } .bande-carnet__reperes .seuil-ligne__libelle { text-align: left; flex-basis: auto; max-width: 100%; overflow-wrap: anywhere; } } /* ========================================================================= 29. FINITIONS 15/09 (coordinateur) — plus aucune bande noire. ========================================================================= */ /* 29.1 Hero accueil : dégradé pleine hauteur, sombre à gauche, transparent à droite. */ .hero--accueil { padding-block: 0; min-height: 0; } .hero--accueil .hero__voile { padding-block: 56px; background: linear-gradient(90deg, rgba(18,16,26,.9) 0%, rgba(18,16,26,.82) 38%, rgba(18,16,26,.45) 66%, rgba(18,16,26,0) 100%); } @media (min-width: 1024px) { .hero--accueil .hero__voile { padding-block: 80px; } } @media (max-width: 1023px) { .hero--accueil .hero__voile { background: linear-gradient(90deg, rgba(18,16,26,.86) 0%, rgba(18,16,26,.7) 100%); } } .seuils--preuve > .seuil-ligne:last-child { border-bottom: 0; } /* 29.2 « Dernières fiches » : carte claire translucide, code en pastille avant la date. */ .hero__dernieres { background: rgba(242, 240, 246, .94); border: 0; border-top: 3px solid var(--fluo); color: var(--encre); box-shadow: 0 12px 32px rgba(18,16,26,.25); } .hero__voile .conteneur > .hero__dernieres, .hero__dernieres h2 { color: var(--encre); } .hero__derniere-lien { color: var(--encre); } .hero__derniere-lien:hover .hero__derniere-titre { text-decoration: underline; } .hero__derniere-meta { display: inline-flex; align-items: center; gap: 6px; } .hero__derniere-date { color: var(--encre-2); } .pastille-code { display: inline-block; font-family: var(--font-titre); font-weight: 800; font-size: 11px; line-height: 1; letter-spacing: .04em; padding: 3px 6px; border-radius: 999px; background: var(--fluo); color: var(--encre-fixe); } /* 29.3 8e tuile : la carte des spots. */ .activite-tuile--carte { background: var(--feuille); border: 1px solid var(--falaise); overflow: hidden; } .activite-tuile__carte { position: absolute; inset: 12px 12px 64px; width: calc(100% - 24px); height: calc(100% - 76px); } .activite-tuile__carte path { fill: var(--sur-roche-2); stroke: var(--feuille); stroke-width: 2; } .activite-tuile__carte circle { fill: var(--roche); stroke: var(--fluo); stroke-width: 4; } .activite-tuile--carte .activite-tuile__voile { position: relative; background: var(--roche); } .activite-tuile--carte:hover .activite-tuile__voile { background: var(--encre-fixe); box-shadow: inset 0 -4px 0 var(--fluo); } .activite-tuile--carte .activite-tuile__nombre { color: var(--papier-fixe); } /* 29.4 Compteurs de /carte/ à 390 : les 3 sur une ligne, sans filet. */ @media (max-width: 480px) { .hero--carte .seuils--preuve { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .hero--carte .seuils--preuve .seuil-ligne { border: 0; } .hero--carte .seuils--preuve .seuil-ligne__libelle { font-size: 11px; } } /* 29.5 8e tuile à 390 : la carte était rognée (légende plus haute que prévu) → carte et légende en colonne. */ .activite-tuile--carte { flex-direction: column; align-items: stretch; } .activite-tuile--carte .activite-tuile__carte { position: static; inset: auto; flex: 1 1 auto; min-height: 0; width: 100%; height: auto; padding: 10px; box-sizing: border-box; } .activite-tuile--carte .activite-tuile__voile { flex: none; } @media (max-width: 599px) { .activite-tuile--carte .activite-tuile__voile { padding: 10px 12px; } .activite-tuile--carte .activite-tuile__nom { font-size: 15px; } .activite-tuile--carte .activite-tuile__nombre { font-size: 12px; } } /* 29.6 La carte SVG ne rétrécissait pas (hauteur tirée de son viewBox) : base 0, elle prend la place restante et s'y ajuste. */ .activite-tuile--carte .activite-tuile__carte { flex: 1 1 0; height: 0; } /* ========================================================================= 30. PASSE 5 (15/09, retours Mathias RE-0161 à RE-0167) ========================================================================= */ /* 30.1 Carte d'accueil : la carte remplit sa colonne, régions et spots à côté, plus de marges vides. */ .bande--carte-accueil { padding-block: 48px; } .carte-accueil { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: stretch; } @media (min-width: 1024px) { .carte-accueil { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; } } #carte .carte-accueil__carte { margin-top: 0; padding: 12px; display: flex; flex-direction: column; justify-content: center; } #carte .carte-france-svg { max-height: none; width: 100%; } #carte .carte-france .carte-legende { margin-top: 4px; font-size: 13px; } .carte-accueil__cote { display: flex; flex-direction: column; min-width: 0; } .carte-accueil__surtitre { margin: 0; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--encre-2); } .carte-accueil__titre { margin: 4px 0 8px; } .carte-accueil__chapo { margin: 0 0 16px; color: var(--encre-2); } .carte-accueil__regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .carte-region { background: var(--feuille); border: 1px solid var(--falaise); border-left: 4px solid var(--sur-roche-2); padding: 10px 12px; transition: border-color .15s, background-color .15s; } .carte-region.est-survolee { border-left-color: var(--fluo); background: #fff; } .carte-region__nom { margin: 0 0 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--font-titre); font-size: 15px; line-height: 1.15; text-transform: uppercase; letter-spacing: .03em; color: var(--encre); } .carte-region__nb { flex: none; font-variant-numeric: tabular-nums; color: var(--encre-2); } .carte-region__spots { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; line-height: 1.3; } .carte-region__spots a { color: var(--encre); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .carte-region__spots a:hover { text-decoration: underline; } .carte-region__spots .pastille-code { font-size: 10px; padding: 2px 5px; } .carte-accueil__action { margin: 16px 0 0; } .carte-france-svg .terre.est-survolee { fill: var(--encre-2); } @media (max-width: 599px) { .bande--carte-accueil { padding-block: 32px; } .carte-accueil__regions { grid-template-columns: minmax(0, 1fr); } .carte-accueil__action .btn { width: 100%; text-align: center; } } /* 30.2 « Dernières fiches » : grille stricte, vignette 64×64, titre (2 lignes réservées) puis pastille + date, alignés en haut. */ .hero__derniere-lien { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; } .hero__derniere-vignette { display: block; width: 64px; height: 64px; overflow: hidden; background: var(--falaise); } .hero__derniere-vignette .diptyque__img, .hero__derniere-vignette img, .hero__derniere-vignette svg { display: block; width: 64px; height: 64px; min-width: 0; object-fit: cover; } .hero__derniere-texte { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; min-width: 0; } .hero__derniere-titre { margin: 0; font-size: 14px; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hero__derniere-meta { display: flex; align-items: center; gap: 6px; line-height: 1; min-height: 17px; } /* 30.3 Pied : colonnes courtes (6 liens au plus), plus de libellés tronqués. */ @media (min-width: 1024px) { .pied__grille.pied__grille--p5 { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; } } @media (min-width: 600px) and (max-width: 1023px) { .pied__grille.pied__grille--p5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied__grille--p5 .pied__colonne--marque { grid-column: 1 / -1; } } .pied__grille--p5 li a { white-space: normal; overflow: visible; text-overflow: clip; } @media (max-width: 599px) { .pied__grille.pied__grille--p5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } .pied__grille--p5 .pied__colonne--marque { grid-column: 1 / -1; } } /* 30.4 Fiche spot : une seule photo pleine largeur quand il n'y a pas de 2e vraie photo. */ .diptyque--seule { grid-template-columns: minmax(0, 1fr); } .diptyque--seule .diptyque__img { height: 300px; } @media (min-width: 1024px) { .diptyque--seule .diptyque__img { height: 440px; } } /* 30.5 Mini-carte de fiche spot : fond clair, région du spot en valeur, épingle à halo et étiquette. */ .spot-mini-carte { background: var(--feuille); color: var(--encre); border: 1px solid var(--falaise); padding: 20px; margin: 32px 0; } .carte-spot { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: center; } @media (min-width: 700px) { .carte-spot { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; } } .carte-spot__svg { display: block; width: 100%; height: auto; } .carte-spot__svg .terre { fill: var(--falaise); stroke: var(--feuille); stroke-width: 1.6; stroke-linejoin: round; } .carte-spot__svg .terre--active { fill: var(--sur-roche-2); stroke: var(--roche); stroke-width: 2.4; } .carte-spot__autre circle { fill: var(--encre-2); opacity: .45; } .carte-spot__autre:hover circle { opacity: .9; } .carte-spot__halo-ext { fill: var(--fluo); opacity: .22; } .carte-spot__halo { fill: var(--fluo); opacity: .45; } .carte-spot__disque { fill: var(--roche); stroke: var(--fluo); stroke-width: 5; } .carte-spot__coeur { fill: var(--fluo); } .carte-spot__etiquette rect { fill: var(--roche); } .carte-spot__etiquette text { fill: var(--papier-fixe); font-family: var(--font-titre); font-weight: 700; letter-spacing: .02em; } .carte-spot__surtitre { margin: 0; font-family: var(--font-titre); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--encre-2); } .carte-spot__titre { margin: 4px 0 8px; font-size: clamp(26px, 3vw, 34px); } .carte-spot__region { margin: 0 0 16px; display: flex; align-items: center; gap: 8px; color: var(--encre); } .carte-spot__pastille { flex: none; width: 14px; height: 14px; background: var(--sur-roche-2); border: 2px solid var(--roche); } .carte-spot__voisins-titre { margin: 0 0 6px; font-size: 14px; color: var(--encre-2); } .carte-spot__voisins { margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 15px; } .carte-spot__voisins a { color: var(--encre); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .carte-spot__voisins a:hover { text-decoration: underline; } .carte-spot__action { margin: 0; } .carte-spot__action .btn--filet { color: var(--encre); } /* 30.6 Pub maison RDV Spécialiste (colonne latérale, après les modules) — identité propre à l'annonceur. */ .pub-rdv { margin-top: 20px; } .fiche-sidebar__pub { align-self: stretch; } .fiche-sidebar__pub .pub-rdv { margin-top: 0; } .pub-rdv__lien { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; text-decoration: none; background: #F5F8F7; color: #14323F; border: 1px solid #C9DAD6; border-left: 4px solid #D9603B; padding: 12px; } .pub-rdv__img { display: block; width: 92px; height: 92px; object-fit: cover; } .pub-rdv__corps { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .pub-rdv__kicker { font-size: 10px; line-height: 1; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #9EDDD0; color: #14323F; border-radius: 999px; padding: 3px 8px; } .pub-rdv__titre { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 16px; line-height: 1.22; color: #14323F; } .pub-rdv__cta { background: #B5432B; color: #fff; font-weight: 700; font-size: 14px; line-height: 1.1; border-radius: 999px; padding: 8px 14px; } .pub-rdv__disc { font-size: 11px; color: #14323F; opacity: .75; } .pub-rdv__lien:hover .pub-rdv__cta, .pub-rdv__lien:focus-visible .pub-rdv__cta { background: #14323F; } /* 30.7 Après captures passe 5 : carte plus large, pub d'article sans l'ancien cadre pointillé ni capitales. */ @media (min-width: 1024px) { .carte-accueil { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } } .carte-region__plus { font-size: 13px; color: var(--encre-2) !important; text-decoration: underline !important; } .fiche-sidebar__pub { border: 0; padding: 0; font-size: inherit; text-transform: none; letter-spacing: normal; text-align: left; color: inherit; } .pub-rdv, .pub-rdv * { text-transform: none; letter-spacing: normal; text-align: left; } .pub-rdv .pub-rdv__kicker { text-transform: uppercase; letter-spacing: .04em; } .pub-rdv .pub-rdv__cta { text-align: center; }