/**
* Graphic Ouest — Famille A (pages catégories produits)
* -----------------------------------------------------
* Squelette réutilisable pour toutes les pages d'univers /
* catégories de la boutique. S'appuie uniquement sur les tokens
* --go-* définis dans design-system.css.
*
* Structure attendue dans le PHP :
*
*
*
*
*
*
* (si ≥5 produits)
*
*
*
*
* Points de rupture (partagés site) : 600px, 900px.
* Aucun CSS inline dans les templates PHP.
*/
/* -------------------------------------------------------------
* Fond d'atelier : couche fixe derrière le contenu.
* On n'utilise PAS background-attachment: fixed (bug iOS Safari).
* ------------------------------------------------------------- */
body.go-a-page {
background: var(--go-cream);
color: var(--go-text);
margin: 0;
font-family: var(--go-font-body);
line-height: var(--go-leading-normal);
}
.go-a-backdrop {
position: fixed;
inset: 0;
z-index: -1;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
pointer-events: none;
}
/* Voiles teintés (ambiance atelier + contraste texte) */
.go-a-backdrop::before,
.go-a-backdrop::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.go-a-backdrop::before {
background:
radial-gradient(1000px 700px at 15% 20%, rgba(242, 148, 0, 0.06), transparent 60%),
radial-gradient(900px 700px at 90% 40%, rgba(19, 35, 91, 0.08), transparent 60%);
}
.go-a-backdrop::after {
/* Fondu vers --go-cream (#FBF8F0), exprimé en vh explicites (pas en %).
Découplé de toute hauteur de contenu : la transition arrive au MÊME
endroit de l'écran quelle que soit la longueur des textes saisis
en back-office (règle 4 du manifeste).
À 85vh le fondu atteint cream opaque → continuité invisible avec le
body cream qui suit le backdrop, quel que soit l'endroit où le titre
de section apparaît. */
background: linear-gradient(180deg,
rgba(251, 248, 240, 0.05) 0vh,
rgba(251, 248, 240, 0.35) 30vh,
rgba(251, 248, 240, 0.90) 60vh,
#FBF8F0 85vh);
}
/* -------------------------------------------------------------
* Container commun
* ------------------------------------------------------------- */
.go-container {
max-width: var(--go-container-max);
margin: 0 auto;
padding-left: var(--go-space-container);
padding-right: var(--go-space-container);
width: 100%;
box-sizing: border-box;
}
/* -------------------------------------------------------------
* HERO
*
* Hauteur constante indépendante du texte : la position verticale du
* titre de section (qui suit) est identique sur les 6 univers, quelle
* que soit la longueur de l'accroche (baseline). C'est le cœur de
* l'uniformité visuelle — sans ça, l'image de fond « s'arrête » à des
* endroits différents selon que le hero est court (Tirage Photo, 1 mot)
* ou long (Carterie, phrase riche).
*
* Hauteur NATURELLE — pas de min-height calé sur le contenu actuel.
* Le hero respire quand le texte est long, se resserre quand il n'y en
* a pas. L'uniformité visuelle est portée par le FONDU BACKDROP en vh
* (voir .go-a-backdrop::after ci-dessus), pas par la hauteur du hero.
*
* Manifeste règle 4 : l'apparence d'une page ne dépend d'aucune
* contrainte sur la longueur des textes saisis en back-office.
* ------------------------------------------------------------- */
.go-a-hero {
padding-top: var(--go-space-section);
padding-bottom: var(--go-space-section);
}
.go-a-hero__box {
background: rgba(255, 255, 255, 0.75);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid var(--go-blue-line);
border-radius: var(--go-radius-xl);
padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
max-width: 820px;
box-shadow: var(--go-shadow-md);
}
.go-a-hero__eyebrow {
display: inline-block;
color: var(--go-orange);
font-size: var(--go-text-xs);
font-weight: var(--go-weight-bold);
letter-spacing: var(--go-tracking-wide);
text-transform: uppercase;
margin-bottom: var(--go-space-4);
}
.go-a-hero__title {
color: var(--go-blue);
font-family: var(--go-font-display);
font-size: var(--go-text-hero);
font-weight: var(--go-weight-black);
line-height: var(--go-leading-tight);
letter-spacing: var(--go-tracking-tight);
margin: 0 0 var(--go-space-5) 0;
}
.go-a-hero__baseline {
color: var(--go-blue);
font-size: var(--go-text-lg);
font-weight: var(--go-weight-medium);
line-height: var(--go-leading-snug);
margin: 0 0 var(--go-space-6) 0;
max-width: 60ch;
}
.go-a-hero__cta {
display: flex;
flex-wrap: wrap;
gap: var(--go-space-4);
}
/* -------------------------------------------------------------
* BOUTONS (socle réutilisable — mais scopé sur famille A ici,
* si tu veux plus tard extraire vers un go-btn global, remonte
* ces règles dans design-system.css ou un fichier buttons.css.)
* ------------------------------------------------------------- */
.go-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--go-space-2);
padding: 0.85em 1.6em;
font-family: var(--go-font-body);
font-size: var(--go-text-base);
font-weight: var(--go-weight-bold);
text-decoration: none;
border-radius: var(--go-radius-md);
border: 1px solid transparent;
cursor: pointer;
transition: transform var(--go-duration-fast) var(--go-ease-out),
box-shadow var(--go-duration-normal) var(--go-ease-out),
background var(--go-duration-normal) var(--go-ease-out),
color var(--go-duration-normal) var(--go-ease-out);
}
.go-btn:focus-visible {
outline: 2px solid var(--go-orange);
outline-offset: 2px;
}
.go-btn--primary {
background: var(--go-orange);
color: #fff;
}
.go-btn--primary:hover {
background: var(--go-orange-soft);
transform: translateY(-1px);
box-shadow: var(--go-shadow-md);
}
.go-btn--outline {
background: transparent;
color: var(--go-blue);
border-color: var(--go-blue);
}
.go-btn--outline:hover {
background: var(--go-blue);
color: #fff;
transform: translateY(-1px);
box-shadow: var(--go-shadow-md);
}
/* -------------------------------------------------------------
* SECTION GRILLE (produits)
* ------------------------------------------------------------- */
.go-a-grid-section {
padding-top: var(--go-space-8);
padding-bottom: var(--go-space-section);
}
.go-a-section-head {
margin-bottom: var(--go-space-8);
max-width: 720px;
}
.go-a-section-head__label {
display: inline-block;
color: var(--go-orange);
font-size: var(--go-text-xs);
font-weight: var(--go-weight-bold);
letter-spacing: var(--go-tracking-wide);
text-transform: uppercase;
margin-bottom: var(--go-space-3);
}
.go-a-section-head__title {
color: var(--go-blue);
font-family: var(--go-font-display);
font-size: var(--go-text-2xl);
font-weight: var(--go-weight-black);
line-height: var(--go-leading-tight);
margin: 0 0 var(--go-space-4) 0;
}
.go-a-section-head__intro {
color: var(--go-blue);
font-size: var(--go-text-base);
font-weight: var(--go-weight-medium);
margin: 0;
}
/* Cartes bornées à ~380px max : avec 1 ou 2 produits, la grille reste
alignée sur la colonne des univers plus fournis (Carterie 3, Grand
Format 4), pas d'étalement pleine largeur. auto-fill (pas auto-fit)
pour préserver les slots vides et garder l'alignement à gauche. */
.go-a-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--go-space-5);
}
@media (min-width: 600px) {
.go-a-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 380px));
gap: var(--go-space-6);
}
}
@media (min-width: 900px) {
.go-a-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 380px));
}
}
/* -------------------------------------------------------------
* CARD produit
* ------------------------------------------------------------- */
.go-a-card {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.82);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid var(--go-blue-line);
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform var(--go-duration-normal) var(--go-ease-out),
box-shadow var(--go-duration-normal) var(--go-ease-out),
border-color var(--go-duration-normal) var(--go-ease-out);
box-shadow: 0 6px 20px -12px rgba(19, 35, 91, 0.22);
}
.go-a-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px -20px rgba(19, 35, 91, 0.35);
border-color: rgba(19, 35, 91, 0.25);
}
.go-a-card:focus-visible {
outline: 2px solid var(--go-orange);
outline-offset: 3px;
}
.go-a-card__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--go-gray-100);
}
.go-a-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--go-duration-slow) var(--go-ease-out);
}
.go-a-card:hover .go-a-card__media img {
transform: scale(1.03);
}
.go-a-card__body {
padding: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
display: flex;
flex-direction: column;
gap: var(--go-space-3);
flex: 1;
}
.go-a-card__title {
color: var(--go-blue);
font-family: var(--go-font-display);
font-size: var(--go-text-lg);
font-weight: var(--go-weight-bold);
line-height: var(--go-leading-tight);
margin: 0;
}
.go-a-card__desc {
color: var(--go-blue);
font-size: var(--go-text-sm);
line-height: var(--go-leading-snug);
margin: 0;
opacity: 0.85;
}
.go-a-card__price {
color: var(--go-orange);
font-weight: var(--go-weight-bold);
font-size: var(--go-text-sm);
margin-top: auto;
}
.go-a-card__price-from {
color: var(--go-gray-500);
font-weight: var(--go-weight-regular);
margin-right: 0.25em;
}
/* -------------------------------------------------------------
* FILTRES (affichés uniquement si ≥ 5 produits, condition côté PHP)
* ------------------------------------------------------------- */
.go-a-filters {
padding-top: var(--go-space-6);
padding-bottom: var(--go-space-section);
}
.go-a-filters__list {
display: flex;
flex-wrap: wrap;
gap: var(--go-space-3);
list-style: none;
padding: 0;
margin: 0;
}
.go-a-filters__item button {
background: rgba(255, 255, 255, 0.85);
border: 1px solid var(--go-blue-line);
color: var(--go-blue);
font-family: var(--go-font-body);
font-size: var(--go-text-sm);
font-weight: var(--go-weight-medium);
padding: 0.5em 1.1em;
border-radius: var(--go-radius-pill);
cursor: pointer;
transition: background var(--go-duration-fast) var(--go-ease-out),
color var(--go-duration-fast) var(--go-ease-out),
border-color var(--go-duration-fast) var(--go-ease-out);
}
.go-a-filters__item button:hover,
.go-a-filters__item button[aria-pressed="true"] {
background: var(--go-blue);
color: #fff;
border-color: var(--go-blue);
}
/* -------------------------------------------------------------
* Motion reduce
* ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.go-a-card,
.go-a-card__media img,
.go-btn {
transition: none;
}
.go-a-card:hover {
transform: none;
}
.go-a-card:hover .go-a-card__media img {
transform: none;
}
}