/* ========================================================================= Site photographique — feuille de style Palette sombre et contrastée : le fond disparaît, la lumière des photos devient le seul élément clair de l'écran. ========================================================================= */ :root { /* --- Palette « encre » ------------------------------------------------ Reglee sur les photographies elles-memes. Mesure faite sur les 44 images du site : leurs ombres moyennes valent #151518, luminance 21. Un fond a #08080a se tenait 13 points sous ce plancher, et les images paraissaient posees sur un vide plus noir qu'elles : elles flottaient. A #121216 le fond se tient 3 points dessous — assez pour que les bords restent lisibles, assez peu pour que l'image et la page se rejoignent. Teinte : leurs ombres tirent tres legerement au froid (bleu +3), la palette la suit. Corpus quasi desature (0,09) : toute teinte franche du fond colorerait les images par contraste. */ --noir: #121216; /* fond principal, encre douce, a peine bleutee */ --noir-2: #17171c; /* sections alternées */ --noir-3: #1d1d23; /* cartes, encarts */ --trait: #2e2e37; /* filets et bordures */ --blanc: #f4f1ec; /* texte principal, blanc chaud (jamais #fff pur) */ --gris: #9aa0a8; /* texte secondaire */ --gris-fonce: #797d85; /* légendes, mentions */ --lumiere: #e8b478; /* accent : la couleur d'une lumière chaude */ --lumiere-viv: #f5c98d; /* --- Typographie ----------------------------------------------------- */ --titre: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", Georgia, serif; --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; /* --- Rythme ---------------------------------------------------------- */ --large: 1360px; --lisible: 62ch; --marge: clamp(1.25rem, 5vw, 5rem); --section: clamp(4.5rem, 11vw, 9rem); } /* ===================================================== variante claire ==== Activee par « theme »: « clair » dans contenu/site.json, ce qui pose la classe .clair sur . Les noms de variables ne changent pas : seules leurs valeurs s'inversent, et les quelques couleurs ecrites en dur sont reprises plus bas, chacune a cote de sa regle d'origine. Le blanc n'est jamais #fff pur, le noir jamais #000 : trop durs sous les photographies. L'accent chaud fonce, sinon il devient illisible. ========================================================================= */ /* L'ancien fond, presque noir : les images y gagnent en eclat et y perdent leurs bords. A garder si l'on veut la projection plutot que la page. */ body.nuit { --noir: #08080a; --noir-2: #0f1013; --noir-3: #16181c; --trait: #26292f; --gris-fonce: #6b7078; } /* Un dark plus chaud, du cote du tirage argentique vire au selenium. Convient si l'on veut rapprocher le fond de l'ambre de l'accent. */ body.terre { --noir: #171512; --noir-2: #1d1a16; --noir-3: #24201b; --trait: #37322a; --gris: #a5a09a; --gris-fonce: #837d76; } body.clair { --noir: #faf9f7; --noir-2: #f2efe9; --noir-3: #ffffff; --trait: #ddd8cf; --blanc: #1b1b1e; --gris: #5c5f66; --gris-fonce: #7b7e86; --lumiere: #9c5512; --lumiere-viv: #7f430a; } /* --------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--noir); color: var(--blanc); font-family: var(--texte); font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem); } h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem); } h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); } p { margin: 0 0 1.1em; } .saut { position: absolute; left: -9999px; background: var(--lumiere); color: var(--noir); padding: 0.75rem 1.25rem; z-index: 100; } .saut:focus { left: 1rem; top: 1rem; } :focus-visible { outline: 2px solid var(--lumiere); outline-offset: 3px; } ::selection { background: var(--lumiere); color: var(--noir); } /* ------------------------------------------------------- textes communs -- */ .sur-titre { font-family: var(--texte); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lumiere); margin-bottom: 1.1rem; } .chapeau { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); line-height: 1.6; color: var(--gris); max-width: var(--lisible); } .meta { font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gris-fonce); } .fin { font-size: 0.875rem; color: var(--gris-fonce); } .fin a { color: var(--gris); border-bottom: 1px solid var(--trait); } .fin a:hover { color: var(--lumiere); border-color: var(--lumiere); } .prose { max-width: var(--lisible); } .prose p, .prose ul { color: #d6d2cb; } body.clair .prose p, body.clair .prose ul { color: #33343a; } .prose a { color: var(--lumiere); border-bottom: 1px solid rgba(232,180,120,.4); } body.clair .prose a { border-bottom-color: rgba(156,85,18,.45); } .prose a:hover { border-color: var(--lumiere); } .prose h2 { margin-top: 2.2em; } .prose blockquote { margin: 2rem 0; padding-left: 1.5rem; border-left: 2px solid var(--lumiere); font-family: var(--titre); font-size: 1.3rem; font-style: italic; color: var(--blanc); } .prose figure { margin: 2.5rem 0; } .prose figure img { width: 100%; } .prose figcaption { margin-top: .6rem; font-size: .82rem; color: var(--gris-fonce); } /* -------------------------------------------------------------- boutons -- */ .btn { display: inline-block; padding: 0.85rem 1.9rem; background: var(--lumiere); color: var(--noir); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--lumiere); transition: background .25s, color .25s, transform .25s; } .btn:hover { background: var(--lumiere-viv); border-color: var(--lumiere-viv); transform: translateY(-2px); } .btn--fant { background: transparent; color: var(--blanc); border-color: var(--trait); } .btn--fant:hover { background: transparent; border-color: var(--blanc); color: var(--blanc); } /* Les liens qui ouvrent une page ont l'allure d'un bouton : encadres, avec une fleche qui avance au survol. Un souligne discret se confond avec du texte et se rate. */ .lien-plus { display: inline-flex; align-items: center; gap: .6rem; padding: .72rem 1.5rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lumiere); background: transparent; background: color-mix(in srgb, var(--lumiere) 13%, transparent); border: 1px solid var(--lumiere); border-radius: 999px; white-space: nowrap; transition: color .2s, border-color .2s, background .2s; } .lien-plus::after { content: "→"; transition: transform .2s; } .lien-plus:hover { color: var(--noir); background: var(--lumiere); border-color: var(--lumiere); } .lien-plus:hover::after { transform: translateX(3px); } /* --------------------------------------------------------------- entête -- */ .entete { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.1rem var(--marge); background: rgba(18,18,22,.84); backdrop-filter: blur(14px); border-bottom: 1px solid var(--trait); } body.nuit .entete { background: rgba(8,8,10,.82); } body.terre .entete { background: rgba(23,21,18,.84); } body.clair .entete { background: rgba(250,249,247,.86); } .marque { font-family: var(--titre); font-size: 1.15rem; letter-spacing: 0.02em; } .marque:hover { color: var(--lumiere); } .nav { display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); } .nav a { font-size: 0.8rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gris); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; } .nav a:hover, .nav a[aria-current] { color: var(--blanc); border-color: var(--lumiere); } .burger { display: none; background: none; border: 0; color: var(--blanc); font-size: 1.4rem; padding: .2rem .5rem; } /* ------------------------------------------------------------ ouverture -- */ /* Ouverture : une seule photographie, pleine largeur, puis une phrase. Le cadre et le point de recadrage se reglent depuis le backoffice et arrivent en style en ligne sur l'image. */ .ouverture { position: relative; } .ouverture-img { width: 100%; background: var(--noir); overflow: hidden; } .ouverture-img img { width: 100%; max-height: 88vh; object-fit: cover; object-position: center; } /* La phrase respire : autant d'air au-dessus qu'en dessous, pour qu'elle ne soit pas prise en etau entre les deux photographies. */ .ouverture-txt { padding: clamp(3rem, 7vw, 5.5rem) var(--marge) 0; } .ouverture-txt h1 { max-width: var(--large); margin: 0 auto; font-size: clamp(1.5rem, 3.1vw, 2.3rem); line-height: 1.25; text-wrap: balance; } /* Bandeau d'introduction : le texte et les boutons ecrits par-dessus une image pleine largeur. Le degrade garantit la lisibilite quelle que soit la photographie choisie. */ .bandeau { position: relative; isolation: isolate; } /* L'image est dans le flux, a ses proportions entieres : on la voit toute. Le texte se pose sur son tiers inferieur, ou le degrade l'assombrit. */ .bandeau-img { margin: 0; } .bandeau-img img { width: 100%; height: auto; } .bandeau-txt { position: absolute; inset-inline: 0; bottom: 0; padding: clamp(5rem, 16vw, 12rem) var(--marge) clamp(2.5rem, 5vw, 4rem); background: linear-gradient(to top, rgba(8,8,10,.94) 0%, rgba(8,8,10,.80) 40%, rgba(8,8,10,.35) 72%, rgba(8,8,10,0) 100%); } .bandeau-inner { max-width: var(--large); margin-inline: auto; } .bandeau-txt .chapeau { max-width: 44rem; margin: 0 0 2rem; color: #e2ded7; } /* Sur un ecran etroit l'image est trop basse pour porter du texte : on empile, image puis texte, sans superposition ni degrade. */ @media (max-width: 820px) { .bandeau-txt { position: static; padding: clamp(1.8rem, 6vw, 2.5rem) var(--marge) 0; background: none; } } @media (max-width: 700px) { .ouverture-img img { max-height: 74vh; } } /* ------------------------------------------------------------- sections -- */ .bloc { padding: var(--section) var(--marge); max-width: var(--large); margin-inline: auto; } .bloc--alt { background: var(--noir-2); max-width: none; } .bloc--alt > * { max-width: var(--large); margin-inline: auto; } .bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.4rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--trait); } .bloc-tete h2 { margin: 0; } .bloc--cta { text-align: center; } .bloc--cta .chapeau { margin-inline: auto; margin-bottom: 2rem; } .tete-page { padding: clamp(4rem, 9vw, 7.5rem) var(--marge) 0; max-width: var(--large); margin-inline: auto; } /* --------------------------------------------------------------- cartes -- */ .grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.75rem); } .grille--1 { grid-template-columns: 1fr; } .grille--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 27rem), 1fr)); } .grille--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } .carte { display: block; } .carte-img { overflow: hidden; background: var(--noir-3); aspect-ratio: 4 / 3; margin-bottom: 1.25rem; } .carte-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.9) saturate(.95); transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .5s; } .carte:hover .carte-img img { transform: scale(1.045); filter: brightness(1.06) saturate(1.05); } .carte-txt h3 { margin: .5rem 0 .4rem; transition: color .2s; } .carte:hover .carte-txt h3 { color: var(--lumiere); } .carte-txt p:not(.meta) { color: var(--gris); font-size: .95rem; margin: 0; } .carte--billet .carte-img { aspect-ratio: 16 / 10; } /* -------------------------------------------------------------- galerie -- */ .tete-serie { padding: clamp(3.5rem, 8vw, 6.5rem) var(--marge) clamp(2.5rem, 5vw, 4rem); max-width: var(--large); margin-inline: auto; } .tete-serie .sur-titre a:hover { color: var(--lumiere-viv); } .tete-serie h1 { margin-bottom: .3em; } .texte-serie { max-width: var(--lisible); margin-top: 2rem; } .texte-serie p { color: #d6d2cb; } body.clair .texte-serie p { color: #33343a; } .galerie { padding: 0 var(--marge) var(--section); max-width: var(--large); margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 3rem); } .photo { margin: 0; } .photo img { width: 100%; background: var(--noir-3); /* léger contraste supplémentaire : les hautes lumières ressortent sur le noir */ filter: contrast(1.03); } .photo--large { grid-column: 1 / -1; } .photo figcaption { margin-top: .85rem; font-size: .82rem; line-height: 1.55; color: var(--gris-fonce); max-width: 46ch; } .photo .num { color: var(--lumiere); margin-right: .5rem; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------- partage -- */ .partage { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--trait); } .partage-label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris-fonce); margin-right: .5rem; } .btn-partage { display: inline-block; padding: .5rem 1.05rem; font-size: .78rem; letter-spacing: .06em; color: var(--gris); background: transparent; border: 1px solid var(--trait); border-radius: 999px; transition: color .2s, border-color .2s, background .2s; } .btn-partage:hover { color: var(--noir); background: var(--lumiere); border-color: var(--lumiere); } /* ------------------------------------------------------------- article -- */ .article { padding: clamp(3.5rem, 8vw, 6.5rem) var(--marge) var(--section); max-width: 46rem; margin-inline: auto; } .article h1 { margin-bottom: .35em; } .article > .photo { margin: 2.5rem 0 3rem; } /* ------------------------------------------------------------ à propos -- */ .apropos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding: clamp(3.5rem, 8vw, 6.5rem) var(--marge) var(--section); max-width: var(--large); margin-inline: auto; } .portrait { margin: 0; position: sticky; top: 6rem; } .portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; } /* ---------------------------------------------------------- prestations -- */ .offre { background: var(--noir-3); border: 1px solid var(--trait); padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; transition: border-color .3s, transform .3s; } .offre:hover { border-color: var(--lumiere); transform: translateY(-4px); } .offre h3 { margin-bottom: .3em; } .prix { font-family: var(--titre); font-size: 1.6rem; color: var(--lumiere); margin-bottom: .8rem; } .offre p { color: var(--gris); font-size: .95rem; } .offre ul { list-style: none; padding: 0; margin: 1rem 0 0; border-top: 1px solid var(--trait); padding-top: 1rem; } .offre li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; font-size: .9rem; color: var(--gris); } .offre li::before { content: "—"; position: absolute; left: 0; color: var(--lumiere); } .etapes { list-style: none; counter-reset: e; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 2.5rem; } .etapes li { counter-increment: e; } .etapes li::before { content: counter(e, decimal-leading-zero); display: block; font-family: var(--titre); font-size: 2.2rem; color: var(--lumiere); margin-bottom: .4rem; } .etapes p { color: var(--gris); font-size: .95rem; } /* -------------------------------------------------------------- contact -- */ .bloc--form { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .form { display: flex; flex-direction: column; gap: 1.25rem; max-width: 34rem; } .form label { display: flex; flex-direction: column; gap: .5rem; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gris-fonce); } .form input, .form textarea, .form select { font-family: var(--texte); font-size: 1rem; letter-spacing: normal; text-transform: none; color: var(--blanc); background: var(--noir-3); border: 1px solid var(--trait); border-radius: 0; padding: .85rem 1rem; width: 100%; transition: border-color .2s; } .form input:focus, .form textarea:focus, .form select:focus { border-color: var(--lumiere); outline: none; } .form button { align-self: flex-start; } .cache { position: absolute; left: -9999px; } .encart { background: var(--noir-2); border: 1px solid var(--trait); padding: clamp(1.5rem, 3vw, 2.25rem); } .encart h3 { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-family: var(--texte); color: var(--lumiere); margin: 1.5rem 0 .5rem; } .encart h3:first-child { margin-top: 0; } .encart p { color: var(--gris); font-size: .95rem; } /* ----------------------------------------------------------------- pied -- */ .pied { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2.5rem; padding: clamp(3rem, 6vw, 5rem) var(--marge) 2rem; border-top: 1px solid var(--trait); background: var(--noir-2); } .pied-nom { font-family: var(--titre); font-size: 1.3rem; margin-bottom: .3rem; } .pied-col p { margin-bottom: .4rem; } .pied-col a { color: var(--gris); } .pied-col a:hover { color: var(--lumiere); } .pied-reseaux { display: flex; gap: 1.25rem; flex-wrap: wrap; } .pied-reseaux a { font-size: .85rem; border-bottom: 1px solid var(--trait); padding-bottom: 2px; } .pied-reseaux a:hover { border-color: var(--lumiere); } .copyright { grid-column: 1 / -1; margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--trait); font-size: .78rem; color: var(--gris-fonce); } /* --------------------------------------------------------------- mosaique */ /* Colonnes de hauteurs libres : chaque image garde ses proportions, aucune n'est recadree. Les colonnes se remplissent de haut en bas. */ .mosaique { column-count: 3; column-gap: clamp(.6rem, 1.4vw, 1.1rem); } .mosaique figure { break-inside: avoid; margin: 0 0 clamp(.6rem, 1.4vw, 1.1rem); } .mosaique img { width: 100%; cursor: zoom-in; } .mosaique figcaption { margin-top: .45rem; font-size: .78rem; color: var(--gris-fonce); } @media (max-width: 900px) { .mosaique { column-count: 2; } } @media (max-width: 560px) { .mosaique { column-count: 1; } } /* ------------------------------------------------------------ visionneuse */ /* L'image occupe tout l'ecran : aucune marge, la legende se pose par-dessus son bas pour ne pas lui voler de hauteur. */ .visio { position: fixed; inset: 0; z-index: 200; background: rgba(10,10,13,.985); display: none; align-items: center; justify-content: center; padding: 0; } body.nuit .visio { background: rgba(4,4,6,.985); } body.terre .visio { background: rgba(14,12,10,.985); } body.clair .visio { background: rgba(250,249,247,.99); } .visio[open], .visio.ouvert { display: flex; } .visio figure { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* Bornes en unites d'ecran, jamais en pourcentages : un pourcentage se mesure sur le parent, dont la hauteur depend de l'image elle-meme. Le navigateur abandonne alors la contrainte et l'image deborde. */ .visio img { max-width: 100vw; max-height: 100vh; max-height: 100dvh; width: auto; height: auto; object-fit: contain; cursor: zoom-out; } .visio figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 3rem clamp(1rem, 5vw, 4rem) 1.5rem; text-align: center; font-size: .85rem; color: var(--gris); background: linear-gradient(to top, rgba(10,10,13,.90), rgba(10,10,13,0)); } body.clair .visio figcaption { background: linear-gradient(to top, rgba(250,249,247,.92), rgba(250,249,247,0)); pointer-events: none; } .visio figcaption:empty { display: none; } /* « Remplir l'ecran » : l'image couvre toute la fenetre, quitte a etre recadree. Sans cela elle est montree entiere, avec ses marges. */ .visio--plein img { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; object-fit: cover; } /* Commandes en pastilles : assez grandes pour etre visees au doigt, assez translucides pour ne pas manger la photographie. */ .visio-btn { position: absolute; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(124,124,130,.5); color: #fff; backdrop-filter: blur(6px); transition: background .2s; } .visio-btn:hover { background: rgba(150,150,156,.72); } .visio-btn svg { width: 21px; height: 21px; display: block; } body.clair .visio-btn { background: rgba(48,48,52,.5); } body.clair .visio-btn:hover { background: rgba(48,48,52,.72); } .visio-fermer { top: 1.1rem; right: 1.1rem; } .visio-cadrage { top: 1.1rem; left: 1.1rem; } .visio-nav { top: 50%; transform: translateY(-50%); } .visio-prec { left: 1.1rem; } .visio-suiv { right: 1.1rem; } @media (max-width: 700px) { .visio-btn { width: 42px; height: 42px; } .visio-btn svg { width: 19px; height: 19px; } .visio-fermer, .visio-cadrage { top: .7rem; } .visio-fermer { right: .7rem; } .visio-cadrage { left: .7rem; } .visio-prec { left: .7rem; } .visio-suiv { right: .7rem; } } .visio-prec { left: .25rem; } .visio-suiv { right: .25rem; } .galerie .photo img { cursor: zoom-in; } /* ------------------------------------------- sections a fond photographique L'image est fixee a l'ecran, la section lui sert de fenetre : en defilant, on decouvre la photographie par en dessous, comme un rideau qui s'ouvre. « clip-path: inset(0) » sur le cadre en fait le bloc de reference de l'enfant fixe — c'est ce qui rend l'effet fiable sur Safari et iOS, la ou « background-attachment: fixed » echoue. */ /* Pas de voile pose par-dessus l'image : c'est l'image elle-meme qui est rendue transparente, au-dessus du fond opaque de la section. Un voile separe etait decoupe par le meme masque que l'image ; des que celle-ci debordait d'une fraction de pixel au compositeur, le voile ne pouvait plus la rattraper et un liseré de photographie pleine lumiere restait visible au bord des sections. Avec l'opacite, il n'y a qu'un calque : rien ne peut se desaligner. */ .bloc--fond { position: relative; isolation: isolate; background: var(--noir); max-width: none; } .bloc--alt.bloc--fond { background: var(--noir-2); } .fond-contenu { max-width: var(--large); margin-inline: auto; } .fond-cadre { position: absolute; inset: 0; z-index: -1; clip-path: inset(0); overflow: hidden; pointer-events: none; } .fond-cadre img { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; opacity: .17; } body.nuit .fond-cadre img { opacity: .15; } body.terre .fond-cadre img { opacity: .17; } body.clair .fond-cadre img { opacity: .11; } /* Petits ecrans : l'image fixe coute cher et saccade. On la pose. */ @media (max-width: 820px), (prefers-reduced-motion: reduce) { .fond-cadre img { position: absolute; height: 100%; } } /* ---------------------------------------------- bouton d'essai du fond -- Present uniquement dans apercu/, jamais dans le site publie. */ .essai-theme { position: fixed; right: 1rem; bottom: 1rem; z-index: 300; padding: .65rem 1.15rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blanc); background: var(--noir-3); border: 1px solid var(--trait); border-radius: 999px; opacity: .9; transition: opacity .2s, border-color .2s; } .essai-theme:hover { opacity: 1; border-color: var(--lumiere); } /* ------------------------------------------------------------ apparition */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); } .reveal.vu { opacity: 1; transform: none; } /* --------------------------------------------------------------- mobile -- */ @media (max-width: 860px) { .apropos, .bloc--form { grid-template-columns: 1fr; } .portrait { position: static; max-width: 22rem; } .galerie { grid-template-columns: 1fr; } .photo--large { grid-column: auto; } } @media (max-width: 720px) { .burger { display: block; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--noir-2); border-bottom: 1px solid var(--trait); padding: .5rem var(--marge) 1.5rem; } .nav.ouvert { display: flex; } .nav a { padding: .85rem 0; border-bottom: 1px solid var(--trait); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ------------------------------------------------------------ impression */ @media print { body { background: #fff; color: #000; } .entete, .pied, .partage, .visio { display: none; } } /* ------------------------------------------------- page Accompagnement -- */ .deux-colonnes { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; } .deux-colonnes .prose { max-width: none; } .encart-pale { background: var(--noir-3); border: 1px solid var(--trait); border-left: 2px solid var(--lumiere); border-radius: 0; padding: clamp(1.5rem, 3vw, 2rem); } .encart-pale h3 { font-family: var(--texte); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lumiere); margin-bottom: 1rem; } .encart-pale .fin { margin-top: 1rem; margin-bottom: 0; } .liste-nette { list-style: none; padding: 0; margin: 0; } .liste-nette li { position: relative; padding-left: 1.5rem; margin-bottom: .7rem; font-size: .95rem; color: #d6d2cb; } .liste-nette li:last-child { margin-bottom: 0; } .liste-nette li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5rem; height: 1px; background: var(--lumiere); } @media (max-width: 860px) { .deux-colonnes { grid-template-columns: 1fr; } }