/* ============================================================ Jeu Old El Paso « Animez vos soirées ! » Couleurs XD : jaune #FFED00 / #FFDD00, rouge #AD2E30 / #AE0F0A / #C10330, rouge foncé #801417 / #A0251A, violet #4E2397, encre #343434, marron #5C3327, vert #097874 ============================================================ */ /* ── Polices ── Roobert Heavy : récupérée du projet doonys. Modesto Condensed Bold : fournie par le graphiste (Adobe Fonts) — porte les gros titres. Le reste du site est en Roboto (Google Fonts, chargée dans le ). */ @font-face { font-family: 'Roobert'; src: url('../fonts/roobertheavy-webfont.woff2') format('woff2'), url('../fonts/roobertheavy-webfont.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Modesto Condensed'; src: url('../fonts/modesto-condensed-bold.woff2') format('woff2'), url('../fonts/modesto-condensed-bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } :root { --jaune: #FFED00; --jaune-fonce: #FFDD00; --rouge: #AD2E30; --rouge-vif: #AE0F0A; --rouge-bandeau: #C10330; --rouge-fonce: #801417; --rouge-menu: #A0251A; --violet: #4E2397; --encre: #343434; --marron: #5C3327; --vert: #097874; --font-titre: 'Modesto Condensed', 'Arial Narrow', sans-serif; /* Modesto Condensed intégrée : facteur d'échelle neutre. */ --fs-titre: 1; --font-texte: 'Roboto', Arial, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Barre de défilement toujours réservée : évite le décalage horizontal du contenu quand la hauteur de page change (ex. apparition du message d'erreur du formulaire) */ html { overflow-y: scroll; } body { font-family: var(--font-texte); color: var(--encre); background: #7FBBBC; min-height: 100vh; display: flex; flex-direction: column; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; } img { max-width: 100%; height: auto; } a { color: inherit; } /* ── Header : bande jaune de 209px, toit par-dessus, logo à cheval ── */ .header { position: relative; background: var(--jaune) url('../img/yellow-bg-and-texture.jpg') center / cover; height: 209px; z-index: 5; } .header__roof { position: absolute; top: 0; left: 0; right: 0; height: 100px; background: url('../img/roof.png') center bottom / cover no-repeat; pointer-events: none; z-index: 2; } .header__logo { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); z-index: 3; } .header__logo img { width: 362px; } .header__nav { position: absolute; top: 124px; display: flex; /* Gap fluide : 48px au design (≥1280px), resserré à 20px vers le basculement mobile */ gap: clamp(20px, 7.4vw - 46px, 48px); z-index: 1; } /* Offset fluide : 167px au design (≥1280px), rapproché des bords (24px) vers 900px pour que les menus ne chevauchent jamais le logo central (362px) sur desktop. */ .header__nav--left { left: clamp(24px, 37.7vw - 316px, 167px); } .header__nav--right { right: clamp(24px, 37.7vw - 316px, 167px); } .header__nav a { font-family: var(--font-titre); font-size: calc(31px * var(--fs-titre)); line-height: 1; color: var(--rouge-vif); text-decoration: none; text-transform: capitalize; } .header__nav a:hover { text-decoration: underline; } .header__burger { display: none; } /* ── Menu mobile plein écran ── */ .menu-mobile { position: fixed; inset: 0; z-index: 50; background: var(--jaune) url('../img/yellow-bg-and-texture.jpg') center / cover; padding: 40px 36px; } .menu-mobile__fermer { position: absolute; top: 44px; right: 36px; background: none; border: 0; font-family: 'Modesto Poster', var(--font-titre); font-size: calc(18px * var(--fs-titre)); color: var(--rouge-menu); text-transform: uppercase; cursor: pointer; } .menu-mobile__croix { display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin-left: 8px; position: relative; } .menu-mobile__croix::before, .menu-mobile__croix::after { content: ''; position: absolute; top: 9px; left: -2px; width: 26px; height: 4px; border-radius: 4px; background: var(--rouge-menu); } .menu-mobile__croix::before { transform: rotate(45deg); } .menu-mobile__croix::after { transform: rotate(-45deg); } .menu-mobile__nav { margin-top: 90px; display: flex; flex-direction: column; gap: 34px; } .menu-mobile__nav a { font-family: 'Modesto Poster', var(--font-titre); font-size: calc(28px * var(--fs-titre)); color: var(--rouge-menu); text-decoration: none; text-transform: uppercase; } .menu-mobile__legal { margin-top: 70px; display: flex; flex-direction: column; gap: 18px; } .menu-mobile__legal a { font-family: 'Modesto Text', var(--font-texte); font-size: 17px; font-weight: 700; color: var(--rouge-menu); text-decoration: none; } /* ── Boutons ── */ .bt { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-titre); font-size: calc(43px * var(--fs-titre)); line-height: 1; color: var(--jaune); background: var(--rouge); border: 3px solid #FFFFFF; text-decoration: none; text-transform: uppercase; height: 60px; padding: 0 40px; cursor: pointer; } .bt:hover { background: var(--rouge-fonce); } /* ── Fond / Hero ── Décor par défaut (form, contact, etc.) : soleil sans accroche. Fond mint identique au champ du soleil (#88C8C8) pour combler le haut transparent. */ .main { flex: 1; position: relative; background: #88C8C8 url('../img/bg-def-notxt2.jpg') top center / 100% auto no-repeat; } /* ── HP : soleil seul (fond .main par défaut) + accroche « Animez vos soirées ! » ── L'accroche (titre-home.png = bande jaune pleine largeur + bannière déchirée) est posée par-dessus le header via ::after et déborde en bas pour chevaucher le soleil. Le header conserve son jaune plein cadre (donc il s'étire sur toute la largeur) ; l'accroche est plafonnée à 1280px centré pour rester alignée sur le hero et ne pas percuter « À GAGNER » en écran large (au-delà de 1280, le jaune du header prend le relais). */ body.page-home .header::after, body.page-merci .header::after, body.page-termine .header::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 348px; /* Largeur FIXE sur desktop : l'accroche garde toujours la même taille et reste calée sur le logo (centré) même quand la fenêtre passe sous 1280px (elle est alors rognée sur les côtés, mais le jaune plein cadre du header prend le relais). */ background: url('../img/titre-home.png') top center / 1280px auto no-repeat; z-index: 0; pointer-events: none; } .hero { position: relative; max-width: 1280px; margin: 0 auto; min-height: 575px; } /* Positions issues de l'artboard 01-HP (origine = haut du main, soit y-169 de l'artboard) */ .hero__titres { position: absolute; left: 50%; top: 144px; transform: translateX(-50%); text-align: center; font-family: var(--font-titre); color: var(--jaune); font-weight: 700; z-index: 2; } .hero__a-gagner { font-size: calc(93px * var(--fs-titre)); line-height: 1; text-transform: uppercase; } .hero__magasin { font-size: calc(34px * var(--fs-titre)); line-height: 1.1; text-transform: uppercase; } .hero__lot { font-size: calc(70px * var(--fs-titre)); line-height: 1; text-transform: uppercase; margin-top: 32px; } /* Les 3 lignes de titre sont désormais une image (texte-home.png) au lieu de texte */ .hero__titres-img { display: block; width: 292px; margin: 0 auto; } .hero__titres .bt { margin-top: 42px; } .hero__enceinte { position: absolute; left: 800px; top: 160px; z-index: 2; } .hero__enceinte img { width: 240px; } .hero__non-contractuel { position: absolute; left: -46px; bottom: 96px; font-size: 8px; color: var(--encre); transform: rotate(-90deg); } .hero__plat { position: absolute; z-index: 1; pointer-events: none; } .hero__plat--1 { left: 116px; top: 99px; width: 211px; } .hero__plat--2 { left: 267px; top: 315px; width: 184px; } .hero__note { position: absolute; z-index: 1; pointer-events: none; } .hero__note--1 { left: 5px; top: 20px; width: 128px; } .hero__note--2 { right: 134px; top: 318px; width: 117px; } /* ── Bandeaux titres (formulaire) ── */ .titre-bandeau { display: table; margin: 40px auto 0; font-family: var(--font-titre); font-size: calc(39px * var(--fs-titre)); font-weight: 700; color: var(--rouge); background: var(--jaune) url('../img/yellow-bg-and-texture.jpg') center / cover; padding: 8px 28px; text-transform: uppercase; } .titre-bandeau--petit { font-size: calc(26px * var(--fs-titre)); } /* ── Formulaire ── */ .form-page { max-width: 1080px; margin: 0 auto; padding: 0 20px 60px; position: relative; } /* Titre principal géré en image (titre + forme jaune) */ /* Collé au header : marge négative → le haut de la forme jaune passe sous le header, pas de teal visible entre les deux jaunes */ .titre-formulaire { position: relative; z-index: 1; margin: -4px 0 6px; text-align: center; line-height: 0; } .titre-formulaire img { display: inline-block; width: 594px; max-width: 100%; height: auto; } /* Sous-titres de section : rouge Modesto, SANS fond jaune, centrés sur une ligne */ .form-legend { display: block; width: 100%; margin: 0 0 26px; text-align: center; white-space: nowrap; font-family: var(--font-titre); font-size: calc(26px * var(--fs-titre)); font-weight: 700; color: var(--rouge); text-transform: uppercase; } .formulaire { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 90px; margin-top: 10px; } .formulaire__bloc { border: 0; width: 270px; } .formulaire__bloc--justificatifs { width: 360px; } .champ { margin-bottom: 9px; } .champ input, .champ select { width: 100%; height: 40px; border: 2px solid var(--rouge); border-radius: 4px; background: #FFFFFF; font-family: var(--font-texte); font-size: 15px; font-weight: 500; color: var(--rouge-vif); padding: 0 14px; appearance: none; } .champ input::placeholder { color: #8c8c8c; opacity: 1; } /* Select : placeholder gris tant qu'aucune option valide n'est choisie, valeur en rouge ensuite */ .champ select:invalid { color: #8c8c8c; } .champ select option { color: var(--rouge-vif); } .champ select option[value=""] { color: #8c8c8c; } .champ input:focus, .champ select:focus { outline: 2px solid var(--violet); outline-offset: 1px; } .champ--select { position: relative; } .champ--select::after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #321B58; pointer-events: none; } /* Erreur : fond rosé + bordure rouge vif comme signal ; libellés en gris foncé TOUJOURS lisibles (pas de rouge-sur-rouge). Aucun outline → pas de décalage. */ .champ.error input, .champ.error select { border-color: var(--rouge-vif); background: #FCE4E2; color: #333333; } .champ.error input::placeholder { color: #333333; opacity: 1; } .champ.error select:invalid { color: #333333; } /* Bouton d'upload (déjà rouge) : on garde le texte jaune lisible, signal = anneau rouge vif */ .upload.error .bt--upload { box-shadow: 0 0 0 3px var(--rouge-vif); } /* Case : bordure + léger anneau rouge, libellé inchangé donc lisible */ .case.error input { border-color: var(--rouge-vif); box-shadow: 0 0 0 2px rgba(174, 15, 10, 0.30); } .formulaire__consigne { font-weight: 700; font-size: 16px; margin-bottom: 22px; } .uploads { display: flex; gap: 40px; margin-bottom: 30px; align-items: flex-start; } .upload { text-align: center; position: relative; } /* Zone image à hauteur fixe, contenu calé en bas → les 2 boutons s'alignent horizontalement */ .upload__media { height: 110px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 12px; } .upload__picto { display: block; height: 76px; width: auto; } /* ticket ISO XD : 60×76 */ .upload__picto--ticket { transform: rotate(11deg); } /* inclinaison XD du ticket */ .upload__picto--produits { height: 110px; } /* 3 produits (doc/produits.png) : 163×110 */ .upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .bt--upload { font-family: var(--font-texte); font-size: 14px; font-weight: 700; height: 31px; padding: 0 18px; border-width: 2px; text-transform: none; } .upload__nom { display: block; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--encre); } .selects-jeu { display: flex; gap: 20px; margin-bottom: 26px; } .selects-jeu .champ { flex: 1; margin: 0; } .cases { display: flex; flex-direction: column; gap: 12px; } .case { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 12px; font-weight: 500; color: var(--encre); cursor: pointer; } .case a { color: var(--rouge-vif); text-decoration: underline; } .case input { appearance: none; width: 18px; height: 18px; border: 2px solid var(--rouge); border-radius: 2px; background: #FFFFFF; cursor: pointer; margin: 0; } .case input:checked { background: var(--rouge); box-shadow: inset 0 0 0 3px #FFFFFF; } .formulaire__obligatoire { margin-top: 16px; font-size: 12px; color: var(--encre); } .formulaire__erreur-globale { width: 100%; text-align: center; color: var(--rouge-vif); font-weight: 700; margin: 20px 0 0; min-height: 1.2em; /* réserve la ligne : la place existe même sans message */ } /* Toujours présent dans le flux (flex) même caché → l'apparition du message ne reflow plus les colonnes ni la hauteur de page. On ne bascule que la visibilité. */ .formulaire__erreur-globale[hidden] { display: block; visibility: hidden; } /* Bouton dans un conteneur pleine largeur qui le centre, à l'abri de l'élément injecté par le reCAPTCHA (qui, en frère flex direct, le décalait via le column-gap) */ .formulaire__submit { width: 100%; display: flex; justify-content: center; margin-top: 30px; } .bt--valider { margin: 0; } /* ── Pages message (merci / deja / termine / preview / contact) ── */ .message { position: relative; max-width: 1280px; margin: 0 auto; text-align: center; padding: 60px 20px 120px; } .message__titre { font-family: var(--font-titre); font-size: calc(116px * var(--fs-titre)); font-weight: 700; color: var(--jaune); text-transform: lowercase; line-height: 1; } .message__titre--contact { text-transform: none; font-size: calc(90px * var(--fs-titre)); } .message__sous-titre { font-family: var(--font-titre); font-size: calc(42px * var(--fs-titre)); font-weight: 700; color: var(--jaune); line-height: 1.1; text-transform: uppercase; margin-top: 10px; } .message__sous-titre--fin { font-size: calc(56px * var(--fs-titre)); margin-top: 40px; } .message__accent { font-family: var(--font-titre); font-size: calc(39px * var(--fs-titre)); font-weight: 700; color: var(--rouge-fonce); line-height: 1.15; margin-top: 40px; } .message__note { font-size: 16px; font-weight: 700; margin-top: 26px; } .message .bt { margin-top: 34px; } .message__social { display: flex; justify-content: center; gap: 24px; margin-top: 30px; color: var(--rouge); } .message__social a { display: inline-flex; } .message__social svg { height: 34px; width: auto; } /* ── Pages Merci (03-Validation) & Fin (04-Fin) : « Animez vos soirées » sous le logo ── Contenu dans une colonne étroite CENTRÉE ; les plats sont posés en absolu sur les BORDS et clippés par overflow → le texte ne chevauche jamais les images, jusqu'au mobile. */ .message--merci, .message--fin { overflow: hidden; padding-top: 180px; padding-bottom: 90px; } .message--fin .message__sous-titre--fin { margin-top: 0; } .message__contenu { position: relative; z-index: 2; max-width: 500px; margin: 0 auto; } .message__merci { display: block; width: 320px; max-width: 100%; height: auto; margin: 0 auto; } .message--merci .message__accent { margin-top: 26px; } .message--merci .message__note { margin-top: 18px; } .message--merci .bt { margin-top: 30px; } /* Plats décoratifs sur les bords. Les left/right suivent une clamp() : à 1280px ils sont proches du texte, puis GLISSENT vers le bord (jusqu'en négatif = partiellement hors-champ) quand la fenêtre rétrécit → la colonne de texte centrée n'est jamais recouverte. */ .message__deco { position: absolute; z-index: 1; pointer-events: none; user-select: none; } .message__deco--notes { left: 12px; top: 158px; width: 116px; } .message__deco--plat-g { top: 190px; width: 236px; left: clamp(-40px, calc(15.8vw - 182px), 20px); } .message__deco--plat-d { top: 330px; width: 210px; right: clamp(-40px, calc(18.4vw - 206px), 30px); } /* ── Footer ── */ .footer { margin-top: auto; } .footer__bandeau { position: relative; /* Silhouette cactus/mesa en bas de l'image. Taille fixe (900px) alignée en bas : révèle la mesa (montagne) + les cactus quelle que soit la largeur ; les côtés au-delà sont comblés par --rouge-bandeau (= couleur de fond de l'image) sans raccord. */ background: var(--rouge-bandeau) url('../img/bg-footer.jpg') center bottom / 900px auto no-repeat; min-height: 96px; display: flex; align-items: center; justify-content: space-between; padding: 9px 65px; } .footer__logo { width: 132px; } /* Libellé « Suivez-nous sur » AU-DESSUS, pictos en ligne dessous (flex-basis:100% sur le libellé force le retour à la ligne, sans wrapper HTML). */ .footer__social { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px 16px; color: #FFFFFF; } .footer__social span { flex-basis: 100%; text-align: left; font-size: 12px; font-weight: 700; color: var(--jaune-fonce); text-transform: uppercase; } .footer__social a { display: inline-flex; color: #FFFFFF; } /* Hauteur optique commune, largeur auto (viewBox recadré sur chaque glyphe) → pictos homogènes */ .footer__social svg { height: 32px; width: auto; } .footer__icons { display: flex; align-items: center; gap: 16px; } .footer__mentions { background: #FFFFFF; padding: 18px 75px 24px; } .footer__copyright { font-family: var(--font-texte); font-size: 12px; color: var(--marron); margin-bottom: 12px; } .footer__liens { display: flex; flex-wrap: wrap; gap: 10px 26px; } .footer__liens a, .footer__liens span { font-family: var(--font-texte); font-size: 12px; font-weight: 600; color: var(--vert); } /* ============================================================ INTERMÉDIAIRE (901–1200px) : plats/notes plaqués vers les bords de l'écran et réduits, pour libérer la zone .hero__titres ============================================================ */ @media (max-width: 1200px) { .hero__plat--1 { left: 8px; top: 99px; width: 180px; } .hero__plat--2 { left: 92px; top: 320px; width: 152px; } .hero__note--1 { left: 0; top: 24px; width: 106px; } .hero__note--2 { right: 8px; top: 320px; width: 98px; } /* Enceinte : reste ancrée à droite (continu avec le desktop à 1200px = 160px du bord) et rétrécit doucement de 240px à 190px, au lieu de déborder puis sauter à 179px. */ .hero__enceinte { left: auto; right: clamp(12px, 49.33vw - 432px, 160px); top: 160px; } .hero__enceinte img { width: clamp(190px, 20vw, 240px); } } /* ============================================================ MOBILE (maquette 430px) ============================================================ */ @media (max-width: 900px) { /* Fond soleil mobile SANS accroche (l'accroche jaune est posée par le ::after ci-dessous). Zoomé (540px) pour des rayons de soleil plus gros, comme sur le XD. */ .main { background-image: url('../img/bg-mobile.jpg'); background-size: 540px auto; background-position: top center; } /* Le Form mobile utilise le même fond sunburst turquoise que les autres pages (iso XD) */ .header { height: 157px; } /* Accroche « Animez vos soirées ! » format mobile (bande jaune + éclaboussure) posée sur le header et débordant sous celui-ci sur le soleil, derrière le toit (z-index 2) et le logo (3). Calage vertical : la transition jaune→éclaboussure de l'image tombe PILE au bas du header (157px) → bande jaune sur jaune au-dessus, bords turquoise sur le soleil en dessous, aucune délimitation vert/bleu visible. Image agrandie (755px) pour un texte d'accroche ~380px. */ body.page-home .header::after, body.page-merci .header::after, body.page-termine .header::after { display: block; height: 280px; background: url('../img/accroche-mobile.png') center -15px / 660px auto no-repeat; } .header__roof { height: 94px; } .header__logo { top: 72px; } .header__logo img { width: 240px; } .header__nav { display: none; } .header__burger { display: flex; flex-direction: column; gap: 4px; position: absolute; top: 117px; right: 28px; background: none; border: 0; cursor: pointer; z-index: 3; } .header__burger span { width: 27px; height: 4px; border-radius: 2px; background: var(--rouge-vif); } html, body { overflow-x: hidden; } /* les plats/notes débordent volontairement du cadre */ .hero { min-height: 900px; } /* Zone titres légèrement décalée à droite (cf. XD), sans toucher l'enceinte. */ .hero__titres { top: 105px; width: 64%; transform: none; left: 32px; } /* L'image des titres est calée sur la moitié gauche (cf. XD mobile), alignée à gauche, pour ne pas déborder sous l'enceinte. */ .hero__titres-img { width: 210px; margin: 0; } .hero__a-gagner { font-size: calc(66px * var(--fs-titre)); } .hero__magasin { font-size: calc(31px * var(--fs-titre)); } .hero__lot { font-size: calc(55px * var(--fs-titre)); margin-top: 14px; } /* CTA centré sur l'écran (et non dans la colonne titres) via calc(50vw), remonté à cheval sur le plat, largeur fixe type XD. */ .hero__titres .bt { position: absolute; /* top relatif à .hero__titres (top:105) → 460 = hero-y 565, à cheval sur le bas du plat. */ top: 460px; left: calc(50vw - 32px); transform: translateX(-50%); margin: 0; width: 320px; font-size: calc(50px * var(--fs-titre)); height: 75px; white-space: nowrap; } .hero__enceinte { left: auto; right: 22px; top: 218px; transform: rotate(9deg); } .hero__enceinte img { width: 179px; } .hero__plat--1 { left: -30px; top: 333px; width: 207px; } .hero__plat--2 { left: auto; right: -40px; top: 595px; width: 201px; } .hero__note--1 { left: auto; right: 66px; top: 100px; width: 93px; } .hero__note--2 { right: 4px; top: 445px; width: 83px; } .form-page { padding-bottom: 40px; } .formulaire { flex-direction: column; gap: 0; align-items: center; } .formulaire__bloc, .formulaire__bloc--justificatifs { width: 100%; max-width: 360px; } /* Uploads mobile ISO XD : 2 lignes empilées, chacune [bouton + nom à gauche | vignette à droite] */ .uploads { flex-direction: column; gap: 20px; margin-bottom: 26px; } .upload { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "btn media" "nom media"; align-items: center; column-gap: 14px; text-align: left; } .upload__media { grid-area: media; height: auto; margin: 0; } .upload__picto { height: auto; max-height: 82px; width: auto; max-width: 120px; } .upload__picto--produits { height: auto; max-height: 82px; } .bt--upload { grid-area: btn; justify-self: start; } .upload__nom { grid-area: nom; justify-self: start; margin-top: 6px; } .selects-jeu { flex-direction: column; gap: 9px; } .message__titre { font-size: calc(80px * var(--fs-titre)); } .message__sous-titre { font-size: calc(34px * var(--fs-titre)); } .message__sous-titre--fin { font-size: calc(44px * var(--fs-titre)); } .message__accent { font-size: calc(30px * var(--fs-titre)); } /* Pages Merci & Fin mobile : bannière « Animez vos soirées » format mobile → padding-top réduit ; pas de plats (le XD mobile n'en a pas), seulement les notes ; image merci plus petite. */ .message--merci, .message--fin { padding-top: 150px; } .message__merci { width: 208px; } .message__deco--plat-g, .message__deco--plat-d { display: none; } .message__deco--notes { left: 6px; top: 94px; width: 70px; } /* CTA mobile : plus compact (cf. XD mobile ~32px), tient sur une seule ligne */ .message--merci .bt { font-size: calc(28px * var(--fs-titre)); height: 54px; padding: 0 22px; white-space: nowrap; } /* Footer mobile calé sur le XD : logo à gauche, cactus visible dans l'espace à droite du logo, bloc social poussé à droite. Le fond est recadré (720px) et positionné pour amener le cactus juste à droite du logo. */ .footer__bandeau { padding: 9px 16px; background-size: 720px auto; background-position: 62px bottom; min-height: 104px; } .footer__logo { width: 112px; } /* Bloc social réduit à son contenu (libellé + rangée d'icônes groupées) et aligné à droite → séparé nettement du logo (calé à gauche via le space-between du bandeau), le cactus apparaissant dans l'espace entre les deux. */ .footer__social { flex-direction: column; align-items: flex-start; gap: 6px; width: max-content; } .footer__social span { flex-basis: auto; font-size: 11px; text-align: left; } .footer__icons { gap: 14px; } .footer__mentions { padding: 18px 16px 24px; } .footer__liens { gap: 8px 18px; } }