/*
Theme Name:   Pièce par Pièce
Theme URI:    https://roomswelove.org
Description:  Carnet de décoration et d'aménagement classé pièce par pièce (salon, chambre, cuisine, salle de bains, entrée, bureau, chambre d'enfant, balcon). Thème enfant GeneratePress. Prototype « Carreaux & Plaques » : un carreau de ciment dessiné en CSS par pièce, noms de pièces sur plaques émaillées. Solway + Proza Libre ; bleu émail, chaux rosée, une touche d'ocre.
Author:       Pièce par Pièce
Template:     generatepress
Version:      1.0.0
Text Domain:  roomswelove-fr
*/

/* ============================================================
   PIÈCE PAR PIÈCE - SYSTÈME DE DESIGN
   Prototype « Carreaux & Plaques ». Deux signatures en CSS pur :
   1. Carreau de ciment : huit motifs à symétrie d'ordre 4 (radial /
      conic / linear-gradient), un par pièce, dans l'ordre des rubriques
      (pxp-m-a ... pxp-m-h). Sert de pictogramme de rubrique, de frise,
      de repli d'image et de grand carreau dans le mur de l'accueil.
   2. Plaque émaillée : fond blanc émail, texte bleu, filet double
      (bord + filet intérieur), rivets aux angles. Sert au nom du site,
      aux noms de pièces, au titre des pages fixes, au bandeau cookies.
   Règle de formes : images 4px ; plaques 10px ; boutons 6px ; carreaux 0.
   Accent unique : bleu émail. Ocre réservé aux motifs des carreaux et
   aux repères de l'étage dans le sommaire. MOTION≈1.
   ============================================================ */

:root{
  --chaux:#F3ECE8;         /* fond de page : chaux rosée des vieux murs lyonnais */
  --chaux-2:#EAE1DC;       /* bandes teintées */
  --email:#FCFBF8;         /* blanc émail (plaques, cartes) */
  --bleu:#1E3A8A;          /* accent : bleu émail */
  --bleu-fonce:#16296A;    /* survol */
  --nuit:#14245A;          /* bandes sombres */
  --bleu-pale:#E4E9F4;     /* fond du mur de carreaux */
  --bleu-ligne:#C9D4EC;
  --ocre:#D6A429;          /* détail des carreaux seulement */
  --encre:#1C1F24;         /* texte */
  --doux:#5B5F6B;          /* texte secondaire (AA sur chaux) */
  --filet:#DCD2CB;
  --rivet:#8C8F97;
  --sur-nuit:#EEF1F8;
  --sur-nuit-doux:#AEB8D6;

  --font-titre:'Solway', 'Rockwell', Georgia, serif;
  --font-texte:'Proza Libre', 'Trebuchet MS', sans-serif;

  --r-img:4px;
  --r-plaque:10px;
  --r-btn:6px;
  --wrap:1200px;

  --rivets:
    radial-gradient(circle at 9px 9px, var(--rivet) 0 2.2px, transparent 2.9px),
    radial-gradient(circle at calc(100% - 9px) 9px, var(--rivet) 0 2.2px, transparent 2.9px),
    radial-gradient(circle at 9px calc(100% - 9px), var(--rivet) 0 2.2px, transparent 2.9px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--rivet) 0 2.2px, transparent 2.9px);
}

/* ============================================================ BASE */
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--chaux); color:var(--encre);
  font-family:var(--font-texte); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--bleu); text-underline-offset:3px; }
a:hover{ color:var(--encre); }
h1,h2,h3,h4,h5{ font-family:var(--font-titre); color:var(--encre); line-height:1.15; letter-spacing:-.005em; margin:0 0 .5em; font-weight:700; }
p{ margin:0 0 1em; }
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
:focus-visible{ outline:3px solid var(--bleu); outline-offset:2px; }

.pxp-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; box-sizing:border-box; }
.pxp-main{ display:block; }
.site-content, .site-main{ margin:0; padding:0; }

/* barre de lecture : CSS scroll-driven, invisible sans support */
.pxp-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:1000; pointer-events:none; background:var(--bleu); transform-origin:0 50%; transform:scaleX(0); }
@supports (animation-timeline: scroll()){
  .pxp-progress{ animation:pxp-lire linear both; animation-timeline:scroll(root); }
  @keyframes pxp-lire{ to{ transform:scaleX(1); } }
}
@supports not (animation-timeline: scroll()){ .pxp-progress{ display:none; } }

/* ============================================================ CARREAUX DE CIMENT (8 motifs) */
.pxp-carreau{ display:inline-block; width:22px; height:22px; flex:0 0 auto; vertical-align:middle; background-color:var(--email); box-shadow:0 0 0 1px rgba(30,58,138,.35); }

/* a. salon : rosace + quarts d'ocre aux angles */
.pxp-m-a{ background:
  radial-gradient(circle at 50% 50%, var(--bleu) 0 17%, transparent 17.5% 25%, var(--bleu) 25.5% 30%, transparent 30.5%),
  radial-gradient(circle at 0 0, var(--ocre) 0 24%, transparent 24.5%),
  radial-gradient(circle at 100% 0, var(--ocre) 0 24%, transparent 24.5%),
  radial-gradient(circle at 0 100%, var(--ocre) 0 24%, transparent 24.5%),
  radial-gradient(circle at 100% 100%, var(--ocre) 0 24%, transparent 24.5%),
  var(--email); }
/* b. chambre : croix de Saint-André + cœur ocre */
.pxp-m-b{ background:
  radial-gradient(circle, var(--ocre) 0 11%, transparent 11.5%),
  linear-gradient(45deg, transparent 41%, var(--bleu) 41% 59%, transparent 59%),
  linear-gradient(-45deg, transparent 41%, var(--bleu) 41% 59%, transparent 59%),
  var(--email); }
/* c. cuisine : damier en quatre + médaillon */
.pxp-m-c{ background:
  radial-gradient(circle, var(--email) 0 15%, var(--ocre) 15.5% 22%, transparent 22.5%),
  conic-gradient(var(--bleu) 0 25%, var(--email) 0 50%, var(--bleu) 0 75%, var(--email) 0); }
/* d. salle de bains : cercles concentriques */
.pxp-m-d{ background:
  radial-gradient(circle, var(--ocre) 0 8%, transparent 8.5%),
  repeating-radial-gradient(circle, var(--bleu) 0 7%, var(--email) 7.3% 14%); }
/* e. entrée : quatre-feuilles */
.pxp-m-e{ background:
  radial-gradient(circle, var(--ocre) 0 10%, transparent 10.5%),
  radial-gradient(circle at 50% 0, var(--bleu) 0 30%, transparent 30.5%),
  radial-gradient(circle at 50% 100%, var(--bleu) 0 30%, transparent 30.5%),
  radial-gradient(circle at 0 50%, var(--bleu) 0 30%, transparent 30.5%),
  radial-gradient(circle at 100% 50%, var(--bleu) 0 30%, transparent 30.5%),
  var(--email); }
/* f. bureau : croix grecque + angles ocre */
.pxp-m-f{ background:
  linear-gradient(90deg, transparent 40%, var(--bleu) 40% 60%, transparent 60%),
  linear-gradient(0deg, transparent 40%, var(--bleu) 40% 60%, transparent 60%),
  radial-gradient(circle at 0 0, var(--ocre) 0 17%, transparent 17.5%),
  radial-gradient(circle at 100% 0, var(--ocre) 0 17%, transparent 17.5%),
  radial-gradient(circle at 0 100%, var(--ocre) 0 17%, transparent 17.5%),
  radial-gradient(circle at 100% 100%, var(--ocre) 0 17%, transparent 17.5%),
  var(--email); }
/* g. chambre d'enfant : étoile à huit branches */
.pxp-m-g{ background:
  radial-gradient(circle, var(--ocre) 0 11%, var(--email) 11.5% 19%, transparent 19.5%),
  repeating-conic-gradient(from -11.25deg, var(--bleu) 0 22.5deg, var(--email) 22.5deg 45deg); }
/* h. balcon : losange central, triangles aux angles */
.pxp-m-h{ background:
  radial-gradient(circle, var(--ocre) 0 12%, transparent 12.5%),
  linear-gradient(45deg, var(--bleu) 24%, transparent 24.5% 75.5%, var(--bleu) 76%),
  linear-gradient(-45deg, var(--bleu) 24%, transparent 24.5% 75.5%, var(--bleu) 76%),
  var(--email); }

/* frise : carreaux en ligne (séparateur) */
.pxp-frise{
  height:26px; border-top:2px solid var(--bleu); border-bottom:2px solid var(--bleu);
  background:
    radial-gradient(circle, var(--email) 0 15%, var(--ocre) 15.5% 22%, transparent 22.5%),
    conic-gradient(var(--bleu) 0 25%, var(--email) 0 50%, var(--bleu) 0 75%, var(--email) 0);
  background-size:26px 26px;
}

/* repli d'image : grand carreau (le motif vient de la classe pxp-m-x) */
.pxp-ph{ display:block; width:100%; height:100%; min-height:160px; background-size:25% auto !important; background-repeat:repeat; }
.pxp-ph{ aspect-ratio:4/3; }

/* ============================================================ PLAQUES ÉMAILLÉES */
.pxp-plaque{
  display:inline-flex; align-items:center; gap:10px; box-sizing:border-box;
  background-color:var(--email); background-image:var(--rivets);
  color:var(--bleu); border:2px solid var(--bleu); border-radius:var(--r-plaque);
  box-shadow:inset 0 0 0 3px var(--email), inset 0 0 0 4.5px var(--bleu), 0 2px 0 rgba(20,36,90,.12);
  padding:10px 24px; font-family:var(--font-titre); font-weight:700; line-height:1.2;
  text-decoration:none;
}
.pxp-plaque strong{ font-weight:700; }
.pxp-plaque.petite{
  padding:5px 12px 5px 8px; font-size:.86rem; gap:8px; border-radius:7px;
  background-image:none; box-shadow:inset 0 0 0 2px var(--email), inset 0 0 0 3px var(--bleu);
}
.pxp-plaque.petite .pxp-carreau{ width:18px; height:18px; }
a.pxp-plaque:hover{ background-color:var(--bleu); color:var(--email); }

/* boutons */
.pxp-btn{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  background:var(--bleu); color:var(--email); text-decoration:none;
  font-family:var(--font-titre); font-weight:700; font-size:1rem;
  padding:13px 24px; border-radius:var(--r-btn); border:0; cursor:pointer;
  transition:background-color .2s ease;
}
.pxp-btn:hover{ background:var(--bleu-fonce); color:var(--email); }
.pxp-btn.ligne{ background:transparent; color:var(--bleu); box-shadow:inset 0 0 0 2px var(--bleu); }
.pxp-btn.ligne:hover{ background:var(--bleu); color:var(--email); }

/* ============================================================ EN-TÊTE */
.pxp-mast{ background:var(--chaux); }
.pxp-mast-in{
  max-width:var(--wrap); margin:0 auto; padding:22px 24px 18px; box-sizing:border-box;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px 28px;
}
.pxp-np{ text-decoration:none; display:inline-block; }
.pxp-np-plaque{
  display:inline-flex; align-items:center; gap:12px;
  background-color:var(--email); background-image:var(--rivets);
  border:2px solid var(--bleu); border-radius:var(--r-plaque);
  box-shadow:inset 0 0 0 3px var(--email), inset 0 0 0 4.5px var(--bleu), 0 3px 0 rgba(20,36,90,.14);
  padding:10px 26px 10px 22px;
}
.pxp-np-plaque .pxp-carreau{ width:30px; height:30px; }
.pxp-np-nom{ font-family:var(--font-titre); font-weight:800; font-size:1.65rem; color:var(--bleu); line-height:1; letter-spacing:.01em; }
.pxp-np-tag{ margin:0; color:var(--doux); font-size:.95rem; max-width:34ch; line-height:1.4; }
.pxp-mast-lien{ align-self:end; font-family:var(--font-titre); font-weight:700; font-size:.98rem; color:var(--bleu); text-decoration:underline; text-decoration-thickness:2px; }

.pxp-nav{ background:var(--email); border-top:1px solid var(--filet); border-bottom:2px solid var(--bleu); }
.pxp-nav-in{ max-width:var(--wrap); margin:0 auto; padding:0 24px; box-sizing:border-box; }
.pxp-nav-menu{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 6px; }
.pxp-nav-menu li{ margin:0; }
.pxp-nav-menu a{
  display:flex; align-items:center; gap:8px; padding:14px 6px 12px;
  font-family:var(--font-titre); font-weight:500; font-size:1rem; color:var(--encre); text-decoration:none; white-space:nowrap;
  border-bottom:3px solid transparent; margin-bottom:-2px;
}
.pxp-nav-menu a:hover{ color:var(--bleu); border-bottom-color:var(--bleu-ligne); }
.pxp-nav-menu .current-menu-item > a, .pxp-nav-menu .current-category-ancestor > a{ color:var(--bleu); font-weight:700; border-bottom-color:var(--bleu); }
.pxp-nav-menu .current-menu-item > a::before, .pxp-nav-menu .current-category-ancestor > a::before{
  content:""; width:14px; height:14px; display:inline-block;
  background:conic-gradient(var(--bleu) 0 25%, var(--email) 0 50%, var(--bleu) 0 75%, var(--email) 0);
  box-shadow:0 0 0 1px var(--bleu);
}

/* ============================================================ SECTIONS (communs) */
.pxp-sec{ padding:72px 0; }
.pxp-sec-tete{ margin:0 0 30px; max-width:62ch; }
.pxp-sec-tete h2{ font-size:clamp(1.7rem, 2.6vw, 2.3rem); }
.pxp-sec-tete p{ color:var(--doux); margin:0; }

.pxp-meta{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:.82rem; color:var(--doux); line-height:1.4; }
.pxp-meta b{ color:var(--bleu); font-weight:600; }
.pxp-meta.sur-sombre{ color:var(--sur-nuit-doux); }
.pxp-meta.sur-sombre b{ color:var(--ocre); }

.pxp-piece{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-titre); font-size:.84rem; font-weight:700; color:var(--bleu); margin:0 0 8px; }
.pxp-piece .pxp-carreau{ width:16px; height:16px; }

/* éléments d'image en <span> : toujours en bloc */
.pxp-hero-p1, .pxp-hero-p2, .pxp-case-img, .pxp-carte-img, .pxp-une-img, .pxp-qc-img, .pxp-tour-img, .pxp-lie-img, .pxp-arch-une-img, .pxp-lettre-img, .pxp-carte-b{ display:block; }
.pxp-hero-p1 img, .pxp-hero-p2 img, .pxp-case-img img, .pxp-carte-img img, .pxp-une-img img, .pxp-qc-img img, .pxp-tour-img img, .pxp-lie-img img, .pxp-arch-une-img img, .pxp-lettre-img img{
  width:100%; height:100%; object-fit:cover; border-radius:var(--r-img);
}

/* ============================================================ 1. BANDEAU */
.pxp-hero{ padding:56px 0 64px; }
.pxp-hero-in{ display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:center; }
.pxp-hero-txt h1{ font-size:clamp(2.3rem, 4.4vw, 3.6rem); font-weight:800; line-height:1.06; color:var(--encre); margin:0 0 20px; }
.pxp-hero-txt p{ font-size:1.12rem; color:var(--doux); max-width:40ch; margin:0 0 28px; }
.pxp-hero-photos{ position:relative; padding:0 0 0 48px; }
.pxp-hero-p1{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-img); }
.pxp-hero-p2{ position:absolute; left:0; bottom:64px; width:34%; aspect-ratio:3/4; overflow:hidden; border:6px solid var(--chaux); border-radius:var(--r-img); }
.pxp-hero-legende{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 0 0 0; padding-left:calc(34% - 40px); font-size:.95rem; }
.pxp-hero-legende > a{ color:var(--encre); font-family:var(--font-titre); font-weight:500; text-decoration:none; }
.pxp-hero-legende > a:hover{ color:var(--bleu); text-decoration:underline; }

/* ============================================================ 3. MUR DE CARREAUX */
.pxp-mur{ background:var(--bleu-pale); padding:72px 0 80px; }
.pxp-mur-grille{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.pxp-case{
  display:grid; grid-template-columns:1fr 1fr; align-content:start;
  background:var(--email); text-decoration:none; color:var(--encre);
  border:1px solid var(--bleu-ligne); border-radius:var(--r-img); padding:10px 10px 16px;
  transition:border-color .2s ease;
}
.pxp-case:hover{ border-color:var(--bleu); }
.pxp-case-carreau{ aspect-ratio:1; display:block; }
.pxp-case-img{ aspect-ratio:1; overflow:hidden; }
.pxp-case-img img{ border-radius:0; }
.pxp-case-img .pxp-ph{ aspect-ratio:1; min-height:0; }
.pxp-case .pxp-plaque{ grid-column:1 / -1; justify-self:center; margin:-22px 0 10px; position:relative; z-index:1; font-size:1.02rem; padding:9px 22px; text-align:center; }
.pxp-case-note{ grid-column:1 / -1; font-size:.86rem; color:var(--doux); line-height:1.45; padding:0 6px; text-align:center; }
.pxp-case-n{ grid-column:1 / -1; font-family:var(--font-titre); font-size:.8rem; font-weight:700; color:var(--bleu); text-align:center; margin-top:6px; }
.pxp-case:hover .pxp-plaque{ background-color:var(--bleu); color:var(--email); }

/* ============================================================ 4. MOSAÏQUE */
.pxp-mosaique{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px 22px; }
.pxp-carte{ display:flex; flex-direction:column; text-decoration:none; color:var(--encre); }
.pxp-carte-img{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-img); margin:0 0 12px; }
.pxp-carte h3{ font-size:1.08rem; font-weight:700; line-height:1.25; margin:0 0 8px; }
.pxp-carte p{ font-size:.94rem; color:var(--doux); margin:0 0 10px; }
.pxp-carte:hover h3{ color:var(--bleu); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.pxp-carte.grande{ grid-column:span 2; grid-row:span 2; }
.pxp-carte.grande .pxp-carte-img{ aspect-ratio:auto; flex:1 1 auto; min-height:340px; }
.pxp-carte.grande h3{ font-size:1.6rem; }
.pxp-carte.haute{ grid-row:span 2; }
.pxp-carte.haute .pxp-carte-img{ aspect-ratio:auto; flex:1 1 auto; min-height:300px; }
.pxp-carte.haute h3{ font-size:1.2rem; }
.pxp-plus{ margin-top:36px; }

/* ============================================================ 5. À LA UNE */
.pxp-une{ background:var(--nuit); color:var(--sur-nuit); padding:80px 0; }
.pxp-une-in{ display:grid; grid-template-columns:7fr 5fr; gap:52px; align-items:center; }
.pxp-une-img{ aspect-ratio:5/4; overflow:hidden; border-radius:var(--r-img); }
.pxp-une h2{ font-size:1rem; font-weight:700; color:var(--ocre); margin:0 0 14px; }
.pxp-une h3{ font-size:clamp(1.6rem, 2.6vw, 2.2rem); line-height:1.15; margin:0 0 16px; }
.pxp-une h3 a{ color:var(--email); text-decoration:none; }
.pxp-une h3 a:hover{ text-decoration:underline; }
.pxp-une p{ color:var(--sur-nuit-doux); }
.pxp-une blockquote{ margin:28px 0 0; padding:20px 0 0; border-top:1px solid rgba(238,241,248,.18); font-family:var(--font-titre); font-size:1.15rem; line-height:1.45; color:var(--email); font-weight:500; }

/* ============================================================ 6. QUI ÉCRIT */
.pxp-auteur-in{ display:grid; grid-template-columns:5fr 7fr; gap:56px; align-items:center; }
.pxp-auteur figure{ margin:0; }
.pxp-auteur figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-img); }
.pxp-auteur figcaption{ font-size:.86rem; color:var(--doux); margin-top:8px; }
.pxp-calepinage{ position:relative; display:grid; grid-template-columns:1fr 1fr; aspect-ratio:1; max-width:420px; border:2px solid var(--bleu); }
.pxp-calepinage > span{ display:block; aspect-ratio:1; }
.pxp-calepinage .pxp-plaque{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:2.2rem; padding:16px 34px; }
.pxp-auteur h2{ font-size:clamp(1.7rem, 2.6vw, 2.3rem); }
.pxp-auteur p{ max-width:60ch; }

/* ============================================================ 7. QUATRE CARTES */
.pxp-quatre{ background:var(--chaux-2); padding:72px 0; }
.pxp-quatre-grille{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; }
.pxp-qc{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; text-decoration:none; color:var(--encre); }
.pxp-qc-img{ width:100%; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-img); }
.pxp-qc h3{ font-size:1.06rem; line-height:1.28; margin:0; }
.pxp-qc:hover h3{ color:var(--bleu); text-decoration:underline; text-underline-offset:4px; }

/* ============================================================ 8. ENGAGEMENTS */
.pxp-eng-in{ display:grid; grid-template-columns:4fr 8fr; gap:48px; align-items:start; }
.pxp-eng-in h2{ font-size:clamp(1.7rem, 2.6vw, 2.3rem); }
.pxp-eng-liste{ list-style:none; margin:0; padding:0; }
.pxp-eng-liste li{ display:grid; grid-template-columns:48px 1fr; gap:20px; padding:20px 0; border-top:1px solid var(--filet); }
.pxp-eng-liste li:first-child{ border-top:0; padding-top:0; }
.pxp-eng-liste .pxp-carreau{ width:48px; height:48px; }
.pxp-eng-liste strong{ font-family:var(--font-titre); font-size:1.12rem; display:block; margin:0 0 4px; }
.pxp-eng-liste p{ color:var(--doux); margin:0 0 6px; }
.pxp-eng-liste a{ font-weight:600; }

/* ============================================================ 9. TOUR DE L'APPARTEMENT */
.pxp-tour{ background:var(--nuit); color:var(--sur-nuit); padding:64px 0 72px; }
.pxp-tour h2{ color:var(--email); font-size:clamp(1.5rem, 2.4vw, 2rem); margin:0 0 26px; }
.pxp-tour-liste{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:14px; }
.pxp-tour-liste a{ display:block; text-decoration:none; color:var(--sur-nuit); }
.pxp-tour-img{ aspect-ratio:1; overflow:hidden; border-radius:var(--r-img); margin:0 0 10px; }
.pxp-tour-img .pxp-ph{ aspect-ratio:1; min-height:0; }
.pxp-tour-nom{ display:flex; align-items:center; gap:8px; font-family:var(--font-titre); font-size:.9rem; font-weight:700; line-height:1.2; }
.pxp-tour-nom .pxp-carreau{ width:16px; height:16px; }
.pxp-tour-liste a:hover .pxp-tour-nom{ color:var(--ocre); }

/* ============================================================ 10. INFOLETTRE */
.pxp-lettre{ display:grid; grid-template-columns:1fr 1fr; background:var(--email); }
.pxp-lettre-img{ min-height:380px; overflow:hidden; }
.pxp-lettre-img img{ border-radius:0; }
.pxp-lettre-img .pxp-ph{ height:100%; }
.pxp-lettre-corps{ padding:64px 56px; max-width:560px; box-sizing:border-box; align-self:center; }
.pxp-lettre-corps h2{ font-size:clamp(1.6rem, 2.4vw, 2.1rem); }
.pxp-lettre-corps > p{ color:var(--doux); }
.pxp-form{ display:grid; grid-template-columns:1fr auto; gap:8px 10px; margin:20px 0 12px; }
.pxp-form label{ grid-column:1 / -1; font-family:var(--font-titre); font-weight:700; font-size:.92rem; }
.pxp-form input{ font:inherit; font-size:1rem; padding:12px 14px; border:2px solid var(--bleu); border-radius:var(--r-btn); background:var(--email); color:var(--encre); min-width:0; }
.pxp-form input::placeholder{ color:#6E717C; }
.pxp-note{ font-size:.84rem; color:var(--doux); }

/* ============================================================ PIED */
.pxp-pied{ background:var(--encre); color:#C9CCD3; margin-top:0; }
.pxp-pied .pxp-frise{ border-color:var(--encre); }
.pxp-pied-in{ max-width:var(--wrap); margin:0 auto; padding:56px 24px 36px; box-sizing:border-box; display:grid; grid-template-columns:5fr 4fr 3fr; gap:40px; font-size:.94rem; }
.pxp-pied-nom{ display:flex; align-items:center; gap:10px; font-family:var(--font-titre); font-weight:800; font-size:1.4rem; color:var(--email); margin:0 0 14px; }
.pxp-pied-nom .pxp-carreau{ width:28px; height:28px; }
.pxp-pied-h{ font-size:1rem; color:var(--ocre); margin:0 0 14px; }
.pxp-pied ul{ list-style:none; margin:0; padding:0; }
.pxp-pied li{ margin:0 0 8px; }
.pxp-pied a{ color:#E4E6EA; text-decoration:none; }
.pxp-pied a:hover{ color:var(--email); text-decoration:underline; }
.pxp-pied-pieces a{ display:inline-flex; align-items:center; gap:10px; }
.pxp-pied-pieces .pxp-carreau{ width:16px; height:16px; }
.pxp-pied-rgpd{ max-width:var(--wrap); margin:0 auto; padding:18px 24px 28px; box-sizing:border-box; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; border-top:1px solid rgba(228,230,234,.14); font-size:.86rem; color:#A9ADB6; }
.pxp-pied-rgpd a{ color:#E4E6EA; text-decoration:underline; }

/* ============================================================ ARTICLE */
.pxp-article{ max-width:780px; margin:0 auto; padding:44px 24px 26px; box-sizing:border-box; }
.pxp-ariane{ font-size:.86rem; color:var(--doux); margin:0 0 18px; }
.pxp-ariane a{ color:var(--doux); }
.pxp-article h1{ font-size:clamp(2rem, 4vw, 3rem); font-weight:800; line-height:1.1; margin:18px 0 18px; }
.pxp-article-meta{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.9rem; color:var(--doux); }
.pxp-article-meta strong{ color:var(--encre); }
.pxp-fiche{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; padding:0; }
.pxp-fiche > div{ background:var(--email); border:1.5px solid var(--bleu); border-radius:7px; padding:7px 14px; box-shadow:inset 0 0 0 2px var(--email), inset 0 0 0 3px var(--bleu-ligne); }
.pxp-fiche dt{ font-family:var(--font-titre); font-size:.74rem; font-weight:700; color:var(--bleu); margin:0; }
.pxp-fiche dd{ margin:0; font-size:.94rem; }
.pxp-couv{ max-width:1100px; margin:0 auto 36px; padding:0 24px; box-sizing:border-box; }
.pxp-couv img{ width:100%; max-height:620px; object-fit:cover; border-radius:var(--r-img); }

.pxp-corps{ max-width:720px; margin:0 auto; padding:0 24px; box-sizing:border-box; font-size:1.06rem; }
.pxp-corps h2{ font-size:1.65rem; margin:1.8em 0 .6em; }
.pxp-corps h3{ font-size:1.28rem; margin:1.5em 0 .5em; }
.pxp-corps ul, .pxp-corps ol{ padding-left:1.3em; }
.pxp-corps li{ margin:0 0 .4em; }
.pxp-corps blockquote{ margin:1.6em 0; padding:4px 0 4px 22px; border-left:4px solid var(--bleu); font-family:var(--font-titre); font-size:1.15rem; color:var(--bleu); }
.pxp-corps img{ border-radius:var(--r-img); }
.pxp-corps table{ width:100%; border-collapse:collapse; font-size:.94rem; margin:1.4em 0; }
.pxp-corps th, .pxp-corps td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--filet); }
.pxp-corps th{ font-family:var(--font-titre); color:var(--bleu); }
.ftc-disclosure{ background:var(--bleu-pale); border-left:4px solid var(--bleu); border-radius:var(--r-img); padding:12px 18px; margin:0 0 28px; font-size:.92rem; line-height:1.5; }
.ftc-disclosure p{ margin:0; }
.ftc-disclosure a{ color:var(--bleu); font-weight:700; }

.pxp-bio{ max-width:720px; margin:48px auto 0; padding:24px; box-sizing:border-box; display:grid; grid-template-columns:84px 1fr; gap:22px; background:var(--email); border:1px solid var(--bleu-ligne); border-radius:var(--r-img); }
.pxp-bio-init{ width:84px; height:84px; display:grid; place-items:center; background:conic-gradient(var(--bleu) 0 25%, var(--bleu-pale) 0 50%, var(--bleu) 0 75%, var(--bleu-pale) 0); }
.pxp-bio-init span{ background:var(--email); color:var(--bleu); font-family:var(--font-titre); font-weight:800; font-size:1.2rem; padding:6px 9px; border:2px solid var(--bleu); border-radius:6px; }
.pxp-bio h2{ font-size:1.2rem; margin:0 0 6px; }
.pxp-bio p{ font-size:.94rem; color:var(--doux); margin:0 0 8px; }

.pxp-lies{ max-width:1100px; margin:56px auto 0; padding:0 24px; box-sizing:border-box; }
.pxp-lies h2{ font-size:1.5rem; }
.pxp-lies-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
.pxp-lie{ text-decoration:none; color:var(--encre); }
.pxp-lie-img{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-img); margin:0 0 10px; }
.pxp-lie h3{ font-size:1.05rem; line-height:1.3; }
.pxp-lie:hover h3{ color:var(--bleu); }

.pxp-post-lettre{ background:var(--bleu-pale); margin-top:64px; padding:56px 24px; }
.pxp-post-lettre-in{ max-width:640px; margin:0 auto; }
.pxp-post-lettre h2{ font-size:1.6rem; }

/* ============================================================ ARCHIVES */
.pxp-arch-tete{ background:var(--bleu-pale); }
.pxp-arch-tete-in{ max-width:var(--wrap); margin:0 auto; padding:48px 24px; box-sizing:border-box; display:grid; grid-template-columns:132px 1fr; gap:32px; align-items:center; }
.pxp-arch-carreau{ display:block; width:132px; height:132px; border:2px solid var(--bleu); }
.pxp-arch-tete h1{ font-size:clamp(2rem, 4vw, 3rem); font-weight:800; margin:14px 0 8px; }
.pxp-arch-tete p{ color:var(--doux); margin:0 0 4px; max-width:60ch; }
.pxp-arch-n{ font-family:var(--font-titre); font-weight:700; color:var(--bleu) !important; }
.pxp-arch-une{ max-width:var(--wrap); margin:48px auto 0; padding:0 24px; box-sizing:border-box; display:grid; grid-template-columns:7fr 5fr; gap:40px; align-items:center; }
.pxp-arch-une-img{ aspect-ratio:3/2; overflow:hidden; border-radius:var(--r-img); }
.pxp-arch-une h2{ font-size:clamp(1.5rem, 2.4vw, 2rem); }
.pxp-arch-une h2 a{ color:var(--encre); text-decoration:none; }
.pxp-arch-une h2 a:hover{ color:var(--bleu); }
.pxp-arch-une p{ color:var(--doux); }
.pxp-arch-grid{ max-width:var(--wrap); margin:48px auto 0; padding:0 24px; box-sizing:border-box; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:34px 24px; }
.pxp-arch-vide{ max-width:var(--wrap); margin:48px auto; padding:0 24px; }
.pxp-pagination{ max-width:var(--wrap); margin:48px auto 72px; padding:0 24px; box-sizing:border-box; }
.pxp-pagination .nav-links{ display:flex; flex-wrap:wrap; gap:8px; }
.pxp-pagination .page-numbers{ display:inline-block; padding:8px 14px; border:2px solid var(--bleu); border-radius:var(--r-btn); text-decoration:none; font-family:var(--font-titre); font-weight:700; color:var(--bleu); }
.pxp-pagination .page-numbers.current{ background:var(--bleu); color:var(--email); }

.pxp-404{ padding-top:40px; padding-bottom:72px; }
.pxp-404-pieces{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-wrap:wrap; gap:10px; }

/* ============================================================ PAGES FIXES : « Loge & Boîtes aux lettres » */
.pxp-loge-tete{ background:var(--bleu-pale); }
.pxp-loge-tete-in{ max-width:var(--wrap); margin:0 auto; padding:48px 24px 40px; box-sizing:border-box; }
.pxp-loge-plaque{
  display:inline-block; max-width:100%; box-sizing:border-box;
  background-color:var(--email); background-image:var(--rivets);
  border:3px solid var(--bleu); border-radius:14px;
  box-shadow:inset 0 0 0 5px var(--email), inset 0 0 0 7px var(--bleu), 0 4px 0 rgba(20,36,90,.14);
  padding:22px 44px 20px;
}
.pxp-loge-plaque h1{ margin:0; color:var(--bleu); font-size:clamp(1.8rem, 4vw, 2.8rem); font-weight:800; line-height:1.1; }
.pxp-loge-maj{ display:flex; align-items:center; gap:10px; margin:18px 0 0; font-size:.92rem; color:var(--doux); }
.pxp-loge-maj .pxp-carreau{ width:18px; height:18px; }

.pxp-loge-in{ max-width:var(--wrap); margin:0 auto; padding:48px 24px 80px; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:56px; align-items:start; }
.pxp-loge-in.sans-sommaire{ grid-template-columns:minmax(0,1fr); max-width:860px; }
.pxp-loge-corps{ max-width:72ch; }
.pxp-loge-corps h2{ display:flex; align-items:center; gap:14px; font-size:1.5rem; margin:1.8em 0 .6em; scroll-margin-top:24px; }
.pxp-loge-corps h2:first-child{ margin-top:0; }
.pxp-loge-corps h2::before{
  content:""; flex:0 0 26px; width:26px; height:26px; box-shadow:0 0 0 1px rgba(30,58,138,.35);
  background:
    radial-gradient(circle, var(--email) 0 15%, var(--ocre) 15.5% 22%, transparent 22.5%),
    conic-gradient(var(--bleu) 0 25%, var(--email) 0 50%, var(--bleu) 0 75%, var(--email) 0);
}
.pxp-loge-corps h2:nth-of-type(3n+2)::before{
  background:
    radial-gradient(circle, var(--ocre) 0 11%, transparent 11.5%),
    linear-gradient(45deg, transparent 41%, var(--bleu) 41% 59%, transparent 59%),
    linear-gradient(-45deg, transparent 41%, var(--bleu) 41% 59%, transparent 59%),
    var(--email);
}
.pxp-loge-corps h2:nth-of-type(3n)::before{
  background:
    radial-gradient(circle, var(--ocre) 0 10%, transparent 10.5%),
    radial-gradient(circle at 50% 0, var(--bleu) 0 30%, transparent 30.5%),
    radial-gradient(circle at 50% 100%, var(--bleu) 0 30%, transparent 30.5%),
    radial-gradient(circle at 0 50%, var(--bleu) 0 30%, transparent 30.5%),
    radial-gradient(circle at 100% 50%, var(--bleu) 0 30%, transparent 30.5%),
    var(--email);
}
.pxp-loge-corps h3{ font-size:1.15rem; margin:1.4em 0 .4em; }
.pxp-loge-corps ul{ padding-left:1.3em; }

/* tableau des étages (sommaire collant, à droite) */
.pxp-loge-etages{ position:sticky; top:24px; background:var(--nuit); color:var(--sur-nuit); border-radius:var(--r-plaque); padding:22px 20px 16px; box-shadow:inset 0 0 0 3px var(--nuit), inset 0 0 0 4px rgba(214,164,41,.55); }
.pxp-loge-etages h2{ font-size:1rem; color:var(--ocre); margin:0 0 12px; }
.pxp-loge-etages ol{ list-style:none; margin:0; padding:0; }
.pxp-loge-etages li{ border-top:1px solid rgba(238,241,248,.14); }
.pxp-loge-etages a{ display:grid; grid-template-columns:42px 1fr; gap:10px; padding:9px 0; color:var(--sur-nuit); text-decoration:none; font-size:.9rem; line-height:1.35; }
.pxp-loge-etages a b{ font-family:var(--font-titre); color:var(--ocre); font-weight:700; }
.pxp-loge-etages a:hover span{ text-decoration:underline; }

/* boîte aux lettres */
.pxp-loge-boite{ max-width:520px; margin:48px 0 0; background:var(--bleu); border-radius:var(--r-plaque) var(--r-plaque) 4px 4px; padding:18px 18px 18px; }
.pxp-loge-fente{ height:10px; margin:0 18% 16px; background:var(--nuit); border-radius:5px; box-shadow:inset 0 2px 0 rgba(0,0,0,.35); }
.pxp-loge-portenom{ display:inline-block; margin:0 0 14px; background:var(--ocre); color:var(--encre); font-family:var(--font-titre); font-weight:800; font-size:.95rem; padding:5px 14px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(28,31,36,.35); }
.pxp-loge-cases{ margin:0; display:grid; gap:4px; }
.pxp-loge-cases > div{ background:var(--email); padding:10px 14px; border-radius:3px; }
.pxp-loge-cases dt{ font-family:var(--font-titre); font-weight:700; font-size:.8rem; color:var(--bleu); }
.pxp-loge-cases dd{ margin:0; font-size:.95rem; overflow-wrap:anywhere; }

.pxp-loge-renvois{ margin:48px 0 0; padding:28px 0 0; border-top:2px solid var(--bleu); }
.pxp-loge-renvois h2{ font-size:1.2rem; }
.pxp-loge-renvois ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }

/* ============================================================ BANDEAU COOKIES (tarteaucitron)
   Plaque émaillée suspendue en haut à droite (fixe), filet double + rivets.
   (tarteaucitron injecte son CSS après le nôtre -> !important)
   On ne force JAMAIS display sur #tarteaucitronAlertBig : la lib l'affiche / le masque.
   ============================================================ */
#tarteaucitronRoot #tarteaucitronAlertBig{
  position:fixed !important; top:18px !important; right:18px !important; left:auto !important; bottom:auto !important;
  transform:none !important; margin:0 !important;
  width:330px !important; max-width:calc(100vw - 36px) !important; min-width:0 !important; box-sizing:border-box !important;
  max-height:calc(100vh - 36px) !important; overflow-y:auto !important;
  background-color:var(--email) !important; background-image:var(--rivets) !important; background-repeat:no-repeat !important;
  color:var(--encre) !important;
  border:2px solid var(--bleu) !important; border-radius:12px !important;
  box-shadow:inset 0 0 0 4px var(--email), inset 0 0 0 5.5px var(--bleu), 0 22px 44px -20px rgba(20,36,90,.55) !important;
  padding:26px 24px 18px !important; text-align:left !important;
  font-family:var(--font-texte) !important; line-height:1.5 !important; z-index:2147483640 !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig::before{
  content:"Avant d'entrer"; display:block; margin:0 0 8px;
  font-family:var(--font-titre); font-weight:800; font-size:1.2rem; color:var(--bleu); line-height:1.2;
}
#tarteaucitronRoot #tarteaucitronDisclaimerAlert,
#tarteaucitronRoot #tarteaucitronDisclaimerAlert *{
  color:var(--encre) !important; font-size:.9rem !important; line-height:1.5 !important;
  text-align:left !important; font-family:var(--font-texte) !important;
}
#tarteaucitronRoot #tarteaucitronDisclaimerAlert{ display:block !important; margin:0 0 16px !important; padding:0 !important; }
#tarteaucitronRoot #tarteaucitronAlertBig br{ display:none !important; }
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCheck,
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCross{ display:none !important; }
#tarteaucitronRoot #tarteaucitronAlertBig button{
  display:inline-block !important; box-sizing:border-box !important; vertical-align:top !important;
  margin:0 0 8px !important; padding:10px 12px !important; border-radius:var(--r-btn) !important;
  font-family:var(--font-titre) !important; font-size:.95rem !important; font-weight:700 !important; line-height:1.2 !important;
  letter-spacing:0 !important; text-transform:none !important; cursor:pointer !important; text-align:center !important; white-space:normal !important;
  border:0 !important; background:transparent !important; color:var(--bleu) !important; box-shadow:inset 0 0 0 2px var(--bleu) !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2{ width:calc(50% - 8px) !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2{ background:var(--bleu) !important; color:var(--email) !important; box-shadow:none !important; margin-right:8px !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2:hover{ background:var(--bleu-fonce) !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2:hover{ background:var(--bleu-pale) !important; }
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl{
  display:block !important; width:auto !important; box-shadow:none !important; padding:4px 0 !important; margin:2px 0 0 !important; text-align:left !important;
  font-family:var(--font-texte) !important; font-size:.86rem !important; font-weight:600 !important;
  text-decoration:underline !important; text-underline-offset:3px !important; color:var(--bleu) !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl{ font-weight:400 !important; color:var(--doux) !important; }

/* bouton de réouverture : accroche-porte bleu suspendu au bord haut, à droite */
#tarteaucitronRoot #tarteaucitronIcon, #tarteaucitronIcon{
  top:0 !important; bottom:auto !important; right:22px !important; left:auto !important;
  transform:none !important; width:auto !important; height:auto !important; background:transparent !important; padding:0 !important; margin:0 !important;
}
#tarteaucitronManager img{display:none !important;}
#tarteaucitronRoot #tarteaucitronManager img{display:none !important;}
#tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager, #tarteaucitronIcon #tarteaucitronManager{
  display:flex !important; flex-direction:column !important; align-items:center !important; gap:6px !important;
  width:auto !important; height:auto !important; padding:8px 14px 10px !important; line-height:1 !important;
  background:var(--bleu) !important; border:0 !important; border-radius:0 0 10px 10px !important;
  box-shadow:inset 0 -3px 0 var(--nuit), 0 8px 18px -10px rgba(20,36,90,.7) !important;
}
#tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager::before, #tarteaucitronIcon #tarteaucitronManager::before{
  content:""; width:10px; height:10px; border-radius:50%; background:var(--chaux); box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
}
#tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager::after, #tarteaucitronIcon #tarteaucitronManager::after{
  content:"Cookies de la maison"; font-family:var(--font-titre); font-size:.8rem; font-weight:700; color:var(--email); white-space:nowrap;
}

/* ============================================================ RESPONSIVE */
@media (max-width:1100px){
  .pxp-nav-menu{ justify-content:flex-start; gap:0 14px; }
  .pxp-tour-liste{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width:1024px){
  .pxp-mur-grille{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pxp-mosaique{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pxp-carte.haute{ grid-row:auto; }
  .pxp-carte.haute .pxp-carte-img{ aspect-ratio:4/3; min-height:0; flex:none; }
  .pxp-quatre-grille{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pxp-arch-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pxp-pied-in{ grid-template-columns:1fr 1fr; }
  .pxp-loge-in{ grid-template-columns:minmax(0,1fr) 240px; gap:36px; }
}
@media (max-width:820px){
  .pxp-mast-in{ grid-template-columns:1fr; gap:10px; padding:16px 16px 14px; }
  .pxp-mast-lien{ align-self:start; }
  .pxp-nav-in{ padding:0 8px; }
  .pxp-nav-menu{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:0 12px; }
  .pxp-nav-menu::-webkit-scrollbar{ display:none; }
  .pxp-wrap{ padding:0 16px; }
  .pxp-sec{ padding:52px 0; }
  .pxp-hero{ padding:28px 0 44px; }
  .pxp-hero-in, .pxp-une-in, .pxp-auteur-in, .pxp-eng-in, .pxp-arch-une{ grid-template-columns:1fr; gap:28px; }
  .pxp-hero-photos{ padding-left:0; }
  .pxp-hero-p2{ display:none; }
  .pxp-hero-legende{ padding-left:0; }
  .pxp-mur, .pxp-quatre, .pxp-une{ padding:52px 0; }
  .pxp-carte.grande{ grid-column:span 2; grid-row:auto; }
  .pxp-carte.grande .pxp-carte-img{ aspect-ratio:4/3; min-height:0; flex:none; }
  .pxp-calepinage{ max-width:300px; }
  .pxp-lettre{ grid-template-columns:1fr; }
  .pxp-lettre-img{ min-height:0; aspect-ratio:16/9; }
  .pxp-lettre-corps{ padding:36px 16px 44px; }
  .pxp-tour-liste{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:6px; }
  .pxp-tour-liste li{ flex:0 0 132px; scroll-snap-align:start; }
  .pxp-pied-in{ grid-template-columns:1fr; gap:28px; padding:40px 16px 28px; }
  .pxp-pied-rgpd{ padding:16px; }
  .pxp-lies-grid{ grid-template-columns:1fr; }
  .pxp-arch-tete-in{ grid-template-columns:72px 1fr; gap:18px; padding:32px 16px; }
  .pxp-arch-carreau{ width:72px; height:72px; }
  .pxp-arch-une, .pxp-arch-grid{ padding:0 16px; }
  .pxp-loge-tete-in{ padding:32px 16px 28px; }
  .pxp-loge-plaque{ padding:18px 26px 16px; }
  .pxp-loge-in{ grid-template-columns:1fr; gap:28px; padding:32px 16px 56px; }
  .pxp-loge-etages{ position:static; order:-1; }
  .pxp-bio{ grid-template-columns:64px 1fr; gap:16px; margin-left:16px; margin-right:16px; }
  .pxp-bio-init{ width:64px; height:64px; }
  .pxp-article, .pxp-corps, .pxp-couv{ padding-left:16px; padding-right:16px; }
}
@media (max-width:560px){
  .pxp-np-nom{ font-size:1.35rem; }
  .pxp-np-plaque{ padding:8px 20px 8px 16px; }
  .pxp-np-plaque .pxp-carreau{ width:24px; height:24px; }
  .pxp-mur-grille{ gap:12px; }
  .pxp-case{ padding:6px 6px 12px; }
  .pxp-case .pxp-plaque{ font-size:.86rem; padding:7px 12px; margin-top:-18px; }
  .pxp-case-note{ display:none; }
  .pxp-mosaique{ grid-template-columns:1fr; }
  .pxp-carte.grande{ grid-column:auto; }
  .pxp-quatre-grille{ gap:16px; }
  .pxp-qc h3{ font-size:.95rem; }
  .pxp-form{ grid-template-columns:1fr; }
  .pxp-arch-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  #tarteaucitronRoot #tarteaucitronAlertBig{ top:86px !important; left:12px !important; right:12px !important; width:auto !important; max-width:none !important; max-height:calc(100vh - 100px) !important; padding:22px 18px 14px !important; }
  #tarteaucitronRoot #tarteaucitronDisclaimerAlert, #tarteaucitronRoot #tarteaucitronDisclaimerAlert *{ font-size:.86rem !important; }
  /* mobile : l'accroche-porte passe en bas à droite pour ne jamais couvrir la plaque du nom */
  #tarteaucitronRoot #tarteaucitronIcon, #tarteaucitronIcon{ top:auto !important; bottom:0 !important; right:12px !important; }
  #tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager, #tarteaucitronIcon #tarteaucitronManager{ flex-direction:column-reverse !important; border-radius:10px 10px 0 0 !important; box-shadow:inset 0 3px 0 var(--nuit), 0 -8px 18px -10px rgba(20,36,90,.7) !important; }
}

/* ============================================================ MOUVEMENT RÉDUIT */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition:none !important; animation:none !important; }
  .pxp-progress{ display:none; }
}