/* emmanuelderrien.fr — charte « Nocturne éditorial » (handoff Claude design, août 2026). Bleu nuit, typographie massive Archivo, accents Instrument Serif italique, ambre #fbbf24 en accent rare, métadonnées JetBrains Mono. Angles vifs partout, boutons en pilule. Les polices sont chargées par Google Fonts dans le . */ :root { --nuit-950: #0b1120; --nuit-900: #0f172a; --nuit-850: #111a2e; --bleu-800: #1e3a8a; --bleu-600: #2563eb; --ambre: #fbbf24; --ambre-clair: #fcd34d; --texte-2: rgba(255,255,255,0.66); --texte-3: rgba(255,255,255,0.6); --texte-faible: rgba(255,255,255,0.5); --bordure: rgba(255,255,255,0.09); --bordure-carte: rgba(255,255,255,0.14); --max: 1280px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--nuit-950); color: #fff; font-family: Archivo, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; } h1, h2, h3 { color: #fff; } a { color: var(--ambre); text-decoration: none; } a:hover { color: #fff; } a:focus-visible, button:focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } em, .serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -0.01em; } .mono { font-family: "JetBrains Mono", Consolas, monospace; } /* ── Navigation ── */ .entete { position: sticky; top: 0; z-index: 50; background: var(--nuit-950); border-bottom: 1px solid var(--bordure); transition: background 200ms ease; } .entete.roulee { background: rgba(11,17,32,0.85); backdrop-filter: blur(12px); } .nav { max-width: var(--max); margin: 0 auto; padding: 22px 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .marque { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: #fff; } .marque:hover { color: #fff; } .marque-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; } .marque-texte { display: flex; flex-direction: column; line-height: 1.25; } .marque-texte small { font-size: 11px; font-weight: 500; color: var(--texte-faible); letter-spacing: 0.02em; } .liens { display: flex; gap: 34px; list-style: none; align-items: center; } .liens a { color: rgba(255,255,255,0.72); font-size: 14px; position: relative; } .liens a:hover { color: #fff; } .liens a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--ambre); } .cta-nav { background: var(--ambre); color: var(--nuit-950) !important; font-weight: 700; padding: 11px 20px; border-radius: 100px; transition: background 200ms ease, transform 200ms ease; } .cta-nav:hover { background: var(--ambre-clair); transform: translateY(-1px); } .cta-nav:hover::after { display: none; } .burger { display: none; font-size: 26px; background: none; border: none; cursor: pointer; color: #fff; min-height: 44px; min-width: 44px; } /* ── Héros ── */ .heros { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 620px; } .heros-texte { padding: 72px 56px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; } .eyebrow { display: flex; align-items: center; gap: 10px; font-family: "JetBrains Mono", monospace; font-size: 14px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ambre); margin-bottom: 26px; } .eyebrow .puce { width: 6px; height: 6px; border-radius: 50%; background: var(--ambre); display: block; } .heros h1 { font-size: 82px; line-height: 0.92; font-weight: 800; letter-spacing: -0.035em; margin-bottom: 26px; } .heros h1 em { font-size: inherit; } /* Accroche du heros : premier message lu, il doit crédibiliser d'emblee — texte plus lumineux, chiffres en ambre gras (Emmanuel, 05/09) */ .heros-accroche { max-width: 470px; font-size: 20px; line-height: 1.55; color: rgba(255,255,255,0.88); text-wrap: pretty; margin-bottom: 26px; } .heros-accroche strong { color: var(--ambre); font-weight: 700; } .heros-accroche em { font-size: 1.15em; } .heros-boutons { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 6px; } .bouton { display: inline-block; font-size: 15px; font-weight: 700; padding: 15px 26px; border-radius: 100px; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; text-align: center; } .bouton-blanc { background: #fff; color: var(--nuit-950); } .bouton-blanc:hover { background: var(--ambre); color: var(--nuit-950); } .bouton-contour { border: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.9); font-weight: 600; } .bouton-contour:hover { border-color: #fff; background: rgba(255,255,255,0.06); color: #fff; } .bouton-ambre { background: var(--ambre); color: var(--nuit-950); font-size: 16px; padding: 17px 30px; } .bouton-ambre:hover { background: var(--ambre-clair); color: var(--nuit-950); transform: translateY(-1px); } .chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 26px; } .chiffres strong { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; } .chiffres strong span { color: var(--ambre); } .chiffres small { display: block; font-size: 12px; color: var(--texte-faible); line-height: 1.4; margin-top: 4px; } /* Composition du heros inspiree du site actuel d'Emmanuel (04/09) : deux medaillons ronds qui se chevauchent (portrait + salle de conference) et des touches decoratives arrondies, aux couleurs Nocturne. */ .heros-image { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 36px 32px; background: var(--nuit-950); } /* Composition legerement plus haute que large : la petite bulle vit au-dessus de la grande et ne fait que l'effleurer (retour Emmanuel : « elle mange la grosse, remonte-la »). */ .composition { position: relative; width: 100%; max-width: 500px; margin: 0 auto; aspect-ratio: 1 / 1.15; } .rond-scene { position: absolute; right: 0; bottom: 0; width: 82%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--bordure-carte); } .rond-scene .diapo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1200ms ease; } .rond-scene .diapo.actif { opacity: 1; } /* Petite bulle : mini-diaporama a son propre rythme (les cadrages par photo sont portes en style inline, visage toujours dans le cercle). */ .rond-portrait { position: absolute; left: 2%; top: 0; width: 42%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 5px solid var(--nuit-950); box-shadow: 0 12px 30px rgba(0,0,0,0.4); z-index: 2; } .rond-portrait .diapo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1200ms ease; } .rond-portrait .diapo.actif { opacity: 1; } .deco-rayures { position: absolute; right: 3%; top: 1%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: repeating-linear-gradient(45deg, var(--ambre) 0 6px, transparent 6px 16px); opacity: 0.5; } .deco-bulle { position: absolute; left: 7%; bottom: 9%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--bleu-600); opacity: 0.55; } /* Les trois temoignages du site actuel tournent dans la meme carte (empiles dans la meme cellule de grille : la carte garde la hauteur du plus long). */ .temoignage { background: var(--nuit-850); border: 1px solid var(--bordure-carte); padding: 20px 22px; border-radius: 16px; display: grid; } .temoignage .temoin { grid-area: 1 / 1; opacity: 0; transition: opacity 900ms ease; } .temoignage .temoin.actif { opacity: 1; } .temoignage blockquote { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 22px; line-height: 1.35; color: #fff; } .temoignage figcaption { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ambre); margin-top: 12px; } /* ── Bandeau logos ── */ .defile { border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); padding: 26px 0; overflow: hidden; } .defile-piste { display: flex; gap: 34px; width: max-content; align-items: center; animation: edmarquee 32s linear infinite; } .defile:hover .defile-piste { animation-play-state: paused; } /* Logos en couleurs sur pastilles blanches TOUTES IDENTIQUES (180x76) : chaque logo est agrandi au maximum dans sa boite (object-fit contain) — fini la disparite entre logos larges, carres ou a petit texte (Emmanuel, 05/09). */ .defile-piste img { width: 180px; height: 76px; object-fit: contain; background: #fff; padding: 12px 20px; border-radius: 14px; box-sizing: border-box; } @keyframes edmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .defile-piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .apparait { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── Sections ── */ .bloc { max-width: var(--max); margin: 0 auto; padding: 76px 56px; } .bloc-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; } .bloc h2, .bloc h1.titre-liste { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; max-width: 600px; } .compteur { font-family: "JetBrains Mono", monospace; font-size: 12px; color: rgba(255,255,255,0.45); white-space: nowrap; } .chapo { font-size: 18px; line-height: 1.55; color: var(--texte-2); max-width: 620px; margin: 14px 0 40px; } /* ── Cartes formats ── */ .formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .format { display: block; background: var(--nuit-850); border: 1px solid var(--bordure); overflow: hidden; color: #fff; transition: border-color 400ms ease; } .format:hover { border-color: rgba(251,191,36,0.45); color: #fff; } .format > img { width: 100%; height: 190px; object-fit: cover; transition: transform 400ms ease; } .format:hover > img { transform: scale(1.03); } .format-corps { padding: 26px 24px 30px; display: flex; flex-direction: column; gap: 12px; } /* Kickers des cartes formats : orange, gras, bien visibles (Emmanuel, 05/09) */ .format-corps .kicker { font-size: 17px; font-weight: 800; color: #f97316; letter-spacing: 0.09em; } /* Mots mis en avant dans les titres de section — l'italique serif est plus gros que le texte blanc (Emmanuel, 05/09 : « acte doit être plus gros ») */ .or { color: #f97316; } .bloc h2 em.or { font-size: 1.3em; line-height: 1; } .kicker { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ambre); } .format-corps h3 { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; } .format-corps p { font-size: 15px; line-height: 1.6; color: var(--texte-3); } /* ── Grille de vignettes (interventions, articles) ── */ .grille-vignettes { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .grille-vignettes.quatre { grid-template-columns: repeat(4, 1fr); gap: 18px; } .grille-vignettes.quatre .vignette-titre { font-size: 14.5px; } .grille-vignettes a { display: block; height: 100%; background: var(--nuit-850); border: 1px solid var(--bordure); overflow: hidden; color: #fff; transition: border-color 400ms ease; } .grille-vignettes a:hover { border-color: rgba(251,191,36,0.45); color: #fff; } .grille-vignettes img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .vignette-vide { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--nuit-900), var(--bleu-800)); color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } .vignette-texte { display: block; padding: 18px 20px 22px; } .vignette-texte .date { display: block; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ambre); margin-bottom: 8px; } .vignette-titre { display: block; font-weight: 600; font-size: 16px; line-height: 1.45; letter-spacing: -0.01em; } .vignette-extrait { display: block; font-size: 13.5px; color: var(--texte-3); line-height: 1.55; margin-top: 8px; } .vignette-lire { display: block; margin-top: 10px; color: var(--ambre); font-weight: 600; font-size: 13.5px; } .vignette a:hover .vignette-lire { color: var(--ambre-clair); } .lien-suite { margin-top: 32px; font-size: 15px; font-weight: 600; } /* ── Cartes de contenu (page conférences) ── */ .duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .carte-nuit { background: var(--nuit-850); border: 1px solid var(--bordure); padding: 30px 28px; } .carte-nuit h3 { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 4px; } .carte-nuit p { font-size: 15px; line-height: 1.6; color: var(--texte-3); margin-top: 8px; } .puces { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .puces li { color: var(--texte-3); font-size: 15px; line-height: 1.6; padding-left: 18px; position: relative; } .puces li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--ambre); border-radius: 50%; } .puces strong, .carte-nuit strong { color: #fff; } .puces-grandes li { font-size: 17px; } .mini-cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .mini-carte { background: var(--nuit-850); border: 1px solid var(--bordure); padding: 24px 22px; } .mini-carte h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 8px 0 6px; } .mini-carte p { font-size: 14px; color: var(--texte-3); line-height: 1.55; } /* ── FAQ dépliante ── */ .faq { max-width: 820px; } .faq details { border-bottom: 1px solid var(--bordure); } .faq summary { cursor: pointer; font-size: 18px; font-weight: 600; padding: 20px 0; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--ambre); font-weight: 700; flex-shrink: 0; } .faq details[open] summary::after { content: "–"; } .faq .rep { padding: 0 0 22px; color: var(--texte-3); font-size: 15px; line-height: 1.65; } .faq .rep ul { margin: 8px 0 0 18px; } .faq .rep strong { color: #fff; } /* ── Formulaire de contact (envoi vers Supabase, repris du site WordPress) ── */ .formulaire { max-width: 720px; background: var(--nuit-850); border: 1px solid var(--bordure); padding: 34px 32px; position: relative; } .form-ligne { display: flex; gap: 16px; flex-wrap: wrap; } .form-ligne .form-champ { flex: 1; min-width: 200px; } .form-champ { margin-bottom: 18px; } .form-champ > label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: rgba(255,255,255,0.85); } .form-champ label span, .form-legende span { color: var(--ambre); } .form-champ small, .form-legende small { font-weight: 400; color: var(--texte-faible); } .formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=tel], .formulaire input[type=date], .formulaire textarea { width: 100%; padding: 12px 14px; background: var(--nuit-900); border: 1.5px solid var(--bordure-carte); color: #fff; font-size: 15px; font-family: inherit; transition: border-color 150ms ease; } .formulaire input:focus, .formulaire textarea:focus { outline: none; border-color: var(--ambre); box-shadow: 0 0 0 3px rgba(251,191,36,0.15); } .formulaire ::placeholder { color: var(--texte-faible); } .formulaire input[type=date] { color-scheme: dark; } .form-legende { font-size: 13.5px; font-weight: 700; margin: 4px 0 10px; } .form-options { display: grid; gap: 10px; margin-bottom: 18px; } .form-opt { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1.5px solid var(--bordure-carte); cursor: pointer; transition: border-color 150ms ease, background 150ms ease; } .form-opt:hover { border-color: rgba(251,191,36,0.45); } .form-opt input { position: absolute; opacity: 0; width: 0; height: 0; } .form-opt-box { width: 22px; height: 22px; border: 2px solid var(--bordure-carte); flex-shrink: 0; position: relative; transition: all 150ms ease; } .form-opt-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--nuit-950); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform 150ms ease; } .form-opt input:checked ~ .form-opt-box { background: var(--ambre); border-color: var(--ambre); } .form-opt input:checked ~ .form-opt-box::after { transform: rotate(45deg) scale(1); } .form-opt:has(input:checked) { border-color: var(--ambre); background: rgba(251,191,36,0.07); } .form-opt-txt { display: flex; flex-direction: column; line-height: 1.35; } .form-opt-txt b { font-size: 14.5px; } .form-opt-txt small { font-size: 12.5px; color: var(--texte-3); } .form-rgpd label { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; font-weight: 400; line-height: 1.55; color: var(--texte-faible); } .form-rgpd input { width: auto; margin-top: 3px; flex-shrink: 0; accent-color: var(--ambre); } .form-envoyer { width: 100%; border: none; cursor: pointer; font-family: inherit; margin-top: 6px; } .form-envoyer:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .form-msg { margin: 14px 0 0; font-size: 14px; font-weight: 600; text-align: center; } .form-msg.err { color: #f87171; } .form-ok { text-align: center; padding: 40px 20px; } .form-ok h3 { font-size: 24px; margin: 12px 0 8px; } .form-ok p { color: var(--texte-3); font-size: 15px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Photo visible des l'arrivee (calee en haut) et qui accompagne le defilement du long formulaire. Sur mobile : petit format au-dessus du formulaire. */ .contact-duo { display: grid; grid-template-areas: "form photo"; grid-template-columns: minmax(0, 720px) minmax(0, 1fr); gap: 56px; align-items: start; } .contact-duo > .formulaire { grid-area: form; } .contact-photo { grid-area: photo; position: sticky; top: 90px; } .contact-photo img { width: 100%; max-height: calc(100vh - 130px); object-fit: contain; object-position: top; filter: drop-shadow(0 24px 50px rgba(0,0,0,0.45)); } @media (max-width: 899px) { .contact-duo { grid-template-areas: "photo" "form"; grid-template-columns: 1fr; gap: 24px; } .contact-photo { position: static; } .contact-photo img { max-height: 280px; margin: 0 auto; } } /* ── CTA final ── */ .cta-final { max-width: var(--max); margin: 0 auto 56px; padding: 0 56px; } .cta-final-int { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%); padding: 64px 56px; display: flex; align-items: center; justify-content: space-between; gap: 48px; } .cta-final h2 { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 14px; } .cta-final h2 em { font-size: 1.2em; } .cta-avatar { width: 116px; height: 116px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.3); flex-shrink: 0; } .cta-final p { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.78); max-width: 620px; } /* ── Contenu d'article / de page ── */ .contenu { max-width: 760px; margin: 0 auto; padding: 64px 24px 84px; } .contenu h1 { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 18px; } .contenu h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 2.2rem 0 0.8rem; } .contenu h3 { font-size: 21px; font-weight: 700; margin: 1.6rem 0 0.6rem; } .contenu p, .contenu li { color: rgba(255,255,255,0.75); font-size: 17px; line-height: 1.7; } .contenu p { margin-bottom: 1.1rem; } .contenu ul, .contenu ol { margin: 0 0 1.1rem 1.4rem; } .contenu img { margin: 1.4rem 0; } .contenu figure { margin: 1.4rem 0; } .contenu strong { color: #fff; } .fil { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.08em; margin-bottom: 28px; } .meta { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-faible); margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--bordure); } .hero-fiche { width: 100%; margin: 0 0 30px; } /* Boutons de partage en bas de fiche (LinkedIn recupere la photo et le titre) */ .partage { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--bordure); } .bouton-petit { font-size: 14px; padding: 11px 20px; } /* ── Arrondis ── (la charte imposait des angles vifs — assoupli le 04/09 a la demande d'Emmanuel : « formes arrondies », comme son site actuel) */ .grille-vignettes a, .format, .carte-nuit, .mini-carte, .formulaire, .avis-expert { border-radius: 16px; } .cta-final-int { border-radius: 20px; } .hero-fiche, .contenu img { border-radius: 14px; } /* ── Blocs des articles de veille L'EssentIAl ── */ .avis-expert { background: var(--nuit-850); border-left: 3px solid var(--ambre); padding: 22px 24px; margin: 2rem 0; } .avis-expert .kicker { margin-bottom: 10px; } .avis-expert p { margin-bottom: 0.9rem; } .avis-expert p:last-child { margin-bottom: 0; } .sources { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--texte-faible); line-height: 1.8; } .note-lessential { border-top: 1px solid var(--bordure); padding-top: 1.2rem; margin-top: 2rem; font-size: 15px; color: var(--texte-3); } /* ── Pied de page ── */ .pied { border-top: 1px solid var(--bordure); margin-top: 40px; } .pied a { color: rgba(255,255,255,0.7); } .pied a:hover { color: #fff; } .pied-colonnes { max-width: var(--max); margin: 0 auto; padding: 48px 56px 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; font-size: 13px; color: var(--texte-faible); line-height: 1.7; } .pied-titre { font-weight: 700; color: #fff; font-size: 14px; margin-bottom: 8px; } /* ── Apparition au scroll (discret, jamais sur le héros) ── */ .apparait { opacity: 0; transform: translateY(16px); transition: opacity 500ms cubic-bezier(0.22,1,0.36,1), transform 500ms cubic-bezier(0.22,1,0.36,1); } .apparait.visible { opacity: 1; transform: none; } /* ── Responsive ── */ @media (max-width: 1199px) { .heros { grid-template-columns: 1fr 0.7fr; } .heros h1 { font-size: 64px; } } @media (max-width: 1023px) { .formats, .grille-vignettes, .grille-vignettes.quatre { grid-template-columns: repeat(2, 1fr); } .mini-cartes { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 899px) { .nav { padding: 16px 24px; } .burger { display: block; } .liens { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--nuit-950); border-bottom: 1px solid var(--bordure); flex-direction: column; align-items: flex-start; padding: 18px 24px 24px; gap: 20px; } body.menu-ouvert .liens { display: flex; } .heros { grid-template-columns: 1fr; min-height: 0; } .heros-texte { padding: 48px 24px 40px; gap: 40px; } .heros h1 { font-size: 48px; } .heros-image { padding: 0 24px 32px; } .chiffres { grid-template-columns: repeat(2, 1fr); } .bloc { padding: 48px 24px; } .bloc h2, .bloc h1.titre-liste { font-size: 36px; } .bloc-entete { margin-bottom: 28px; } .formats, .grille-vignettes, .grille-vignettes.quatre, .duo, .mini-cartes { grid-template-columns: 1fr; } .cta-final { padding: 0 24px; margin-bottom: 48px; } .cta-final-int { flex-direction: column; align-items: flex-start; padding: 40px 28px; gap: 28px; } .pied-colonnes { grid-template-columns: 1fr; padding: 40px 24px 48px; } .contenu { padding: 40px 24px 64px; } .contenu h1 { font-size: 32px; } } @media (max-width: 599px) { .heros h1 { font-size: 38px; } .heros-boutons { flex-direction: column; align-items: stretch; } .cta-final h2 { font-size: 34px; } }