@charset "UTF-8";
/*
Theme Name: Touche d Acier
Theme URI: https://www.touchedacier.fr
Author: Agence Netlinqueen
Description: Magazine maison. Archetype BY, le fer alterne et le fer plat.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: touchedacier
*/

/* ===============================================================
   TOUCHE D ACIER - Archetype BY
   Le fer alterne / Le fer plat / Gamme acier froid

   Une vingtaine de magazines « maison » existent deja dans le parc.
   Aucun ne prend le sujet par le METAL : ce qui porte, ce qui ferme,
   ce qui rouille. Verrieres, garde-corps, escaliers, portails,
   quincaillerie. Le nom de domaine y menait, et c est ce qui rend une
   rubrique unique tenable.

   Trois partis pris mesurables, tenus partout :

   1. L ALTERNANCE DE FER. Les sections alternent leur alignement : la
      premiere ferree a gauche, la suivante a DROITE, et ainsi de suite.
      Seuls les titres, libelles, compteurs et boutons suivent le fer ;
      le corps de texte reste toujours ferre a gauche, sinon il devient
      illisible. Aucun des 76 themes du parc n aligne ses blocs a
      droite : c est la signature structurelle.

   2. LE FER PLAT. Le seul separateur du theme est une double barre,
      deux filets de 2 px separes de 5 px, posee BORD A BORD du
      viewport et jamais bornee par le conteneur. Aucun filet simple
      decoratif nulle part.

   3. AUCUN VOILE, AUCUN TEXTE POSE SUR UNE PHOTOGRAPHIE. Les photos
      sont rendues telles quelles, jamais assombries. Le theme ne
      contient ni z-index negatif, ni rgba(), ni image de fond derriere
      du texte.

   L accent (--tac-vif) tient 8,39:1 sur blanc et se detache de 1,64x du
   gris de meta (5,12:1) : sur une gamme neutre, le contraste sur blanc
   ne suffit pas, il faut aussi mesurer l ecart au gris du corps.

   ⚠️ --tac-gris ne tient que 4,21:1 sur --tac-surface-2 : tout libelle
   pose sur cette valeur utilise --tac-doux. Defaut paye sur takmarket,
   evite ici par construction.

   L accent est INVISIBLE sur l encre (2,16:1). Partout ou il borde du
   sombre, c est --tac-vif-clair qui prend le relais (10,22:1).
   =============================================================== */

:root {
    /* Fonds */
    --tac-papier:     #FFFFFF;
    --tac-surface:    #F3F4F5;
    --tac-surface-2:  #E7E9EB;
    --tac-filet:      #DCDEE1;
    --tac-filet-2:    #C0C4C8;

    /* Encres */
    --tac-encre:      #141618;
    --tac-encre-2:    #0A0B0C;
    --tac-doux:       #383B3E;
    --tac-gris:       #6B6E72;

    /* Sur fond sombre */
    --tac-clair:      #EFF1F2;
    --tac-clair-2:    #B0B4B8;

    /* Accent */
    --tac-vif:        #4A4E52;
    --tac-vif-fonce:  #33373A;
    --tac-vif-clair:  #BEC3C8;
    --tac-vif-voile:  #ECEEF0;

    /* Mesures. En pixels et jamais en ch : ch se calcule sur la taille
       de police de chaque element, si bien que deux blocs declares a la
       meme valeur ne tombent pas sur la meme largeur. */
    --tac-cadre:      1280px;
    --tac-gouttiere:  30px;
    --tac-mesure:     690px;

    --tac-display: "Wix Madefor Display", "Segoe UI", system-ui, sans-serif;
    --tac-corps:   "Alegreya", Georgia, "Times New Roman", serif;
}

/* ── Base ────────────────────────────────────────────────────────── */

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

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

body {
    margin: 0;
    background: var(--tac-papier);
    color: var(--tac-encre);
    font-family: var(--tac-corps);
    font-size: 18px;
    line-height: 1.66;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
img { display: block; height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--tac-display);
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.12;
    margin: 0;
}

p { margin: 0 0 1.1em; }

ul { list-style: none; margin: 0; padding: 0; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--tac-encre); color: var(--tac-papier); }

:focus-visible { outline: 2px solid var(--tac-vif); outline-offset: 3px; }

.tac-saut {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--tac-encre); color: var(--tac-clair); padding: 12px 18px;
}
.tac-saut:focus { left: 0; }

.tac-cadre {
    width: 100%;
    max-width: var(--tac-cadre);
    margin-inline: auto;
    padding-inline: var(--tac-gouttiere);
}

/* ===============================================================
   1. LE FER PLAT
   ---------------------------------------------------------------
   Le seul separateur du theme : une double barre posee bord a bord du
   viewport. Rendue par un degrade a arrets francs plutot que par deux
   elements, pour qu un seul <span> suffise partout.
   =============================================================== */

.tac-fer {
    display: block;
    width: 100%;
    height: 9px;
    background: linear-gradient(
        to bottom,
        var(--tac-encre) 0 2px,
        transparent 2px 7px,
        var(--tac-encre) 7px 9px
    );
}
.tac-fer--clair {
    background: linear-gradient(
        to bottom,
        var(--tac-vif-clair) 0 2px,
        transparent 2px 7px,
        var(--tac-vif-clair) 7px 9px
    );
}
/* Version fine, pour les separations internes a un bloc. */
.tac-fer--mince {
    height: 5px;
    background: linear-gradient(
        to bottom,
        var(--tac-filet-2) 0 1.5px,
        transparent 1.5px 3.5px,
        var(--tac-filet-2) 3.5px 5px
    );
}

/* ===============================================================
   2. LE PROFIL EN U
   ---------------------------------------------------------------
   Un fer en U, le profile le plus courant de la metallerie, decoupe
   en clip-path. Il sert de tic aux libelles, de puce dans le corps de
   texte, de marque au wordmark et de motif au site icon. Aucun bullet
   du parc n a cette forme.
   =============================================================== */

.tac-oeil {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--tac-display);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tac-vif);
    margin-bottom: 20px;
}
.tac-oeil::before {
    content: '';
    flex: 0 0 auto;
    width: 17px; height: 13px;
    background: currentColor;
    clip-path: polygon(0 0, 4px 0, 4px 8px, 13px 8px, 13px 0, 17px 0, 17px 13px, 0 13px);
}
.tac-oeil--clair { color: var(--tac-vif-clair); }

/* ===============================================================
   3. EN-TETE
   =============================================================== */

.tac-barre {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--tac-papier);
}

.tac-barre-int {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 76px;
}

.tac-marque { display: inline-flex; align-items: center; }

.tac-nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }

.tac-nav-liens { display: flex; align-items: center; gap: 30px; }
.tac-nav-liens a {
    font-family: var(--tac-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tac-doux);
    padding-block: 6px;
    border-bottom: 2px solid transparent;
    transition: color .18s, border-color .18s;
}
.tac-nav-liens a:hover { color: var(--tac-encre); border-bottom-color: var(--tac-vif); }

.tac-nav-contact {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--tac-display);
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 12px 20px;
    background: var(--tac-encre);
    color: var(--tac-clair);
    transition: background .18s;
}
.tac-nav-contact:hover { background: var(--tac-vif); }
.tac-nav-contact svg { flex: 0 0 auto; }

/* Croix et logo du menu mobile : hors media query ils n existent pas. */
.tac-nav-close, .tac-nav-logo { display: none; }

.tac-burger { display: none; margin-left: auto; padding: 8px; color: var(--tac-encre); }

/* ===============================================================
   4. BOUTONS ET TITRES DE SECTION
   =============================================================== */

.tac-bouton {
    display: inline-flex; align-items: center; gap: 11px;
    font-family: var(--tac-display);
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.06em;
    padding: 15px 26px;
    background: var(--tac-encre);
    color: var(--tac-clair);
    border: 2px solid var(--tac-encre);
    transition: background .18s, color .18s, border-color .18s;
}
.tac-bouton:hover { background: var(--tac-vif); border-color: var(--tac-vif); }

.tac-bouton--fant {
    background: transparent;
    color: var(--tac-encre);
    border-color: var(--tac-encre);
}
.tac-bouton--fant:hover { background: var(--tac-encre); color: var(--tac-clair); }

.tac-section { padding-block: 80px; }
.tac-section--serree { padding-block: 0 80px; }
.tac-section--surface { background: var(--tac-surface); }
.tac-section--fonce { background: var(--tac-encre); color: var(--tac-clair); }

/* ── L alternance de fer ─────────────────────────────────────────
   Seuls les titres, libelles, compteurs et boutons suivent le fer. Le
   corps de texte garde son alignement a gauche : une colonne de
   lecture ferree a droite est illisible. */
.tac-tete-sec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
}
.tac-tete-sec h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
.tac-tete-sec-note {
    font-family: var(--tac-display);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--tac-gris);
    white-space: nowrap;
}
.tac-droite .tac-tete-sec { flex-direction: row-reverse; }
.tac-droite .tac-tete-sec h2 { text-align: right; }
/* Le tic ne bascule qu au-dessus d un titre de section : dans le bloc
   de la redactrice, dont le texte reste ferre a gauche, un libelle a tic
   inverse lisait comme un defaut. */
.tac-droite .tac-tete-sec .tac-oeil { flex-direction: row-reverse; }
.tac-droite .tac-fer-loge { justify-content: flex-end; }
.tac-section--fonce .tac-tete-sec-note { color: var(--tac-clair-2); }

/* ===============================================================
   5. OUVERTURE
   ---------------------------------------------------------------
   Manchette ferree a gauche, releves ferres a DROITE sur la meme
   rangee : la tension du theme est posee des le premier ecran. La
   photographie vient ensuite, pleine largeur et muette.
   =============================================================== */

.tac-tete { padding-block: 76px 64px; }

.tac-tete-grille {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    column-gap: 56px;
    align-items: end;
}

.tac-titre {
    font-size: clamp(2.1rem, 4vw, 3.5rem);
    line-height: 1.08;
    margin-bottom: 24px;
}
.tac-titre em { font-style: normal; color: var(--tac-vif); }
.tac-section--fonce .tac-titre em { color: var(--tac-vif-clair); }

.tac-deck {
    font-size: 1.14rem;
    color: var(--tac-doux);
    max-width: 44em;
    margin-bottom: 30px;
}

.tac-tete-desc { color: var(--tac-doux); max-width: 42em; }
.tac-tete-desc p { margin-bottom: 0.5em; }

/* Les releves, ferres a droite */
.tac-releves {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    text-align: right;
}
.tac-releve { padding-block: 14px; width: 100%; }
.tac-releve + .tac-releve { border-top: 2px solid var(--tac-filet); }
.tac-releve-n {
    display: block;
    font-family: var(--tac-display);
    font-size: 1.9rem; font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.tac-releve-l {
    font-family: var(--tac-display);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--tac-gris);
}

/* La bande photographique, pleine largeur et sans un mot dessus. */
.tac-planche img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.tac-planche figcaption {
    font-family: var(--tac-display);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--tac-gris);
    padding: 12px var(--tac-gouttiere) 0;
    max-width: var(--tac-cadre);
    margin-inline: auto;
}

/* Fil d Ariane */
.tac-fil {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-family: var(--tac-display);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--tac-gris);
    margin-bottom: 20px;
}
.tac-fil a { color: var(--tac-doux); }
.tac-fil a:hover { color: var(--tac-encre); }
.tac-fil-sep { width: 8px; height: 2px; background: var(--tac-filet-2); }
.tac-fil-courant { color: var(--tac-gris); }

/* ===============================================================
   6. FLUX D ARTICLES
   =============================================================== */

.tac-une {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    column-gap: 46px;
    align-items: center;
    padding-bottom: 44px;
    margin-bottom: 44px;
    border-bottom: 2px solid var(--tac-filet);
}
.tac-une-vue img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.tac-une-corps h3 { font-size: clamp(1.5rem, 2.7vw, 2.1rem); margin-bottom: 14px; }
.tac-une-corps h3 a:hover { color: var(--tac-vif); }
.tac-une-res { color: var(--tac-doux); margin-bottom: 0; }

.tac-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px 34px; }

.tac-fiche { display: flex; flex-direction: column; }
.tac-vue { margin: 0 0 16px; overflow: hidden; }
.tac-vue img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .5s ease;
}
.tac-fiche:hover .tac-vue img { transform: scale(1.035); }

.tac-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-family: var(--tac-display);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--tac-gris);
    margin-bottom: 12px;
}
.tac-meta-cat { color: var(--tac-vif); font-weight: 700; }
.tac-meta-pt { width: 8px; height: 2px; background: var(--tac-filet-2); }

.tac-fiche h2,
.tac-fiche h3 { font-size: 1.24rem; line-height: 1.22; margin-bottom: 10px; }
.tac-fiche h2 a:hover,
.tac-fiche h3 a:hover { color: var(--tac-vif); }
.tac-fiche-res { font-size: 0.96rem; color: var(--tac-doux); margin-bottom: 0; }

.tac-vide { max-width: 640px; }
.tac-vide h2,
.tac-vide h3 { font-size: 1.5rem; margin-bottom: 14px; }
.tac-vide p { color: var(--tac-doux); }
.tac-droite .tac-vide { margin-left: auto; text-align: right; }
.tac-droite .tac-vide p { text-align: left; }

/* ===============================================================
   7. LE CARNET D ATELIER
   ---------------------------------------------------------------
   Les six sujets, en rangs separes par le fer plat mince. Le numero
   est pousse sur le bord exterieur du fer courant.
   =============================================================== */

.tac-carnet { border-top: 2px solid var(--tac-encre); }

.tac-rang {
    display: grid;
    grid-template-columns: 84px 1fr 1.4fr;
    gap: 26px;
    align-items: baseline;
    padding-block: 24px;
    border-bottom: 2px solid var(--tac-filet);
}
.tac-rang-n {
    font-family: var(--tac-display);
    font-size: 1.2rem; font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--tac-vif);
}
.tac-rang h3 { font-size: 1.28rem; }
.tac-rang p { color: var(--tac-doux); margin-bottom: 0; }

/* ===============================================================
   8. LE PORTRAIT
   =============================================================== */

.tac-portrait {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
}

/* Classe dediee, jamais un selecteur base sur le conteneur : le
   portrait est rendu a trois endroits, et une regle scopee a un seul
   parent en laisserait deux au cadrage paysage, qui coupe le visage. */
.tac-portrait-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 18%;
}

.tac-portrait-corps h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-bottom: 8px; }
.tac-portrait-role {
    font-family: var(--tac-display);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--tac-gris);
    margin-bottom: 22px;
}
.tac-portrait-bio { color: var(--tac-doux); }
.tac-portrait-bio strong { color: var(--tac-encre); }
.tac-portrait-bio ul { margin: 1em 0; }
.tac-portrait-bio li { position: relative; padding-left: 27px; margin-bottom: 0.55em; }
.tac-portrait-bio li::before {
    content: ''; position: absolute; left: 0; top: 0.5em;
    width: 15px; height: 11px;
    background: var(--tac-vif);
    clip-path: polygon(0 0, 3.4px 0, 3.4px 7px, 11.6px 7px, 11.6px 0, 15px 0, 15px 11px, 0 11px);
}

.tac-reperes {
    display: flex; flex-wrap: wrap; gap: 0;
    margin: 30px 0;
    border-top: 2px solid var(--tac-filet);
    border-bottom: 2px solid var(--tac-filet);
}
.tac-repere { padding: 18px 30px 18px 0; margin-right: 30px; border-right: 2px solid var(--tac-filet); }
.tac-repere:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.tac-repere-n {
    font-family: var(--tac-display);
    font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em;
}
.tac-repere-l {
    font-family: var(--tac-display);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--tac-gris);
}

/* ===============================================================
   9. LA RUBRIQUE
   =============================================================== */

.tac-rubrique {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    column-gap: 46px;
    align-items: center;
}
.tac-rubrique-vue img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.tac-rubrique-nom {
    display: block;
    font-family: var(--tac-display);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.018em;
    margin-bottom: 14px;
}
.tac-rubrique-nom:hover { color: var(--tac-vif); }
.tac-rubrique-desc { color: var(--tac-doux); }
.tac-rubrique-compte {
    display: inline-block;
    font-family: var(--tac-display);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--tac-vif);
}

/* ===============================================================
   10. BLOC EDITORIAL D ARCHIVE
   =============================================================== */

.tac-edito { padding-block: 80px; background: var(--tac-surface); }
.tac-edito-titre { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 28px; }
.tac-edito-grille {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 48px;
    align-items: center;
}
.tac-edito-texte { color: var(--tac-doux); }
.tac-edito-liste { margin: 1.3em 0; }
.tac-edito-liste li { position: relative; padding-left: 27px; margin-bottom: 0.6em; }
.tac-edito-liste li::before {
    content: ''; position: absolute; left: 0; top: 0.5em;
    width: 15px; height: 11px;
    background: var(--tac-vif);
    clip-path: polygon(0 0, 3.4px 0, 3.4px 7px, 11.6px 7px, 11.6px 0, 15px 0, 15px 11px, 0 11px);
}
.tac-edito-vue img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ===============================================================
   11. ARTICLE
   =============================================================== */

.tac-article { padding-bottom: 80px; }

/* Le titre d article ne prend pas les 1280 px du conteneur : une ligne
   de cette longueur ne se lit pas. Il garde en revanche le bord gauche
   du conteneur. */
.tac-titre--article { max-width: 900px; }

/* Le bloc de notation vient du plugin : on le borne et on annule ses
   marges, sans jamais styler ses div par un selecteur descendant large
   (une regle sur « .bloc div » gonfle son markup imbrique). */
.tac-notes {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 2px solid var(--tac-filet);
    max-width: var(--tac-mesure);
    overflow-x: auto;
}
.tac-notes-titre {
    flex: 0 0 auto;
    font-family: var(--tac-display);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--tac-gris);
}
.tac-notes .kk-star-ratings { margin: 0; }

/* L image mise en avant, affichee en clair et separee du hero. Seul
   element arrondi du theme : c est une photographie posee sur la page,
   pas un aplat de la grille. */
.tac-plaque { margin: 0 0 48px; }
.tac-plaque img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    border-radius: 12px;
}
.tac-plaque figcaption {
    font-family: var(--tac-display);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--tac-gris);
    margin-top: 12px;
}

/* La colonne de lecture est CENTREE. Une largeur de lecture sans
   centrage colle le texte au bord gauche du conteneur et laisse une
   demi-page de blanc a droite. Se controle par mesure. */
.tac-lecture,
.tac-lecture-meta,
.tac-resume,
.tac-etiquettes,
.tac-auteur,
.tac-voisins,
.tac-article .entry-content {
    max-width: var(--tac-mesure);
    margin-inline: auto;
}

.tac-lecture-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    font-family: var(--tac-display);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--tac-gris);
    padding-bottom: 16px;
    margin-bottom: 26px;
    border-bottom: 2px solid var(--tac-filet);
}
.tac-lecture-meta a { color: var(--tac-vif); font-weight: 700; }

/* La meme ligne de meta, mais posee dans le hero : elle suit le bord
   gauche du conteneur au lieu de la colonne de lecture, et ne porte pas
   de filet (le fer plat qui suit joue deja ce role). */
.tac-lecture-meta--tete {
    max-width: none;
    margin-inline: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
    margin-top: 22px;
}

/* L article ouvre directement sous le fer plat : il lui faut sa propre
   respiration de tete, jamais un style en dur dans le gabarit. */
.tac-article--haut { padding-top: 54px; }

.tac-resume { margin-bottom: 30px; }

.entry-content { font-size: 1.06rem; }
.entry-content h2 { font-size: 1.7rem; margin: 1.9em 0 0.5em; }
.entry-content h3 { font-size: 1.32rem; margin: 1.6em 0 0.45em; }
.entry-content a { color: var(--tac-vif); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--tac-encre); }
.entry-content img { margin-block: 1.6em; }
.entry-content blockquote {
    margin: 1.8em 0;
    padding: 6px 0 6px 26px;
    border-left: 6px solid var(--tac-vif);
    color: var(--tac-doux);
}
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; }
.entry-content th, .entry-content td { padding: 11px 14px; border-bottom: 2px solid var(--tac-filet); text-align: left; }
.entry-content th { font-family: var(--tac-display); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── Bullets decoratifs : LE FER EN U ─────────────────────────────
   Un profile en U, ouvert vers le haut, taille en clip-path sur une
   boite de 15x11 px. C est le fer plat du theme ramene a l echelle du
   texte, et le PREMIER bullet du reseau en forme de U (releve fait sur
   les 76 themes : le parc compte un V, un T, une croix, un croissant,
   un hexagone, des chevrons, des slash, des carres, des anneaux, des
   arcs et une etiquette, aucun profile ouvert par le haut). A ne pas
   confondre avec l equerre d exteriorea, qui n a que deux cotes et un
   fond transparent, ni avec la travee de desentec, deux barres
   verticales separees. */
.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.6em; margin-bottom: 0.5em; }
.entry-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 15px;
    height: 11px;
    background: var(--tac-vif);
    clip-path: polygon(0 0, 3.4px 0, 3.4px 7px, 11.6px 7px, 11.6px 0, 15px 0, 15px 11px, 0 11px);
}
.entry-content ol li { margin-bottom: 0.5em; }

/* Le sommaire d Easy Table of Contents est injecte DANS
   .entry-content : sans cette exception, chaque entree porterait un
   fer en U en plus de sa numerotation. */
.entry-content .ez-toc-list li { padding-left: 0; }
.entry-content .ez-toc-list li::before { content: none; }

.tac-etiquettes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px; }
.tac-etiquettes a {
    font-family: var(--tac-display);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 8px 14px;
    border: 2px solid var(--tac-filet);
    color: var(--tac-doux);
}
.tac-etiquettes a:hover { border-color: var(--tac-encre); color: var(--tac-encre); }

.tac-auteur {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 30px;
    align-items: start;
    margin-top: 52px;
    padding-top: 32px;
    border-top: 2px solid var(--tac-encre);
}
.tac-auteur-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 18%;
}
.tac-auteur h2 { font-size: 1.42rem; margin-bottom: 6px; }
.tac-auteur-role {
    font-family: var(--tac-display);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--tac-gris);
    margin-bottom: 14px;
}
.tac-auteur-bio { color: var(--tac-doux); font-size: 0.98rem; }
.tac-auteur-bio p:last-child { margin-bottom: 0; }

.tac-voisins { margin-top: 58px; }
.tac-voisins > h2 {
    font-size: 1.5rem;
    padding-bottom: 16px;
    margin-bottom: 26px;
    border-bottom: 2px solid var(--tac-encre);
}
.tac-voisins-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tac-voisins-grille h3 { font-size: 1.02rem; line-height: 1.28; margin-top: 14px; }
.tac-voisins-grille h3 a:hover { color: var(--tac-vif); }

/* ===============================================================
   12. PAGES
   =============================================================== */

.tac-page { padding-bottom: 80px; }
.tac-page-corps { max-width: var(--tac-mesure); margin-inline: auto; color: var(--tac-doux); }
.tac-page-corps h2 {
    position: relative;
    font-size: 1.42rem;
    color: var(--tac-encre);
    margin: 2em 0 0.6em;
    padding-left: 27px;
}
.tac-page-corps h2::before {
    content: '';
    position: absolute; left: 0; top: 0.42em;
    width: 16px; height: 12px;
    background: var(--tac-vif);
    clip-path: polygon(0 0, 3.6px 0, 3.6px 7.6px, 12.4px 7.6px, 12.4px 0, 16px 0, 16px 12px, 0 12px);
}
.tac-page-corps h2:first-child { margin-top: 0; }
.tac-page-corps a { color: var(--tac-vif); text-decoration: underline; text-underline-offset: 3px; }

.tac-plan-groupe { margin-bottom: 42px; }
.tac-plan-groupe h2 {
    font-size: 1.3rem;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--tac-filet);
    color: var(--tac-encre);
}
.tac-plan-groupe li { position: relative; padding-left: 27px; margin-bottom: 9px; }
.tac-plan-groupe li::before {
    content: ''; position: absolute; left: 0; top: 0.5em;
    width: 15px; height: 11px;
    background: var(--tac-vif);
    clip-path: polygon(0 0, 3.4px 0, 3.4px 7px, 11.6px 7px, 11.6px 0, 15px 0, 15px 11px, 0 11px);
}
.tac-plan-groupe a:hover { color: var(--tac-vif); }

.tac-contact {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: start;
}
.tac-contact-mot { color: var(--tac-doux); }
.tac-contact-mot p:first-child {
    font-size: 1.12rem;
    color: var(--tac-encre);
    border-left: 6px solid var(--tac-vif);
    padding-left: 22px;
}
.tac-contact-form {
    background: var(--tac-surface);
    padding: 36px;
    border-top: 6px solid var(--tac-encre);
}

/* ── Contact Form 7 ─────────────────────────────────────────────── */

.wpcf7-form p { display: flex; flex-direction: column; margin-bottom: 18px; }
.wpcf7-form br { display: none; }
.wpcf7-form label {
    font-family: var(--tac-display);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--tac-doux);
    display: flex; flex-direction: column; gap: 8px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    font-family: var(--tac-display);
    font-size: 16px;
    color: var(--tac-encre);
    background: var(--tac-papier);
    border: 2px solid var(--tac-filet-2);
    padding: 13px 15px;
    width: 100%;
    transition: border-color .18s;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--tac-encre); }
.wpcf7-form textarea { min-height: 168px; resize: vertical; }
.wpcf7-form input[type="submit"] {
    font-family: var(--tac-display);
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.06em;
    width: 100%;
    padding: 16px 24px;
    background: var(--tac-encre);
    color: var(--tac-clair);
    border: 2px solid var(--tac-encre);
    cursor: pointer;
    transition: background .18s, border-color .18s;
}
.wpcf7-form input[type="submit"]:hover { background: var(--tac-vif); border-color: var(--tac-vif); }
/* CF7 6.1 sort ses champs caches dans un fieldset que sa propre
   feuille ne masque pas : sans cette regle, un cadre vide s affiche
   au milieu du formulaire. */
.wpcf7-form fieldset.hidden-fields-container { display: none; }
.wpcf7-spinner { display: none; }

/* ===============================================================
   13. PIED
   =============================================================== */

.tac-pied-int { padding-top: 44px; }

.tac-pied { background: var(--tac-encre); color: var(--tac-clair); padding-block: 58px 30px; }

.tac-pied-grille {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
    gap: 42px;
    padding-bottom: 40px;
    border-bottom: 2px solid #2A2D30;
}
.tac-pied-desc { color: var(--tac-clair-2); font-size: 0.95rem; margin-top: 18px; }

.tac-pied-titre {
    font-family: var(--tac-display);
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--tac-vif-clair);
    margin-bottom: 18px;
}
/* Jamais d image dans le pied : une vignette etire sa colonne et
   deforme toute la grille. Liens texte, puce en fer en U. */
.tac-pied li {
    position: relative;
    padding-left: 27px;
    margin-bottom: 11px;
    color: var(--tac-clair-2);
    font-size: 0.95rem;
}
.tac-pied li::before {
    content: ''; position: absolute; left: 0; top: 0.5em;
    width: 15px; height: 11px;
    background: var(--tac-vif-clair);
    clip-path: polygon(0 0, 3.4px 0, 3.4px 7px, 11.6px 7px, 11.6px 0, 15px 0, 15px 11px, 0 11px);
}
.tac-pied a:hover { color: var(--tac-clair); }

.tac-pied-bas {
    padding-top: 26px;
    font-family: var(--tac-display);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--tac-clair-2);
}

/* ===============================================================
   14. 404
   =============================================================== */

.tac-404 { padding-block: 104px; max-width: 640px; }
.tac-404 h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 18px; }
.tac-404 p { color: var(--tac-doux); margin-bottom: 28px; }

/* ===============================================================
   15. ADAPTATIONS
   =============================================================== */

@media (max-width: 1080px) {
    .tac-burger { display: inline-flex; }

    .tac-nav {
        position: fixed;
        inset: 0;
        z-index: 80;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        margin: 0;
        padding: 26px var(--tac-gouttiere) 40px;
        background: var(--tac-encre);
        color: var(--tac-clair);
        transform: translateX(100%);
        transition: transform .28s ease;
        overflow-y: auto;
    }
    body.tac-menu-ouvert { overflow: hidden; }
    body.tac-menu-ouvert .tac-nav { transform: translateX(0); }

    .tac-nav-logo { display: block; margin-bottom: 46px; }
    .tac-nav-close {
        display: inline-flex;
        position: absolute; top: 24px; right: 26px;
        color: var(--tac-clair);
        padding: 6px;
    }
    .tac-nav-liens { flex-direction: column; align-items: flex-start; gap: 4px; }
    .tac-nav-liens a {
        font-size: 1.55rem;
        font-weight: 700;
        letter-spacing: -0.018em;
        text-transform: none;
        color: var(--tac-clair);
        border-bottom: 0;
        padding-block: 12px;
    }
    .tac-nav-liens a:hover { color: var(--tac-vif-clair); border-bottom-color: transparent; }
    .tac-nav-contact {
        margin-top: 30px;
        justify-content: center;
        background: var(--tac-clair);
        color: var(--tac-encre);
    }
    .tac-nav-contact:hover { background: var(--tac-papier); color: var(--tac-encre); }
}

@media (max-width: 1000px) {
    /* L alternance de fer tombe : sur une colonne unique, un bloc ferre
       a droite n a plus de contrepoint et lit comme une erreur. */
    .tac-droite .tac-tete-sec { flex-direction: row; }
    .tac-droite .tac-tete-sec h2 { text-align: left; }
    .tac-droite .tac-tete-sec .tac-oeil { flex-direction: row; }
    .tac-droite .tac-vide { margin-left: 0; text-align: left; }

    .tac-tete-grille { grid-template-columns: 1fr; row-gap: 34px; }
    .tac-releves { align-items: stretch; text-align: left; }
    .tac-planche img { aspect-ratio: 16 / 9; }

    .tac-une { grid-template-columns: 1fr; row-gap: 22px; }
    .tac-grille { grid-template-columns: repeat(2, 1fr); gap: 40px 28px; }

    .tac-rang { grid-template-columns: 60px 1fr; gap: 18px; }
    .tac-rang p { grid-column: 2; }

    .tac-portrait { grid-template-columns: 1fr; gap: 40px; }
    .tac-portrait-photo { max-width: 380px; }
    .tac-portrait-corps { order: -1; }

    .tac-rubrique { grid-template-columns: 1fr; row-gap: 26px; }
    .tac-edito-grille { grid-template-columns: 1fr; gap: 32px; }
    .tac-edito-vue { order: -1; }
    .tac-contact { grid-template-columns: 1fr; gap: 40px; }
    .tac-voisins-grille { grid-template-columns: 1fr; gap: 30px; }
    .tac-pied-grille { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

@media (max-width: 620px) {
    body { font-size: 17px; }
    :root { --tac-gouttiere: 20px; }
    .tac-section { padding-block: 54px; }
    .tac-section--serree { padding-block: 0 54px; }
    .tac-tete { padding-block: 44px 44px; }

    .tac-tete-sec { flex-wrap: wrap; row-gap: 10px; }
    .tac-tete-sec h2 { flex: 1 1 100%; }
    .tac-tete-sec-note { white-space: normal; }

    .tac-grille { grid-template-columns: 1fr; gap: 40px; }
    .tac-portrait-photo img { aspect-ratio: 3 / 4; }
    .tac-auteur { grid-template-columns: 1fr; gap: 22px; }
    .tac-auteur-photo { max-width: 168px; }
    .tac-auteur-photo img { aspect-ratio: 3 / 4; }

    .tac-repere { padding-right: 22px; margin-right: 22px; }
    .tac-contact-form { padding: 26px 22px; }
    .tac-pied-grille { grid-template-columns: 1fr; }
    .tac-plaque img { border-radius: 8px; }
}