/* =========================================================================
   POINT DE CONTACT, système de design « signalétique urbaine », préfixe pdc-
   Vocabulaire : ce qu'une ville affiche pour être lue de loin. Devanture
   (largeur de contenu), auvent (en-tête), logotype, guidage (menu), piste
   (fil d'Ariane), bandeau (bande photo d'accueil), cartouche (bloc de titre),
   vitrine (section), affichage (hub), panneau (tuile), parution (ligne du
   registre daté), pastille (marqueur carré de rubrique), figure, composition
   (colonne de lecture), relevé (sommaire), renvoi (à lire ensuite), tourne
   (rubriques voisines), encart, défilement (table), pied.
   Lumière : un support imprimé posé à plat sous une lampe d'atelier. Fond
   clair partout, aucun bloc en nuit permanente, angles vifs, filets doubles,
   pastilles carrées, aucun glyphe dessiné, aucune requête externe.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- 1. COULEURS · le support et son encre ---------------------------- */
  --support:          #eef1ec;  /* le papier de la page                      */
  --support-pose:     #f8faf6;  /* réserve la plus claire, cartes et encarts */
  --support-sourd:    #e3e8e0;  /* bandes en retrait, chassis d'image        */
  --support-sombre:   #131a15;  /* aplat foncé : bouton, lien d'évitement    */
  --texte:            #171c19;  /* encre courante                            */
  --texte-attenue:    #4d5852;  /* légendes, mentions, second ton            */
  --texte-inverse:    #eef1ec;  /* texte posé sur l'aplat foncé              */
  --lisere:           #c6cdc3;  /* filet                                     */
  --signal:           #a8410f;  /* le signal : liens, matricules, filets     */
  --contre-signal:    #2f5d7c;  /* second signal, état visité et survol      */
  --sur-signal:       #ffffff;  /* texte posé sur le signal                  */

  /* Sept teintes de zone : une par rubrique, portées par la pastille. */
  --zone-marketing:   #2f5d7c;
  --zone-acquisition: #7a3a12;
  --zone-web:         #3d5a3a;
  --zone-design:      #6b2f52;
  --zone-email:       #37474f;
  --zone-imprime:     #8a5a12;
  --zone-carnet:      #4a4a4a;

  /* ---- 2. TYPOGRAPHIE · piles système, aucun fichier chargé ------------- */
  --fonte-titre:   Superclarendon, "Rockwell Nova", "Zilla Slab", "Roboto Slab", serif;
  --fonte-texte:   Geneva, "Nimbus Sans", "Liberation Sans", Arial, sans-serif;
  --fonte-mention: var(--fonte-titre);

  --caps-ecart:      0.16em;
  --taille-courante: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --interlignage:    1.62;
  --taille-t1: clamp(1.85rem, 1.15rem + 2.3vw, 3rem);
  --taille-t2: clamp(1.35rem, 1.08rem + 1.1vw, 1.95rem);
  --taille-t3: clamp(1.06rem, 0.99rem + 0.35vw, 1.28rem);

  /* ---- 3. RYTHME -------------------------------------------------------- */
  --laize:          1380px;                      /* largeur de la devanture  */
  --longueur-ligne: 62ch;                        /* Geneva a l'oeil large    */
  --marge-bord:     clamp(1.1rem, 4vw, 3.6rem);
  --interstice:     clamp(0.9rem, 2vw, 1.7rem);
  --respiration:    clamp(2.2rem, 4.4vw, 4.4rem);

  /* ---- 4. DÉTAILS ------------------------------------------------------- */
  --trait:     2px solid var(--texte);
  --trait-fin: 1px solid var(--lisere);
  --arrondi:   0;
  --duree:     140ms ease;
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--support);
  color: var(--texte);
  font-family: var(--fonte-texte);
  font-size: var(--taille-courante);
  line-height: var(--interlignage);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--fonte-titre);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.004em;
}
h1 { font-size: var(--taille-t1); }
h2 { font-size: var(--taille-t2); }
h3 { font-size: var(--taille-t3); }

p, ul, ol, dl { margin: 0 0 1.05em; }
ul, ol { padding-left: 1.3em; }
li + li { margin-top: 0.3em; }

a {
  color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--duree), background-color var(--duree), border-color var(--duree);
}
a:hover { color: var(--contre-signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--arrondi); }
::selection { background: var(--signal); color: var(--sur-signal); }

/* Voix des mentions : la fonte de titre en petites capitales espacées.
   C'est elle qui tient le rôle d'étiquette, il n'y a pas de troisième pile. */
.pdc-cartouche__surtitre, .pdc-bandeau__surtitre, .pdc-panneau__matricule,
.pdc-panneau__serie, .pdc-parution__date, 
.pdc-encart__quoi, .pdc-renvoi__quoi, .pdc-releve__quoi, .pdc-tourne__etat,
.pdc-piste, .pdc-pastille, .pdc-releve__mention span, .pdc-pied__bloc h2,
.pdc-bandeau__reperes, .pdc-pied__ourlet {
  font-family: var(--fonte-mention);
  text-transform: uppercase;
  letter-spacing: var(--caps-ecart);
  font-size: 0.7rem;
  font-weight: 600;
}

/* =========================================================================
   DEVANTURE · largeur de contenu, et évitement clavier
   ========================================================================= */

.pdc-devanture {
  max-width: var(--laize);
  margin-inline: auto;
  padding-inline: var(--marge-bord);
}
/* Le conteneur de lecture : composition à gauche, rail à droite.
   C'est l'asymétrie inversée du site : le contenu cale à gauche. */
.pdc-devanture--lecture {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--longueur-ligne) + 3rem)) 15.5rem;
  justify-content: space-between;
  gap: clamp(1.6rem, 3.4vw, 3.4rem);
  align-items: start;
  padding-block: clamp(1.4rem, 2.6vw, 2.4rem) var(--respiration);
}

.pdc-passerelle {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--support-sombre);
  color: var(--texte-inverse);
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  font-weight: 600;
}
.pdc-passerelle:focus-visible { left: 0; color: var(--texte-inverse); }

.pdc-horsecran {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* =========================================================================
   AUVENT · l'en-tête, clair, tenu par un filet double
   ========================================================================= */

.pdc-auvent {
  background: var(--support-pose);
  border-bottom: 3px double var(--lisere);
}
.pdc-auvent__portique {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(0.9rem, 2.6vw, 2.4rem);
  padding-block: 0.8rem;
  flex-wrap: wrap;
}
.pdc-logotype {
  text-decoration: none;
  color: var(--texte);
  display: inline-flex;
  flex-direction: column;
  gap: 0.12rem;
}
.pdc-logotype__nom {
  font-family: var(--fonte-titre);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  border-left: 5px solid var(--signal);
  padding-left: 0.55rem;
}
.pdc-logotype__mention {
  font-family: var(--fonte-texte);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.56rem;
  color: var(--texte-attenue);
  padding-left: calc(0.55rem + 5px);
}
.pdc-logotype:hover .pdc-logotype__nom { color: var(--signal); }

.pdc-guidage { margin: 0; min-width: 0; max-width: 100%; }
.pdc-guidage ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.82rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pdc-guidage li { margin: 0; }
.pdc-guidage a {
  color: var(--texte-attenue);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.635rem;
  font-weight: 600;
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
}
.pdc-guidage a:hover { color: var(--texte); border-bottom-color: var(--signal); }

/* =========================================================================
   BANDEAU · la bande photo d'accueil, hauteur bornée
   Règle qui prime : les panneaux de rubrique restent visibles sans dérouler,
   donc l'affichage commence avant 700 px de hauteur de page.
   ========================================================================= */

.pdc-bandeau {
  position: relative;
  isolation: isolate;
  background: #131a15;
  color: var(--texte-inverse);
  overflow: hidden;
  border-bottom: 3px double var(--lisere);
}
.pdc-bandeau__cliche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Le filtre est une couleur ÉCRITE EN DUR, jamais var(--x) : sur un thème
   clair une variable pâle délaverait la photo en gris. */
.pdc-bandeau__filtre {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(96deg, rgba(15, 22, 17, 0.93) 0%, rgba(15, 22, 17, 0.86) 52%, rgba(15, 22, 17, 0.74) 100%);
}
.pdc-bandeau__enonce {
  position: relative;
  padding-block: clamp(1.25rem, 2.1vw, 1.85rem);
  min-height: clamp(190px, 17vw, 240px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pdc-bandeau__surtitre {
  margin: 0 0 0.5rem;
  color: #e9a07a;
  display: inline-block;
}
.pdc-bandeau h1 {
  color: var(--texte-inverse);
  max-width: 27ch;
}
.pdc-bandeau__conduite {
  max-width: 72ch;
  color: #c9d2cb;
  margin: 0.7rem 0 0;
  font-size: 0.97rem;
}
.pdc-bandeau__reperes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
  margin: 0.85rem 0 0;
  padding: 0.5rem 0 0;
  border-top: 3px double rgba(233, 160, 122, 0.5);
  color: #e9a07a;
  align-self: flex-start;
}
.pdc-bandeau__reperes li { margin: 0; }

/* =========================================================================
   VITRINE · les sections de l'accueil et leurs seuils
   ========================================================================= */

.pdc-vitrine { padding-block: clamp(1.8rem, 3.2vw, 3rem); }
.pdc-bandeau + .pdc-vitrine { padding-top: clamp(1.2rem, 2vw, 1.8rem); }
.pdc-vitrine--assombrie {
  background: var(--support-sourd);
  border-block: var(--trait-fin);
}
.pdc-vitrine__seuil {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6rem;
  border-bottom: 3px double var(--lisere);
  padding-bottom: 0.7rem;
  margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
  flex-wrap: wrap;
}
.pdc-vitrine__seuil h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem); }
.pdc-vitrine__legende { margin: 0; color: var(--texte-attenue); max-width: 56ch; font-size: 0.94rem; }

/* =========================================================================
   AFFICHAGE · les sept panneaux de rubrique
   Rail droit : le matricule est aligné à droite, en face de l'intitulé.
   ========================================================================= */

.pdc-affichage {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2.1rem) var(--interstice);
}
.pdc-panneau {
  grid-column: span 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0.7rem;
  margin: 0;
}
.pdc-panneau:nth-child(n+5) { grid-column: span 4; }
.pdc-panneau > .pdc-figure__chassis { grid-column: 1 / -1; margin-bottom: 0.75rem; }
.pdc-panneau__trait {
  grid-column: 1 / -1;
  height: 5px;
  margin: 0 0 0.55rem;
  border-top: 2px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--lisere);
}
.pdc-panneau__trait--marketing   { color: var(--zone-marketing); }
.pdc-panneau__trait--acquisition { color: var(--zone-acquisition); }
.pdc-panneau__trait--web         { color: var(--zone-web); }
.pdc-panneau__trait--design      { color: var(--zone-design); }
.pdc-panneau__trait--email       { color: var(--zone-email); }
.pdc-panneau__trait--imprime     { color: var(--zone-imprime); }
.pdc-panneau__trait--carnet      { color: var(--zone-carnet); }
.pdc-panneau__intitule { grid-column: 1; margin: 0; }
.pdc-panneau__intitule a { color: var(--texte); text-decoration: none; }
.pdc-panneau__intitule a:hover { color: var(--signal); text-decoration: underline; }
.pdc-panneau__matricule {
  grid-column: 2;
  margin: 0;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 0.82rem;
}
.pdc-panneau__apercu {
  grid-column: 1 / -1;
  margin: 0.4rem 0 0;
  color: var(--texte-attenue);
  font-size: 0.93rem;
}
.pdc-panneau__serie {
  grid-column: 1 / -1;
  margin: 0.55rem 0 0;
  color: var(--texte-attenue);
  border-top: var(--trait-fin);
  padding-top: 0.4rem;
}
.pdc-affichage--nu .pdc-panneau { grid-column: span 4; }

/* =========================================================================
   PARUTIONS · le registre daté, une ligne par page publiée
   La date ouvre la ligne dans l'ordre du document, et se pose dans le rail
   droit à l'écran : c'est l'asymétrie inversée, appliquée au flux.
   ========================================================================= */

.pdc-parutions { list-style: none; margin: 0; padding: 0; }
.pdc-parution {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 9.5rem;
  gap: 0 clamp(0.9rem, 2vw, 1.6rem);
  align-items: start;
  padding-block: 0.95rem;
  border-bottom: var(--trait-fin);
  margin: 0;
}
.pdc-parution:first-child { border-top: 3px double var(--lisere); }
.pdc-parution > .pdc-figure__chassis { grid-column: 1; grid-row: 1; }
.pdc-parution__bloc { grid-column: 2; grid-row: 1; }
.pdc-parution__date {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  text-align: right;
  color: var(--texte-attenue);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.pdc-parution__date time { color: var(--signal); display: block; }
.pdc-parution__revue { display: block; margin-top: 0.25rem; text-transform: none; letter-spacing: 0; font-size: 0.72rem; font-family: var(--fonte-texte); font-weight: 400; }
.pdc-parution__cliche { width: 100%; height: 100%; object-fit: cover; }
.pdc-parution__intitule { margin: 0 0 0.25rem; font-size: 1.12rem; }
.pdc-parution__intitule a { color: var(--texte); text-decoration: none; }
.pdc-parution__intitule a:hover { color: var(--signal); text-decoration: underline; }
.pdc-parution__amorce { margin: 0 0 0.5rem; color: var(--texte-attenue); font-size: 0.93rem; }
.pdc-parutions--serrees .pdc-parution { grid-template-columns: 5.5rem minmax(0, 1fr) 8.5rem; padding-block: 0.8rem; }

/* Pastille de rubrique : un carré plein, jamais un badge arrondi. */
.pdc-pastille {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  color: var(--sur-signal);
  background: var(--texte-attenue);
  font-size: 0.62rem;
  border-radius: var(--arrondi);
}
.pdc-pastille--marketing   { background: var(--zone-marketing); }
.pdc-pastille--acquisition { background: var(--zone-acquisition); }
.pdc-pastille--web         { background: var(--zone-web); }
.pdc-pastille--design      { background: var(--zone-design); }
.pdc-pastille--email       { background: var(--zone-email); }
.pdc-pastille--imprime     { background: var(--zone-imprime); }
.pdc-pastille--carnet      { background: var(--zone-carnet); }

/* =========================================================================
   APPEL · le seul bouton du site
   ========================================================================= */

.pdc-appel { margin: 1.4rem 0 0; }
.pdc-appel--marque {
  display: inline-block;
  background: var(--support-sombre);
  color: var(--texte-inverse);
  text-decoration: none;
  padding: 0.62rem 1.15rem;
  font-family: var(--fonte-mention);
  text-transform: uppercase;
  letter-spacing: var(--caps-ecart);
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--arrondi);
}
.pdc-appel--marque:hover { background: var(--signal); color: var(--sur-signal); }

/* =========================================================================
   PISTE, CARTOUCHE, FIGURE · l'ouverture d'une page intérieure
   ========================================================================= */

.pdc-piste {
  background: var(--support-pose);
  border-bottom: var(--trait-fin);
  color: var(--texte-attenue);
  padding-block: 0.65rem;
}
.pdc-piste ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin: 0; padding: 0; }
.pdc-piste li { margin: 0; }
.pdc-piste li + li::before { content: "/"; margin-right: 0.6rem; color: var(--signal); }
.pdc-piste a { color: var(--texte-attenue); text-decoration: none; }
.pdc-piste a:hover { color: var(--signal); }
.pdc-piste [aria-current="page"] { color: var(--texte); }

.pdc-cartouche { padding-block: clamp(1.5rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.6rem); }
.pdc-cartouche__surtitre {
  margin: 0 0 0.85rem;
  color: var(--signal);
  display: inline-block;
  border-bottom: 3px double var(--signal);
  padding-bottom: 0.35rem;
}
.pdc-cartouche h1 { max-width: 22ch; }
.pdc-cartouche__amorce {
  max-width: 62ch;
  font-size: clamp(1.04rem, 0.99rem + 0.35vw, 1.2rem);
  color: var(--texte-attenue);
  margin: 0.95rem 0 0;
}
.pdc-cartouche__mention {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
  margin: 1.1rem 0 0;
  padding: 0.55rem 0 0;
  border-top: var(--trait-fin);
  color: var(--texte-attenue);
  text-transform: uppercase;
  letter-spacing: var(--caps-ecart);
  font-size: 0.66rem;
  font-weight: 600;
  font-family: var(--fonte-mention);
}
.pdc-cartouche__mention li { margin: 0; }
.pdc-cartouche__mention a { color: var(--texte-attenue); text-decoration: none; }
.pdc-cartouche__mention a:hover { color: var(--signal); }

.pdc-figure { margin: 0 0 1.5rem; }
.pdc-figure--principale { margin-bottom: 0; }
.pdc-figure--menue { max-width: 26rem; }
.pdc-figure__chassis {
  overflow: hidden;
  border: var(--trait-fin);
  background: var(--support-sourd);
}
.pdc-figure__chassis--format-3-2  { aspect-ratio: 3 / 2; }
.pdc-figure__chassis--format-2-3  { aspect-ratio: 2 / 3; }
.pdc-figure__chassis--format-1-1  { aspect-ratio: 1 / 1; }
.pdc-figure__chassis--format-21-9 { aspect-ratio: 21 / 9; }
.pdc-figure__cliche {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdc-figure__legende {
  margin: 0.55rem 0 0;
  color: var(--texte-attenue);
  font-size: 0.88rem;
  border-left: 3px solid var(--lisere);
  padding-left: 0.7rem;
}

/* =========================================================================
   COMPOSITION · le corps de la page, calé à gauche
   ========================================================================= */

.pdc-composition { max-width: var(--longueur-ligne); }
.pdc-composition > h2 {
  margin-top: 2rem;
  padding-top: 0.8rem;
  border-top: 3px double var(--lisere);
}
.pdc-composition > h3 { margin-top: 1.5rem; }
.pdc-composition .pdc-figure { max-width: none; margin-block: 1.6rem; }

/* Le chapô : la réponse directe, en tête du corps. */
.pdc-attaque {
  font-size: clamp(1.04rem, 1rem + 0.3vw, 1.16rem);
  border-left: 5px solid var(--signal);
  padding-left: 0.9rem;
  margin-bottom: 1.3rem;
}

.pdc-citation {
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 3px double var(--signal);
  color: var(--texte-attenue);
  font-family: var(--fonte-titre);
  font-size: 1.08rem;
}

.pdc-encart {
  background: var(--support-pose);
  border: var(--trait-fin);
  border-left: 5px solid var(--signal);
  padding: 1rem 1.2rem 0.4rem;
  margin-block: 1.7rem;
}
.pdc-encart__quoi { margin: 0 0 0.7rem; color: var(--signal); }
.pdc-encart--avant {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 0 clamp(1.2rem, 2.6vw, 2.2rem);
  padding: 0;
  border-left-width: 1px;
  background: var(--support-pose);
  align-items: center;
  margin: 0;
}
.pdc-encart--avant .pdc-figure__chassis { border: 0; height: 100%; }
.pdc-encart__bloc { padding: 1.2rem 1.4rem 1.2rem 0; }
.pdc-encart__bloc h3 { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); margin-bottom: 0.5rem; }
.pdc-encart__bloc h3 a { color: var(--texte); text-decoration: none; }
.pdc-encart__bloc h3 a:hover { color: var(--signal); text-decoration: underline; }
.pdc-encart__bloc p:last-child { margin: 0; color: var(--texte-attenue); font-size: 0.95rem; }
.pdc-encart--voix { border-left-width: 5px; margin-top: 1.6rem; padding-bottom: 1rem; }
.pdc-encart--voix p { margin: 0; max-width: 78ch; color: var(--texte-attenue); }

/* =========================================================================
   RELEVÉ · le rail droit, sommaire et mentions datées
   ========================================================================= */

.pdc-releve {
  border-top: 3px double var(--lisere);
  padding-top: 0.8rem;
  position: sticky;
  top: 1rem;
}
.pdc-releve__quoi { margin: 0 0 0.6rem; color: var(--texte-attenue); font-size: 0.68rem; }
.pdc-releve__liste { list-style: none; margin: 0 0 1.1rem; padding: 0; counter-reset: releve; }
.pdc-releve__liste li { margin: 0 0 0.4rem; counter-increment: releve; }
.pdc-releve__liste a { color: var(--texte); text-decoration: none; font-size: 0.9rem; display: block; }
.pdc-releve__liste a::before { content: counter(releve, decimal-leading-zero) " "; color: var(--signal); font-variant-numeric: tabular-nums; }
.pdc-releve__liste a:hover { color: var(--signal); }
.pdc-releve__mention {
  margin: 0 0 0.35rem;
  color: var(--texte);
  font-size: 0.84rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}
.pdc-releve__mention span:not(.pdc-pastille) { color: var(--texte-attenue); }

/* =========================================================================
   DÉFILEMENT · la table des formats déborde dans son propre conteneur
   ========================================================================= */

/* contain: paint borne le debordement de la table a ce conteneur. Sans lui,
   Chrome remonte la largeur de la table jusqu'a documentElement.scrollWidth :
   la page ne defile pas, mais tous les controles de rendu la signalent. */
.pdc-defilement {
  overflow-x: auto;
  contain: paint;
  border: var(--trait-fin);
  background: var(--support-pose);
  margin-block: 1.6rem;
}
.pdc-defilement:focus-visible { outline-offset: -2px; }
/* width max-content plus min-width 100% : la table prend sa largeur propre
   DANS son conteneur a defilement. Avec width 100% et des cellules non
   secables, Chrome remonte le debordement jusqu'a la racine et tous les
   controles de rendu signalent une page qui defile en largeur, alors qu'elle
   ne defile pas. */
.pdc-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 0.9rem; }
.pdc-table caption {
  text-align: left;
  padding: 0.8rem 0.9rem;
  color: var(--texte-attenue);
  font-size: 0.84rem;
  border-bottom: var(--trait-fin);
}
.pdc-table th, .pdc-table td {
  padding: 0.5rem 0.9rem;
  text-align: left;
  border-bottom: var(--trait-fin);
  white-space: nowrap;
  vertical-align: baseline;
}
.pdc-table thead th {
  font-family: var(--fonte-mention);
  text-transform: uppercase;
  letter-spacing: var(--caps-ecart);
  font-size: 0.64rem;
  border-bottom: 3px double var(--lisere);
  background: var(--support-sourd);
}
.pdc-table tbody th { font-family: var(--fonte-titre); font-weight: 600; }
.pdc-table tbody tr:last-child th, .pdc-table tbody tr:last-child td { border-bottom: 0; }
.pdc-table td { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--texte-attenue); }
.pdc-table td:last-child { white-space: normal; min-width: 12rem; }

/* =========================================================================
   RENVOI et TOURNE · les sorties éditoriales de la page
   ========================================================================= */

.pdc-renvoi {
  margin-top: 2.2rem;
  border-top: 3px double var(--lisere);
  padding-top: 1rem;
}
.pdc-renvoi__quoi { color: var(--texte-attenue); margin: 0 0 0.7rem; font-size: 0.7rem; }
.pdc-renvoi__liste { margin: 0; padding-left: 1.1em; }
.pdc-renvoi__liste li { margin-bottom: 0.4rem; }
.pdc-renvoi__intitule { font-weight: 600; }

.pdc-tourne {
  margin-top: 1.8rem;
  border-top: var(--trait-fin);
  padding-top: 0.9rem;
}
.pdc-tourne__etat { margin: 0 0 0.3rem; color: var(--signal); }
.pdc-tourne p:last-child { margin: 0; color: var(--texte-attenue); }

/* =========================================================================
   PLAN · la page qui liste toutes les adresses
   ========================================================================= */

.pdc-plan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem var(--interstice);
  margin-bottom: 1.4rem;
}
.pdc-plan__bloc { border-top: 3px double var(--lisere); padding-top: 0.7rem; }
.pdc-plan__bloc h3 { font-size: 1.02rem; margin-bottom: 0.45rem; }
.pdc-plan__bloc h3 a { color: var(--texte); text-decoration: none; }
.pdc-plan__bloc h3 a:hover { color: var(--signal); }
.pdc-plan__bloc ul { margin: 0; padding-left: 1.1em; font-size: 0.92rem; }

/* =========================================================================
   PIED · clair lui aussi, tenu par un filet double
   ========================================================================= */

.pdc-pied {
  background: var(--support-pose);
  border-top: 3px double var(--lisere);
  margin-top: var(--respiration);
}
.pdc-pied__travee {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
  padding-block: clamp(1.6rem, 3.2vw, 2.6rem);
}
.pdc-pied__bloc h2 { color: var(--signal); margin-bottom: 0.7rem; font-size: 0.68rem; }
.pdc-pied__bloc ul { list-style: none; margin: 0; padding: 0; }
.pdc-pied__bloc li { margin-bottom: 0.28rem; }
.pdc-pied__bloc a { color: var(--texte); text-decoration: none; font-size: 0.92rem; }
.pdc-pied__bloc a:hover { color: var(--signal); text-decoration: underline; }
.pdc-pied__ourlet {
  border-top: var(--trait-fin);
  padding-block: 0.85rem;
  color: var(--texte-attenue);
  font-size: 0.63rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* =========================================================================
   ADAPTATION
   ========================================================================= */

@media (max-width: 1100px) {
  .pdc-devanture--lecture { grid-template-columns: minmax(0, 1fr); }
  .pdc-releve { order: -1; position: static; }
  .pdc-releve__liste { columns: 2; column-gap: 1.4rem; }
  .pdc-panneau { grid-column: span 6; }
  .pdc-panneau:nth-child(n+5) { grid-column: span 6; }
  .pdc-affichage--nu .pdc-panneau { grid-column: span 6; }
  .pdc-encart--avant { grid-template-columns: minmax(0, 1fr); }
  .pdc-encart__bloc { padding: 1.1rem 1.2rem; }
}
@media (max-width: 900px) {
  .pdc-auvent__portique { gap: 0.6rem 1.1rem; }
  .pdc-guidage { order: 3; flex: 0 0 100%; width: 100%; min-width: 0; }
  .pdc-guidage ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; }
  .pdc-guidage a { white-space: nowrap; }
  .pdc-pied__travee { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .pdc-parution,
  .pdc-parutions--serrees .pdc-parution {
    grid-template-columns: 5.2rem minmax(0, 1fr);
    row-gap: 0.5rem;
  }
  .pdc-parution__date { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  .pdc-parution__date time { display: inline; }
  .pdc-parution__revue { display: inline; margin-left: 0.6rem; }
  .pdc-parution > .pdc-figure__chassis { grid-row: 2; }
  .pdc-parution__bloc { grid-column: 2; grid-row: 2; }
  .pdc-bandeau__enonce { min-height: 0; }
}
@media (max-width: 560px) {
  .pdc-panneau,
  .pdc-panneau:nth-child(n+5),
  .pdc-affichage--nu .pdc-panneau { grid-column: span 12; }
  .pdc-pied__travee { grid-template-columns: 1fr; }
  .pdc-releve__liste { columns: 1; }
  .pdc-table th, .pdc-table td { padding: 0.45rem 0.65rem; }
}

/* =========================================================================
   IMPRESSION
   ========================================================================= */

@media print {
  :root {
    --support: #ffffff;
    --support-pose: #ffffff;
    --support-sourd: #ffffff;
    --texte: #000000;
    --texte-attenue: #3a3a3a;
    --signal: #000000;
    --contre-signal: #000000;
    --lisere: #999999;
  }
  body { font-size: 10.5pt; background: #ffffff; color: #000000; }
  .pdc-auvent, .pdc-pied, .pdc-guidage, .pdc-passerelle, .pdc-bandeau, .pdc-appel { display: none !important; }
  a { color: #000000; text-decoration: none; }
  .pdc-composition a[href^="/"]::after { content: " [" attr(href) "]"; font-size: 0.8em; color: #3a3a3a; }
  .pdc-figure__cliche, .pdc-parution__cliche { display: none; }
  .pdc-devanture--lecture { display: block; padding-bottom: 0; }
  .pdc-releve { display: none; }
  .pdc-defilement { overflow: visible; border: 1px solid #999999; }
  .pdc-table th, .pdc-table td { white-space: normal; }
}