/* ============================================================= PORTFOLIO — Valentin Elie Thème « Blueprint / Infra » (clair par défaut) + mode sombre Identité : fond quadrillé, bleu, police mono, esprit console ============================================================= */ /* ------------------------------------------------------------- 1. VARIABLES — THÈME CLAIR (par défaut) On change une couleur ici → elle change partout. ------------------------------------------------------------- */ :root { --bg: #f7f9fb; /* fond de page */ --panel: #ffffff; /* fond des cartes/panneaux */ --encre: #0f2540; /* texte principal */ --doux: #5b7088; /* texte secondaire */ --ligne: #cdd9e5; /* traits, bordures */ --grid-dot: #d3dde8; /* points du quadrillage de fond */ --bleu: #1f6feb; /* couleur d'accent */ --bleu-fort: #1559c4; /* accent au survol */ --bleu-clair: #e8f1fe; /* fond bleu très clair */ --bleu-bord: #bcd5fb; /* bordure bleue claire */ --mono: "IBM Plex Mono", monospace; --sans: "IBM Plex Sans", system-ui, sans-serif; --rayon: 6px; --largeur-max: 1080px; --t: 0.25s ease; /* durée de transition standard */ } /* ------------------------------------------------------------- 2. VARIABLES — THÈME SOMBRE Activé quand (géré par le JS). On garde le bleu pour rester cohérent avec ton identité. ------------------------------------------------------------- */ [data-theme="dark"] { --bg: #0a0e14; --panel: #0f141d; --encre: #e6edf3; --doux: #8b98a9; --ligne: #1e2630; --grid-dot: #161d28; --bleu: #58a6ff; --bleu-fort: #79b8ff; --bleu-clair: rgba(88, 166, 255, 0.12); --bleu-bord: #1f3a5f; } /* ------------------------------------------------------------- 3. RÉINITIALISATION & BASES ------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--encre); font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; /* quadrillage de fond (points) */ background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 26px 26px; /* transition douce lors du changement de thème */ transition: background-color var(--t), color var(--t); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .conteneur { width: 100%; max-width: var(--largeur-max); margin: 0 auto; padding: 0 28px; } /* Texte secondaire en bleu, façon annotation mono */ .mono { font-family: var(--mono); } .bleu { color: var(--bleu); } /* ------------------------------------------------------------- 4. BOUTONS (style « invite de commande ») ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.9rem; padding: 13px 24px; border-radius: var(--rayon); cursor: pointer; border: 1.5px solid transparent; transition: var(--t); } .btn-principal { background: var(--bleu); color: #fff; } .btn-principal:hover { background: var(--bleu-fort); transform: translateY(-2px); } .btn-secondaire { border-color: var(--ligne); color: var(--encre); } .btn-secondaire:hover { border-color: var(--bleu); color: var(--bleu); } /* ------------------------------------------------------------- 5. EN-TÊTE / NAVIGATION + MENUS DÉROULANTS ------------------------------------------------------------- */ .entete { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ligne); } .nav { display: flex; align-items: center; justify-content: space-between; height: 66px; } .logo { font-family: var(--mono); font-weight: 600; font-size: 1rem; } .logo b { color: var(--bleu); } .nav-droite { display: flex; align-items: center; gap: 22px; } .nav-liens { display: flex; align-items: center; gap: 28px; list-style: none; } .nav-liens > li { position: relative; } .nav-liens > li > a { font-family: var(--mono); font-size: 0.88rem; color: var(--doux); transition: var(--t); display: inline-flex; align-items: center; gap: 4px; } .nav-liens > li > a:hover, .nav-liens > li > a.actif { color: var(--bleu); } /* petite flèche pour les menus à sous-menu */ .a-sous-menu::after { content: "[+]"; font-size: 0.7rem; color: var(--bleu); } /* --- Sous-menu déroulant --- */ .sous-menu { position: absolute; top: 130%; left: 0; min-width: 210px; background: var(--panel); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: 0 12px 30px rgba(15, 37, 64, 0.12); list-style: none; padding: 6px; /* caché par défaut */ opacity: 0; visibility: hidden; transform: translateY(8px); transition: var(--t); } /* apparaît au survol du parent (et reste visible si on le survole) */ .nav-liens > li:hover .sous-menu, .nav-liens > li:focus-within .sous-menu { opacity: 1; visibility: visible; transform: translateY(0); } .sous-menu a { display: block; font-family: var(--mono); font-size: 0.82rem; color: var(--doux); padding: 10px 12px; border-radius: 4px; transition: var(--t); } .sous-menu a:hover { color: var(--bleu); background: var(--bleu-clair); } .sous-menu a::before { content: "› "; color: var(--bleu); } /* --- Interrupteur de thème (clair/sombre) --- */ .theme-toggle { font-family: var(--mono); font-size: 1rem; background: var(--panel); border: 1px solid var(--ligne); color: var(--encre); width: 40px; height: 40px; border-radius: var(--rayon); cursor: pointer; display: grid; place-items: center; transition: var(--t); } .theme-toggle:hover { border-color: var(--bleu); color: var(--bleu); } /* on affiche la lune en clair, le soleil en sombre */ .theme-toggle .lune { display: inline; } .theme-toggle .soleil { display: none; } [data-theme="dark"] .theme-toggle .lune { display: none; } [data-theme="dark"] .theme-toggle .soleil { display: inline; } /* --- Hamburger (mobile) --- */ .burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; } .burger span { width: 24px; height: 2px; background: var(--encre); transition: var(--t); } /* ------------------------------------------------------------- 6. HÉRO (accueil de page) ------------------------------------------------------------- */ .hero { padding: 80px 0 60px; } .tag-mono { display: inline-block; font-family: var(--mono); font-size: 0.78rem; color: var(--bleu); background: var(--bleu-clair); border: 1px solid var(--bleu-bord); padding: 5px 12px; border-radius: 3px; margin-bottom: 24px; } .hero h1 { font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 600; letter-spacing: -1px; line-height: 1.08; } /* ligne de rôle qui se "tape" avec un curseur clignotant */ .role { font-family: var(--mono); font-size: clamp(1.05rem, 3vw, 1.5rem); color: var(--bleu); margin-top: 14px; min-height: 1.6em; } .curseur { display: inline-block; width: 10px; height: 1.1em; background: var(--bleu); margin-left: 4px; vertical-align: -2px; animation: clignote 1.1s steps(1) infinite; } @keyframes clignote { 50% { opacity: 0; } } .intro { max-width: 600px; margin: 24px 0 0; font-size: 1.08rem; color: var(--doux); } .coord { font-family: var(--mono); font-size: 0.8rem; color: var(--doux); margin-top: 16px; } .hero-btns { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; } /* --- Schéma de nœuds reliés (signature visuelle) --- */ .schema { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 46px 0 0; } .node { font-family: var(--mono); font-size: 0.85rem; border: 1.5px solid var(--encre); background: var(--panel); padding: 13px 18px; border-radius: 4px; } .node.actif { border-color: var(--bleu); color: var(--bleu); box-shadow: 0 0 0 4px var(--bleu-clair); } .lien-h { height: 1.5px; width: 56px; background: var(--encre); } .lien-h.b { background: var(--bleu); } /* ------------------------------------------------------------- 7. SECTIONS + TITRES « commande » ------------------------------------------------------------- */ .section { padding: 64px 0; border-top: 1px solid var(--ligne); scroll-margin-top: 80px; /* pour que l'ancre ne passe pas sous le menu */ } .section-titre { font-family: var(--mono); font-size: 0.9rem; color: var(--doux); margin-bottom: 30px; } .section-titre b { color: var(--bleu); font-weight: 600; } .section-titre h2 { font-family: var(--sans); font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--encre); margin-top: 8px; letter-spacing: -0.5px; } /* ------------------------------------------------------------- 8. MODULES (cartes compétences/domaines) avec coins crochetés ------------------------------------------------------------- */ .grille { display: grid; gap: 16px; } .grille-3 { grid-template-columns: repeat(3, 1fr); } .grille-2 { grid-template-columns: repeat(2, 1fr); } .mod { position: relative; background: var(--panel); border: 1px solid var(--ligne); padding: 26px; transition: var(--t); } .mod:hover { border-color: var(--bleu); transform: translateY(-4px); } /* petits crochets dans deux coins (détail "technique") */ .mod::before, .mod::after { content: ""; position: absolute; width: 10px; height: 10px; border: 1.5px solid var(--bleu); } .mod::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .mod::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .mod .ref { font-family: var(--mono); font-size: 0.76rem; color: var(--bleu); } .mod h3 { font-size: 1.15rem; margin: 8px 0; } .mod p { color: var(--doux); font-size: 0.92rem; } /* ------------------------------------------------------------- 8b. DOMAINES — accordéons dépliables (balise
) Le est l'en-tête cliquable ; le contenu se déplie. ------------------------------------------------------------- */ .domaines { display: flex; flex-direction: column; gap: 14px; } .domaine { background: var(--panel); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; transition: var(--t); } .domaine[open] { border-color: var(--bleu); } .domaine summary { list-style: none; /* enlève la flèche par défaut */ cursor: pointer; padding: 22px 24px; display: flex; align-items: center; gap: 16px; } .domaine summary::-webkit-details-marker { display: none; } /* idem Safari/Chrome */ .domaine summary:hover .d-titre { color: var(--bleu); } .domaine .ref { font-family: var(--mono); font-size: 0.76rem; color: var(--bleu); } .domaine .d-titre { font-size: 1.2rem; font-weight: 600; transition: var(--t); } .domaine .d-desc { color: var(--doux); font-size: 0.9rem; } .domaine .chev { margin-left: auto; color: var(--bleu); transition: var(--t); } .domaine[open] .chev { transform: rotate(180deg); } /* la flèche pivote à l'ouverture */ .domaine-contenu { padding: 0 24px 24px; } .skill-groupe { margin-top: 16px; } .skill-groupe h4 { font-family: var(--mono); font-size: 0.78rem; color: var(--doux); font-weight: 500; margin-bottom: 10px; } .skill-groupe h4::before { content: "# "; color: var(--bleu); } /* Niveaux de maîtrise encodés par le style des badges */ .tag-fort { background: var(--bleu); color: #fff; border-color: var(--bleu); } .tag-notion { color: var(--doux); border-style: dashed; background: transparent; } /* Légende des niveaux */ .legende { display: flex; gap: 20px; flex-wrap: wrap; margin: 16px 0 24px; font-family: var(--mono); font-size: 0.76rem; color: var(--doux); } .legende span { display: inline-flex; align-items: center; gap: 7px; } .legende i { width: 22px; height: 13px; border-radius: 3px; display: inline-block; } .legende .l-fort { background: var(--bleu); } .legende .l-prat { border: 1px solid var(--bleu-bord); background: var(--bleu-clair); } .legende .l-not { border: 1px dashed var(--doux); } /* ------------------------------------------------------------- 9. CARTES PROJET — façon « fenêtre terminal » ------------------------------------------------------------- */ .projet { background: var(--panel); border: 1.5px solid var(--encre); border-radius: var(--rayon); overflow: hidden; transition: var(--t); } .projet:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(15, 37, 64, 0.12); } /* barre de titre avec les 3 pastilles */ .projet-barre { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1.5px solid var(--encre); } .projet-barre i { width: 11px; height: 11px; border-radius: 50%; display: block; } .projet-barre .r { background: #ff5f56; } .projet-barre .y { background: #ffbd2e; } .projet-barre .g { background: #27c93f; } .projet-barre span { margin-left: 8px; font-family: var(--mono); font-size: 0.78rem; color: var(--doux); } /* zone image / aperçu */ .projet-img { position: relative; /* ancre l'image en absolu pour qu'elle ne déborde jamais */ height: 180px; overflow: hidden; background: repeating-linear-gradient(45deg, var(--bleu-clair), var(--bleu-clair) 10px, transparent 10px, transparent 20px); display: grid; place-items: center; font-family: var(--mono); font-size: 0.82rem; color: var(--doux); border-bottom: 1.5px solid var(--ligne); } /* aperçu = vraie image (schéma extrait du PDF) au lieu du placeholder hachuré. L'image est positionnée en absolu et remplit toute la zone de 180px (object-fit: cover = pas de bords blancs, l'aperçu remplit la carte). Comme elle est en absolu + zone clippée (overflow:hidden), elle ne peut jamais déborder sur le

. */ .projet-img.media { background: #fff; } /* si l'aperçu n'existe pas encore (l' se retire en cas d'erreur), on réaffiche le motif « placeholder » au lieu d'un carré blanc vide. */ .projet-img.media:empty { background: repeating-linear-gradient(45deg, var(--bleu-clair), var(--bleu-clair) 10px, transparent 10px, transparent 20px); } .projet-img.media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .projet-corps { padding: 22px; } .projet-corps .ref { font-family: var(--mono); font-size: 0.75rem; color: var(--bleu); } .projet-corps h3 { margin: 6px 0 8px; font-size: 1.2rem; } .projet-corps p { color: var(--doux); font-size: 0.92rem; margin-bottom: 16px; } /* badges de technologies */ .tags { display: flex; gap: 8px; flex-wrap: wrap; } .tag { font-family: var(--mono); font-size: 0.74rem; color: var(--bleu); border: 1px solid var(--bleu-bord); background: var(--bleu-clair); padding: 4px 9px; border-radius: 3px; } /* carte projet « vedette » : pleine largeur + cliquable (renvoie vers une page dédiée) */ .projet-vedette { display: block; } .projet:hover .projet-lien { color: var(--bleu-fort); gap: 12px; } .projet-lien { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--mono); font-size: 0.82rem; color: var(--bleu); transition: var(--t); } /* lien « retour » en bas d'une page détaillée */ .retour { margin-top: 36px; font-family: var(--mono); font-size: 0.85rem; } .retour a { color: var(--bleu); transition: var(--t); } .retour a:hover { color: var(--bleu-fort); } /* sous-titre d'année dans la page projets */ .annee { font-family: var(--mono); font-size: 0.95rem; color: var(--encre); margin: 36px 0 18px; padding-bottom: 8px; border-bottom: 1px dashed var(--ligne); } .annee::before { content: "● "; color: var(--bleu); } /* ------------------------------------------------------------- 10. FRISE / TIMELINE (page parcours) ------------------------------------------------------------- */ .timeline { position: relative; padding-left: 28px; border-left: 2px solid var(--ligne); max-width: 720px; } .timeline-item { position: relative; padding-bottom: 34px; } .timeline-item::before { content: ""; position: absolute; left: -36px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--bleu); border: 3px solid var(--bg); box-shadow: 0 0 0 1.5px var(--bleu); } .timeline-item .date { font-family: var(--mono); font-size: 0.82rem; color: var(--bleu); } .timeline-item h3 { font-size: 1.2rem; margin: 4px 0 4px; } .timeline-item .lieu { font-family: var(--mono); font-size: 0.82rem; color: var(--encre); margin-bottom: 8px; } .timeline-item p { color: var(--doux); } /* ------------------------------------------------------------- 11. CONTACT ------------------------------------------------------------- */ .contact-grille { display: grid; grid-template-columns: 1fr 1.2fr; gap: 44px; align-items: start; } .contact-info { display: flex; flex-direction: column; gap: 14px; } .contact-ligne { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--ligne); padding: 16px 18px; border-radius: var(--rayon); transition: var(--t); } .contact-ligne:hover { border-color: var(--bleu); transform: translateX(4px); } .contact-ligne .ic { font-size: 1.2rem; width: 26px; text-align: center; } .contact-ligne .libelle { font-family: var(--mono); font-size: 0.74rem; color: var(--doux); } .contact-ligne .valeur { font-weight: 500; } .formulaire { background: var(--panel); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 30px; } .champ { margin-bottom: 18px; } .champ label { display: block; font-family: var(--mono); font-size: 0.82rem; color: var(--doux); margin-bottom: 7px; } .champ label::before { content: "> "; color: var(--bleu); } .champ input, .champ textarea { width: 100%; padding: 12px 14px; background: var(--bg); border: 1.5px solid var(--ligne); border-radius: 4px; font-family: var(--sans); font-size: 0.95rem; color: var(--encre); transition: var(--t); } .champ input:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); } .champ textarea { resize: vertical; min-height: 130px; } /* ------------------------------------------------------------- 12. PIED DE PAGE ------------------------------------------------------------- */ .pied { border-top: 1px solid var(--ligne); padding: 40px 0 30px; margin-top: 40px; } .pied-haut { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; } .pied-liens { display: flex; gap: 22px; list-style: none; } .pied-liens a { font-family: var(--mono); font-size: 0.85rem; color: var(--doux); } .pied-liens a:hover { color: var(--bleu); } .pied-bas { margin-top: 24px; font-family: var(--mono); font-size: 0.8rem; color: var(--doux); } /* ------------------------------------------------------------- 13. APPARITION AU DÉFILEMENT ------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } /* une fois l'animation terminée on retire complètement le transform : sinon la carte reste sur une couche GPU et son contenu (texte + aperçu) paraît légèrement flou/pixélisé sur certains écrans. */ .reveal.visible { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } /* ------------------------------------------------------------- 13b. FENÊTRE MODALE « façon OS » S'ouvre au clic sur une étape. Boutons : rouge = fermer, orange = réduire, vert = plein écran. ------------------------------------------------------------- */ /* on bloque le défilement de la page quand une fenêtre est ouverte */ .no-scroll { overflow: hidden; } .fenetre-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 30px; background: rgba(8, 16, 28, 0.55); backdrop-filter: blur(4px); /* caché par défaut */ opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t); } .fenetre-overlay.ouvert { opacity: 1; visibility: visible; } .fenetre { display: flex; flex-direction: column; width: min(900px, 100%); max-height: 86vh; background: var(--panel); border: 1.5px solid var(--encre); border-radius: 9px; overflow: hidden; box-shadow: 0 30px 80px rgba(8, 16, 28, 0.45); /* animation d'ouverture : la fenêtre "zoome" */ transform: scale(0.95) translateY(12px); opacity: 0; transition: transform 0.28s cubic-bezier(.2,.8,.25,1), opacity 0.28s ease, width 0.28s ease, height 0.28s ease, max-height 0.28s ease; } .fenetre-overlay.ouvert .fenetre { transform: none; opacity: 1; } /* barre de titre */ .fenetre-barre { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1.5px solid var(--encre); background: var(--panel); flex-shrink: 0; } .feux { display: flex; gap: 8px; } .feu { width: 13px; height: 13px; border-radius: 50%; border: none; padding: 0; cursor: pointer; display: grid; place-items: center; font-family: var(--mono); font-size: 9px; font-weight: 600; line-height: 1; color: rgba(0, 0, 0, 0.55); } .feu.r { background: #ff5f56; } .feu.y { background: #ffbd2e; } .feu.g { background: #27c93f; } /* on révèle les symboles (× – +) au survol du groupe, comme sur macOS */ .feux:hover .feu.r::after { content: "\00d7"; } .feux:hover .feu.y::after { content: "\2013"; } .feux:hover .feu.g::after { content: "+"; } .fenetre-titre { font-family: var(--mono); font-size: 0.82rem; color: var(--doux); } /* corps défilant */ .fenetre-corps { padding: 32px 36px 40px; overflow-y: auto; } /* --- état PLEIN ÉCRAN (bouton vert) --- */ .fenetre.plein { width: 96vw; max-width: 96vw; max-height: 94vh; height: 94vh; } /* --- état RÉDUIT (bouton orange) : les fenêtres minimisées vont dans un « dock » en bas à gauche (max. 2). Cliquer une pastille la restaure. --- */ .fenetre-dock { position: fixed; left: 16px; bottom: 16px; z-index: 210; /* au-dessus du fond sombre d'une autre fenêtre */ display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; max-width: calc(100vw - 32px); } .fenetre-min { display: flex; align-items: center; gap: 14px; width: 270px; max-width: 78vw; padding: 12px 16px; background: var(--panel); border: 1.5px solid var(--encre); border-radius: 9px; box-shadow: 0 14px 34px rgba(8, 16, 28, 0.28); cursor: pointer; transition: border-color var(--t), transform var(--t); animation: dock-in 0.2s ease; } .fenetre-min:hover { border-color: var(--bleu); transform: translateY(-2px); } .fenetre-min .fenetre-titre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @keyframes dock-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* --- contenu d'une étape (injecté dans le corps) --- */ .fenetre-corps > .doc-tag { display: inline-block; font-family: var(--mono); font-size: 0.76rem; color: var(--bleu); background: var(--bleu-clair); border: 1px solid var(--bleu-bord); padding: 4px 10px; border-radius: 3px; margin-bottom: 16px; } .fenetre-corps h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 600; letter-spacing: -0.5px; margin-bottom: 16px; } .fenetre-corps h3 { font-family: var(--mono); font-size: 1rem; color: var(--bleu); margin: 28px 0 10px; } .fenetre-corps h3::before { content: "// "; color: var(--doux); } /* sous-parties (2.1, 2.2…) : plus discrètes que les parties */ .fenetre-corps h4 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; color: var(--encre); margin: 22px 0 8px; } .fenetre-corps h4::before { content: "› "; color: var(--bleu); } .fenetre-corps p { color: var(--doux); margin-bottom: 14px; } .fenetre-corps ul, .fenetre-corps ol { color: var(--doux); margin: 0 0 16px 20px; } .fenetre-corps li { margin-bottom: 6px; } .fenetre-corps .tags { margin: 8px 0 24px; } .fenetre-corps figure { margin: 24px 0; border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; background: var(--bg); } .fenetre-corps figure img { width: 100%; } .fenetre-corps figcaption { font-family: var(--mono); font-size: 0.76rem; color: var(--doux); padding: 10px 14px; border-top: 1px solid var(--ligne); } .fenetre-corps figcaption::before { content: "$ "; color: var(--bleu); } /* petit tableau d'infos de la mission (N°, lieu, période…) */ .fenetre-corps .doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; margin: 6px 0 26px; } .fenetre-corps .doc-meta div { background: var(--panel); padding: 12px 14px; } .fenetre-corps .doc-meta .k { font-family: var(--mono); font-size: 0.68rem; color: var(--doux); text-transform: uppercase; letter-spacing: 0.05em; } .fenetre-corps .doc-meta .v { font-size: 0.9rem; margin-top: 3px; } /* état de chargement / erreur */ .fenetre-info { font-family: var(--mono); font-size: 0.9rem; color: var(--doux); padding: 20px 0; } .fenetre-info b { color: var(--bleu); } /* ------------------------------------------------------------- 14. RESPONSIVE ------------------------------------------------------------- */ @media (max-width: 880px) { .grille-3 { grid-template-columns: repeat(2, 1fr); } .contact-grille { grid-template-columns: 1fr; } } @media (max-width: 640px) { .section { padding: 48px 0; } .hero { padding: 56px 0 44px; } /* menu mobile : on cache la barre et on montre le hamburger */ .nav-liens { position: fixed; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--panel); border-bottom: 1px solid var(--ligne); padding: 10px 20px; transform: translateY(-150%); transition: var(--t); box-shadow: 0 10px 30px rgba(0,0,0,.15); } .nav-liens.ouvert { transform: translateY(0); } .nav-liens > li { width: 100%; padding: 6px 0; } /* sur mobile, le sous-menu s'affiche en dessous, sans survol */ .sous-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 4px 0 4px 14px; min-width: auto; } .burger { display: flex; } .burger.actif span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.actif span:nth-child(2) { opacity: 0; } .burger.actif span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .grille-3, .grille-2 { grid-template-columns: 1fr; } .hero-btns { flex-direction: column; align-items: stretch; } .btn { justify-content: center; } .domaine .d-desc { display: none; } /* trop à l'étroit sur mobile */ }