/*
Theme Name: Ortiz Bois
Theme URI: https://ortizbois.fr/
Author: Florian ROGER
Description: Magazine maison dans la direction artistique d expert-deco : hero photographique a voile sombre, carte flottante en chevauchement, cartes blanches a ombre douce, badges de rubrique, accent chaud.
Version: 3.0.0
License: GPL-2.0-or-later
Text Domain: orb
*/

/* =========================================================
   LA DIRECTION ARTISTIQUE, ET POURQUOI

   Florian prefere la DA des premiers sites du parc, dont
   expert-deco est la reference : hero photographique immersif,
   profondeur par les ombres, rondeurs, badges de rubrique poses
   sur les images, carte blanche flottante en chevauchement,
   couleur chaude. Mes quatre themes precedents avaient
   progressivement tout retire, jusqu a une page grise a angles
   vifs sans photo en tete.

   Le Taste Skill bannit par defaut les ombres, les pastilles sur
   image et les cartes arrondies. Sur ce point precis le gout du
   client tranche : ces sites doivent etre avenants pour des
   annonceurs, pas gagner un prix de design. Ces choix sont
   declares comme deviations assumees dans l audit de pre-vol.
   Le reste du skill reste applique : zero tiret cadratin, zero
   ecouteur scroll, contrastes AA, pas de violet IA, pas de
   fausse capture en div.

   La COMPOSITION, elle, reste propre a ce site : le titre du
   hero est cale en bas a gauche la ou expert-deco le centre, la
   carte flottante porte l article a la une et non le persona, et
   le pied de page tient sur deux colonnes.

   Contrastes calcules avant ecriture :
     --encre  #201C22 sur --papier #F8F5F2   15,3:1  AAA
     --gris   #635B67 sur --papier            5,9:1  AA
     --prune  #6B4453 sur --papier            7,4:1  AAA
     --blanc  sur --prune                      7,1:1  AAA
     --blanc  sur --nuit  #212936             13,9:1  AAA
   Systeme de formes : une seule gamme de rayons, 6 / 12 / 20,
   et une seule gamme d ombres, douce puis portee.
   ========================================================= */
:root {
  --papier:      #F8F5F2;
  --papier-2:    #F1EBE7;
  --blanc:       #FFFFFF;
  --encre:       #201C22;
  --gris:        #635B67;
  --nuit:        #212936;
  --nuit-2:      #2B3546;
  --prune:       #6B4453;
  --prune-clair: #8A5C6E;
  --prune-pale:  #F6EEF1;
  --bord:        #E6DDD8;

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;

  --ombre-douce:  0 2px 16px rgba(32, 28, 34, .07);
  --ombre-levee:  0 16px 45px rgba(32, 28, 34, .10);
  --ombre-flotte: 0 16px 60px rgba(32, 28, 34, .13);
  --ombre-chaude: 0 6px 20px rgba(107, 68, 83, .30);

  --serif: 'Petrona', Georgia, serif;
  --sans:  'Karla', system-ui, sans-serif;

  /* gamme typographique fermee, dix pas, aucune taille hors gamme */
  --t0: .72rem;
  --t1: .82rem;
  --t2: .92rem;
  --t3: 1rem;
  --t4: 1.08rem;
  --t5: 1.3rem;
  --t6: 1.65rem;
  --t7: 2.1rem;
  --t8: 2.7rem;
  --t9: clamp(2.2rem, 4.6vw, 3.6rem);

  --cadre-max: 1200px;
  --cadre-cote: 24px;
  --souffle: 84px;
  --duree: .3s;
  --ressort: cubic-bezier(.34, 1.56, .64, 1);
}

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

/* overflow-x en CLIP, et sur html seulement. La valeur hidden fait
   de l element un conteneur de defilement : le position sticky du
   bandeau colle alors par rapport a lui et non au viewport, donc la
   barre part au defilement. clip coupe le debord lateral sans creer
   de conteneur, le sticky continue de fonctionner. */
html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t3);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

time { font-variant-numeric: tabular-nums; }

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

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

.a-part {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Le surtitre de section, en petites capitales couleur accent.
   C est le seul micro-label du site, un par section au plus. */
.sur {
  display: block;
  font-family: var(--sans);
  font-size: var(--t0);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--prune);
  margin-bottom: 8px;
}

/* Le jeton : la pastille de credibilite, fond accent pale */
.jeton {
  display: inline-flex; align-items: center;
  padding: 5px 13px;
  border-radius: var(--r-lg);
  background: var(--prune-pale);
  color: var(--prune);
  font-size: var(--t1);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* =========================================================
   BOUTONS
   ========================================================= */
.bouton {
  display: inline-flex; align-items: center;
  padding: 14px 30px;
  border-radius: var(--r-lg);
  border: 1px solid var(--encre);
  font-family: var(--sans);
  font-size: var(--t2);
  font-weight: 700;
  white-space: nowrap;
  background: transparent;
  color: var(--encre);
  cursor: pointer;
  transition: background var(--duree) ease, color var(--duree) ease, transform .15s var(--ressort), box-shadow var(--duree) ease;
}
.bouton:hover { background: var(--encre); color: var(--papier); }
.bouton:active { transform: translateY(2px); }

.bouton-plein {
  background: var(--prune);
  border-color: var(--prune);
  color: var(--blanc);
  box-shadow: var(--ombre-chaude);
}
.bouton-plein:hover { background: var(--prune-clair); border-color: var(--prune-clair); color: var(--blanc); box-shadow: 0 8px 25px rgba(107, 68, 83, .35); }

.bouton-clair { border-color: rgba(255, 255, 255, .35); color: var(--blanc); }
.bouton-clair:hover { background: var(--blanc); color: var(--encre); }

/* =========================================================
   BANDEAU (entete)
   Fixe, transparent sur le hero, opaque des qu on defile.
   ========================================================= */
.borne { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* Par defaut le bandeau est OPAQUE. Il n est transparent que sur les
   pages qui portent un hero sombre derriere lui, l accueil et les
   rubriques. Sur un article ou une page il n y a pas de hero : un
   bandeau transparent y donnait des liens blancs sur papier clair,
   donc invisibles. */
.bandeau {
  position: sticky; top: 0; z-index: 90;
  background: var(--papier);
  transition: background var(--duree) ease, box-shadow var(--duree) ease;
}
.bandeau.pose { box-shadow: var(--ombre-douce); }
.home .bandeau, .category .bandeau { background: transparent; }
.home .bandeau.pose, .category .bandeau.pose { background: var(--papier); }

.bandeau-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: 68px;
}

/* Etat par defaut : encre sur papier. C est celui de toutes les
   pages sans hero. Le blanc est l exception, pas la regle. */
.sceau { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); }
.sceau svg { display: block; flex: 0 0 auto; }
.sceau-nom { font-family: var(--serif); font-weight: 700; font-size: var(--t5); letter-spacing: -.02em; }
.sceau-nom b { color: var(--prune); font-weight: 700; }

.voie { display: flex; align-items: center; gap: 4px; }
.voie a {
  padding: 8px 14px;
  border-radius: var(--r-lg);
  font-size: var(--t1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
  transition: color var(--duree) ease, background var(--duree) ease;
}
.voie a:hover { color: var(--encre); background: var(--prune-pale); }
.voie a:active { transform: translateY(1px); }
.voie .voie-contact { background: var(--prune); border: 1px solid var(--prune); color: var(--blanc); }
.voie .voie-contact:hover { background: var(--prune-clair); border-color: var(--prune-clair); color: var(--blanc); }

/* Exception : sur l accueil et les rubriques, tant que le bandeau
   n est pas pose, il flotte sur un hero sombre et passe en blanc. */
.home .bandeau:not(.pose) .sceau,
.category .bandeau:not(.pose) .sceau { color: var(--blanc); }
.home .bandeau:not(.pose) .sceau-nom b,
.category .bandeau:not(.pose) .sceau-nom b { color: inherit; }
.home .bandeau:not(.pose) .sceau-nom,
.category .bandeau:not(.pose) .sceau-nom { text-shadow: 0 1px 12px rgba(33, 41, 54, .45); }
.home .bandeau:not(.pose) .voie a,
.category .bandeau:not(.pose) .voie a { color: rgba(255, 255, 255, .86); }
.home .bandeau:not(.pose) .voie a:hover,
.category .bandeau:not(.pose) .voie a:hover { color: var(--blanc); background: rgba(255, 255, 255, .16); }
.home .bandeau:not(.pose) .voie .voie-contact,
.category .bandeau:not(.pose) .voie .voie-contact { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); }

/* Meme logique pour le bouton de menu : encre par defaut, blanc
   seulement quand le bandeau flotte sur un hero sombre. */
.bouton-voie, .voie-clore {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border-radius: var(--r-lg);
  background: var(--papier-2);
  border: 1px solid var(--bord);
  color: var(--encre);
  cursor: pointer;
}
.home .bandeau:not(.pose) .bouton-voie,
.category .bandeau:not(.pose) .bouton-voie {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .3);
  color: var(--blanc);
}
.voie-clore { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: var(--blanc); }

/* =========================================================
   GRANDE : le hero photographique
   Photo en fond, degrade nuit par-dessus, contenu cale EN BAS
   A GAUCHE. Le hero remonte sous le bandeau.
   ========================================================= */
.grande {
  position: relative;
  /* Hauteur bornee : sans le plafond, 78vh donne un hero de deux
     metres de haut sur un grand ecran. */
  min-height: clamp(520px, 76vh, 700px);
  margin-top: -68px;
  background: var(--nuit);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.grande-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  /* Comme sur expert-deco, la photo est une texture derriere un
     aplat sombre, pas un sujet : c est ce qui tient le texte blanc
     au-dessus de 7:1 quelle que soit la photo choisie. */
  opacity: .30;
}
.grande-voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(33, 41, 54, .52) 0%, rgba(33, 41, 54, .62) 34%, rgba(33, 41, 54, .86) 68%, rgba(33, 41, 54, .96) 100%);
}
.grande-in {
  position: relative; z-index: 10;
  width: 100%;
  padding-top: 150px;
  padding-bottom: 116px;
}
.grande-pastille {
  display: inline-block;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .88);
  font-size: var(--t0);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: var(--r-lg);
  margin-bottom: 22px;
}
.grande-h {
  font-size: var(--t9);
  color: var(--blanc);
  max-width: 20ch;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.028em;
}
.grande-h em {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: var(--t5);
  letter-spacing: -.008em;
  line-height: 1.35;
  color: rgba(255, 255, 255, .74);
  margin-top: 14px;
  padding-bottom: 4px;
}
.grande-sous {
  font-size: var(--t4);
  color: rgba(255, 255, 255, .70);
  max-width: 52ch;
  margin: 18px 0 30px;
  font-weight: 400;
}
.grande-actes { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   VEDETTE : la carte blanche flottante, en chevauchement
   Elle porte l article a la une, pas le persona.
   ========================================================= */
.vedette-hors { margin-top: -72px; position: relative; z-index: 20; padding-bottom: var(--souffle); }
.vedette {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--blanc);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--ombre-flotte);
  transition: transform var(--duree) var(--ressort), box-shadow var(--duree) ease;
}
.vedette:hover { transform: translateY(-4px); box-shadow: 0 22px 70px rgba(32, 28, 34, .16); }
.vedette-vue { position: relative; overflow: hidden; background: var(--prune-pale); }
.vedette-vue img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; transition: transform .6s ease; }
.vedette:hover .vedette-vue img { transform: scale(1.04); }
.vedette-cat {
  position: absolute; top: 14px; left: 14px;
  background: var(--prune);
  color: var(--blanc);
  font-size: var(--t0);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-sm);
}
.vedette-mot { padding: 38px 40px; display: flex; flex-direction: column; justify-content: center; }
.vedette-h { font-size: var(--t7); letter-spacing: -.022em; }
.vedette:hover .vedette-h { color: var(--prune); }
.vedette-chapo { margin: 14px 0 18px; color: var(--gris); }
.vedette-meta { font-size: var(--t1); color: var(--gris); }

/* =========================================================
   GUIDES : les cartes d articles
   Carte blanche, badge de rubrique pose sur l image, levee au
   survol. Trois par rangee, la premiere sur deux colonnes.
   ========================================================= */
.guides { padding-bottom: var(--souffle); }
.guides-tete { margin-bottom: 30px; }
.guides-tete h2 { font-size: var(--t7); letter-spacing: -.024em; }
.guides-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.carte {
  background: var(--blanc);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--bord);
  display: flex;
  flex-direction: column;
  transition: transform var(--duree) var(--ressort), box-shadow var(--duree) ease, border-color var(--duree) ease;
}
.carte:hover { transform: translateY(-6px); box-shadow: var(--ombre-levee); border-color: transparent; }
.carte-vue { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--prune-pale); }
.carte-vue img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.carte:hover .carte-vue img { transform: scale(1.05); }
.carte-cat {
  position: absolute; top: 12px; left: 12px;
  background: var(--prune);
  color: var(--blanc);
  font-size: var(--t0);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-sm);
}
.carte-corps { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

/* Sans image mise en avant, la carte ne montre pas un bloc vide :
   elle devient une tuile pleine en accent pale, titre centre
   verticalement. Les rangees restent d egale hauteur, et l espace
   se lit comme un parti pris et non comme un trou. */
.carte-sans-vue { background: var(--prune-pale); border-color: transparent; }
.carte-sans-vue .carte-corps { padding: 28px 24px; justify-content: center; }
.carte-sans-vue .carte-h { font-size: var(--t6); }
.carte-sans-vue .carte-meta { margin-top: 14px; }
.carte-sans-vue:hover { background: var(--blanc); }
.carte-sans-vue .carte-cat,
.vedette-sans-vue .vedette-cat {
  position: static;
  align-self: flex-start;
  margin-bottom: 4px;
}
.vedette-sans-vue { grid-template-columns: 1fr; }
.vedette-sans-vue .vedette-mot { padding: 34px 36px; }
.carte-h { font-size: var(--t5); letter-spacing: -.018em; transition: color var(--duree) ease; }
.carte:hover .carte-h { color: var(--prune); }
.carte-meta { margin-top: auto; font-size: var(--t1); color: var(--gris); }

/* La premiere carte de chaque rangee de sept prend deux colonnes */
.carte-large { grid-column: span 2; }
.carte-large .carte-vue { aspect-ratio: 21 / 9; }
.carte-large .carte-h { font-size: var(--t6); }

/* =========================================================
   REPERES : le bandeau nuit, quatre pastilles chiffrees
   ========================================================= */
.reperes { background: var(--nuit); color: var(--blanc); padding-top: 60px; padding-bottom: 60px; }
.reperes h2 { color: var(--blanc); font-size: var(--t7); letter-spacing: -.024em; max-width: 24ch; margin-bottom: 34px; }
.reperes .sur { color: var(--prune-clair); }
.reperes-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.repere {
  background: var(--nuit-2);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r);
  padding: 24px 22px;
}
.repere-chiffre { font-family: var(--serif); font-size: var(--t8); font-weight: 700; color: var(--prune-clair); line-height: 1; letter-spacing: -.03em; }
.repere h3 { color: var(--blanc); font-size: var(--t4); margin: 12px 0 8px; }
.repere p { margin: 0; font-size: var(--t2); color: rgba(255, 255, 255, .72); line-height: 1.55; }

/* =========================================================
   PORTRAIT : le persona en carte blanche, avatar rond
   ========================================================= */
.portrait-hors { padding-top: var(--souffle); padding-bottom: var(--souffle); }
.portrait-carte {
  background: var(--blanc);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-flotte);
  padding: 42px 44px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 38px;
  align-items: start;
}
.portrait-rond { text-align: center; }
.portrait-rond img {
  width: 168px; height: 168px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  box-shadow: 0 8px 30px rgba(107, 68, 83, .18);
}
.portrait-sceau {
  display: inline-block;
  margin-top: 14px;
  background: var(--prune);
  color: var(--blanc);
  font-size: var(--t0);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 15px;
  border-radius: var(--r-lg);
}
.portrait-nom { font-size: var(--t7); letter-spacing: -.024em; }
.portrait-role { margin: 6px 0 16px; font-style: italic; color: var(--gris); }
.portrait-mot { color: var(--gris); max-width: 68ch; }
.portrait-mot strong { color: var(--encre); font-weight: 700; }
.portrait-mot ul { margin: 0 0 1em; padding-left: 20px; }
.portrait-mot li { margin-bottom: .4em; }
.portrait-jetons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* =========================================================
   RENVOI : l acces a la rubrique
   ========================================================= */
.renvoi { padding-bottom: var(--souffle); }
.renvoi-in {
  background: var(--prune-pale);
  border-radius: var(--r-lg);
  padding: 40px 44px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 22px;
}
.renvoi h2 { font-size: var(--t6); letter-spacing: -.022em; max-width: 34ch; }
.renvoi p { margin: 8px 0 0; color: var(--gris); max-width: 54ch; }

/* =========================================================
   BAS DE PAGE : deux colonnes, jamais trois
   ========================================================= */
.bas-page { background: var(--nuit); color: var(--blanc); padding-top: 56px; padding-bottom: 26px; }
.bas-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 46px; }
.bas-page .sceau { color: var(--blanc); }
.bas-mot { color: rgba(255, 255, 255, .68); font-size: var(--t2); max-width: 46ch; margin-top: 16px; }
.bas-page h2 {
  font-family: var(--sans);
  font-size: var(--t0); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--prune-clair);
  margin-bottom: 14px;
}
.bas-liens { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.bas-liens a { font-size: var(--t2); color: rgba(255, 255, 255, .8); transition: color var(--duree) ease; }
.bas-liens a:hover { color: var(--prune-clair); }
.bas-ligne {
  margin-top: 42px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--t1); color: rgba(255, 255, 255, .55);
}

/* =========================================================
   JALON (fil d ariane)
   ========================================================= */
.jalon { font-size: var(--t1); color: var(--gris); padding-top: 22px; }
.jalon a:hover { color: var(--prune); }
.jalon span { padding: 0 7px; }

/* =========================================================
   LECTURE (article)
   Le corps fait toujours la largeur du conteneur, exactement
   comme l image mise en avant. Aucun plafond de mesure.
   ========================================================= */
.lecture { padding-bottom: var(--souffle); }
.lecture-tete { padding-top: 22px; padding-bottom: 28px; }
.lecture-cat {
  display: inline-block;
  background: var(--prune);
  color: var(--blanc);
  font-size: var(--t0); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  margin-bottom: 16px;
}
.lecture-h { font-size: var(--t8); letter-spacing: -.028em; max-width: 24ch; }
.lecture-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 18px; font-size: var(--t1); color: var(--gris); }
.lecture-meta .kk-star-ratings { margin: 0 !important; padding: 0 !important; }
.lecture-vue { margin-bottom: 34px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--ombre-douce); }
.lecture-vue img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.lecture-corps { font-size: var(--t4); }
.lecture-corps h2 { font-size: var(--t7); letter-spacing: -.024em; margin: 1.8em 0 .5em; }
.lecture-corps h3 { font-size: var(--t5); letter-spacing: -.018em; margin: 1.4em 0 .4em; }
.lecture-corps ul, .lecture-corps ol { padding-left: 21px; margin-bottom: 1.1em; }
.lecture-corps li { margin-bottom: .4em; }
.lecture-corps a { color: var(--prune); text-decoration: underline; text-underline-offset: 3px; }
.lecture-corps img { margin: 1.6em 0; border-radius: var(--r); }
.lecture-corps blockquote {
  margin: 1.8em 0; padding: 22px 26px;
  background: var(--prune-pale);
  border-left: 4px solid var(--prune);
  border-radius: var(--r);
  font-family: var(--serif); font-size: var(--t5);
  letter-spacing: -.016em; line-height: 1.35;
}
.lecture-corps table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: var(--t2); background: var(--blanc); border-radius: var(--r); overflow: hidden; }
.lecture-corps th, .lecture-corps td { text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--bord); }
.lecture-corps th { font-weight: 700; background: var(--prune-pale); color: var(--prune); }

.lecture-auteur {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px;
  align-items: center;
  margin-top: 52px;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  box-shadow: var(--ombre-douce);
}
.lecture-auteur img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.lecture-auteur h2 { font-size: var(--t5); letter-spacing: -.018em; margin-bottom: 6px; }
.lecture-auteur p { margin: 0; font-size: var(--t2); color: var(--gris); }

.lecture-suite { margin-top: 54px; }
.lecture-suite h2 { font-size: var(--t7); letter-spacing: -.024em; margin-bottom: 28px; }
.lecture-suite-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.lecture-corps .orb-aussi {
  margin: 2em 0;
  padding: 20px 24px;
  background: var(--prune-pale);
  border-left: 4px solid var(--prune);
  border-radius: var(--r);
}
.lecture-corps .orb-aussi b {
  display: block;
  font-family: var(--sans);
  font-size: var(--t0); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--prune); margin-bottom: 6px;
}
.lecture-corps .orb-aussi a { font-family: var(--serif); font-size: var(--t5); font-weight: 700; text-decoration: none; }
.lecture-corps .orb-aussi a:hover { text-decoration: underline; }

/* =========================================================
   BLOCS D ARTICLE GENERES PAR LA CHAINE DE CONTENU

   La chaine change de prefixe au fil de ses versions : qfd, czm,
   mjd, xnr, dbr, hqv. On selectionne donc par la FIN du nom de
   classe, jamais sur un prefixe. Et tout selecteur par suffixe
   est qualifie par .lecture-corps : sans cela il attraperait les
   classes du theme qui finissent pareil, ce qui a fait
   disparaitre la navigation d un site du parc.

   Le pictogramme est centre sur le point a savoir, jamais cale
   en haut : la chaine pose un padding vertical sur ses li.
   ========================================================= */
.lecture-corps [class$="-key"] ul { padding-left: 0; }
.lecture-corps [class$="-key"] li { position: relative; list-style: none; padding-left: 34px; }
.lecture-corps [class$="-key"] li::before {
  content: ''; position: absolute; left: 0; top: 50%; margin-top: -10px;
  width: 20px; height: 20px;
  border-radius: 50%; background: var(--prune); opacity: .15;
}
.lecture-corps [class$="-key"] li::after {
  content: ''; position: absolute; left: 6.5px; top: 50%; margin-top: -5px;
  width: 5px; height: 9px;
  border: 0; border-right: 2px solid var(--prune); border-bottom: 2px solid var(--prune);
  transform: rotate(45deg);
}

.lecture-corps [class$="-badge"] { display: inline-flex; align-items: center; gap: 6px; }
.lecture-corps [class$="-badge"]::before {
  content: ''; width: 14px; height: 14px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") no-repeat center / contain;
}

.lecture-corps [class$="-foot"] { display: flex; flex-wrap: wrap; gap: 21px; align-items: center; }
.lecture-corps [class$="-foot"] span { position: relative; padding-left: 21px; display: inline-flex; align-items: center; }
.lecture-corps [class$="-foot"] span::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; background: var(--prune); opacity: .85;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.lecture-corps [class$="-foot"] span:nth-child(1)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E");
}
.lecture-corps [class$="-foot"] span:nth-child(2)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
}
.lecture-corps [class$="-foot"] span:nth-child(3)::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.2l3.4 2'/%3E%3C/svg%3E");
}

.lecture-corps #ez-toc-container { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--r); box-shadow: none; }

/* =========================================================
   SERIE (archive) : banniere photo a voile sombre
   ========================================================= */
.serie-tete { position: relative; overflow: hidden; background: var(--nuit); color: var(--blanc); margin-top: -68px; }
.serie-photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .32; }
.serie-voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(33, 41, 54, .78) 0%, rgba(33, 41, 54, .62) 50%, rgba(33, 41, 54, .90) 100%);
}
.serie-mot { position: relative; z-index: 10; padding-top: 148px; padding-bottom: 66px; }
.serie-mot h1 { font-size: var(--t8); letter-spacing: -.028em; color: var(--blanc); }
.serie-compte { margin-top: 12px; }
.serie-desc { margin-top: 16px; max-width: 64ch; color: rgba(255, 255, 255, .78); }
.serie-desc p { margin-bottom: .6em; color: inherit; }
.serie-liste { padding-top: var(--souffle); padding-bottom: var(--souffle); }
.serie-seo { padding-bottom: var(--souffle); color: var(--gris); }
.serie-seo h2 { font-size: var(--t6); letter-spacing: -.022em; color: var(--encre); margin-bottom: 14px; }
.serie-seo p { max-width: 78ch; }

/* =========================================================
   PAGES STATIQUES
   ========================================================= */
.page-orb { padding-bottom: var(--souffle); }
.page-tete-orb { padding-top: 26px; padding-bottom: 30px; border-bottom: 1px solid var(--bord); margin-bottom: 38px; }
.page-tete-orb h1 { font-size: var(--t8); letter-spacing: -.028em; }
.page-corps-orb { font-size: var(--t4); max-width: 82ch; }
.page-corps-orb h2 { font-size: var(--t6); letter-spacing: -.022em; margin: 1.7em 0 .5em; }
.page-corps-orb a { color: var(--prune); text-decoration: underline; text-underline-offset: 3px; }
.page-corps-orb ul { padding-left: 21px; }

.plan-orb { margin-bottom: 40px; }
.plan-orb h2 { font-size: var(--t6); letter-spacing: -.022em; margin-bottom: 16px; }
.plan-orb-liste { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.plan-orb-liste li { margin-bottom: 8px; break-inside: avoid; }
.plan-orb-liste a { color: var(--gris); }
.plan-orb-liste a:hover { color: var(--prune); }

/* =========================================================
   CONTACT
   ========================================================= */
.echange-grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px; align-items: start; }
.echange-mot h2 { font-size: var(--t5); letter-spacing: -.018em; margin-bottom: 10px; }
.echange-mot p { color: var(--gris); max-width: 46ch; }
.echange-bloc { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--bord); }
.echange-mot a { color: var(--prune); }

.formulaire-orb {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  padding: 34px;
  box-shadow: var(--ombre-douce);
}
.wpcf7-form p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 17px; }
.wpcf7-form br { display: none; }
.wpcf7-form label { font-size: var(--t1); font-weight: 700; color: var(--gris); }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--bord);
  border-radius: var(--r-sm);
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t2);
}
.wpcf7-form textarea { min-height: 165px; resize: vertical; }
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: var(--gris); opacity: .8; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--prune); box-shadow: 0 0 0 3px rgba(107, 68, 83, .10); }
.wpcf7-form input.wpcf7-submit {
  width: auto;
  padding: 14px 32px;
  background: var(--prune);
  border: 1px solid var(--prune);
  border-radius: var(--r-lg);
  color: var(--blanc);
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t2);
  cursor: pointer;
  box-shadow: var(--ombre-chaude);
  transition: background var(--duree) ease, box-shadow var(--duree) ease;
}
.wpcf7-form input.wpcf7-submit:hover { background: var(--prune-clair); box-shadow: 0 8px 25px rgba(107, 68, 83, .35); }
.wpcf7-form input.wpcf7-submit:active { transform: translateY(2px); }
.wpcf7-not-valid-tip { font-size: var(--t1); color: #9B2418; }
.wpcf7-response-output { border: 1px solid var(--bord); border-radius: var(--r-sm); padding: 13px 16px; font-size: var(--t2); }

/* =========================================================
   HORS PLAN (404) ET ETAT VIDE
   ========================================================= */
.hors-plan { padding-top: 92px; padding-bottom: var(--souffle); }
.hors-plan h1 { font-size: var(--t8); letter-spacing: -.028em; max-width: 19ch; }
.hors-plan p { margin-top: 16px; color: var(--gris); max-width: 58ch; font-size: var(--t4); }
.hors-plan-actes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.rien-orb { padding: 44px 0; color: var(--gris); font-size: var(--t4); }

/* =========================================================
   EFFONDREMENT MOBILE, declare palier par palier
   ========================================================= */
@media (max-width: 1040px) {
  :root { --souffle: 64px; }
  .vedette { grid-template-columns: 1fr; }
  .vedette-vue img { min-height: 260px; }
  .vedette-mot { padding: 30px 28px 34px; }
  .guides-grille { grid-template-columns: repeat(2, 1fr); }
  .carte-large { grid-column: span 2; }
  .reperes-grille { grid-template-columns: repeat(2, 1fr); }
  .portrait-carte { grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding: 32px 30px; }
  .portrait-rond img { width: 138px; height: 138px; }
  .bas-grille { grid-template-columns: 1fr; gap: 34px; }
  .echange-grille { grid-template-columns: 1fr; gap: 34px; }
  .lecture-suite-grille { grid-template-columns: repeat(2, 1fr); }
  .lecture-suite-grille > *:last-child { display: none; }
}

@media (max-width: 720px) {
  :root { --cadre-cote: 20px; --souffle: 52px; }

  /* Aucun backdrop-filter sur le bandeau en mobile : il cree un
     contexte d empilement et le menu plein ecran passe dessous. */
  .bandeau { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .bandeau-in { height: 62px; }

  .bouton-voie { display: inline-flex; }
  .voie-clore { display: inline-flex; position: absolute; top: 12px; right: 20px; }

  .voie {
    position: fixed; inset: 0; z-index: 200;
    display: none;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 6px;
    padding: 0 28px;
    background: var(--nuit);
  }
  .voie.ouvert { display: flex; }
  .voie a,
  .category .bandeau .voie a,
  .single .bandeau .voie a,
  .page .bandeau .voie a,
  .bandeau.pose .voie a {
    color: var(--blanc) !important;
    font-family: var(--serif);
    font-size: var(--t6);
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: none;
    padding: 10px 0;
    background: transparent;
  }
  .voie .voie-contact,
  .bandeau.pose .voie .voie-contact { background: transparent; border: 0; padding: 10px 0; }

  /* Le plafond doit etre repete ici : un 74vh nu redonnait un hero
     de 1400px de haut sur un ecran allonge. */
  .grande { min-height: clamp(440px, 74vh, 580px); margin-top: -62px; }
  .grande-in { padding-top: 130px; padding-bottom: 96px; }

  .vedette-hors { margin-top: -56px; }

  .guides-grille { grid-template-columns: 1fr; }
  .carte-large { grid-column: span 1; }
  .carte-large .carte-vue { aspect-ratio: 16 / 10; }

  .reperes-grille { grid-template-columns: 1fr; }

  .portrait-carte { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; }
  .portrait-rond { text-align: left; }
  .portrait-rond img { margin: 0; }

  .renvoi-in { padding: 28px 24px; flex-direction: column; align-items: flex-start; }

  .lecture-h, .serie-mot h1, .page-tete-orb h1, .hors-plan h1 { font-size: var(--t7); }
  .lecture-auteur { grid-template-columns: 1fr; text-align: left; }
  .lecture-suite-grille { grid-template-columns: 1fr; }
  .lecture-suite-grille > *:last-child { display: block; }

  .serie-tete { margin-top: -62px; }
  .serie-mot { padding-top: 124px; padding-bottom: 54px; }

  .plan-orb-liste { columns: 1; }
  .formulaire-orb { padding: 24px 20px; }
}

/* Coordonnees de l editeur, servies en image (mentions legales) */
.orb-tampon { display: block; margin-top: 1rem; margin-bottom: 1.25rem; }
.orb-tampon img { display: block; max-width: 100%; height: auto; }