/*
 * templates-core.css - styles communs de tous les templates MAM.
 *
 * Couvre :
 *   - Breadcrumbs (.mam-breadcrumbs base)
 *   - Grilles cards listing (.mam-grid--cards)
 *   - Pagination (.mam-pagination)
 *   - Wrapper racine .mam-tpl + .mam-tpl__head + variants (hero, centered)
 *   - .mam-tpl__hero, .mam-tpl__title, .mam-tpl__kicker, .mam-tpl__lead
 *   - .mam-tpl__meta-list, .mam-tpl__price, .mam-tpl__logo, .mam-tpl__thumb
 *   - .mam-tpl__body, helpers 404 / search-form
 *   - .mam-archive-head, .mam-locale-head (legacy heads)
 *
 * Split issu de templates.css (audit 2026-05) pour reduire la taille du
 * fichier d'origine (~2330 lignes). Voir aussi templates-variants.css et
 * templates-blocks.css.
 */

/* === Breadcrumbs === */

.mam-breadcrumbs {
    padding: 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.mam-breadcrumbs__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.mam-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.mam-breadcrumbs__link {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--dur-hover) var(--ease-editorial);
}

.mam-breadcrumbs__link:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.mam-breadcrumbs__current {
    color: var(--color-text);
    font-weight: var(--fw-medium);
}

.mam-breadcrumbs__sep {
    color: var(--color-text-subtle);
    user-select: none;
}

/* === Grilles cards uniformes pour les archives/listings === */

.mam-grid--cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-7) var(--sp-5);
}

@media (max-width: 1024px) {
    .mam-grid--cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .mam-grid--cards { grid-template-columns: 1fr; }
}

/* Card : version interactive avec lien wrapper */

.mam-card__link {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-hover) var(--ease-editorial);
}

.mam-card__link:hover .mam-card__title { color: var(--color-accent); }

.mam-card__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-reveal) var(--ease-editorial);
}

.mam-card__link:hover .mam-card__media-img { transform: scale(1.04); }

/* Placeholder media : pattern subtil (lignes diagonales paper-alt) +
   icone maison centree. Utilise quand ni featured ni mam_galerie ne
   sont renseignes. Style 'placeholder editorial' propre vs un simple
   carre gris. */
.mam-card__media--empty {
    aspect-ratio: 4 / 3;
    background-color: var(--c-mineral);
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 14px,
        rgba(0,0,0,0.025) 14px,
        rgba(0,0,0,0.025) 15px
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-ink-soft);
    border: 0;
}
.mam-card__media-placeholder {
    width: 38%;
    max-width: 80px;
    height: auto;
    opacity: 0.35;
    transition: opacity var(--dur-hover) var(--ease-editorial);
}
.mam-card__link:hover .mam-card__media-placeholder,
.mam-card:hover .mam-card__media-placeholder {
    opacity: 0.55;
}

/* Cartes agence : ratio aligne sur le 3:2 de base (photos fournies en 3:2,
   coherence avec les autres cartes de listing, retour cliente 10/07). Plus
   d'override 16:9 qui double-croppait la photo (4:3 servi puis 16:9). */

/* === Pagination === */

.mam-pagination {
    margin-top: var(--sp-7);
    display: flex;
    justify-content: center;
}

.mam-pagination__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.mam-pagination__item .page-numbers {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--color-hairline);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--dur-hover) var(--ease-editorial),
                color var(--dur-hover) var(--ease-editorial);
}

.mam-pagination__item .page-numbers:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.mam-pagination__item .page-numbers.current {
    background: var(--c-ink);
    color: var(--c-paper);
    border-color: var(--c-ink);
}

/* =================================================================
 * ARCHITECTURE TEMPLATE UNIFIEE (.mam-tpl)
 * -----------------------------------------------------------------
 * Toutes les pages du site (single, archive, page, taxonomy, home,
 * 404) suivent la meme structure HTML pour garantir une coherence
 * visuelle absolue et un CSS minimal :
 *
 *   <main class="mam-tpl mam-tpl--{type}">
 *     <div class="mam-tpl__breadcrumbs">
 *       <div class="mam-container">{breadcrumb}</div>
 *     </div>
 *     <header class="mam-tpl__head [mam-tpl__head--hero]">
 *       [optional .mam-tpl__hero]
 *       <div class="mam-container">{kicker, h1, lead/meta}</div>
 *     </header>
 *     <div class="mam-tpl__body">{sections / content}</div>
 *   </main>
 *
 * Types disponibles : --post, --realisation, --programme, --annonce,
 *   --agence, --page, --archive, --taxonomy, --blog, --404.
 *
 * Le wrapper .mam-tpl n'a aucun padding-block : le breadcrumb est
 * colle au header global, et le head + body gerent leurs propres
 * espaces selon qu'il y a un hero ou non.
 * ================================================================= */

/* --- Wrapper racine --- */

.mam-tpl {
    /* Pas de padding. Le .mam-tpl__head s'occupe de l'espace. */
}

/* --- Breadcrumbs + Head wrappers : alignement strict --- */

/* Les wrappers racines (BC + head) n'ont AUCUN padding-inline propre.
   L'alignement est delegue 100% au .mam-container interne (max-width
   var(--content-wide) + padding-inline var(--gutter) + margin auto)
   pour matcher EXACTEMENT le comportement du header, topbar et des
   sections du body. Resultat : alignement au pixel pres sur tous les
   viewports. */
.mam-tpl__breadcrumbs,
.mam-tpl__head {
    padding-inline: 0;
}

/* =====================================================================
   HARMONISATION ABOVE-THE-FOLD (2026-05)
   ---------------------------------------------------------------------
   Convention globale pour TOUS les templates (CPT, pages statiques,
   archives, taxonomies, blog, 404) :
     1. Breadcrumb (fil d'Ariane) : bande ink (sombre) pleine largeur
     2. Head (kicker + titre + lead) : bande mineral (gris) pleine
        largeur. Sauf si hero immersif (image fond) -> garde sa
        couverture image.
     3. Edito (intro, contenu introductif) : bande mineral aussi.
     4. Body / listing : fond paper (blanc) par defaut.

   Technique : box-shadow 100vmax + clip-path inset(0 -100vmax) pour
   etendre le fond au-dela du .mam-container sans modifier le HTML.
   ===================================================================== */

/* 1. Breadcrumb : 2 contextes possibles.
   a) DANS le mam-container du header (helper mam_tpl_archive_header) :
      pas de fond propre, herite du mineral parent. Juste espace avant
      le titre.
   b) En standalone (templates non-helper : single-mam_annonce, etc.) :
      bande mineral pleine largeur autonome via box-shadow.
   Couleurs communes : muted sur ink, hover accent. */
.mam-tpl__breadcrumbs {
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}

/* Cas (a) : breadcrumb integre au header */
.mam-tpl__head .mam-tpl__breadcrumbs {
    margin-bottom: var(--sp-3);
}

/* Cas (b) : breadcrumb autonome (hors helper) */
.mam-tpl__breadcrumbs:not(.mam-tpl__head .mam-tpl__breadcrumbs) {
    background: var(--c-mineral);
    box-shadow: 0 0 0 100vmax var(--c-mineral);
    clip-path: inset(0 -100vmax);
    padding-block: var(--sp-2);
}

.mam-tpl__breadcrumbs:not(.mam-tpl__head .mam-tpl__breadcrumbs) > .mam-container {
    /* Aligne le fil d'Ariane sur la meme verticale que le header / le contenu
       (gutter standard), pas un inset reduit (2026-06 : evite le decalage a
       gauche vs logo/nav). */
    padding-inline: var(--gutter);
}

.mam-tpl__breadcrumbs .mam-breadcrumbs__current {
    color: var(--c-ink);
}

.mam-tpl__breadcrumbs .mam-breadcrumbs__link {
    color: var(--color-text-muted);
}

.mam-tpl__breadcrumbs .mam-breadcrumbs__link:hover {
    color: var(--color-accent);
}

.mam-tpl__breadcrumbs .mam-breadcrumbs__sep {
    color: var(--color-text-muted);
    opacity: 0.6;
}

/* 2. Head : bande mineral pleine largeur (titre + lead + edito).
   Exception : .mam-tpl__head--hero garde son image immersive.
   Padding-block uniforme sur tous les heads pour cohesion visuelle
   d'une page a l'autre (sp-4 haut / sp-5 bas).
   Variantes historiques mam-archive-head / mam-locale-head conservees
   comme alias mais le helper mam_tpl_archive_header() est desormais
   la voie privilegiee (rend mam-tpl__head). */
.mam-tpl__head:not(.mam-tpl__head--hero),
.mam-archive-head,
.mam-locale-head {
    background: var(--c-mineral);
    box-shadow: 0 0 0 100vmax var(--c-mineral);
    clip-path: inset(0 -100vmax);
    padding-block: var(--sp-4) var(--sp-5);
}

/* Override : titre + lead + intro du helper uniforme aux variantes
   reduites (taille cliente : reduire la police des H1, lead 14px).
   Pack B audit 2026-05 : on autorise un scale superieur sur grands
   ecrans (jusqu'a ~3.25rem = 52px sur 1920px+) pour donner de la
   presence au H1 sans le rendre disproportionne sur 1440. */
.mam-tpl__head .mam-tpl__title {
    font-size: clamp(1.5rem, 2vw + 0.5rem, 3.25rem);
    font-weight: 500;
    font-variation-settings: "wght" 440, "wdth" 96;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 0 0 var(--sp-2);
    max-width: none;
    /* 1 ligne si le titre tient, sinon wrap equilibre : evite l'overflow des
       titres longs (ex. articles de blog "Portrait de ..."). */
    text-wrap: balance;
    overflow-wrap: break-word;
}

.mam-tpl__head .mam-tpl__lead {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.mam-tpl__head .mam-tpl__intro {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.mam-tpl__head .mam-tpl__intro > * {
    margin-block: var(--sp-2);
}

.mam-tpl__head .mam-tpl__intro > *:first-child {
    margin-top: 0;
}

.mam-tpl__head .mam-tpl__intro > *:last-child {
    margin-bottom: 0;
}

/* Compat : ancien modifier --prelude (devient redondant, garde-fou) */
.mam-tpl__breadcrumbs--prelude {
    background: var(--c-ink);
}

.mam-archive-head {
    padding-block: var(--sp-3) var(--sp-4);
}

.mam-archive-head__title {
    margin: 0 0 var(--sp-2);
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
    font-weight: 500;
    font-variation-settings: "wght" 440, "wdth" 96;
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-wrap: balance;
}

.mam-archive-head__lead {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Pages locales (construire-maison-XX / programmes-immobiliers-XX) :
   meme principe que archive annonces. Pas de kicker, pas de bloc
   reperes, juste titre compact + lead + intro editoriale pleine
   largeur, listing immediatement apres. */
.mam-locale-head {
    padding-block: var(--sp-3) var(--sp-3);
}

.mam-locale-head__title {
    margin: 0 0 var(--sp-2);
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
    font-weight: 500;
    font-variation-settings: "wght" 440, "wdth" 96;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-wrap: balance;
}

.mam-locale-head__lead {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Intro editoriale pleine largeur (post_content) : sans aside reperes,
   sans contrainte max-width et sans multi-colonnes. Texte fin (14px)
   pour conserver une densite lisible sur les longues lignes
   (retour cliente 2026-05). */
.mam-locale-intro {
    padding-block: var(--sp-3) var(--sp-5);
}

.mam-locale-intro__prose > * {
    margin-block: var(--sp-2);
}

.mam-locale-intro__prose > *:first-child {
    margin-top: 0;
}

.mam-locale-intro__prose h2,
.mam-locale-intro__prose h3 {
    font-size: var(--fs-md);
    margin-block: var(--sp-3) var(--sp-2);
}

.mam-locale-intro__prose p,
.mam-locale-intro__prose li {
    font-size: var(--fs-sm);
    line-height: 1.6;
}

@media (max-width: 1023px) {
    .mam-tpl--archive-annonces .mam-archive-split {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
        padding-block: var(--sp-3) var(--sp-6);
    }
    .mam-archive-split__intro {
        position: static;
        border-left: 0;
        border-top: 2px solid var(--color-accent);
        padding-left: 0;
        padding-top: var(--sp-3);
    }
    .mam-archive-split__title {
        font-size: clamp(1.75rem, 5vw + 1rem, 2.5rem);
    }
}

/* --- Head : bloc kicker + H1 + lead/meta ---
   Note 2026-05 : padding harmonise via la regle d'harmonisation
   above-the-fold plus haut (sp-4 / sp-5). Cette ancienne regle est
   retiree pour eviter le double-override. */

.mam-tpl__head--hero {
    /* Avec hero immersif : pas de padding-top (le hero est full-bleed,
       colle directement au breadcrumb). */
    padding-top: 0;
}

.mam-tpl__head--hero .mam-container {
    /* Espace entre le hero et le bloc kicker/h1/meta. */
    margin-top: var(--sp-5);
}

/* Variante centree : 404, search, etc. */
.mam-tpl__head--centered .mam-container { text-align: center; }
.mam-tpl__head--centered .mam-kicker { justify-content: center; }
.mam-tpl__head--centered .mam-tpl__lead { margin-inline: auto; }

/* Bloc de recherche embarque dans le header (search.php). */
.mam-tpl__search-form {
    margin-top: var(--sp-5);
    max-width: 720px;
}

/* Body 404 : centrage du contenu sous le header centre. */
.mam-404__body { text-align: center; }
.mam-404__search { margin-bottom: var(--sp-7); }
.mam-404__links {
    display: flex;
    gap: var(--sp-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Hero immersif (cinematic, full-bleed) --- */

.mam-tpl__hero {
    position: relative;
    width: 100%;
    /* height clamp() au lieu d'aspect-ratio : evite le conflit qui
       reduit la largeur quand max-height kick in. On garde toujours
       100% de largeur (full-bleed) + une hauteur bornee qui laisse
       voir le kicker dessous au load (~100-200px de viewport restant). */
    height: clamp(320px, 56vh, 540px);
    overflow: hidden;
    background: var(--color-bg-alt);
}

.mam-tpl__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mam-tpl__hero::after {
    /* Gradient sombre en bas pour la lisibilite d'un ribbon eventuel. */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0.45) 100%);
    pointer-events: none;
}

.mam-tpl__hero .mam-ribbon--hero {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    /* Colle a l'angle bas-gauche, pas de marge */
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-accent);
    color: var(--c-paper);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
}

/* --- Title / Kicker / Lead --- */

.mam-tpl__kicker {
    margin: 0 0 var(--sp-4);
}

.mam-tpl__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(2.25rem, 4vw + 1rem, 4rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.mam-tpl__title em {
    font-style: normal;
    color: var(--color-accent);
}

.mam-tpl__lead {
    margin: var(--sp-5) 0 0;
    color: var(--color-text-muted);
    font-size: var(--fs-lg);
    line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Pages institutionnelles : hero SCINDE (2026-07, retour JJ) - image d'un
   cote, titre/lead de l'autre, comme la fiche annonce. L'image est en
   colonne (width:100%, height:auto) : visible EN ENTIER, jamais rognee,
   sans bandes (la colonne plus etroite garde une hauteur moderee). Bande
   grise pleine largeur (comme les heads sans hero) pour cadrer. Mobile :
   image puis texte empiles. Scope pages -> fiches CPT inchangees.
   --------------------------------------------------------------------- */
.mam-tpl--page .mam-tpl__head--split {
    padding-block: var(--sp-5) var(--sp-6);
    background: var(--c-mineral);
    box-shadow: 0 0 0 100vmax var(--c-mineral);
    clip-path: inset(0 -100vmax);
}
.mam-tpl__hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    gap: var(--sp-5) var(--sp-6);
    align-items: center;
}
@media (max-width: 900px) {
    .mam-tpl__hero-shell { grid-template-columns: 1fr; }
}
.mam-tpl__hero-visual,
.mam-tpl__hero-text {
    min-width: 0;
}
.mam-tpl__hero-img {
    display: block;
    width: 100%;
    height: auto;                 /* image entiere, jamais rognee, sans bandes */
}
/* Dans le hero scinde, titre/lead reprennent la taille standard du head. */
.mam-tpl__head--split .mam-tpl__title {
    text-wrap: balance;
}
.mam-tpl__head--split .mam-tpl__lead {
    margin-top: var(--sp-3);
}

/* --- Meta list (CPT realisation / programme / annonce) --- */

.mam-tpl__meta-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4) var(--sp-5);
    list-style: none;
    padding: var(--sp-5) 0 0;
    margin: var(--sp-5) 0 0;
    border-top: 1px solid var(--color-hairline);
}

@media (max-width: 768px) {
    .mam-tpl__meta-list { grid-template-columns: 1fr 1fr; }
}
/* Mobile petit : passer en 1 colonne pour la lisibilite (sur 375px,
   1fr 1fr produit des cellules de ~165px - trop etroit pour les valeurs). */
@media (max-width: 600px) {
    .mam-tpl__meta-list { grid-template-columns: 1fr; gap: var(--sp-3); }
}

.mam-tpl__meta-list li {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.mam-tpl__meta-list strong {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-kicker);
    color: var(--color-text-muted);
}

.mam-tpl__meta-list span {
    font-size: var(--fs-md);
    color: var(--color-text);
}

/* --- Price (annonce single) --- */

.mam-tpl__price {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 500;
    color: var(--color-accent);
    margin: var(--sp-3) 0 0;
    line-height: 1;
}

/* --- Logo (programme single) --- */

.mam-tpl__logo {
    margin: var(--sp-3) 0;
    max-width: 200px;
}

.mam-tpl__logo img { width: 100%; height: auto; }

/* --- Thumbnail (article post : image apres H1, style magazine) --- */

.mam-tpl__thumb {
    margin: var(--sp-6) 0;
    overflow: hidden;
}

.mam-tpl__thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* --- Body / sections --- */

.mam-tpl__body {
    /* Les .mam-section enfants gerent leurs propres paddings. */
}