/*
Theme Name: Contre-Regards
Description: Thème éditorial photographique — thème enfant de Blocksy.
Author: Contre-Regards
Template: blocksy
Version: 1.14.0
*/

/* ==========================================================
   NEWSREADER — auto-hébergé (Production Type, OFL).
   Variable : un seul fichier couvre 200→800 + l'axe optique.
   ========================================================== */
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('fonts/newsreader-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('fonts/newsreader-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url('fonts/newsreader-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url('fonts/newsreader-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  color-scheme:light;
  --cr-ink:#17150f; --cr-ink-soft:#4c493f; --cr-muted:#918c7f;
  --cr-accent:#8b2c2c; --cr-paper:#fcfbf7; --cr-paper-warm:#f2efe6; --cr-line:#e5e1d4;
  --cr-serif:'Newsreader', "Iowan Old Style", Palatino, Georgia, serif;
  --cr-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --cr-measure:60ch;
  --cr-radius:12px; --cr-radius-sm:8px;
}

body { background:var(--cr-paper); color:var(--cr-ink); font-family:var(--cr-serif);
       font-optical-sizing:auto; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,.entry-title,.site-title {
  font-family:var(--cr-serif); font-weight:600; letter-spacing:-.015em; line-height:1.13; color:var(--cr-ink);
  font-variation-settings:'opsz' 36;
}

/* ==========================================================
   EN-TÊTE
   ========================================================== */
.site-title, .site-title a { font-family:var(--cr-serif); font-weight:600; letter-spacing:-.02em; color:var(--cr-ink)!important; }
.ct-header a, header#header a { color:var(--cr-ink)!important; }
.ct-header [data-id="menu"] > ul > li > a {
  font-family:var(--cr-sans); font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; font-weight:500;
}
.ct-header [data-id="menu"] > ul > li > a:hover,
.ct-header [data-id="menu"] > ul > li.current-menu-item > a { color:var(--cr-accent)!important; }
.ct-header [data-id="menu"] > ul > li > a::before,
.ct-header [data-id="menu"] > ul > li > a::after { background:var(--cr-accent)!important; }
header#header { border-bottom:1px solid var(--cr-line); }

/* Sous-menus : le bleu marine par défaut de Blocksy jurait avec le crème */
.ct-header .sub-menu, .ct-header ul.sub-menu {
  background:var(--cr-paper)!important;
  border:1px solid var(--cr-line)!important;
  box-shadow:0 12px 34px rgba(23,21,15,.10)!important;
  border-radius:var(--cr-radius-sm);
}
.ct-header .sub-menu li a {
  color:var(--cr-ink-soft)!important; font-family:var(--cr-sans);
  font-size:.78rem; letter-spacing:.03em; text-transform:none;
}
.ct-header .sub-menu li a:hover { color:var(--cr-accent)!important; background:var(--cr-paper-warm)!important; }

/* ==========================================================
   MASTHEAD — l'identité qui manquait.
   Sur l'accueil, le nom du site apparaissait deux fois
   (en-tête + masthead) : on masque celui de l'en-tête.
   ========================================================== */
.home header#header .site-title,
.blog header#header .site-title { visibility:hidden; }
.cr-masthead {
  background:var(--cr-paper-warm);
  border-bottom:1px solid var(--cr-line);
  padding:clamp(3rem,7vw,5.5rem) 1.5rem clamp(2.6rem,6vw,4.5rem);
  text-align:center;
}
.cr-masthead__inner { max-width:52rem; margin:0 auto; }
.cr-masthead__eyebrow {
  font-family:var(--cr-sans); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cr-accent); margin:0 0 1.1rem; font-weight:600;
}
.cr-masthead__title {
  font-family:var(--cr-serif); font-weight:400; font-variation-settings:'opsz' 72;
  font-size:clamp(2.8rem,7.5vw,5.6rem); line-height:.98; letter-spacing:-.03em;
  margin:0 0 1.2rem; color:var(--cr-ink);
}
.cr-masthead__lede {
  font-family:var(--cr-serif); font-style:italic; font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.55; color:var(--cr-ink-soft); margin:0 auto;
  /* 34ch coupait la phrase n'importe ou ; il lui faut sa largeur pour tenir
     sur une ligne, la signature passant en dessous via .cr-masthead__by. */
  max-width:74ch;
}
/* La regle `span` ci-dessous met en gras : on la neutralise pour le porteur
   du saut de ligne, pas pour le nom qu'il contient. */
.cr-masthead__lede .cr-masthead__by { display:block; font-style:italic; font-weight:400; color:var(--cr-ink-soft); }
.cr-masthead__lede span { font-style:normal; font-weight:600; color:var(--cr-ink); }

/* ==========================================================
   GRILLE — rythme éditorial, pas un damier
   ========================================================== */
.entries[data-layout="grid"] { grid-template-columns:1fr!important; gap:0!important; align-items:start; }

.entry-card { display:flex; flex-direction:column; background:transparent!important; border:0!important;
  box-shadow:none!important; padding:2.2rem 0!important; border-bottom:1px solid var(--cr-line)!important; }
.entries[data-layout="grid"] > .entry-card:last-child { border-bottom:0!important; }
.entry-card .ct-media-container { order:1; margin:0 0 1.05rem; overflow:hidden; border-radius:var(--cr-radius);
  background:var(--cr-paper-warm);
  /* Ratio uniforme dans la grille : en 'contain', chaque photo gardait son
     ratio et les cartes se decalaient en escalier. L'article, lui, montre
     l'image entiere (voir plus bas). */
  aspect-ratio:4/5!important; }
/* Blocksy met les vignettes 'boundless' a angles droits quand elles ne sont ni
   le premier ni le dernier enfant (.boundless-image:not(:first-child):not(:last-child)),
   ce qui est notre cas : il rend le titre avant l'image. Sa regle pese autant que
   la notre et se charge apres, d'ou le ciblage explicite de la classe. */
.entries[data-layout="grid"] > .entry-card .ct-media-container.boundless-image,
.entries[data-layout="grid"] > .entry-card .ct-media-container { border-radius:var(--cr-radius); }
.entry-card .entry-title   { order:2; margin:0 0 .45rem; font-size:clamp(1.35rem,1.8vw,1.6rem); line-height:1.25; font-variation-settings:'opsz' 32; }
.entry-card .entry-meta    { order:3; margin:0 0 .5rem; }
.entry-card .entry-excerpt { order:4; margin:0; font-size:1.05rem; line-height:1.65; color:var(--cr-ink-soft); }

.entry-card .ct-media-container img, .entry-card .ct-image-container img {
  width:100%; height:100%!important; display:block; object-fit:cover!important; object-position:center;
  transition:transform .7s cubic-bezier(.2,.6,.2,1);
}
.entry-card:hover .ct-media-container img { transform:scale(1.025); }

.entry-card .entry-title a {
  color:var(--cr-ink); text-decoration:none;
  background:linear-gradient(var(--cr-accent),var(--cr-accent)) no-repeat 0 100% / 0% 1px;
  transition:background-size .35s ease,color .25s ease; padding-bottom:2px;
}
.entry-card:hover .entry-title a { background-size:100% 1px; color:var(--cr-accent); }

.entry-card .entry-meta { font-family:var(--cr-sans); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cr-muted); }
.entry-card .entry-meta a { color:var(--cr-muted); text-decoration:none; }
.entry-card .entry-meta a:hover { color:var(--cr-accent); }
/* Blocksy separe les categories par des virgules en texte brut : masquer les
   liens laissait « ACCUEIL, , , ». On annule la taille du conteneur (donc des
   virgules) et on la restaure sur la seule categorie affichee. */
.entry-card .meta-categories { font-size:0; }
.entry-card .meta-categories a:first-of-type { font-size:.65rem; }
.entry-card .meta-categories a:nth-of-type(n+2) { display:none; }

/* --- Liste chronologique : chaque billet est une unite identique ---
   Lectorat age : pas de tailles variables, pas d'ordre de lecture a deviner.
   Vignette a gauche, texte a droite, un billet par ligne. --- */
@media (min-width:700px) {
  .entries[data-layout="grid"] > .entry-card {
    display:grid; grid-template-columns:220px 1fr; column-gap:2.2rem;
    /* La 4e rangee en 1fr absorbe le reste : sans elle, titre/rubrique/extrait
       s'ecartelent sur toute la hauteur de la vignette au lieu de rester groupes. */
    grid-template-rows:auto auto auto 1fr; align-items:start; }
  /* min-width:0 : par defaut un element de grille refuse de retrecir sous la
     largeur intrinseque de son contenu, et l'image deborde sa colonne. */
  .entries[data-layout="grid"] > .entry-card > * { min-width:0; }
  /* align-self:start est indispensable : etiree sur les 3 rangees, la vignette
     tirait sa LARGEUR de sa hauteur via aspect-ratio (210x4/3 = 280px) et
     debordait sa colonne de 220px en passant sous le titre. */
  .entries[data-layout="grid"] > .entry-card .ct-media-container {
    grid-column:1; grid-row:1/5; margin:0; align-self:start;
    width:100%; max-width:100%; aspect-ratio:4/3!important; }
  .entries[data-layout="grid"] > .entry-card .entry-title   { grid-column:2; grid-row:1; }
  .entries[data-layout="grid"] > .entry-card .entry-meta    { grid-column:2; grid-row:2; }
  .entries[data-layout="grid"] > .entry-card .entry-excerpt { grid-column:2; grid-row:3; }
}

/* ==========================================================
   ARTICLE
   ========================================================== */
.single .entry-header, .single .hero-section { margin-bottom:1.2rem!important; padding-bottom:0!important; }
.single .entry-title { font-size:clamp(2.1rem,3.8vw,3rem); margin:0 auto .7rem; font-variation-settings:'opsz' 60; font-weight:500; }
.single .entry-meta { font-family:var(--cr-sans); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cr-muted); }
.single .entry-content { font-size:1.13rem; line-height:1.75; color:var(--cr-ink-soft); font-variation-settings:'opsz' 16; }
.single .entry-content > * { max-width:var(--cr-measure); margin-left:auto; margin-right:auto; }
.single .entry-content > .wp-block-image { max-width:100%; margin:2rem auto; }
.single .entry-content img {
  border-radius:var(--cr-radius);
  /* Dans l'article, le cadrage de Michel est le sujet : aucune coupe. */
  object-fit:contain; max-width:100%;
  /* Plafond de hauteur : un portrait 525x700 occupait 700px, soit presque
     toute la fenetre avant la premiere ligne de texte. width:auto conserve
     le ratio, la largeur suit la hauteur. */
  height:auto; max-height:min(66vh, 560px); width:auto;
}
.single .entry-content .wp-block-spacer { height:24px!important; }

/* Signature (auteur / date / rubriques) : sous le texte, pas sous le titre.
   Rendue par blocksy_post_meta() via le hook blocksy:single:content:bottom ;
   l'element custom_meta du hero est desactive dans les theme mods. */
.cr-signature { max-width:var(--cr-measure); margin:2.8rem auto 0; padding-top:1.3rem;
  border-top:1px solid var(--cr-line);
  /* --cr-measure vaut 60ch, et 'ch' depend de la taille de police de l'element :
     sans cette ligne la signature herite de 1rem et calcule une mesure plus
     etroite que le texte (544 vs 615), d'ou un decalage de 35px. La taille
     reelle des meta est fixee par .single .entry-meta, elle n'est pas affectee.
     La police et l'axe optique comptent aussi dans le calcul de 'ch' : il faut
     reproduire les trois pour tomber sur la meme mesure que .entry-content. */
  font-size:1.13rem; font-family:var(--cr-serif); font-variation-settings:'opsz' 16; }
.cr-signature .entry-meta { justify-content:flex-start; }
@media (min-width:1000px) {
  /* Aligne la signature sur la grille elargie des articles illustres. */
  .single article:has(.entry-content > figure.wp-block-image) .cr-signature {
    max-width:1120px;
  }
}


/* --- Article en deux colonnes : la photo a gauche, le texte a droite ---
   :has() est indispensable : 6 billets sur 200 n'ont pas de figure, et sans
   ce garde-fou ils afficheraient une colonne gauche vide. --- */
@media (min-width:1000px) {
  /* Blocksy sert l'article dans un conteneur pleine largeur (1440) mais contraint
     l'en-tete a 750 : sans cet alignement, la photo se colle au bord gauche de
     l'ecran tandis que le titre reste au centre. On elargit les deux ensemble,
     et seulement quand il y a une photo. */
  .single article:has(.entry-content > figure.wp-block-image) .hero-section,
  .single article:has(.entry-content > figure.wp-block-image) .entry-content {
    max-width:1120px; margin-left:auto; margin-right:auto;
  }
  .single .entry-content:has(> figure.wp-block-image) {
    display:grid;
    grid-template-columns:minmax(0,42%) minmax(0,1fr);
    column-gap:3.4rem;
    align-items:start;
  }
  /* Le marqueur <span id="more-..."> de WordPress est invisible mais devient un
     element de grille : il ouvrait une rangee vide au milieu du texte. */
  .single .entry-content:has(> figure.wp-block-image) > span[id^="more-"] { display:none; }
  /* Le texte occupe la colonne de droite ; on annule le centrage horizontal
     herite de la regle generale (margin auto). */
  .single .entry-content:has(> figure.wp-block-image) > * {
    grid-column:2; max-width:var(--cr-measure); margin-left:0; margin-right:0;
  }
  /* La photo tient toute la hauteur du texte. Les rangees implicites en trop
     sont a 0 : span 100 est sans effet de bord. */
  .single .entry-content:has(> figure.wp-block-image) > figure.wp-block-image:first-of-type {
    grid-column:1; grid-row:1 / span 100;
    position:sticky; top:1.5rem; align-self:start; margin:0; max-width:100%;
    display:block; /* aligncenter le met en display:table */
  }
  .single .entry-content:has(> figure.wp-block-image) > figure.wp-block-image:first-of-type img {
    width:auto; height:auto; max-width:100%; max-height:78vh;
  }
  /* Les espaceurs de 100px de l'editeur separaient la photo du texte quand ils
     etaient empiles ; en deux colonnes ils ne font que trouer la colonne. */
  .single .entry-content:has(> figure.wp-block-image) > .wp-block-spacer { display:none; }
}

.single .entry-content > p:empty { display:none; }
.entry-content blockquote {
  border:0; border-left:2px solid var(--cr-accent); padding:.2rem 0 .2rem 1.3rem;
  margin:2rem auto; max-width:var(--cr-measure); font-style:italic; color:var(--cr-ink);
}
.entry-content a { color:var(--cr-accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }

/* ==========================================================
   BANDES : NEWSLETTER + AUTEUR
   ========================================================== */
.cr-eyebrow {
  font-family:var(--cr-sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cr-accent); font-weight:600; margin:0 0 .7rem;
}
.cr-bands { margin-top:4.5rem; }
.cr-band { padding:clamp(2.6rem,5vw,4rem) 1.5rem; }
.cr-band__inner { max-width:60rem; margin:0 auto; }
.cr-band--news   { background:var(--cr-paper-warm); border-top:1px solid var(--cr-line); border-bottom:1px solid var(--cr-line); }
.cr-band--author { background:transparent; border-bottom:1px solid var(--cr-line); }

/* --- Newsletter --- */
.cr-news { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; }
.cr-news__title {
  font-family:var(--cr-serif); font-weight:500; font-variation-settings:'opsz' 48;
  font-size:clamp(1.7rem,2.6vw,2.3rem); line-height:1.1; margin:0 0 .5rem;
}
.cr-news__lede { font-family:var(--cr-serif); font-style:italic; color:var(--cr-ink-soft); margin:0; font-size:1.05rem; }
/* MailPoet impose ses styles : on les ramene a notre langage */
.cr-news__form .mailpoet_form { padding:0!important; background:transparent!important; }
.cr-news__form .mailpoet_paragraph { margin-bottom:.7rem!important; }
.cr-news__form input[type=text], .cr-news__form input[type=email] {
  width:100%!important; padding:.85rem 1rem!important; font-family:var(--cr-sans); font-size:.95rem;
  border:1px solid var(--cr-line)!important; border-radius:var(--cr-radius-sm)!important; background:var(--cr-paper)!important;
  color:var(--cr-ink)!important;
}
.cr-news__form input[type=submit], .cr-news__form .mailpoet_submit {
  background:var(--cr-accent)!important; color:#fff!important; border:0!important; border-radius:var(--cr-radius-sm)!important;
  padding:.85rem 1.8rem!important; font-family:var(--cr-sans)!important; font-weight:600!important;
  font-size:.85rem!important; letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  transition:opacity .25s ease;
}
.cr-news__form input[type=submit]:hover { opacity:.85; }
.cr-news__form .mailpoet_message, .cr-news__form .mailpoet_validate_success { font-family:var(--cr-sans); font-size:.85rem; }

/* --- Auteur --- */
.cr-author { display:grid; grid-template-columns:auto 1fr; gap:2.2rem; align-items:center; }
.cr-author__portrait {
  width:118px; height:118px; border-radius:50%; object-fit:cover; object-position:center top;
  background:var(--cr-paper-warm); border:1px solid var(--cr-line);
  /* Le portrait d'origine ne fait que 140x172 : au-dela de ~120px il devient flou. */
}
.cr-author__name {
  font-family:var(--cr-serif); font-weight:500; font-variation-settings:'opsz' 48;
  font-size:clamp(1.5rem,2.2vw,2rem); margin:0 0 .5rem; line-height:1.1;
}
.cr-author__bio { font-family:var(--cr-serif); color:var(--cr-ink-soft); line-height:1.65; margin:0 0 .8rem; max-width:52ch; }
.cr-author__link {
  font-family:var(--cr-sans); font-size:.8rem; font-weight:600; letter-spacing:.05em;
  color:var(--cr-accent); text-decoration:none;
  border-bottom:1px solid var(--cr-accent); padding-bottom:2px;
}
.cr-author__link:hover { opacity:.7; }

@media (max-width:760px) {
  .cr-news { grid-template-columns:1fr; gap:1.5rem; }
  .cr-author { grid-template-columns:1fr; gap:1.2rem; text-align:center; justify-items:center; }
  .cr-author__bio { text-align:left; }
}

/* ==========================================================
   SIDEBAR / PIED / PAGINATION
   ========================================================== */
.widget-title, .ct-widget-title, aside .widget h2 {
  font-family:var(--cr-sans); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--cr-accent); font-weight:600; margin-bottom:.85rem;
}
aside .widget, aside .ct-widget { margin-bottom:2.4rem; }
aside li { line-height:1.45; margin-bottom:.45rem; }
aside a { text-decoration:none; color:var(--cr-ink-soft); }
aside a:hover { color:var(--cr-accent); }
aside .widget_nav_menu li:nth-child(n+8) { display:none; }

/* Pied de page — Blocksy rend .ct-footer, pas .site-footer */
body[data-footer] .ct-footer { background:var(--cr-paper-warm); border-top:1px solid var(--cr-line); font-family:var(--cr-sans); font-size:.85rem; }
.ct-footer .widget-title { margin-bottom:1.1rem; }
.ct-footer .widget-menu, .ct-footer .textwidget { line-height:1.6; }
.ct-footer .widget-menu li { margin-bottom:.4rem; }
.ct-footer a { color:var(--cr-ink-soft); text-decoration:none; transition:color .15s; }
.ct-footer a:hover { color:var(--cr-accent); }
.ct-footer .textwidget { color:var(--cr-ink-soft); max-width:30ch; }
.ct-footer [data-row="bottom"] { border-top:1px solid var(--cr-line); }
.ct-footer-copyright { font-size:.76rem; letter-spacing:.03em; color:var(--cr-ink-soft); }
.ct-footer .widget_recent_entries a { font-family:var(--cr-serif); font-size:.95rem; color:var(--cr-ink); }
.ct-footer .widget_recent_entries .post-date { display:block; font-size:.72rem; color:var(--cr-ink-soft); }
.ct-pagination { font-family:var(--cr-sans); font-size:.76rem; letter-spacing:.05em; }
.ct-pagination a { color:var(--cr-ink-soft)!important; }
.ct-pagination .page-numbers.current { background:var(--cr-accent)!important; border-color:var(--cr-accent)!important; color:#fff!important; }

/* ==========================================================
   MODE SOMBRE
   ========================================================== */

.cr-band--news .mailpoet_paragraph a, .cr-band--news .mailpoet_form a { color:var(--cr-accent); text-decoration:underline; text-underline-offset:2px; }