@charset "UTF-8";
/*
Theme Name: MT Placo
Theme URI: https://www.mt-placo.fr
Author: Agence Netlinqueen
Description: Magazine immobilier et BTP. Archetype BT, ouverture pleine page, gamme neutre pierre.
Version: 2.1.1
License: GNU General Public License v2 or later
Text Domain: mt-placo
*/

/* ===============================================================
   MT PLACO - Archetype BT
   Ouverture pleine page / Filet et cote / Gamme neutre

   Trois partis pris, tous mesures avant d etre ecrits :

   1. L OUVERTURE EST MUETTE. Le reseau ouvre systematiquement sur une
      bande sombre portant eyebrow + H1 + deck + CTA + releves empiles.
      Ici la page s ouvre sur une PHOTOGRAPHIE pleine page sans un mot
      dessus, et la manchette vient APRES, sur blanc.

   2. LE FILET ET LA COTE. Toute image du theme est cernee d un filet
      d encre d un pixel et legendee dessous par une cote de planche,
      libelle a gauche et valeur a droite. C est le motif unificateur,
      repris d un plan d execution. Aucun clip-path, donc il rend partout.

   3. LE FLUX EST EN PORTRAIT. Les vignettes d articles sont au format
      3/4 vertical, la ou le reseau met du 16/9 ou du 4/3 horizontal.

   LA GAMME EST NEUTRE, sans exception. Accent unique #6B5F51, une pierre
   chaude a 6,21:1 sur blanc, donc il sert de couleur de texte sur blanc ET
   d aplat portant du blanc : une seule valeur suffit. Aucun gris de la
   gamme n excede 15 points d ecart entre ses canaux, l accent 26 : rien
   ici ne lit comme une couleur, tout lit comme un materiau.
   =============================================================== */

:root {
    --mt-papier:    #FFFFFF;
    --mt-surface:   #F5F4F1;
    --mt-surface-2: #EBE9E4;
    --mt-filet:     #E3E0DA;
    --mt-filet-2:   #C8C4BB;

    --mt-encre:     #16140F;
    --mt-encre-2:   #0C0B07;
    --mt-doux:      #3E3A33;
    --mt-gris:      #605B52;
    --mt-clair:     #F2F1ED;
    --mt-clair-2:   #B9B4AA;

    --mt-vif:        #6B5F51;
    --mt-vif-fonce:  #52483C;
    --mt-vif-clair:  #CFC7B8;
    --mt-vif-voile:  #F4F1EB;

    /* Mesure unique de la colonne de lecture, en px et non en ch : ch se
       calcule sur la taille de police de chaque bloc, donc les bords ne
       s aligneraient pas d un bloc a l autre. */
    --mt-mesure: 720px;
    --mt-cadre:  1320px;
    --mt-marge:  clamp(20px, 4.6vw, 64px);
    --mt-hh:     66px;

    --mt-display: "Wittgenstein", Georgia, "Times New Roman", serif;
    --mt-corps:   "Sarabun", "Segoe UI", system-ui, -apple-system, sans-serif;

    --mt-ombre: 0 22px 54px rgba(22, 20, 15, .14);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--mt-papier);
    color: var(--mt-doux);
    font-family: var(--mt-corps);
    font-size: 17px;
    line-height: 1.68;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--mt-vif); text-decoration: none; }
a:hover { color: var(--mt-vif-fonce); }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
    font-family: var(--mt-display);
    color: var(--mt-encre);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.018em;
    margin: 0;
}
p { margin: 0; }

:focus-visible { outline: 3px solid var(--mt-vif); outline-offset: 3px; }
.mt-signature :focus-visible,
.mt-pied :focus-visible,
.mt-coiffe :focus-visible { outline-color: var(--mt-vif-clair); }

.mt-saut {
    position: absolute; left: -9999px; top: 0;
    background: var(--mt-encre); color: #fff;
    padding: 12px 20px; z-index: 999;
}
.mt-saut:focus { left: 12px; top: 12px; }

.mt-cadre {
    width: 100%;
    max-width: var(--mt-cadre);
    margin: 0 auto;
    padding-left: var(--mt-marge);
    padding-right: var(--mt-marge);
}

.mt-oeil {
    display: inline-flex; align-items: center; gap: 11px;
    font-family: var(--mt-corps);
    font-size: .735rem; font-weight: 700;
    letter-spacing: .19em; text-transform: uppercase;
    color: var(--mt-vif);
    margin: 0 0 18px;
}
.mt-oeil::before { content: ""; width: 10px; height: 10px; background: var(--mt-vif); flex: 0 0 10px; }
.mt-oeil--clair { color: var(--mt-vif-clair); }
.mt-oeil--clair::before { background: var(--mt-vif-clair); }

.mt-tete { margin-bottom: clamp(30px, 3.6vw, 52px); }
.mt-tete h2 { font-size: clamp(1.85rem, 3.2vw, 2.85rem); }
.mt-tete-note { margin-top: 12px; color: var(--mt-gris); max-width: 56ch; }

/* -- 1. Le repere d angle, motif unificateur ------------------- */

.mt-vue {
    position: relative;
    display: block;
    background: var(--mt-surface-2);
    overflow: hidden;
}
.mt-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La v1 collait un carre violet dans l angle de chaque image. C etait un
   autocollant, pas un systeme : il attirait l oeil sans rien construire.
   Les images portent maintenant un filet d encre et, quand le gabarit le
   demande, une COTE en dessous, comme la legende d une figure de planche.
   Le filet est le seul ornement du theme. */
.mt-repere { position: relative; box-shadow: inset 0 0 0 1px var(--mt-encre); }
.mt-cote {
    display: flex; align-items: baseline; gap: 12px;
    margin-top: 10px;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .17em; text-transform: uppercase;
    color: var(--mt-gris);
}
.mt-cote b { color: var(--mt-vif); font-weight: 700; }

/* -- 2. En-tete ------------------------------------------------ */

.mt-entete {
    position: sticky; top: 0; z-index: 100;
    background: var(--mt-papier);
    border-bottom: 1px solid var(--mt-filet);
    transition: box-shadow .22s ease;
}
.mt-entete--scroll { box-shadow: 0 10px 26px rgba(22, 20, 15, .07); }
.mt-entete-inner {
    height: var(--mt-hh);
    display: flex; align-items: center; justify-content: space-between; gap: 22px;
}
.mt-marque { display: inline-flex; align-items: center; flex: 0 0 auto; }
.mt-marque svg { display: block; height: 30px; width: auto; }

.mt-nav { display: flex; align-items: center; gap: 32px; }
.mt-nav-liens { display: flex; align-items: center; gap: 30px; }
.mt-nav-liens a {
    font-size: .95rem; font-weight: 600;
    color: var(--mt-encre);
    padding: 6px 0; position: relative;
}
.mt-nav-liens a::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 2px; background: var(--mt-vif);
    transition: right .26s ease;
}
.mt-nav-liens a:hover::after { right: 0; }

.mt-nav-contact {
    background: var(--mt-vif); color: #fff;
    font-weight: 700; font-size: .93rem;
    padding: 11px 20px;
    display: inline-flex; align-items: center; gap: 9px;
    /* le libelle et sa fleche restent sur une ligne : en inline-flex le
       texte se coupait a « Nous / contacter » des que la nav se serrait */
    white-space: nowrap; flex: 0 0 auto;
}
.mt-nav-contact:hover { background: var(--mt-vif-fonce); color: #fff; }

.mt-burger, .mt-nav-close, .mt-nav-logo { display: none; }

/* -- 3. Ouverture : la photographie d abord -------------------- */

/* L ouverture occupe presque tout l ecran. En 21:9 elle ne faisait qu une
   bande posee, et la page demarrait sans presence. La hauteur est bornee
   par une fourchette pour ne jamais depasser l ecran ni s ecraser. */
.mt-ouverture-bande {
    position: relative;
    width: 100%;
    height: clamp(420px, 76vh, 760px);
    background: var(--mt-encre);
    box-shadow: inset 0 0 0 1px var(--mt-encre);
}
.mt-ouverture-bande .mt-vue { width: 100%; height: 100%; box-shadow: none; }
/* La legende n est plus une etiquette posee SUR la photo : elle passe
   dessous, sur blanc, en cote de planche. */
.mt-ouverture-cote {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 10px 24px;
    padding: 12px 0 0;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .17em; text-transform: uppercase;
    color: var(--mt-gris);
}
.mt-ouverture-cote b { color: var(--mt-vif); font-weight: 700; }

.mt-manchette { padding: clamp(54px, 7vw, 112px) 0 clamp(48px, 6vw, 92px); }
.mt-manchette-grille {
    display: grid;
    grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
    gap: clamp(34px, 5.4vw, 96px);
    align-items: start;
}
/* Le contraste d echelle est le moteur de la page : le titre monte tres
   haut, les libelles descendent tres bas, et rien ne stationne au milieu. */
.mt-titre {
    font-size: clamp(2.5rem, 5.4vw, 4.7rem);
    line-height: 1.04;
    letter-spacing: -0.032em;
}
.mt-manchette .mt-deck { font-size: 1.06rem; }
/* Le mot accent est SOULIGNE, jamais pose sur un aplat plein : un gros
   bloc de couleur derriere un titre fait pastille et tire l oeil avant le
   texte. Le trait passe sous la ligne de base, donc il n abime aucun
   jambage, et suit les retours a la ligne. */
/* text-decoration et non un fond en degrade : Chromium peint le fond d un
   inline comme UNE seule boite meme avec box-decoration-break, si bien que
   sur un titre de six lignes le trait se decalait d une ligne entiere et
   soulignait les mauvais mots. text-decoration est fait pour ca et suit
   correctement chaque fragment. */
.mt-titre em {
    font-style: normal;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--mt-vif);
    text-decoration-thickness: 6px;
    text-underline-offset: .09em;
    text-decoration-skip-ink: none;
}
.mt-deck { font-size: 1.11rem; color: var(--mt-doux); margin-bottom: 26px; }
.mt-actions { margin-bottom: 30px; }

.mt-releves { border-top: 2px solid var(--mt-encre); }
.mt-releve {
    display: flex; align-items: baseline; gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--mt-filet);
}
.mt-releve-n {
    font-family: var(--mt-display);
    font-size: 1.72rem; font-weight: 700;
    color: var(--mt-encre);
    line-height: 1; min-width: 62px;
}
.mt-releve-l {
    font-size: .735rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--mt-gris);
}

.mt-bouton {
    display: inline-flex; align-items: center; gap: 11px;
    background: var(--mt-vif); color: #fff;
    font-family: var(--mt-corps);
    font-size: .845rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    padding: 15px 26px;
    border: 0; cursor: pointer;
    transition: background .2s ease;
}
.mt-bouton:hover { background: var(--mt-vif-fonce); color: #fff; }
.mt-bouton svg { width: 17px; height: 10px; }
.mt-bouton--ligne { background: transparent; color: var(--mt-encre); box-shadow: inset 0 0 0 2px var(--mt-encre); }
.mt-bouton--ligne:hover { background: var(--mt-encre); color: #fff; }
.mt-bouton--clair { background: var(--mt-papier); color: var(--mt-encre); }
.mt-bouton--clair:hover { background: var(--mt-vif-clair); color: var(--mt-encre); }

/* -- 3 bis. Le sommaire, six sujets ---------------------------- */

/* Une seule rubrique, donc aucune grille de tuiles a construire. Ce sont
   six SUJETS editoriaux qui donnent sa matiere a la page. Ils ne sont pas
   des categories WordPress, ne creent aucune URL et ne pointent nulle part :
   six liens vers la meme archive seraient mauvais pour le referencement. */
.mt-sommaire { padding: 0 0 clamp(52px, 6.4vw, 96px); }
.mt-sujets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--mt-encre);
    border-left: 1px solid var(--mt-filet);
}
.mt-sujet {
    border-right: 1px solid var(--mt-filet);
    border-bottom: 1px solid var(--mt-filet);
    padding: clamp(22px, 2.6vw, 34px);
    display: flex; flex-direction: column; gap: 10px;
}
.mt-sujet-n {
    font-family: var(--mt-corps);
    font-size: .68rem; font-weight: 700;
    letter-spacing: .2em;
    color: var(--mt-vif);
}
.mt-sujet h3 { font-size: clamp(1.12rem, 1.55vw, 1.34rem); line-height: 1.16; }
.mt-sujet p { color: var(--mt-gris); font-size: .95rem; }

@media (max-width: 1080px) {
    .mt-sujets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .mt-sujets { grid-template-columns: minmax(0, 1fr); }
}

/* -- 4. Le flux, vignettes en PORTRAIT ------------------------- */

.mt-flux { padding: clamp(52px, 6.4vw, 96px) 0; background: var(--mt-surface); }

.mt-une {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(26px, 3.6vw, 56px);
    align-items: center;
    padding-bottom: clamp(34px, 4.4vw, 60px);
    margin-bottom: clamp(34px, 4.4vw, 60px);
    border-bottom: 1px solid var(--mt-filet-2);
}
.mt-une .mt-vue { aspect-ratio: 4 / 3; }
.mt-une h3 { font-size: clamp(1.6rem, 2.9vw, 2.5rem); margin: 14px 0 14px; }
.mt-une h3 a { color: inherit; }
.mt-une h3 a:hover { color: var(--mt-vif); }
.mt-une-extrait { color: var(--mt-gris); margin-bottom: 18px; }

.mt-rangs { display: grid; gap: clamp(28px, 3.4vw, 46px); }
.mt-rang {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(20px, 2.8vw, 40px);
    align-items: start;
    padding-bottom: clamp(28px, 3.4vw, 46px);
    border-bottom: 1px solid var(--mt-filet-2);
}
.mt-rangs .mt-rang:last-child { border-bottom: 0; padding-bottom: 0; }
.mt-rang .mt-vue { aspect-ratio: 3 / 4; }
.mt-rang h3 { font-size: clamp(1.24rem, 1.9vw, 1.66rem); margin-bottom: 11px; }
.mt-rang h3 a { color: inherit; }
.mt-rang h3 a:hover { color: var(--mt-vif); }
.mt-rang-extrait { color: var(--mt-gris); margin-bottom: 14px; }

.mt-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px 16px;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--mt-gris);
}
.mt-meta-cat { color: var(--mt-vif); }

.mt-vide {
    border: 2px solid var(--mt-encre);
    padding: clamp(28px, 3.6vw, 46px);
    background: var(--mt-papier);
}
.mt-vide h3 { font-size: clamp(1.3rem, 2.1vw, 1.72rem); margin-bottom: 12px; }
.mt-vide p { color: var(--mt-gris); margin-bottom: 22px; max-width: 60ch; }

/* -- 5. La signature, bande encre ------------------------------ */

.mt-signature {
    background: var(--mt-encre);
    color: var(--mt-clair-2);
    padding: clamp(56px, 6.6vw, 100px) 0;
}
.mt-signature-grille {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: clamp(30px, 4.4vw, 70px);
    align-items: start;
}
.mt-signature .mt-vue { aspect-ratio: 3 / 4; }
.mt-signature h2 { color: var(--mt-papier); font-size: clamp(1.9rem, 3.4vw, 3rem); }
.mt-signature-role {
    font-size: .735rem; font-weight: 700;
    letter-spacing: .17em; text-transform: uppercase;
    color: var(--mt-vif-clair);
    margin: 12px 0 22px;
}
.mt-signature-bio { columns: 2; column-gap: 42px; }
.mt-signature-bio p { margin-bottom: 1.05em; break-inside: avoid; }
.mt-signature-bio ul { margin: 0 0 1.05em; }
.mt-signature-bio li {
    position: relative; padding-left: 22px; margin-bottom: .55em;
    break-inside: avoid;
}
.mt-signature-bio li::before {
    content: ""; position: absolute; left: 0; top: .52em;
    width: 11px; height: 11px; background: var(--mt-vif-clair);
    clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%, 0 38%, 38% 38%);
}
.mt-signature-bio strong { color: var(--mt-papier); }
.mt-signature-actions { margin-top: 26px; }

/* -- 6. La rubrique, une seule donc un bandeau ----------------- */

.mt-rubrique { padding: clamp(52px, 6.4vw, 96px) 0; }
.mt-rubrique-lien {
    position: relative; display: block;
    aspect-ratio: 21 / 8;
    background: var(--mt-encre);
    overflow: hidden;
}
.mt-rubrique-lien .mt-vue { position: absolute; inset: 0; }
.mt-rubrique-lien .mt-vue img { transition: transform .7s ease; }
.mt-rubrique-lien:hover .mt-vue img { transform: scale(1.03); }
.mt-rubrique-voile {
    position: absolute; inset: 0; z-index: 2;
    background:
        linear-gradient(to right, rgba(22,20,15,.95) 0%, rgba(22,20,15,.82) 46%, rgba(22,20,15,.44) 100%),
        linear-gradient(to top, rgba(22,20,15,.94) 0%, rgba(22,20,15,.24) 66%);
}
.mt-rubrique-corps {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(26px, 3.6vw, 54px);
}
.mt-rubrique-nom {
    font-family: var(--mt-display);
    font-weight: 700; letter-spacing: -0.024em; line-height: 1.04;
    color: var(--mt-papier);
    font-size: clamp(1.9rem, 3.6vw, 3.1rem);
}
.mt-rubrique-desc { color: var(--mt-clair-2); max-width: 54ch; margin-top: 12px; }
.mt-rubrique-compte {
    margin-top: 16px;
    font-size: .735rem; font-weight: 700;
    letter-spacing: .17em; text-transform: uppercase;
    color: var(--mt-vif-clair);
}

/* -- 7. Coiffe des pages internes ------------------------------ */

.mt-coiffe {
    position: relative;
    background: var(--mt-encre);
    color: var(--mt-clair);
    overflow: hidden;
    isolation: isolate;
}
.mt-coiffe-fond { position: absolute; inset: 0; z-index: 0; }
.mt-coiffe-fond img { width: 100%; height: 100%; object-fit: cover; }
/* Le voile porte un z-index POSITIF. Place dans un conteneur qui cree son
   propre contexte d empilement, un enfant en z-index negatif passerait SOUS
   l image en flux et le texte du hero deviendrait illisible : defaut vecu
   sur un autre site du parc, contraste tombe a 1,00:1. */
.mt-coiffe-voile {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(to right, rgba(22,20,15,.94) 0%, rgba(22,20,15,.80) 52%, rgba(22,20,15,.52) 100%),
        linear-gradient(to top, rgba(22,20,15,.90) 0%, rgba(22,20,15,.28) 60%);
}
.mt-coiffe-inner { position: relative; z-index: 2; padding: clamp(44px, 6vw, 92px) 0 clamp(38px, 5vw, 72px); }
.mt-coiffe--uni { background: var(--mt-encre); }
.mt-coiffe h1 { color: var(--mt-papier); font-size: clamp(2rem, 4.3vw, 3.4rem); max-width: 22ch; }
.mt-coiffe-desc { margin-top: 16px; color: var(--mt-clair-2); max-width: 62ch; }

.mt-fil {
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
    margin-bottom: 20px;
    font-size: .715rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--mt-clair-2);
}
.mt-fil a { color: var(--mt-clair-2); }
.mt-fil a:hover { color: var(--mt-vif-clair); }
.mt-fil-sep { color: rgba(242, 241, 237, .36); }
.mt-fil-courant { color: rgba(242, 241, 237, .68); }

/* -- 8. Lecture d article, colonne CENTREE --------------------- */

/* L image mise en avant est bridee a la mesure de lecture : elle vit hors
   du conteneur, donc sans max-width elle prendrait toute la largeur du
   viewport et deborderait de la colonne de texte. Marges haute et basse
   egales, le padding haut de .mt-lecture etant reduit d autant. */
.mt-plaque {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--mt-mesure) + 2 * var(--mt-marge));
    margin: clamp(34px, 4.4vw, 56px) auto 0;
    padding-inline: var(--mt-marge);
}
.mt-plaque .mt-vue { aspect-ratio: 16 / 9; box-shadow: var(--mt-ombre); }
.mt-plaque + .mt-lecture { padding-top: clamp(34px, 4.4vw, 56px); }

.mt-lecture { padding: clamp(40px, 5.2vw, 72px) 0 clamp(56px, 7vw, 96px); }
.mt-lecture > .mt-cadre > * {
    max-width: var(--mt-mesure);
    margin-inline: auto;
}
.mt-lecture-meta {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    padding-bottom: 18px; margin-bottom: 30px;
    border-bottom: 1px solid var(--mt-filet);
    font-size: .72rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--mt-gris);
}
.mt-lecture-meta b { color: var(--mt-encre); font-weight: 700; }
.mt-lecture-meta a { color: var(--mt-vif); }
.mt-resume { margin-bottom: 30px; }

.entry-content { font-size: 1.085rem; line-height: 1.78; color: var(--mt-doux); }
.entry-content p { margin-bottom: 1.28em; }
.entry-content h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 2.1em 0 .7em; }
.entry-content h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); margin: 1.7em 0 .55em; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { margin: 1.7em 0; }
.entry-content blockquote {
    margin: 1.9em 0; padding: 6px 0 6px 26px;
    border-left: 3px solid var(--mt-vif);
    font-family: var(--mt-display); font-size: 1.24rem; color: var(--mt-encre);
}
.entry-content strong { color: var(--mt-encre); }

/* Bullets entry-content : le repere d angle a l echelle du texte, un carre
   dont l angle superieur gauche est evide. Aucune autre puce du reseau
   n est un carre entaille a l angle. */
.entry-content ul { list-style: none; padding-left: 0; margin-bottom: 1.4em; }
.entry-content ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1.4em; }
.entry-content ul li { position: relative; padding-left: 1.5em; margin-bottom: .55em; }
.entry-content ul li::before {
    content: "";
    position: absolute; left: 0; top: .5em;
    width: 11px; height: 11px;
    background: var(--mt-vif);
    clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%, 0 38%, 38% 38%);
    flex-shrink: 0;
}
.entry-content ol li { margin-bottom: .5em; }

.mt-etiquettes { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.mt-etiquettes a {
    font-size: .72rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--mt-doux);
    padding: 8px 14px;
    box-shadow: inset 0 0 0 1px var(--mt-filet-2);
}
.mt-etiquettes a:hover { color: #fff; background: var(--mt-vif); box-shadow: none; }

.mt-plume {
    margin-top: 42px; padding-top: 30px;
    border-top: 2px solid var(--mt-encre);
    display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 26px;
    align-items: start;
}
.mt-plume .mt-vue { aspect-ratio: 3 / 4; }
.mt-plume h2 { font-size: 1.32rem; margin-bottom: 5px; }
.mt-plume-role {
    font-size: .715rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--mt-vif); margin-bottom: 12px;
}
.mt-plume-bio { color: var(--mt-gris); font-size: .97rem; }

.mt-voisins { padding: clamp(48px, 6vw, 84px) 0; background: var(--mt-surface); }
.mt-voisins-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 34px); }
.mt-voisins .mt-vue { aspect-ratio: 3 / 4; }
.mt-voisins h3 { font-size: 1.16rem; margin: 13px 0 9px; }
.mt-voisins h3 a { color: inherit; }
.mt-voisins h3 a:hover { color: var(--mt-vif); }

/* -- 9. Archive ------------------------------------------------ */

.mt-archive { padding: clamp(52px, 6.4vw, 96px) 0; }
.mt-archive-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.mt-fiche .mt-vue { aspect-ratio: 3 / 4; }
.mt-fiche h2 { font-size: clamp(1.16rem, 1.7vw, 1.4rem); margin: 14px 0 9px; }
.mt-fiche h2 a { color: inherit; }
.mt-fiche h2 a:hover { color: var(--mt-vif); }

.mt-dossier { padding: clamp(48px, 6vw, 88px) 0; background: var(--mt-surface); }
.mt-dossier-grille {
    display: grid; grid-template-columns: minmax(0, 1fr) 420px;
    gap: clamp(28px, 4vw, 62px); align-items: center;
}
.mt-dossier .mt-vue { aspect-ratio: 4 / 3; }
.mt-dossier h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 16px; }
.mt-dossier p { color: var(--mt-gris); margin-bottom: 1.1em; }
.mt-dossier ul { margin: 0 0 1.2em; }
.mt-dossier li { position: relative; padding-left: 1.5em; margin-bottom: .5em; color: var(--mt-doux); }
.mt-dossier li::before {
    content: ""; position: absolute; left: 0; top: .52em;
    width: 11px; height: 11px; background: var(--mt-vif);
    clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%, 0 38%, 38% 38%);
}

/* -- 10. Pages ------------------------------------------------- */

.mt-page { padding: clamp(48px, 6vw, 86px) 0; }
.mt-page-corps { max-width: var(--mt-mesure); margin-inline: auto; }
.mt-page-corps h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 1.9em 0 .6em; }
.mt-page-corps h2:first-child { margin-top: 0; }
.mt-page-corps p { margin-bottom: 1.25em; }
.mt-page-corps a { text-decoration: underline; text-underline-offset: 3px; }

.mt-contact-grille {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(30px, 4.4vw, 70px); align-items: start;
}
.mt-contact-intro p { margin-bottom: 1.2em; color: var(--mt-doux); }
.mt-contact-panneau {
    background: var(--mt-surface);
    border-top: 3px solid var(--mt-vif);
    padding: clamp(26px, 3.4vw, 44px);
}
.mt-contact-panneau h2 { font-size: 1.4rem; margin-bottom: 20px; }

.wpcf7-form p { display: flex; flex-direction: column; gap: 7px; margin: 0 0 17px; }
.wpcf7-form br { display: none; }
.wpcf7-form label {
    display: flex; flex-direction: column; gap: 7px;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--mt-encre);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%; padding: 13px 15px;
    border: 1px solid var(--mt-filet-2);
    background: var(--mt-papier);
    font-family: var(--mt-corps); font-size: 1rem; color: var(--mt-encre);
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus {
    outline: none; border-color: var(--mt-vif);
    box-shadow: 0 0 0 3px var(--mt-vif-voile);
}
.wpcf7-form textarea { min-height: 168px; resize: vertical; }
/* Requalifie : .wpcf7-form input (0-1-1) l emporterait sur .wpcf7-submit
   (0-1-0) et le bouton rendrait en champ de saisie. */
.wpcf7-form input.wpcf7-submit {
    width: 100%;
    background: var(--mt-vif); color: #fff;
    font-family: var(--mt-corps); font-weight: 700;
    font-size: .845rem; letter-spacing: .13em; text-transform: uppercase;
    padding: 15px 26px; border: 0; cursor: pointer;
}
.wpcf7-form input.wpcf7-submit:hover { background: var(--mt-vif-fonce); }

.mt-plan-bloc { margin-bottom: 40px; }
.mt-plan-bloc h2 { font-size: 1.5rem; margin-bottom: 16px; }
.mt-plan-bloc li { position: relative; padding-left: 1.5em; margin-bottom: .55em; }
.mt-plan-bloc li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 10px; height: 10px; background: var(--mt-vif);
    clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%, 0 38%, 38% 38%);
}

/* -- 11. Pied -------------------------------------------------- */

.mt-pied {
    background: var(--mt-encre-2);
    color: var(--mt-clair-2);
    border-top: 5px solid var(--mt-vif);
    padding: clamp(52px, 6vw, 86px) 0 0;
}
.mt-pied-grille {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
    gap: clamp(26px, 3.4vw, 52px);
    padding-bottom: clamp(38px, 4.4vw, 60px);
}
.mt-pied-titre {
    font-family: var(--mt-corps);
    font-size: .715rem; font-weight: 700;
    letter-spacing: .17em; text-transform: uppercase;
    color: var(--mt-vif-clair);
    margin-bottom: 18px;
}
.mt-pied a { color: var(--mt-clair-2); }
.mt-pied a:hover { color: var(--mt-papier); }
.mt-pied li { position: relative; padding-left: 20px; margin-bottom: .62em; }
.mt-pied li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 10px; height: 10px; background: var(--mt-vif-clair);
    clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%, 0 38%, 38% 38%);
}
.mt-pied-marque svg { height: 28px; width: auto; margin-bottom: 16px; }
.mt-pied-desc { font-size: .95rem; }
.mt-pied-bas {
    border-top: 1px solid rgba(242, 241, 237, .13);
    padding: 22px 0 26px;
    text-align: center;
    font-size: .715rem; font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: rgba(242, 241, 237, .58);
}

/* -- 12. Revelation -------------------------------------------- */

/* La classe DOIT etre exactement celle qu ajoute theme.js, soit is-vu.
   Une faute d un caractere ici ne produit aucune erreur et laisse tout le
   contenu a opacity 0 pour toujours. Le garde-fou html.mt-js protege du JS
   absent ; il ne protege pas d un nom de classe qui ne correspond pas. */
html.mt-js [data-mt-reveal] { opacity: 0; transform: translateY(15px); }
html.mt-js [data-mt-reveal].is-vu {
    opacity: 1; transform: none;
    transition: opacity .62s ease, transform .62s ease;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.mt-js [data-mt-reveal] { opacity: 1; transform: none; }
    *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* -- 13. Adaptations ------------------------------------------- */

@media (max-width: 1080px) {
    .mt-manchette-grille,
    .mt-une,
    .mt-signature-grille,
    .mt-dossier-grille,
    .mt-contact-grille { grid-template-columns: minmax(0, 1fr); }
    .mt-signature-bio { columns: 1; }
    .mt-signature-photo { max-width: 300px; }
    .mt-dossier-vue { order: -1; }
    .mt-voisins-grille,
    .mt-archive-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mt-pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .mt-burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; background: none; border: 0; cursor: pointer;
    }
    .mt-burger span { display: block; width: 22px; height: 2px; background: var(--mt-encre); position: relative; }
    .mt-burger span::before, .mt-burger span::after {
        content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--mt-encre);
    }
    .mt-burger span::before { top: -7px; }
    .mt-burger span::after { top: 7px; }

    .mt-nav {
        position: fixed; inset: 0; z-index: 200;
        display: none; flex-direction: column; align-items: flex-start;
        gap: 0; padding: 22px var(--mt-marge) 44px;
        background: var(--mt-papier);
        overflow-y: auto;
    }
    .mt-nav--open { display: flex; }
    .mt-nav-logo { display: block; margin-bottom: 34px; }
    .mt-nav-close {
        display: inline-flex; align-items: center; justify-content: center;
        position: absolute; top: 14px; right: var(--mt-marge);
        width: 42px; height: 42px; background: none; border: 0; cursor: pointer;
        font-size: 1.7rem; line-height: 1; color: var(--mt-encre);
    }
    .mt-nav-liens { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
    .mt-nav-liens a { font-size: 1.5rem; font-family: var(--mt-display); padding: 12px 0; }
    .mt-nav-contact { margin-top: 22px; }
}

@media (max-width: 760px) {
    body { font-size: 16px; }
    .mt-ouverture-bande { aspect-ratio: 4 / 3; }
    .mt-rang { grid-template-columns: minmax(0, 1fr); }
    .mt-rang .mt-vue { aspect-ratio: 4 / 3; }
    .mt-voisins-grille,
    .mt-archive-grille,
    .mt-pied-grille { grid-template-columns: minmax(0, 1fr); }
    .mt-rubrique-lien { aspect-ratio: 4 / 3; }
    .mt-plume { grid-template-columns: minmax(0, 1fr); }
    .mt-plume .mt-vue { max-width: 168px; }
    .mt-signature-photo { max-width: 240px; }
    .mt-legende { font-size: .66rem; padding: 8px 12px; }
}