are one decision in two files.
*
* The .porta-labels prefix is load-bearing, not redundant. On WooCommerce
* pages (cart, checkout, product, account) Astra loads
* woocommerce-layout-grid.min.css, whose `.woocommerce-page img { height: auto }`
* (0,1,1) outranks a bare modifier class (0,1,0) — every logo then rendered at
* its file's natural size (Terravin 603px). Two classes (0,2,0) win cleanly
* without !important.
*/
.porta-labels .porta-labels__logo--swiss-wine { height: 48px; }
.porta-labels .porta-labels__logo--lavaux-unesco { height: 42px; } /* the compact mark, 0.92:1 */
.porta-labels .porta-labels__logo--terravin { height: 44px; }
.porta-labels .porta-labels__logo--vin-suisse-durable { height: 48px; }
@media (min-width: 768px) {
.porta-labels .porta-labels__logo--swiss-wine { height: 66px; }
.porta-labels .porta-labels__logo--terravin { height: 60px; }
.porta-labels .porta-labels__logo--vin-suisse-durable { height: 69px; }
/* the full 4.28:1 lockup returns here */
.porta-labels .porta-labels__logo--lavaux-unesco { height: 45px; }
}
/* The Lavaux mark ships as the reversed (white) artwork, recoloured to
currentColor in the file, so it inherits the ink of this container. */
.porta-labels__link { color: var(--color-text); }
/* Treatment A — the marks in their own colours, lifted slightly on hover */
.porta-labels--colour .porta-labels__logo {
opacity: 0.85;
}
.porta-labels--colour .porta-labels__link:hover .porta-labels__logo,
.porta-labels--colour .porta-labels__link:focus-visible .porta-labels__logo {
opacity: 1;
}
/* Treatment B — greyscale at rest, colour on hover */
.porta-labels--muted .porta-labels__logo {
filter: grayscale(1);
opacity: 0.55;
}
.porta-labels--muted .porta-labels__link:hover .porta-labels__logo,
.porta-labels--muted .porta-labels__link:focus-visible .porta-labels__logo {
filter: grayscale(0);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.porta-labels__logo { transition: none; }
}
/* ── Bottom bar ── */
.porta-footer__bottom {
border-top: 1px solid rgba(26, 26, 26, 0.12);
padding: 1.25rem 0;
}
.porta-footer__bottom-inner {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
}
@media (min-width: 768px) {
.porta-footer__bottom-inner {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
.porta-footer__copyright {
font-size: var(--text-xs);
color: var(--color-text-light);
margin: 0;
}
/* Age notice, above the copyright line (audit 05-003, G2 follow-up):
main line, then the legal threshold smaller. Text: inc/legal.php. */
.porta-age-notice--footer {
margin: 0 0 0.75rem;
line-height: 1.5;
}
.porta-age-notice--footer p {
margin: 0;
}
.porta-age-notice--footer .porta-age-notice__main {
font-size: var(--text-sm);
color: var(--color-text);
}
.porta-age-notice--footer .porta-age-notice__law {
font-size: var(--text-xs);
color: var(--color-text-light);
}
.porta-footer__legal {
display: flex;
flex-wrap: wrap; /* three links since the CGV (00-004): they wrap on phones */
gap: 0.5rem 1.5rem;
}
.porta-footer__legal a {
font-size: var(--text-xs);
color: var(--color-text-light);
text-decoration: none;
transition: color var(--duration-fast) ease;
}
.porta-footer__legal a:hover {
color: var(--color-accent);
}
/* Language switcher in the bottom bar (audit 07-006): the same small links as
the legal ones; it stays on the distraction-free checkout, where the header
menu and its copy of the switcher are hidden. */
.porta-lang--footer {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--text-xs);
color: var(--color-text-light);
letter-spacing: var(--tracking);
}
.porta-lang--footer .porta-lang__link {
color: var(--color-text-light);
text-decoration: none;
transition: color var(--duration-fast) ease;
}
.porta-lang--footer .porta-lang__link:hover {
color: var(--color-accent);
}
.porta-lang--footer .porta-lang__current {
color: var(--color-text);
font-weight: 600;
}
/* ── Section heading tiers ──────────────────────────────────────────────── */
/*
* Two tiers, chosen by what the section holds (settled with the client
* 2026-09-07, resolving the "heading alignment and size" question):
*
* Narrative — prose leading to a statement. 32/44px, centred, an optional
* gold eyebrow above (.porta-section-header__label).
* This is the default .porta-section-header__title.
* Collection — a grid or carousel of cards. 24/32px, left-aligned.
* Use the --index modifier, or .porta-events__title inside
* the events carousel.
*
* **Size and alignment carry the distinction — not the gold rule.** Every
* section h2 keeps its 40×2px gold rule; the rule simply follows the
* heading's alignment (centred under a centred heading, flush left under a
* left-aligned one). Dropping it from the narrative tier was tried on
* 2026-09-11 and reverted the same day: without it those headings read as
* unpunctuated, and the client preferred the dash. Do not remove it again.
*
* Alignment follows the content block the heading sits above, which is why
* /domaine's two-column sections keep left-aligned 44px headings and are
* still narrative.
*
* The rule is scoped to h2 so page H1s never pick it up.
*
* Design reference: design.md §2.3 / §1.3 (gold is a reward color,
* used here as punctuation — like a wax seal on a letter).
*/
h2.porta-section-header__title::after,
h2.porta-events__title::after {
content: '';
display: block;
width: 40px;
height: 2px;
background-color: var(--color-gold);
margin-top: 0.75rem;
/* Centred by default — the narrative tier is centred. */
margin-inline: auto;
}
/* Collection headings sit above a left-aligned grid, so the rule goes flush left. */
h2.porta-section-header__title--index::after,
h2.porta-events__title::after {
margin-inline: 0;
}
/* ── Card hover effects ──────────────────────────────────────────────────── */
/*
* Cards lift 2px and deepen their shadow on hover — a subtle cue of
* interactivity. Matches design.md §6.3.
* Note: image-level zoom (scale 1.03 on img) is already defined per card type
* above. These rules add the card-level shadow + lift on top.
*/
/* Wine card */
.porta-wine-card {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
transition: box-shadow var(--duration) ease, transform var(--duration) ease;
}
.porta-wine-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
/* Event card */
.porta-event-card {
transition: box-shadow var(--duration) ease, transform var(--duration) ease;
}
.porta-event-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
/* Article card */
.porta-article-card {
transition: box-shadow var(--duration) ease, transform var(--duration) ease;
}
.porta-article-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
/* Formula card (dégustation) */
.porta-format-card {
transition: box-shadow var(--duration) ease, transform var(--duration) ease;
}
.porta-format-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
/* ── Contact form input styling ──────────────────────────────────────────── */
/*
* Boxed 48px fields, matching the checkout (woocommerce.css, "48px tall, 16px
* text"). The underline-only fields they replace (2026-10-08) read as plain
* text lines on a phone, and their 14.6px text made iOS zoom in on focus.
*
* The markup comes from the CF7 form in WP Admin (WPAdmin-setup.md, "Contact
* page"): each field is label.porta-cf7__field > span.porta-cf7__label +
* CF7's control wrap. Auto /
s of the form a bottom margin — the fields carry the rhythm */
}
/* Name and e-mail side by side only when the form column is wide enough */
@media (min-width: 1280px) {
.porta-cf7__row {
grid-template-columns: 1fr 1fr;
}
}
.porta-cf7__field {
display: block;
margin: 0 0 1.25rem;
}
.porta-cf7__label {
display: block;
margin-bottom: 0.375rem;
font-size: var(--text-sm);
font-weight: 500;
line-height: 1.3;
color: var(--color-text);
}
.porta-contact__form .wpcf7-form-control-wrap {
display: block;
}
.porta-contact__form .wpcf7-form-control:not(.wpcf7-submit) {
display: block;
width: 100%;
min-height: 48px;
margin: 0;
padding: 0.75rem 0.875rem;
box-sizing: border-box;
font-family: var(--font-body);
font-size: var(--text-field); /* never below 16px — see style.css */
line-height: 1.4;
color: var(--color-text);
background-color: var(--color-white);
border: 1px solid rgba(26, 26, 26, 0.22);
border-radius: var(--border-radius);
box-shadow: none;
transition: border-color var(--duration) ease, box-shadow var(--duration) ease;
-webkit-appearance: none;
appearance: none;
}
/* Focus: accent border thickened by a 1px ring — no layout shift.
The border change is the focus indicator, so the outline is dropped.
`.wpcf7` in the chain (0,5,0): Astra's inline `.wpcf7 input.wpcf7-form-control
:not([type="submit"]):focus` (0,4,1) painted the e-mail field blue (09-002). */
.porta-contact__form .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 1px var(--color-accent);
outline: none;
}
/* Select: appearance is reset above, so draw the chevron back. Two gradient
triangles instead of an SVG data URI, so the colour stays a token. */
.porta-contact__form select.wpcf7-form-control {
padding-right: 2.5rem;
background-image:
linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
background-position:
calc(100% - 1.25rem) 50%,
calc(100% - 0.875rem) 50%;
background-size: 0.375rem 0.375rem;
background-repeat: no-repeat;
cursor: pointer;
}
.porta-contact__form textarea.wpcf7-form-control {
min-height: 160px;
resize: vertical;
}
/* Validation — CF7 adds .wpcf7-not-valid to the field and a tip after it */
.porta-contact__form .wpcf7-form-control.wpcf7-not-valid {
border-color: var(--color-accent);
box-shadow: 0 0 0 1px var(--color-accent);
}
.porta-contact__form .wpcf7-not-valid-tip {
display: block;
margin-top: 0.375rem;
font-size: var(--text-xs);
font-weight: 400;
color: var(--color-accent);
}
/* Submit: full width on a phone, 56px tall. Padding etc. come from the shared
.wpcf7-submit rule near the top of this file. */
.porta-cf7__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.porta-contact__form .wpcf7-submit {
width: 100%;
min-height: 56px;
}
@media (min-width: 768px) {
.porta-contact__form .wpcf7-submit {
width: auto;
}
}
/*
* Response message after sending. CF7 draws a coloured box around it
* (green / red / orange); here it becomes a beige note with a left rule —
* gold when sent, burgundy for anything that needs the visitor's attention.
* The `.wpcf7 form` part of the selector is needed to outrank CF7's own
* `.wpcf7 form.sent .wpcf7-response-output` rules.
*/
.porta-contact__form .wpcf7 form .wpcf7-response-output {
margin: 1.5rem 0 0;
padding: 1rem 1.25rem;
border: 0;
border-left: 3px solid var(--color-accent);
border-radius: 0;
background-color: var(--color-bg-alt);
font-size: var(--text-sm);
line-height: 1.6;
color: var(--color-text);
}
.porta-contact__form .wpcf7 form.sent .wpcf7-response-output {
border-left-color: var(--color-gold);
}
.porta-contact__form .wpcf7 form.invalid .wpcf7-response-output,
.porta-contact__form .wpcf7 form.unaccepted .wpcf7-response-output,
.porta-contact__form .wpcf7 form.payment-required .wpcf7-response-output,
.porta-contact__form .wpcf7 form.failed .wpcf7-response-output,
.porta-contact__form .wpcf7 form.aborted .wpcf7-response-output,
.porta-contact__form .wpcf7 form.spam .wpcf7-response-output {
border-left-color: var(--color-accent);
}
/* CF7 prints an empty response box until there is something to say */
.porta-contact__form .wpcf7 form.init .wpcf7-response-output,
.porta-contact__form .wpcf7 form.resetting .wpcf7-response-output,
.porta-contact__form .wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
/*
* Contact form section — tighter vertical padding than the generic .porta-section.
* The form has 4 fields + a button; at 5rem padding the button falls below the fold.
*
* The :not() is load-bearing. Both the header band and the form section are
* direct children of .porta-contact, so the bare `.porta-contact > .porta-section`
* this replaces (specificity 0,2,0) also beat base.css's shared page-intro-header
* rule (0,1,0) and squeezed /contact's band to 40px, where the identical bands on
* /nos-vins, /actualites and /degustation sit at 56px. Only the form wants the
* tighter rhythm; the band must stay on the shared rule.
*/
.porta-contact > .porta-section:not(.porta-contact__header) {
padding-block: 1.75rem;
}
@media (min-width: 768px) {
.porta-contact > .porta-section:not(.porta-contact__header) {
padding-block: 2.5rem;
}
}
/* ── Notice / dev placeholder ────────────────────────────────────────────── */
/* Generic notice bar used to surface messages within templates */
.porta-notice {
padding: 1rem 1.5rem;
border-radius: var(--border-radius);
font-size: var(--text-sm);
margin-block: 1rem;
}
/* ── Actualités page ─────────────────────────────────────────────────────── */
/*
* Agenda → Chroniques gap.
* On /actualites these two are one continuous editorial flow, not two
* separate bands, but each carried a full .porta-section padding — 80px
* bottom plus 80px top left a 160px trench between the last event card and
* the Chroniques heading. Zeroing the carousel's bottom padding leaves the
* archive's own top padding as the single gap, so the two read as one page
* rather than two. Scoped to .porta-actualites: the homepage uses the same
* carousel partial and its rhythm is correct there.
*/
.porta-actualites .porta-events {
padding-bottom: 0;
}
/* "Chroniques" subtitle — sizing and the gold rule now come from the
--index modifier on the heading itself, not from a page-scoped override. */
.porta-actualites__archive-header {
text-align: left;
margin-bottom: 2rem;
}
/* ── Articles grid ── */
.porta-articles__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.porta-articles__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 1024px, not 1280px: a content breakpoint — three chronique cards fit from
1024px, and a laptop window between 1024 and 1279 would otherwise show two
oversized ones (CLAUDE.md § CSS, audit 02-020). */
@media (min-width: 1024px) {
.porta-articles__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ── Article card ── */
/* Same visual treatment as .porta-event-card — bg-alt, no shadow, gold date */
.porta-article-card {
position: relative; /* anchor for the stretched link ::after */
background-color: var(--color-bg-alt);
border-radius: var(--border-radius);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Thumbnail — same ratio as event card (16:6) for visual consistency */
.porta-article-card__image {
aspect-ratio: 16 / 6;
overflow: hidden;
background-color: var(--color-bg);
}
.porta-article-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.porta-article-card:hover .porta-article-card__image img {
transform: scale(1.03);
}
.porta-article-card__body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 1;
}
/* Date + category on the same row */
.porta-article-card__meta {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
/* Gold uppercase date — mirrors .porta-event-card__date */
.porta-article-card__date {
font-size: var(--eyebrow-size);
font-weight: var(--eyebrow-weight);
letter-spacing: var(--eyebrow-tracking);
text-transform: uppercase;
color: var(--color-gold-text);
}
/* Category label — subtle accent pill */
.porta-article-card__category {
font-size: var(--eyebrow-size);
font-weight: var(--eyebrow-weight);
letter-spacing: var(--eyebrow-tracking);
text-transform: uppercase;
color: var(--color-accent);
}
.porta-article-card__title {
font-size: var(--text-xl);
}
/* Stretched link — ::after covers the whole card, making it fully clickable */
.porta-article-card__link {
color: inherit;
text-decoration: none;
}
.porta-article-card__link::after {
content: '';
position: absolute;
inset: 0;
}
/* One-line context under the title (competition, press source…) — replaces
the excerpt on cards; the excerpt field is kept for SEO meta descriptions. */
.porta-article-card__subtitle {
font-size: var(--text-sm);
color: var(--color-text-light);
line-height: 1.6;
}
/* ── Filter tabs — shared by /nos-vins and /actualites (Chroniques) ── */
/* Moved here from woocommerce.css (2026-10-08) so the Chroniques filter can
use them. The /nos-vins gold sub-row is still in woocommerce.css. */
.porta-filter {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 2.5rem;
}
.porta-filter__btn {
background-color: transparent;
color: var(--color-text-light);
border: 1px solid var(--color-bg-alt);
border-radius: var(--border-radius);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: var(--tracking);
text-transform: uppercase;
padding: 0.5rem 1.25rem;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/*
* Selector specificity note — all hover/active rules below chain
* `.porta-filter .porta-filter__btn` (specificity 0,2,1) so they beat
* Astra's inline `button:hover { background: var(--ast-global-color-1) }`
* rule (specificity 0,1,1, Astra's default blue accent). Without the extra
* class, Astra's customizer inline CSS would win on ties via source order.
*/
.porta-filter .porta-filter__btn:hover {
background-color: transparent;
border-color: var(--color-accent);
color: var(--color-accent);
}
/* Active top tab — solid accent fill, matches primary button */
.porta-filter .porta-filter__btn--active,
.porta-filter .porta-filter__btn--active:hover {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-white);
}
/* ── "Voir plus" batch reveal ── */
/* Wrapper divs keep the card partial untouched; display:grid makes the single
card child stretch to the full cell height (matches direct grid children). */
.porta-articles__item {
display: grid;
}
/* Cards outside the active filter, or beyond the revealed batch — both set by
articles-filter.js. Without JS no card carries it, so every card shows. */
.porta-articles__item--hidden {
display: none;
}
/* The tabs and "Voir plus" ship with the hidden attribute (they need JS);
their own display rules would otherwise override it. */
.porta-articles__filter[hidden],
.porta-articles__more[hidden] {
display: none;
}
/* /actualites/#medailles scrolls the tabs into view below the sticky header. */
.porta-articles__filter {
scroll-margin-top: 7rem;
}
.porta-articles__more {
text-align: center;
margin-top: 3rem;
}
/* ── Empty state ── */
.porta-actualites__empty {
text-align: center;
padding-block: 4rem;
}
.porta-actualites__empty-text {
color: var(--color-text-light);
font-size: var(--text-lg);
max-width: var(--max-width-text);
margin-inline: auto;
line-height: 1.7;
}
/* Hide Astra's "by author / date" meta on standard post pages accessed via /actualites */
.page-template-templates-page-actualites .entry-meta {
display: none;
}
/* ── Single post page (single.php) ──────────────────────────────────────── */
/* Full-bleed off-white header — same negative-margin technique as other page headers */
.porta-single-post__header {
background-color: var(--color-bg-alt);
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* Meta row: category badge + date, above the title */
.porta-single-post__meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.porta-single-post__date {
font-size: var(--text-sm);
color: var(--color-text-light);
}
/* Event lieu — sits next to the date in the meta row (single-evenement.php).
Same treatment as the event card's lieu line. */
.porta-single-post__lieu {
font-size: var(--text-sm);
color: var(--color-text-light);
}
/* Past event note under the title (audit 01-017). */
.porta-single-event__past {
margin: 1.5rem 0 0;
font-size: var(--text-sm);
color: var(--color-text-light);
}
.porta-single-event__past a {
color: var(--color-accent);
text-decoration: none;
}
.porta-single-event__past a:hover,
.porta-single-event__past a:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
}
/* /actualites/#agenda lands below the sticky header. */
#agenda {
scroll-margin-top: 5rem;
}
/* Event pages: date styled as the gold uppercase kicker, matching the card */
.porta-single-event .porta-single-post__date {
font-size: var(--eyebrow-size);
font-weight: var(--eyebrow-weight);
letter-spacing: var(--eyebrow-tracking);
text-transform: uppercase;
color: var(--color-gold-text);
}
.porta-single-post__title {
font-family: var(--font-heading);
font-size: var(--text-3xl);
line-height: 1.2;
margin: 0;
}
@media (min-width: 768px) {
.porta-single-post__title {
font-size: var(--text-4xl);
}
}
/* Optional subtitle under the H1 — same meta as the card subtitle */
.porta-single-post__subtitle {
margin-top: 0.75rem;
font-size: var(--text-lg);
color: var(--color-text-light);
}
/* Featured image — the same visual the /actualites card shows (medal
certificate, press clipping…), displayed at the top of the article body */
.porta-single-post__image {
margin: 0 0 2rem;
}
.porta-single-post__image img {
width: 100%;
height: auto;
border-radius: var(--border-radius);
}
/* Prose content — generous line-height, paragraph spacing */
.porta-single-post__content {
margin-top: 1.5rem;
font-size: var(--text-base);
line-height: 1.7;
color: var(--color-text);
}
.porta-single-post__content p {
margin-bottom: 1.5rem;
}
.porta-single-post__content h2,
.porta-single-post__content h3 {
font-family: var(--font-heading);
color: var(--color-text);
margin-top: 2rem;
margin-bottom: 0.75rem;
}
.porta-single-post__content a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.porta-single-post__content a:hover {
color: var(--color-gold-text);
}
/* Images inside post content — full width of the prose column, rounded */
.porta-single-post__content img {
width: 100%;
height: auto;
display: block;
border-radius: var(--border-radius);
margin-block: 1.5rem;
}
/* Back link — subtle, below content */
.porta-single-post__back {
display: inline-block;
margin-top: 3rem;
padding-bottom: 3rem;
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-light);
text-decoration: none;
transition: color var(--duration-fast) ease;
}
.porta-single-post__back:hover {
color: var(--color-accent);
}
/* The next step after a chronique or an event (audit 06-017), above the back
link: the wine on sale, or « Nous rendre visite ». */
.porta-single-post__next {
margin: 3rem 0 0;
font-weight: 500;
}
.porta-single-post__next a {
color: var(--color-accent);
text-decoration: none;
}
.porta-single-post__next a:hover,
.porta-single-post__next a:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
}
.porta-single-post__next + .porta-single-post__back {
margin-top: 1.5rem;
}
/* ── Scroll-entrance animations (global) ─────────────────────────────────── */
/*
* Used on /domaine, /nos-vins, /degustation.
* JS (scroll-entrance.js) adds .scroll-reveal to targets before observing,
* then adds .scroll-reveal--visible when the element enters the viewport.
* Animates once only. prefers-reduced-motion: JS exits before adding any class.
* Page-specific stagger delays live in domaine.css for /domaine targets.
*/
.scroll-reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}
.scroll-reveal--visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger wine cards on /nos-vins */
.porta-wine-card:nth-child(2).scroll-reveal { transition-delay: 0.08s; }
.porta-wine-card:nth-child(3).scroll-reveal { transition-delay: 0.16s; }
.porta-wine-card:nth-child(4).scroll-reveal { transition-delay: 0.08s; }
.porta-wine-card:nth-child(5).scroll-reveal { transition-delay: 0.16s; }
.porta-wine-card:nth-child(6).scroll-reveal { transition-delay: 0.24s; }
/* Stagger format cards on /degustation */
.porta-format-card:nth-child(2).scroll-reveal { transition-delay: 0.1s; }
.porta-format-card:nth-child(3).scroll-reveal { transition-delay: 0.2s; }
/* ── Legal pages (Mentions légales, Politique de confidentialité) ─────────── */
/*
* Content body — prose column constrained to readable width.
* Sections use generous vertical spacing; no cards, no grid — pure editorial.
*/
.porta-legal__body {
max-width: var(--max-width-text);
margin-inline: auto;
}
/* Individual content section — heading + body text */
.porta-legal__section {
padding-block: 2.5rem;
border-bottom: 1px solid var(--color-bg-alt);
}
.porta-legal__section:last-of-type {
border-bottom: none;
}
/* Section heading — heading font, accent color, less dramatic than page h1 */
.porta-legal__section h2 {
font-family: var(--font-heading);
font-size: var(--text-2xl);
color: var(--color-accent);
margin-bottom: 1rem;
}
/* Sub-heading — used for grouped data categories within a section */
.porta-legal__section h3 {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 500;
color: var(--color-text);
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
/* Paragraph spacing within a section */
.porta-legal__section p {
line-height: 1.7;
margin-bottom: 0.875rem;
color: var(--color-text);
}
.porta-legal__section p:last-child {
margin-bottom: 0;
}
/* Lists — rights, cookies, CGV payment methods; numbered ordering steps (CGV § 4) */
.porta-legal__section ul,
.porta-legal__section ol {
list-style: disc;
padding-left: 1.5rem;
margin-bottom: 0.875rem;
}
.porta-legal__section ol {
list-style: decimal;
}
.porta-legal__section ul li,
.porta-legal__section ol li {
line-height: 1.7;
margin-bottom: 0.375rem;
color: var(--color-text);
}
/* Tables on the legal pages — recipients and cookies of the privacy policy
(audit 00-037 / 05-007). The wrapper scrolls sideways on a narrow phone
instead of the page. */
.porta-legal__table-wrap {
overflow-x: auto;
margin-bottom: 0.875rem;
}
.porta-legal__table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
line-height: 1.5;
}
.porta-legal__table th,
.porta-legal__table td {
padding: 0.5rem 0.75rem 0.5rem 0;
border-bottom: 1px solid var(--color-bg-alt);
text-align: left;
vertical-align: top;
}
.porta-legal__table th {
font-weight: 500;
color: var(--color-text-light);
}
/* ── Dégustation magazine photo grid (Option A) ───────────────────────────── */
/*
* Asymmetric 3-col × 2-row CSS Grid.
* img 1: 1 col × 2 rows (tall portrait — left column)
* img 2: 2 cols × 1 row (wide landscape — top right)
* img 3: 1 col × 1 row (square — bottom centre)
* img 4: 1 col × 1 row (square — bottom right)
*
* Images: drop galerie-degustation-1.jpg through galerie-degustation-4.jpg
* into assets/images/. Section renders only when at least one file is present.
*/
.porta-degustation-grid {
background-color: var(--color-bg-alt);
padding-block-start: 1rem;
padding-block-end: 3rem;
}
.porta-degustation-grid__inner {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 180px 180px 220px; /* mobile: row1+row2 for img1/2/3, row3 for img4 */
gap: 0.5rem;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: 1.5rem;
}
/* Each cell clips and covers its image. Cells are s (keyboard access to
the lightbox, audit 02-004): the bare-button reset in base.css undoes Astra's
skin; padding and the cell colour are undone here (Astra's :hover/:focus
rules use !important). */
.porta-degustation-grid__item,
.porta-degustation-grid__item:hover,
.porta-degustation-grid__item:focus,
.porta-degustation-grid__item:active {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0 !important;
background-color: var(--color-bg) !important;
overflow: hidden;
border-radius: 0 !important;
}
/* Keyboard focus: base.css's ring, drawn OUTSIDE the cell (2px + 2px offset fit
the 0.5rem grid gap). Not inside: the photo zooms on focus as on hover, and a
transformed child paints over an inset outline. */
.porta-degustation-grid__item:focus:not(:focus-visible) {
outline: none;
}
.porta-degustation-grid__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.porta-degustation-grid__item:hover img,
.porta-degustation-grid__item:focus-visible img {
transform: scale(1.04);
}
/* Mobile asymmetric placement (max-width guard keeps desktop untouched) */
@media (max-width: 767px) {
.porta-degustation-grid__item:nth-child(1) { grid-row: 1 / 3; } /* tall portrait, left col */
.porta-degustation-grid__item:nth-child(4) { grid-column: 1 / 3; } /* full width bottom */
}
/* Desktop: switch to 3-column asymmetric layout */
@media (min-width: 768px) {
.porta-degustation-grid__inner {
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 280px 280px;
}
/* img 1 — tall portrait, spans both rows */
.porta-degustation-grid__item:nth-child(1) {
grid-row: 1 / 3;
}
/* img 2 — wide landscape, spans last two columns */
.porta-degustation-grid__item:nth-child(2) {
grid-column: 2 / 4;
}
/* img 3 and img 4 fill the remaining cells automatically */
}
/* "Last updated" notice — small and muted, sits below all sections */
.porta-legal__updated {
margin-top: 2rem;
font-size: var(--text-sm);
color: var(--color-text-light);
font-style: italic;
}
/* ── Lightbox (reusable — any page) ─────────────────────────────────────────
*
* Full-screen overlay opened by a .porta-lightbox-item .
* Built and controlled by assets/js/lightbox.js.
* Enqueue the script per-page in inc/enqueue.php. Currently active on /degustation.
* See lightbox.js header comment for full usage instructions.
* ───────────────────────────────────────────────────────────────────────── */
/* Page scroll locked while a dialog is open — the lightbox and the /domaine
detail dialog (dialog.js, portaDialog.lockScroll()). */
body.porta-scroll-locked {
overflow: hidden;
}
/* Any clickable image wrapper signals interactivity */
.porta-lightbox-item {
cursor: zoom-in;
}
/* Hidden images — loaded for lightbox navigation, never rendered on the page */
.porta-lightbox-extra {
display: none;
}
/* Overlay */
.porta-lightbox {
position: fixed;
inset: 0;
z-index: var(--z-lightbox);
background: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--duration) ease;
cursor: zoom-out;
}
.porta-lightbox.is-open {
opacity: 1;
}
/* Image */
.porta-lightbox__img {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
display: block;
cursor: default;
transform: scale(0.97);
transition: transform var(--duration) ease;
}
.porta-lightbox.is-open .porta-lightbox__img {
transform: scale(1);
}
/* Close button */
.porta-lightbox__close {
position: absolute;
top: 1.25rem;
right: 1.5rem;
color: var(--color-white) !important;
font-size: 2.25rem;
line-height: 1;
cursor: pointer;
padding: 0.5rem;
opacity: 0.75;
transition: opacity var(--duration-fast) ease;
border-radius: 0 !important;
}
.porta-lightbox__close:hover {
opacity: 1;
color: var(--color-white) !important;
}
/* Prev / Next arrows */
.porta-lightbox__prev,
.porta-lightbox__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--color-white) !important;
font-size: 3rem;
line-height: 1;
cursor: pointer;
padding: 1rem 1.25rem;
opacity: 0.65;
transition: opacity var(--duration-fast) ease;
user-select: none;
border-radius: 0 !important;
}
.porta-lightbox__prev:hover,
.porta-lightbox__next:hover {
opacity: 1;
color: var(--color-white) !important;
}
.porta-lightbox__prev { left: 0.5rem; }
.porta-lightbox__next { right: 0.5rem; }
/* Counter: "4 / 14" — bottom centre of the overlay */
.porta-lightbox__counter {
position: absolute;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-body);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.65);
letter-spacing: var(--tracking-wide);
pointer-events: none;
white-space: nowrap;
}
/* Grid hint — "Voir les N photos" below the mosaic.
No outline suppression here: keyboard focus keeps the global burgundy
ring from base.css (the color change alone is not a focus indicator). */
.porta-degustation-grid__hint {
display: block;
min-height: var(--tap-size-link); /* 24px text-link target (audit 09-011) */
margin: 0.6rem auto 0;
padding: 0.25rem 0;
cursor: pointer;
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--color-text-light);
letter-spacing: var(--tracking);
text-align: center;
transition: color var(--duration-fast);
}
.porta-degustation-grid__hint::after {
content: ' →';
}
.porta-degustation-grid__hint:hover,
.porta-degustation-grid__hint:focus,
.porta-degustation-grid__hint:active {
color: var(--color-accent);
}
/* Quiet on mouse click — Astra's button:focus outline reset needs the bump. */
.porta-degustation-grid__hint:focus:not(:focus-visible) {
outline: none;
}
@media (prefers-reduced-motion: reduce) {
.porta-lightbox,
.porta-lightbox__img {
transition: none;
}
}
/* ── 404 error page ──────────────────────────────────────────────────────── */
/* The header is a beige page band (.porta-page-band in 404.php: background,
full bleed, 270px), like every information page — not burgundy, and a 44px
H1, not the 56px of the photo heroes (audit 09-005 / 09-DR-2, owner S9-Q3). */
.porta-404__label {
display: block;
font-family: var(--font-body);
font-size: var(--eyebrow-size);
font-weight: var(--eyebrow-weight);
letter-spacing: var(--eyebrow-tracking);
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 0.5rem;
}
.porta-404__title {
font-family: var(--font-heading);
font-size: var(--text-3xl);
color: var(--color-text);
margin: 0;
}
@media (min-width: 768px) {
.porta-404__title { font-size: var(--text-4xl); }
}
.porta-404__body {
text-align: center;
}
.porta-404__message {
font-size: var(--text-lg);
color: var(--color-text-light);
line-height: 1.7;
max-width: 540px;
margin: 0 auto 2.5rem;
}
.porta-404__actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
/* ── Hero background photo (porta_bg_photo(), audit 03-009) ───────────────── */
/* Fills its positioned section like the old cover background did. The section
keeps its fallback colour; overlays and content stack above it. */
.porta-bg-photo {
position: absolute;
inset: 0;
}
.porta-bg-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* ── Touch targets (owner S9-Q11, audit 09-011 / 09-DR-8) ────────────────────
* 44px (--tap-size) for every control, at least 24px (--tap-size-link) for
* text links outside a sentence (links inside a sentence are exempt).
* Mostly INVISIBLE: a transparent ::after centred on the control extends the
* area a finger can hit while the drawn shape stays as designed. Where the
* shape itself grows (pills, buttons) the change is a few pixels. The WooCommerce
* controls (steppers, selects, add-to-cart, magnifier) are in woocommerce.css,
* the header's menu button and cart in header.css.
*/
.porta-btn {
min-height: var(--tap-size);
display: inline-flex;
align-items: center;
justify-content: center;
}
.porta-filter__btn,
.porta-footer__social-link,
.porta-lang__link,
.domaine-detail-btn,
.porta-anchor-nav a {
position: relative;
}
.porta-filter__btn::after,
.porta-footer__social-link::after,
.porta-lang__link::after,
.domaine-detail-btn::after,
.porta-anchor-nav a::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: max(100%, var(--tap-size));
height: max(100%, var(--tap-size));
transform: translate(-50%, -50%);
}
/* Filter pills (/nos-vins, /actualites): 36px drawn on touch screens (was 28),
the ::after above makes the tap area 44px. Desktop keeps its 28px pills. */
@media (pointer: coarse) {
.porta-filter__btn {
min-height: 36px;
}
/* The /domaine « detail » buttons: 44px drawn (the in-page menu links are
44px at every width, see .porta-anchor-nav). */
.domaine-detail-btn {
min-height: var(--tap-size);
}
}
/* Footer language links: more space between the letters so the 44px areas
do not overlap. */
.porta-lang--footer {
gap: 1.25rem;
}
/* Text links outside a sentence: at least 24px high, padding only. */
.porta-footer__legal a,
.porta-footer__contact-list a,
.porta-tastings__included a,
.porta-tastings__actions a:not(.porta-btn),
.porta-booking__contact a,
.porta-contact__more,
.porta-wine-card__title a,
.porta-gifts__link,
.porta-catalog__note a,
.porta-featured__proof a {
/* inline-block, not inline-flex: a flex box drops the space before an
arrow (« Nos distinctions→ »). The padding centres one line in 24px. */
display: inline-block;
min-height: var(--tap-size-link);
padding-block: max(0px, calc((var(--tap-size-link) - 1lh) / 2));
}