/** * overrides.css — ajustements finaux appliqués par-dessus tous les autres * fichiers (styles.css, ads-video.css, partners.css, top-dynamic.css, * dynamic-enhanced.css, hero-dynamic.css, mission.css). * * Ce fichier fusionne ce qui était auparavant deux fichiers séparés * (« final-polish.css » et « reference-overrides.css ») chargés l'un après * l'autre. Ils patchaient tous les deux les mêmes composants (le logo, le * menu, le pied de page…) à des moments différents, ce qui rendait très * difficile de savoir quelle règle l'emportait réellement en cas de * conflit — c'est exactement ce qui a causé le bug du logo du pied de page * coupé sur mobile. En les réunissant ici, dans le même ordre qu'avant * (rien n'a changé dans l'ordre des règles), tout le comportement visuel * reste identique, mais il n'y a plus qu'un seul endroit où chercher. * * Organisation interne (conservée dans l'ordre d'origine, ne pas réordonner * sans vérifier chaque écran : certaines règles ne se départagent que par * leur ordre d'apparition ici) : * 1. Anciennement « final-polish.css » : logo, menu/sous-menu Filières, * bannière événement, carte des prix compacte, régions, pied de page * (mise en page), formulaire newsletter, fiches pratiques, article. * 2. Anciennement « reference-overrides.css » : bouton Contactez-nous, * seuils de bascule du menu ☰, cartes « à la une », réseaux sociaux, * bloc témoignage plein cadre. */ /* Empêche tout défilement horizontal du site : sur certains navigateurs */ /* mobiles (Safari iOS notamment), "overflow-x:hidden" posé seulement sur */ /* ne suffit pas si un élément dépasse la largeur de l'écran — la */ /* page reste alors décalable horizontalement (ce qui coupait le logo et */ /* les autres blocs du pied de page en version mobile). Il faut donc le */ /* poser sur , qui est l'élément réellement scrollable sur mobile. */ /* IMPORTANT : ce réglage ne doit être posé QUE sur , pas aussi sur */ /* — les deux ensemble annulent totalement le "position:sticky" */ /* de tous les éléments collants du site (en-tête, bande des rubriques), */ /* qui cessent alors de rester visibles au défilement, sur tous les */ /* navigateurs. "max-width:100%" sur reste sans risque. */ html{overflow-x:hidden} body{max-width:100%} .skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 16px;font-weight:700;transition:top .2s} .skip-link:focus{top:12px} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px} .brand{flex:0 0 auto} .brand>img{width:190px;height:auto;max-height:none;aspect-ratio:760/267;object-fit:contain} .hero,.section,.video-section,.market-section,.regions,.mission-section,.partners-section{scroll-margin-top:105px} /* Le menu principal reste entre le logo et le bouton Contactez-nous : */ /* « Filière agricole » et « Filière animale » sont regroupées en sous- */ /* rubriques d'un seul item « Filières » (menu déroulant au survol sur */ /* ordinateur, au tapotement sur mobile), ce qui ramène le menu à huit */ /* items visibles et l'aide à tenir sur une seule ligne le plus largement */ /* possible avant de basculer sur le menu ☰. Le seuil de bascule est */ /* abaissé à 1080px (au lieu de 1200px) et la taille du texte/les */ /* espacements varient en continu avec la largeur d'écran (au lieu de */ /* deux paliers fixes), pour que le menu reste lisible et bien rempli */ /* même sur les écrans Windows avec une mise à l'échelle d'affichage */ /* (125 %, 150 %…) qui réduit la largeur utile en dessous de 1200px. */ @media(min-width:1081px){ .topbar-inner{gap:clamp(14px,0.95vw + 3.7px,22px)} .main-nav{gap:clamp(12px,0.95vw + 1.7px,20px);font-size:clamp(13px,0.25vw + 10.4px,15px)} .main-nav a,.nav-parent{white-space:nowrap} } @media(min-width:1081px) and (max-width:1420px){ .brand>img{width:150px} } /* Menu déroulant « Filières » : reprend exactement le style des liens du */ /* menu (même hauteur de zone cliquable, même style au survol/actif). */ .nav-item{position:relative;display:flex;align-items:center} .nav-parent{display:inline-flex;align-items:center;gap:5px;background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:31px 0 27px;border-bottom:3px solid transparent} .nav-parent:hover,.nav-item.open .nav-parent,.nav-item:focus-within .nav-parent,.nav-parent.active{color:var(--green);border-color:var(--gold)} .nav-dropdown a.active{background:var(--green-light);color:var(--green)} .nav-caret{font-size:.7em;line-height:1;transition:transform .2s ease} .nav-item:hover .nav-caret,.nav-item.open .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(180deg)} @media(min-width:1081px){ .nav-dropdown{position:absolute;top:100%;left:0;min-width:200px;margin-top:-3px;background:#fff;border-radius:8px;box-shadow:0 16px 34px rgba(6,30,18,.16);padding:8px;display:none;flex-direction:column;z-index:30} .nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown,.nav-item.open .nav-dropdown{display:flex} .nav-dropdown a{display:block;padding:11px 13px!important;margin:0!important;border:0!important;border-radius:5px;font-size:.86rem;white-space:nowrap;color:var(--ink)} .nav-dropdown a:hover{background:var(--green-light);color:var(--green)} } @media(max-width:1080px){ .nav-item{width:100%;flex-direction:column;align-items:stretch} .nav-parent{width:100%;justify-content:space-between;padding:13px 0;border-bottom:0} .nav-dropdown{display:none;flex-direction:column;padding:0 0 8px 16px} .nav-item.open .nav-dropdown{display:flex} .nav-item.open .nav-parent{color:var(--green)} .nav-dropdown a{padding:11px 0!important;width:auto!important;color:#4b5a51} } .hero h1{white-space:pre-line} /* Bannière événement animée, affichée sous l’en-tête quand elle est activée */ /* et qu’un titre d’événement est renseigné. Zoom lent de la photo de fond et */ /* pastille clignotante, avec repli statique pour le mouvement réduit. */ .event-banner{position:relative;overflow:hidden;min-height:172px;display:flex;align-items:center;background:var(--green-deep);color:#fff} .event-banner-media{position:absolute;inset:0} .event-banner-media img{width:100%;height:100%;object-fit:cover;animation:lpf-event-zoom 16s ease-in-out infinite alternate} .event-banner-media:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(4,20,13,.93) 0%,rgba(4,20,13,.8) 38%,rgba(4,20,13,.4) 72%,rgba(4,20,13,.15) 100%)} .event-banner-inner{position:relative;z-index:2;padding:24px 0;display:flex;align-items:center;gap:20px;flex-wrap:wrap;width:100%} .event-banner-label{display:inline-flex;align-items:center;gap:8px;font:700 .66rem var(--sans);letter-spacing:.14em;color:var(--gold);flex:0 0 auto} .event-banner-label i{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:lpf-event-pulse 1.7s ease-in-out infinite} .event-banner h2{margin:0;font:700 1.4rem var(--serif);flex:0 1 auto} .event-banner-meta{margin:0;font-size:.78rem;color:#d8e6dc;flex:0 0 auto;white-space:nowrap} .event-banner-summary{margin:0;font-size:.84rem;line-height:1.5;color:#c9dbcf;max-width:420px;flex:1 1 260px} .event-banner-action{margin-left:auto;flex:0 0 auto;background:var(--gold);color:var(--ink);font-weight:700;font-size:.78rem;padding:11px 18px;white-space:nowrap;transition:transform .2s ease} .event-banner-action:hover{transform:translateY(-2px)} @keyframes lpf-event-zoom{from{transform:scale(1)}to{transform:scale(1.12)}} @keyframes lpf-event-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.5)}} @media(prefers-reduced-motion:reduce){.event-banner-media img{animation:none}.event-banner-label i{animation:none}} @media(max-width:700px){ .event-banner{min-height:0} .event-banner-inner{flex-direction:column;align-items:flex-start;padding:22px 0;gap:10px} .event-banner-action{margin-left:0} } .market-more,.section-text-button,.advice-grid button{border:0;background:none;padding:0;cursor:pointer} .market-more{display:block;margin:18px 27px 23px;color:var(--green);font-weight:700;font-size:.84rem} .market-card-compact{max-width:420px;width:100%;margin-inline:auto;border-radius:10px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.14)} .market-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 0} .market-card-title{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)} .market-city-picker select{appearance:none;padding:5px 26px 5px 12px;border:1px solid var(--line);border-radius:20px;background:#f6f8f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23637068' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;background-size:9px;font-size:.76rem;font-weight:700;color:var(--green-deep);cursor:pointer;max-width:150px} .market-city-note{display:block;margin:5px 18px 0;font-size:.64rem;color:var(--muted);min-height:14px} .market-card-compact .market-table{padding:2px 18px 0} .market-card-compact .market-table .table-head{display:none} .market-card-compact .market-table>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)} .market-card-compact .market-table>div:last-child{border-bottom:0} .market-card-compact .market-table div>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .market-card-compact .market-table b{font-size:.82rem;font-weight:700;color:var(--ink)} .market-card-compact .market-table small{font-size:.64rem;color:var(--muted)} .market-card-compact .market-table strong{font-size:.82rem;font-weight:700;white-space:nowrap} .market-card-compact .market-table em{font-style:normal;font-size:.64rem;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap} .market-card-compact .market-table em.up{color:#0d7a3f;background:#e5f5ea} .market-card-compact .market-table em.down{color:#b3311f;background:#fbe7e4} .market-card-compact .market-table em.flat{color:#5f6a63;background:#eef1ee} .market-card-compact .market-link{margin:14px 18px 18px;font-size:.76rem} @media(max-width:600px){ .market-card-compact{max-width:100%} .market-card-head{flex-wrap:wrap} } .section-text-button{color:var(--green);font-size:.88rem;font-weight:700;border-bottom:1px solid var(--green)} .advice-grid button{font-size:.8rem;color:var(--green);font-weight:700} .region-links button{font:700 1.8rem var(--serif);padding:28px 20px 28px 0;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;text-align:left;color:var(--ink)} .region-links button:hover{color:var(--green)} .region-links button:nth-child(odd){border-right:1px solid var(--line);padding-right:32px} .region-links button:nth-child(even){padding-left:32px} .region-links button span{font:500 .72rem var(--sans);color:var(--muted)} .footer-grid>div:not(:first-child)>button{display:block;border:0;background:none;padding:0;cursor:pointer;font-size:.82rem;margin:9px 0;color:#b5c5bb} .footer-grid>div:not(:first-child)>a:hover,.footer-grid>div:not(:first-child)>button:hover{color:white} .socials a{display:grid!important;margin:0!important;color:#d7e2db!important} .socials a:hover{border-color:var(--gold);color:var(--gold)!important} .footer-address{margin:17px 0 0;color:#80978a;font-size:.72rem;line-height:1.7} .footer-address a{color:#b5c5bb} .search-results{display:grid;gap:8px;margin-top:22px;max-height:300px;overflow:auto} .search-results:empty{display:none} .search-result{display:block;padding:12px 14px;border:1px solid var(--line);background:#f8faf8} .search-result:hover{border-color:var(--green);background:var(--green-light)} .search-result strong{display:block;font-size:.9rem;color:var(--green-deep)} .search-result small{margin-top:2px;font-size:.69rem;text-transform:uppercase;letter-spacing:.08em} .search-empty{margin:0;padding:14px;background:#f5f7f4;color:var(--muted);font-size:.85rem} .search-highlight{animation:search-flash 1.8s ease} .form-message.is-error{color:#ffe0db} @keyframes search-flash{0%,45%{box-shadow:0 0 0 5px rgba(255,196,0,.72)}100%{box-shadow:0 0 0 0 rgba(255,196,0,0)}} @media(max-width:900px){ .main-nav{align-items:stretch} .region-links button:nth-child(n){border-right:0;padding-left:0;padding-right:0} } @media(max-width:600px){ .brand>img{width:150px} .section-text-button{display:none} .region-links button{font-size:1.35rem;flex-direction:column;align-items:flex-start;gap:3px;width:100%} .hero h1{font-size:clamp(2.45rem,12vw,3.35rem)} } @media(max-width:380px){ .topbar-inner{gap:14px} /* Remarque : pas de règle de largeur du logo ici. Une règle voulait fixer 142px à cette taille d'écran, mais elle n'a jamais eu d'effet : la règle plus bas dans ce fichier (à 420px, 132px) s'applique aussi à 380px et l'emporte car elle vient après. On la retire pour ne pas laisser une règle qui donne l'illusion d'agir sans jamais s'appliquer ; l'affichage réel (132px) ne change pas. */ } @media(prefers-reduced-motion:reduce){.search-highlight{animation:none}} /* Taille de titre d’article identique partout sur la Une (carte « une », */ /* carte standard, carte « feature » et panneau « Dernières actualités »). */ .feature .story-body h3{font-size:1.45rem} .latest h2{font-size:1.45rem;line-height:1.15} .news-line h3{font-size:1.45rem;font-weight:700;line-height:1.15} /* Le bandeau « à la une » garde une hauteur strictement fixe : chaque photo */ /* de la Une s’adapte à cet espace (recadrage automatique) au lieu de faire */ /* varier la taille du bloc au fil du défilement. Sur ordinateur, le bloc ne */ /* dépendait que du contenu du panneau « Dernières actualités » voisin ; on */ /* fixe ici la même hauteur que celle déjà utilisée en dessous de 900px. */ @media(min-width:901px){ .hero-story{height:600px} .latest{overflow:hidden} } /* Espaces réduits entre les grands blocs de la page d’accueil. */ .hero{margin-top:22px} .stats-band{margin-top:22px} .section{padding-block:56px} .section-heading{margin-bottom:24px} .market-section{padding:54px 0} /* La carte des prix est compacte : la colonne qui la contient s’ajuste à sa */ /* propre largeur au lieu de lui réserver une bande deux fois trop large, ce */ /* qui laissait un grand vide entre le texte et la carte. */ @media(min-width:901px){ .market-layout{grid-template-columns:1fr minmax(320px,420px);gap:48px;align-items:start} } /* Le texte est plus court que la carte des prix : centré verticalement sur */ /* toute la hauteur de la rangée, il laissait un grand vide vert au-dessus. */ /* Aligné en haut, il démarre à la même hauteur que l’en-tête de la carte. */ .market-intro{max-width:520px} .regions{padding-bottom:64px} /* La bannière vidéo garde la priorité mais laisse plus de place à la */ /* vignette publicitaire à côté, qui était trop étroite. La bannière fine */ /* au-dessus (photo pleine largeur) gagne aussi en hauteur : elle paraissait */ /* écrasée par rapport aux autres blocs de la page. */ @media(min-width:901px){ .video-layout{grid-template-columns:minmax(0,1fr) 400px} } .encart-bandeau{min-height:190px} @media(max-width:600px){ .encart-bandeau{min-height:150px} } .newsletter{padding:46px 0} .newsletter-inner{gap:44px} .footer{padding:42px 0 20px} .footer-grid{gap:40px} /* La colonne « Rubriques » compte désormais neuf liens : présentés sur deux */ /* colonnes, ils restent compacts au lieu d’étirer le pied de page en hauteur. */ @media(min-width:901px){ .footer-grid{grid-template-columns:2fr 1.5fr 1fr 1fr} } @media(min-width:901px){ .footer-sections h3{text-align:center} } .footer-sections-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px} @media(min-width:901px){ .footer-sections-grid{grid-template-columns:repeat(2,max-content);justify-content:center;column-gap:32px} } .footer-sections-grid a{display:block;font-size:.82rem;margin:6px 0;color:#b5c5bb} .footer-sections-grid a:hover{color:#fff} @media(max-width:600px){ .footer-sections-grid{grid-template-columns:1fr} } .copyright{margin-top:30px;padding-top:16px} /* Bande des logos partenaires : défilement continu de droite à gauche au */ /* lieu d’une grille statique, avec pause au survol/focus pour rester */ /* consultable et cliquable, et jusqu’à dix emplacements administrables. */ .partner-marquee{position:relative;overflow:hidden} .partner-marquee:before,.partner-marquee:after{content:"";position:absolute;top:0;bottom:0;width:64px;z-index:2;pointer-events:none} .partner-marquee:before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))} .partner-marquee:after{right:0;background:linear-gradient(270deg,#f7faf7,rgba(247,250,247,0))} .partner-logos.partner-track{display:flex;flex-wrap:nowrap;width:max-content;gap:16px;animation:lpf-partner-scroll 34s linear infinite} .partner-logos.partner-track .partner-logo{flex:0 0 210px} .partner-marquee:hover .partner-track,.partner-marquee:focus-within .partner-track{animation-play-state:paused} @keyframes lpf-partner-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.partner-logos.partner-track{animation:none}} @media(max-width:600px){ .partner-logos.partner-track .partner-logo{flex-basis:158px} } .partner-logos.partner-track .partner-logo:last-child{max-width:none;justify-self:auto} @media(max-width:600px){ .hero{margin-top:16px} .stats-band{margin-top:16px} .section{padding-block:40px} .market-section{padding:38px 0} .regions{padding-bottom:44px} .newsletter{padding:34px 0} .footer{padding:34px 0 16px} } /* Le logo du pied de page (sur fond blanc) affichait par endroits un */ /* encadré blanc fantôme qui débordait derrière le logo sur mobile : la */ /* carte blanche se redimensionnait après le chargement de l'image, ce */ /* que certains navigateurs mobiles n'effaçaient pas proprement au */ /* nouvel affichage. On avait alors figé la carte avec overflow:hidden + */ /* isolation + transform, mais cette combinaison pouvait, sur certains */ /* navigateurs mobiles, créer un calque de taille incorrecte avant que */ /* l'image ne soit mesurée, ce qui rognait le haut/bas du logo. On réserve */ /* désormais la place exacte dès le premier rendu via aspect-ratio, sans */ /* aucun découpage : l'image ne peut plus jamais être coupée. */ .footer .brand.inverted{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:max-content !important; overflow:visible !important; isolation:auto !important; transform:none !important; height:auto !important; } .footer .brand.inverted>img{ display:block !important; width:205px !important; height:auto !important; max-width:none !important; max-height:none !important; min-height:0 !important; aspect-ratio:760/267 !important; object-fit:contain !important; object-position:center !important; } @media(max-width:600px){ .footer .brand.inverted>img{width:168px !important} } @media(max-width:380px){ .footer .brand.inverted>img{width:150px !important} } /* Formulaire newsletter : ajout des champs Prénom / Nom au-dessus de */ /* l'adresse e-mail, et survol du bouton « Je m'abonne » repris du même */ /* vert que le bouton Contactez-nous de l'en-tête. */ .input-row-names{gap:14px;margin-bottom:14px} .input-row-names .input-field{flex:1;min-width:0} .input-row-names input{width:100%;padding:17px;border:0;min-width:0} .input-row button{appearance:none;-webkit-appearance:none;transition:background .2s ease,color .2s ease} .input-row button:hover, .input-row button:focus-visible{background:var(--green-deep);color:#fff} @media(max-width:600px){ .input-row-names{flex-direction:column;gap:10px} } /* Fiches pratiques : la grille passe de 3 à 6 fiches (deux rangées de */ /* trois). « article:last-child » ne suffit plus à retirer la bordure de */ /* droite de la 3e colonne de la première rangée ; on cible désormais */ /* chaque fin de rangée avec « nth-child(3n) » et on sépare les deux */ /* rangées par une bordure haute sur ordinateur et tablette. */ @media(min-width:701px){ .advice-grid article:nth-child(3n){border-right:0} .advice-grid article:nth-child(n+4){border-top:1px solid var(--line)} } /* Page d'un article individuel : même en-tête et même pied de page que le */ /* reste du site (voir lpf_render_site_header()/lpf_render_site_footer()). */ /* La typographie des titres et du texte reprend les règles déjà */ /* définies dans global.css (body.single-post ...) ; les règles ci-dessous */ /* ne gèrent que la mise en page (espacements, largeur de lecture, image */ /* de une), pas la police ni la taille du texte. */ .lpf-single-article-header{padding:44px 0 4px} .lpf-single-article-header .lpf-kicker{display:block;margin-bottom:14px} .lpf-single-article-header h1.entry-title{margin:0} .lpf-single-meta{margin:18px 0 0;color:var(--muted);font-size:.82rem} .lpf-single-media{margin:32px auto 8px;max-width:900px} .lpf-single-media img{width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:4px} .lpf-single-article .entry-content{max-width:760px;margin:0 auto;padding:32px 0 56px} @media(max-width:600px){ .lpf-single-article-header{padding:28px 0 4px} .lpf-single-media{margin-top:22px} } .lpf-reference-home { margin: 0 !important; } .lpf-reference-home #wpadminbar { font-family: Arial, sans-serif; } .contact-button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 13px; background: var(--gold); color: var(--green-deep); font-size: .74rem; font-weight: 700; line-height: 1; white-space: nowrap; } .contact-button:hover, .contact-button:focus-visible { background: var(--green-deep); color: #fff; } .admin-bar .topbar { top: 32px; } /* Seuil de bascule vers le menu ☰ abaissé à 1080px (au lieu de 1200px) : */ /* certains ordinateurs Windows avec une mise à l'échelle d'affichage */ /* (125 %, 150 %…) ont une largeur utile réduite même en plein écran, et */ /* tombaient dans le menu ☰ alors qu'il y avait la place pour le menu */ /* complet. Voir aussi plus haut dans ce fichier (section « Anciennement */ /* final-polish.css ») pour le même seuil sur le menu déroulant « Filières » */ /* et la taille de texte du menu. */ @media (max-width: 1080px) { .topbar-inner { gap: 20px; } .menu-button { display: block; order: 3; } .search-button span { display: none; } .main-nav { position: absolute; left: 0; right: 0; top: 88px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 20px; background: #fff; box-shadow: 0 12px 25px rgba(0, 0, 0, .12); } .main-nav.open { display: flex; } .main-nav a { width: 100%; padding: 13px 0; } } @media (max-width: 900px) { .topbar-inner { gap: 20px; } .main-nav { top: 74px; } .contact-button { min-height: 34px; padding-inline: 11px; } } @media (max-width: 782px) { .admin-bar .topbar { top: 46px; } } @media (max-width: 600px) { .topbar-inner { gap: 12px; } .contact-button { padding-inline: 9px; font-size: .68rem; } } @media (max-width: 420px) { .topbar-inner { gap: 4px; } .brand > img { width: 132px; } .search-button { display: none; } } .story-card { display: block; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .story-card > img { height: 276px; object-fit: cover; transition: transform .35s ease; } .story-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0, 72, 39, .11); } .story-card:hover > img { transform: scale(1.035); } .socials a, .socials .social-disabled { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent !important; border-radius: 50%; color: #fff !important; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } .socials svg { display: block; width: 17px; height: 17px; fill: currentColor; } .socials a:hover, .socials a:focus-visible { transform: translateY(-2px); border-color: rgba(255,255,255,.72) !important; color: #fff !important; filter: brightness(1.12); } .socials .social-disabled { cursor: help; opacity: .68; } .socials .social-facebook { background: #1877f2 !important; } .socials .social-whatsapp { background: #25d366 !important; } .socials .social-linkedin { background: #0a66c2 !important; } .socials .social-x { background: #000 !important; } .socials .social-youtube { background: #ff0000 !important; } .footer-follow { display: flex; flex-direction: column; align-items: center; text-align: center; } .footer-follow .socials { justify-content: center; } .footer-follow .footer-address { width: 100%; text-align: center; } /* Les numéros purement décoratifs n'apportent aucune information éditoriale. */ .encart-numero, .advice-no { display: none !important; } .encart-scene { gap: 0; } /* Témoignage en photo plein cadre avec voile de lisibilité et citation superposée. */ .voices { position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: center; background: var(--green-deep); padding: 0; } .voices-media { position: absolute; inset: 0; } .voices-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; } .voices-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(4, 20, 13, .94) 0%, rgba(4, 20, 13, .86) 30%, rgba(4, 20, 13, .42) 58%, rgba(4, 20, 13, .05) 80%); } .voices-media-placeholder { background: linear-gradient(100deg, rgba(4, 20, 13, .94) 0%, rgba(4, 20, 13, .8) 60%); } .voices-inner { position: relative; z-index: 2; padding: 46px 0; } .voices-heading { max-width: 620px; margin-bottom: 22px; } .voices-heading .eyebrow.light { display: block; } .voices-heading h2 { margin: 8px 0 0; color: #fff; font: 700 clamp(1.9rem, 3.2vw, 2.6rem) / 1.1 var(--serif); } .voices-heading p { margin: 10px 0 0; max-width: 540px; color: #bcd0c1; font-size: .92rem; line-height: 1.55; } .voices blockquote { margin: 0; max-width: 680px; } .voices blockquote p { margin: 0; color: #fff; font: 600 clamp(2.3rem, 3.6vw, 3.15rem) / 1.28 var(--serif); } .voices blockquote p .qmark { color: var(--gold); font-family: var(--serif); font-weight: 700; font-size: 1.35em; line-height: 0; position: relative; top: .14em; } .qmark.open { margin-right: .06em; } .qmark.close { margin-left: .06em; } .voice-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 26px; padding-left: 20px; border-left: 2px solid var(--gold); } .voice-footer strong { display: block; color: #fff; font: 700 .95rem var(--sans); } .voice-footer span { display: block; color: #bcd0c1; font-size: .82rem; font-family: var(--sans); } .voice-footer .voice-function { margin-top: 2px; } .voice-footer .voice-address { color: #8fa998; font-size: .76rem; } @media (max-width: 900px) { .voices { min-height: 480px; } } @media (max-width: 700px) { .story-card > img { height: 225px; } .voices { min-height: 460px; align-items: flex-end; } .voices-media::after { background: linear-gradient(180deg, rgba(4, 20, 13, .05) 0%, rgba(4, 20, 13, .55) 45%, rgba(4, 20, 13, .95) 100%); } .voices-inner { padding: 0 0 30px; } .voices blockquote p { font-size: 1.9rem; } } .lpf-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}