, PAS le (qui a aussi cette classe sous Drupal). */ article.node--type-page { max-width: 1280px; margin: 2rem auto; padding: 0 1.5rem; } .page-section + .page-section { margin-top: 4rem; } .page-section__title { font-family: var(--ocdm-font-display); font-weight: 800; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); margin: 0 0 1.5rem; line-height: 1.05; letter-spacing: -0.025em; color: var(--ocdm-text-strong); } /* ========== HERO ========== */ .page-section--hero__inner { display: grid; /* minmax(0, …) : sans ça, une image à grande taille native (ex. logo JPG 2049px) force sa colonne à déborder du viewport → texte coupé. */ grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; /* start (et non center) : le texte s'aligne en haut au lieu d'être centré face à la colonne photos plus haute → plus de grand vide vertical. */ align-items: start; } .page-section--hero__text { display: flex; flex-direction: column; gap: 1.25rem; } .page-section--hero__eyebrow { font-size: 0.95rem; font-style: italic; color: var(--cantinho-muted, #64748b); } .page-section--hero__title, .page-section--hero__title .field__item, .page-section--hero__title p { font-family: var(--ocdm-font-display); font-weight: 800; font-size: clamp(2.1rem, 1.7rem + 2.2vw, 3.3rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--ocdm-text-strong); margin: 0; overflow-wrap: break-word; } .page-section--hero__title em, .page-section--hero__title strong { font-style: italic; font-weight: 700; color: var(--ocdm-framboise); font-variation-settings: "opsz" 144; } /* Les 2 images du hero sont en PAYSAGE (photo d'époque 286×194, logo 2049×1296). Plus de cadre portrait 4:5 qui recadrait : ratio naturel, empilées en quinconce façon photos posées sur une table, plus grandes. */ .page-section--hero__images { position: relative; display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; } .page-section--hero__image { border: 1px solid var(--ocdm-border); border-radius: 0; padding: 10px 10px 26px; background: var(--ocdm-bg-elevated); width: min(100%, 340px); box-shadow: var(--ocdm-shadow-polaroid); } .page-section--hero__image img { width: 100%; height: auto; /* ratio naturel — aucun recadrage */ display: block; } .page-section--hero__image--left { transform: rotate(-2deg); align-self: flex-start; } .page-section--hero__image--right { transform: rotate(2.5deg); align-self: flex-end; margin-top: -0.75rem; } /* Si un jour il ne reste qu'une image : centrée, même taille. */ .page-section--hero__image:only-child { align-self: center; } /* ========== TIMELINE ========== */ .page-section--timeline .page-timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 2rem; border-left: 2px dashed #1a1a1a; } .page-timeline__item { display: grid; grid-template-columns: 100px 1fr; gap: 1.5rem; align-items: baseline; padding: 0.75rem 0; position: relative; } .page-timeline__dot { position: absolute; left: -2.6rem; top: 1.1rem; width: 14px; height: 14px; border-radius: 999px; background: var(--ocdm-framboise); border: 3px solid var(--ocdm-bg); } .page-timeline__date { font-family: var(--ocdm-font-display); font-style: italic; font-weight: 700; font-size: 1.75rem; color: var(--ocdm-framboise); font-variation-settings: "opsz" 144; line-height: 1; letter-spacing: -0.02em; } .page-timeline__text, .page-timeline__text .field__item, .page-timeline__text p { font-size: 1.05rem; line-height: 1.5; margin: 0; color: var(--cantinho-text, #1e293b); } /* ========== TEXT ========== */ .page-section--text__body { max-width: 720px; font-size: 1.05rem; line-height: 1.6; } /* ========== TEAM EMBED ========== */ .page-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; } .page-team-grid__item { display: flex; list-style: none; } /* ========== TEAM MINI (card ronde) ========== */ .team-mini { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; text-align: center; width: 100%; transition: transform 0.2s ease; } .team-mini:hover { transform: translateY(-2px); } .team-mini__photo { width: 140px; height: 140px; border-radius: 999px; border: 4px solid var(--ocdm-bg-elevated); background: var(--ocdm-bg-sunken); overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: var(--ocdm-shadow-sm); } .team-mini__photo img { width: 100%; height: 100%; object-fit: cover; } .team-mini__placeholder { font-size: 3rem; opacity: 0.5; } .team-mini__name { font-family: var(--ocdm-font-display); font-size: 1.15rem; font-weight: 700; margin: 0; line-height: 1.1; letter-spacing: -0.015em; color: var(--ocdm-text-strong); } .team-mini__role { font-family: var(--ocdm-font-hand); font-size: 1.1rem; color: var(--ocdm-framboise); line-height: 1; } /* ========== RESPONSIVE ========== */ @media (max-width: 992px) { .page-section--hero__inner { grid-template-columns: 1fr; gap: 2rem; } .page-section--hero__title, .page-section--hero__title .field__item, .page-section--hero__title p { font-size: 3.5rem; } } @media (max-width: 540px) { .page-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .page-timeline__item { grid-template-columns: 70px 1fr; gap: 1rem; } .page-timeline__date { font-size: 1.5rem; } }