/* =====================================================================
   Page « Politique de confidentialité » — damien-hernandez.com

   PREFIXE `pc-`. Les autres sont pris : `lex-` (fiches), `lexh-` (hub),
   `ap-` (À propos), `ct-` (Contact), `dh-` (style.css du thème enfant),
   `site-cta` (partial partagé).

   Ne définit AUCUN token : le wrapper porte la classe `lex`, il hérite donc
   des variables et du full-bleed de lexique-seo.css.

   CONTRASTE — mesuré, pas recopié. La maquette réutilise les deux gris déjà
   corrigés ailleurs : `#8A9691` (fil d'Ariane, kickers, étiquette du
   sommaire) échoue à 3,06:1 sur blanc et 2,94:1 sur le fond, `#6B7873` frôle
   à 4,61:1. Remplacés par `--faintest` (5,08 / 4,87) et `--faint` (6,32).
   Les autres teintes passent : `#0B6E5F` sur blanc 6,16 · `#46534F` sur le
   fond 7,71 · blanc sur `#0B6E5F` 6,16 · `#7FC9B8` sur `#101A1C` 9,23 ·
   `#F4F2EC` sur `#101A1C` 15,81.
   ===================================================================== */

.pc *, .pc *::before, .pc *::after { box-sizing: border-box; }
.pc-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
/* ---------------------------------------------------------------------
   Remise a zero des marges, a specificite NEUTRALISEE.

   Ecrite d'abord `.pc p { margin: 0 }`, elle valait (0,1,1) et battait
   donc TOUTES les regles de composant du type `.pc-lead { margin-top: 20px }`,
   qui valent (0,1,0). Resultat mesure au navigateur : chaque `margin-top`
   declare plus bas etait calcule a 0px. La page tenait debout grace aux
   interlignes, pas grace au rythme prevu.

   `:where()` vaut zero : le selecteur ne pese plus que par `.pc`, soit
   (0,1,0). Il reste au-dessus des regles du theme, qui visent les balises
   (0,0,1), et passe SOUS les classes de composant. La suite du fichier
   fonctionne enfin comme elle est ecrite.
   --------------------------------------------------------------------- */
.pc :where(h1, h2, h3, p, ul, ol, table) { margin: 0; }
/* `table` fait partie de la liste : le theme lui pose un `margin-bottom` de
   1,5em, soit 21,75px, qui laissait une bande vide sous la derniere ligne,
   a l'interieur du cadre. Mesure au navigateur, pas supposition. */

/* ---------------------------------------------------------------------
   Pourquoi les selecteurs de rythme sont doubles (`.pc .pc-titre`)

   Le `:where()` ci-dessus suffit dans la feuille elle-meme. Il ne suffit PAS
   en production : LiteSpeed inline un CSS critique (`<style id="litespeed-ccss">`)
   fige a la generation, et celui de la page A propos contenait encore
   `.pc h1, .pc h2 { margin: 0 }` — soit (0,1,1), qui battait
   `.pc-title` (0,1,0). Mesure au navigateur le 12/08 : marge calculee a 0.

   Doubler le prefixe porte ces regles a (0,2,0). Elles passent alors au-dessus
   de n'importe quelle remise a zero de ce genre, actuelle ou regeneree, sans
   `!important` et sans dependre de l'ordre des feuilles.

   ⚠️ Les surcharges responsive des MEMES classes sont doublees elles aussi.
   Sinon la regle de base (0,2,0) battrait la variante (0,1,0) du media query,
   et les tailles de police ne changeraient plus.
   --------------------------------------------------------------------- */

.pc p { max-width: none; }
.pc ul, .pc ol { padding: 0; list-style: none; }
.pc a { color: var(--primary); text-decoration: none; }
.pc a:hover { color: var(--primary-dark); text-decoration: none; }

/* Réservé aux lecteurs d'écran : la légende du tableau, qui dit ce que les
   trois en-têtes ne disent pas à eux seuls. */
.pc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.pc-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faintest); font-weight: 500;
}
.pc-kicker-teal { color: var(--primary); }
.pc-kicker-mint { color: var(--teal-light); }

/* ---------------------------------------------- barre de progression ---- */
/* Position fixe : elle ne participe pas au flux, donc aucun décalage possible.
   La largeur est la seule propriété que le script touche. */
.pc-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: transparent; z-index: 60; pointer-events: none;
}
.pc-progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

/* ------------------------------------------------------------- hero ---- */
.pc-hero { border-bottom: 1px solid var(--line); padding: 44px 0; }
.pc-crumbs { font-size: 12.5px; color: var(--faintest); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pc-crumbs a { color: var(--faintest); }
.pc-crumbs .current { color: var(--muted); }

.pc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.pc-badge {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 10px;
}
.pc-badge.solid { background: var(--primary); color: #fff; }
.pc-badge.ghost { border: 1px solid var(--line-soft); color: var(--muted); padding: 4px 10px; }

.pc .pc-title {
  font-family: var(--serif); font-weight: 500; font-size: 55px; line-height: 1.06;
  letter-spacing: -.015em; margin-top: 22px; max-width: 16em; text-wrap: balance; color: var(--ink);
}
.pc .pc-lead { font-size: 18.5px; line-height: 1.7; color: var(--body); margin-top: 20px; max-width: 40em; text-wrap: pretty; }

/* ----------------------------------------------------------- colonnes -- */
.pc-grid { display: flex; align-items: flex-start; gap: 56px; padding: 44px 0 0; }
.pc-main { flex: 1 1 660px; min-width: 0; padding-bottom: 90px; }

.pc-side {
  flex: 0 0 236px; position: sticky; top: var(--lex-header-top);
  align-self: flex-start; display: flex; flex-direction: column; gap: 26px;
  max-height: calc(100vh - 130px); overflow-y: auto; padding-bottom: 24px;
}
.pc-side-titre { margin-bottom: 14px; }
.pc-toc { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.pc-toc a {
  font-size: 13.5px; line-height: 1.45; color: var(--muted);
  padding: 7px 0 7px 14px; margin-left: -1px;
  border-left: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.pc-toc a:hover { color: var(--primary); }
/* L'état actif porte `aria-current`, pas une classe : un seul attribut à tenir,
   lu par le lecteur d'écran ET par la CSS. Le script ne pose plus de style en
   ligne, contrairement à la maquette. */
.pc-toc a[aria-current="true"] { color: var(--primary); font-weight: 600; border-left-color: var(--primary); }

.pc-side-cta { border: 1px solid var(--teal-border); background: var(--teal-tint); padding: 18px; }
.pc-side-cta p { font-size: 13.5px; line-height: 1.6; color: var(--body); margin-top: 10px; }
.pc-side-cta .pc-lien { display: inline-block; margin-top: 10px; font-size: 13.5px; }

.pc .pc-lien { font-weight: 500; border-bottom: 1px solid var(--teal-border); word-break: break-word; }

/* Rouvrir le panneau de consentement.

   Un `<button>` et non un `<a href="#">` : l'element ouvre une boite de
   dialogue, il ne navigue pas. Il est remis a plat parce qu'un bouton herite
   des styles de formulaire du theme.

   `display: inline !important` est deliberatement brutal : Complianz ajoute
   `cmplz-hidden` a ses propres declencheurs tant qu'aucun choix n'a ete fait,
   et cette classe porte un `display: none`. Ici le bouton doit rester lisible
   dans le fil du texte en toutes circonstances, sinon la phrase se termine
   dans le vide. */
.pc .pc-consent {
  display: inline !important;
  font: inherit; color: inherit; font-weight: 500;
  background: none; border: 0; border-bottom: 1px solid var(--teal-border);
  padding: 0; margin: 0; cursor: pointer; text-align: left;
}
.pc .pc-consent:hover { border-bottom-color: var(--primary); }
.pc .pc-consent:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ------------------------------------------------------------ résumé --- */
.pc-resume { background: var(--ink); color: var(--on-dark); padding: 32px 34px; }
.pc-resume p {
  font-family: var(--serif); font-size: 26px; line-height: 1.45;
  margin-top: 16px; max-width: 34em; text-wrap: pretty; color: var(--on-dark);
}

.pc-chiffres {
  margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.pc-chiffres > div { background: var(--surface); padding: 22px; }
.pc-n { font-family: var(--serif); font-size: 34px; color: var(--primary); line-height: 1; }
.pc-chiffres p { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 10px; }

/* ------------------------------------------------------------- texte --- */
.pc .pc-h2 {
  font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.2;
  letter-spacing: -.01em; margin-top: 58px; color: var(--ink);
  scroll-margin-top: var(--lex-anchor);
}
.pc .pc-p { font-size: 17px; line-height: 1.72; color: var(--body); margin-top: 18px; max-width: 40em; text-wrap: pretty; }
.pc .pc-p-sec { font-size: 16px; line-height: 1.75; color: var(--muted); margin-top: 16px; }
.pc-p strong { font-weight: 600; }

/* ------------------------------------------------------------ cartes --- */
/* Les filets sont dessines par les CARTES, pas par le fond du conteneur.

   Avec l'inverse, le fond `--line` transparaissait dans les cellules vides de
   la derniere rangee et formait un aplat gris. Mesure a 1440px : `.pc-cartes-3`
   porte 6 fiches pour 4 colonnes, donc 2 cellules vides. `auto-fit` sait
   effondrer une COLONNE vide, il ne peut rien pour une CELLULE vide en fin de
   rangee.

   Une ombre de 1px d'etalement vient combler exactement la gouttiere de 1px,
   et se superpose sans dommage a celle de la carte voisine, meme couleur. Elle
   ne participe pas au flux, donc aucun decalage de mise en page. Le conteneur
   n'a plus ni fond ni bordure : une cellule vide laisse simplement voir la
   page. */
.pc-cartes {
  display: grid; gap: 1px; background: transparent; border: 0;
  margin-top: 24px;
}
.pc-cartes > div { box-shadow: 0 0 0 1px var(--line); }
.pc-cartes-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pc-cartes-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 22px; }
.pc-cartes > div { background: var(--surface); padding: 24px 26px; }
.pc-cartes-2 p { font-size: 15px; line-height: 1.68; color: var(--body); margin-top: 14px; }
.pc-cartes-3 > div { padding: 20px 22px; }
.pc-cartes-3 h3 { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.pc-cartes-3 p { font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 6px; }

.pc .pc-usages {
  margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.pc-usages li { background: var(--surface); padding: 20px 22px; display: flex; gap: 14px; }
.pc-usages .n { font-family: var(--mono); font-size: 12px; color: var(--primary); flex: 0 0 auto; }
.pc-usages li > span:last-child { font-size: 15px; line-height: 1.6; color: var(--body); }

/* ----------------------------------------------------------- tableau --- */
/* Le conteneur défile seul : sur un écran étroit, c'est le tableau qui glisse,
   jamais la page. */
.pc-table-wrap { margin-top: 24px; overflow-x: auto; border: 1px solid var(--line); }
.pc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.pc-table thead tr { background: var(--ink); color: var(--on-dark); }
.pc-table th[scope="col"] {
  text-align: left; padding: 14px 18px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--on-dark);
}
.pc-table tbody tr { background: var(--surface); border-top: 1px solid var(--line); }
.pc-table tbody tr:nth-child(even) { background: var(--stripe); }
.pc-table th[scope="row"] { text-align: left; padding: 14px 18px; color: var(--ink); font-weight: 500; }
.pc-table td { padding: 14px 18px; color: var(--muted); }
.pc-table .pc-duree { color: var(--primary); }

/* ---------------------------------------------------------- encadrés --- */
.pc-encadre {
  margin-top: 20px; border: 1px solid var(--teal-border); background: var(--teal-tint);
  padding: 26px 28px; max-width: 44em;
}
.pc-encadre p { font-size: 16px; line-height: 1.7; color: var(--body); margin-top: 14px; }

/* ================================================================
   Composants partages par les pages legales
   Nes sur la politique de cookies, remontes ici des que les mentions
   legales en ont eu besoin. Deux copies d'un meme composant finissent
   toujours par diverger, et il s'agit ici de pages qui doivent se
   ressembler au pixel pres.
   ================================================================ */

/* Teinte d'alerte. Le `--accent` du site vaut #14A88C, un vert : s'en servir
   pour un avertissement donnerait le signal inverse de celui voulu. */
.pc {
  --pc-alerte: #B4532A;
  --pc-alerte-fond: #FCF6F2;
  --pc-alerte-texte: #3D2B22;
}

/* Encart d'avertissement. */
.pc-note {
  margin-top: 22px; max-width: 42em;
  border-left: 3px solid var(--pc-alerte); background: var(--pc-alerte-fond);
  padding: 20px 24px;
}
.pc .pc-note p { font-size: 15.5px; line-height: 1.65; color: var(--pc-alerte-texte); }

/* Appel a l'action en fin de page, fond clair. Ne 	 pas confondre avec
   `.pc-contact`, qui est son equivalent sur fond sombre : le sombre sert a
   l'action principale, le clair a une sortie secondaire. */
.pc-cta {
  margin-top: 52px; border: 1px solid var(--line); background: var(--surface);
  padding: 28px 30px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
}
.pc-cta > div { flex: 1 1 320px; }
/* `.pc .pc-h2` ne s'applique pas : ce titre ne figure pas au sommaire et n'a
   pas a porter le rythme de 58px des sections. */
.pc .pc-cta h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.3; color: var(--ink); }
.pc .pc-cta p { font-size: 15px; line-height: 1.65; color: var(--muted); margin-top: 8px; max-width: 38em; }
.pc .pc-cta-btn {
  flex: 0 0 auto; background: var(--ink); color: var(--bg);
  font-weight: 500; font-size: 15px; padding: 15px 24px; border-radius: 2px;
  border-bottom: 0;
}
.pc .pc-cta-btn:hover { background: var(--body); color: var(--bg); }
.pc .pc-cta-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Fiche a deux colonnes : intitule court a gauche, valeur a droite.
   Sert aux coordonnees et a l'identification de l'editeur. */
.pc-fiche {
  margin-top: 24px; display: flex; flex-direction: column; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.pc-fiche > div {
  background: var(--surface); padding: 18px 24px;
  display: flex; flex-wrap: wrap; gap: 8px 28px;
}
.pc-fiche .pc-kicker { flex: 0 0 170px; padding-top: 3px; }
.pc-fiche-val { flex: 1 1 260px; font-size: 15.5px; line-height: 1.6; color: var(--body); }
.pc-fiche-mono { font-family: var(--mono); font-size: 15px; }

/* Les intitules des mentions legales sont plus longs que ceux des cookies,
   « Delegue a la protection des donnees » ne tient pas dans 170px. */
.pc-fiche-large .pc-kicker { flex: 0 0 210px; }

.pc-contact {
  margin-top: 20px; background: var(--ink); padding: 34px 36px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px;
}
.pc-contact > div { flex: 1 1 320px; }
.pc .pc-contact-titre { font-family: var(--serif); font-size: 24px; line-height: 1.4; color: var(--on-dark); margin-top: 12px; max-width: 30em; }
.pc .pc-contact-note { font-size: 14.5px; line-height: 1.6; color: var(--on-dark-muted); margin-top: 10px; }
/* `.pc a` vaut (0,1,1) et bat `.pc-contact-btn` (0,1,0) : sans le sélecteur
   doublé, le bouton hérite du vert des liens sur son fond vert. Même piège
   que sur « À propos » et sur la page Contact. */
.pc .pc-contact-btn, .pc a.pc-contact-btn {
  flex: 0 0 auto; background: var(--accent); color: #06231D; font-weight: 600;
  font-size: 15px; padding: 16px 26px; word-break: break-word; border-bottom: 0;
}
.pc .pc-contact-btn:hover { background: var(--teal-light); color: #06231D; }

.pc-renvoi {
  margin-top: 32px; border: 1px solid var(--line); background: var(--surface);
  padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 18px;
}
.pc-renvoi p { font-size: 15px; line-height: 1.6; color: var(--muted); flex: 1 1 300px; }
.pc-renvoi .pc-lien { flex: 0 0 auto; font-size: 15px; padding-bottom: 2px; }

/* -------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
  .pc .pc-title { font-size: 44px; }
  .pc-grid { gap: 40px; }
}

/* La maquette masquait purement et simplement la colonne de gauche sous 900px.
   Sur une page longue et juridique, le sommaire est justement ce qui rend la
   lecture praticable au téléphone : il est donc conservé, dégrafé du défilement
   et posé au-dessus du texte, sous forme de pastilles. L'ordre du DOM est déjà
   celui-là, la séquence reste cohérente (WCAG 1.3.2). */
@media (max-width: 900px) {
  .pc-wrap { padding: 0 22px; }
  .pc-hero { padding: 30px 0 34px; }
  .pc .pc-title { font-size: 36px; max-width: none; }
  .pc .pc-lead { font-size: 17px; }
  /* `align-items: stretch` est indispensable, pas cosmetique. En passant en
     colonne, l'axe transversal du flex devient l'horizontale : le
     `align-items: flex-start` de la regle de base dimensionne alors chaque
     enfant sur son max-content au lieu de la largeur disponible. `.pc-main`
     heritait ainsi du `min-width: 560px` de `.pc-table` et sortait a 562px
     dans un conteneur de 358px. Le `min-width: 0` de `.pc-main` n'y pouvait
     rien : il agit sur l'axe principal, pas sur le transversal.
     Le debordement etait invisible aux tests : `.pc` porte `overflow: clip`,
     donc `scrollWidth` restait egal a `clientWidth` alors que le tiers droit
     des cartes et du tableau etait purement et simplement coupe.
     Mesure au navigateur a 390px le 12/08. */
  .pc-grid { flex-direction: column; align-items: stretch; gap: 32px; padding-top: 32px; }
  .pc-side {
    position: static; flex: 1 1 auto; width: 100%;
    max-height: none; overflow: visible; padding-bottom: 0; gap: 18px;
  }
  .pc-toc { flex-direction: row; flex-wrap: wrap; gap: 8px; border-left: 0; }
  .pc-toc a {
    border: 1px solid var(--line-soft); border-left-width: 1px;
    padding: 7px 12px; margin-left: 0; font-size: 13px;
  }
  .pc-toc a[aria-current="true"] { border-color: var(--primary); }
  .pc-main { padding-bottom: 64px; }
  .pc .pc-h2 { font-size: 28px; margin-top: 46px; }
  .pc-resume { padding: 24px 22px; }
  .pc-resume p { font-size: 21px; }
  .pc-contact { padding: 26px 22px; }
  .pc-cartes > div { padding: 20px 22px; }
  .pc-fiche > div { padding: 16px 20px; }
  /* En dessous de cette largeur l'intitule et la valeur se suivent au lieu de
     s'aligner en colonnes : garder la gouttiere ecraserait la valeur. */
  .pc-fiche .pc-kicker,
  .pc-fiche-large .pc-kicker,
  .pc-fiche-val { flex: 1 1 100%; }
  .pc-cta { padding: 24px 22px; }
}

@media (max-width: 560px) {
  .pc-note { padding: 16px 18px; }
  /* A cette largeur, un bouton flottant a droite d'un texte de trois lignes se
     rate au doigt. */
  .pc .pc-cta-btn { flex: 1 1 100%; text-align: center; }
  .pc-wrap { padding: 0 16px; }
  .pc .pc-title { font-size: 29px; }
  .pc .pc-h2 { font-size: 25px; }
  .pc-resume p { font-size: 19px; }
  .pc .pc-contact-btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-toc a { transition: none; }
}