/* =========================================================================================
   PAGES B5 · le blog et les pages légales — ce qui manque au socle (pages.css), rien de plus
   Chargé APRÈS pages.css, seulement par : blog.html, les 5 articles blog-*.html, mentions-legales.html,
   politique-confidentialite.html, cookies.html, conditions-generales-location.html, plan-du-site.html, 404.html.
   Toutes les classes commencent par « b5- ». Rien n'est lié au défilement.
   Tablette et téléphone : § 6 et § 7, seulement dans les deux requêtes ≤ 1023 et ≤ 767 (_GABARITS.md § 7).
   ========================================================================================= */

/* ---------- 1 · L'EN-TÊTE D'UN ARTICLE : la largeur du titre est celle du socle (pages.css, 30ch) ---------- */


/* ---------- 2 · LA PAGE BLOG : l'article à la une, puis les quatre autres ---------- */
.b5-une{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.b5-une .pg-duo-img{aspect-ratio:3/2}
.b5-une .pg-duo-img a{display:block;height:100%}
.b5-une .pg-duo-img img{transition:transform .9s var(--ease)}
.b5-une:hover .pg-duo-img img,.b5-une:focus-within .pg-duo-img img{transform:scale(1.03)}
.b5-une-lab{font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--rouge)}
.b5-une-t{margin-top:16px;max-width:20ch;font:800 clamp(28px,.9vw + 18px,34px)/1.14 var(--f-titre);letter-spacing:-.016em}
.b5-une-t a{transition:color .2s}
.b5-une-t a:hover,.b5-une:hover .b5-une-t a,.b5-une-t a:focus-visible,.b5-une:focus-within .b5-une-t a{color:var(--rouge)}
.b5-une-p{margin-top:16px;max-width:52ch;font-size:var(--t-intro);line-height:1.6;color:var(--muted)}
.b5-dans{margin-top:26px;padding-top:20px;border-top:1px solid var(--bord)}
.b5-dans-t{margin-bottom:8px;font:700 var(--t-label)/1 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.b5-dans ol{list-style:none;margin:0;padding:0;counter-reset:dans}
.b5-dans li{counter-increment:dans}
.b5-dans a{display:flex;align-items:baseline;gap:12px;padding:6px 0;font:500 var(--t-petit)/1.45 var(--f-corps);color:var(--encre);transition:color .2s}
.b5-dans a::before{content:counter(dans,decimal-leading-zero);flex:none;font:800 var(--t-label)/1 var(--f-titre);letter-spacing:.04em;color:var(--rouge);font-variant-numeric:tabular-nums}
.b5-dans a:hover,.b5-dans a:focus-visible{color:var(--rouge)}
.b5-une .pg-duo-txt > .lien-fleche{margin-top:26px}
.b5-une + .articles{margin-top:clamp(56px,5vw,80px);padding-top:clamp(48px,4vw,64px);border-top:1px solid var(--bord)}


/* ---------- 3 · LE CORPS D'UN ARTICLE ---------- */
/* les deux encadrés de fin (« Et si personne… », « Ce qu'on vous conseille… ») gardent un vrai titre h2 */
.pg-article .pg-encadre > h2.pg-encadre-t{margin-top:0;font:800 var(--t-court)/1.25 var(--f-titre);letter-spacing:-.005em}
.pg-article .pg-encadre + .pg-encadre{margin-top:20px}
/* les gestes (pages.css, .pg-gestes) dans un encadré, puis à la fin d'un article : le bouton de devis (et un lien) */
.pg-encadre .pg-gestes{margin-top:20px}
.pg-encadre .pg-gestes .lien-fleche{margin-top:0}
.pg-article > .pg-gestes{margin-top:40px;padding-top:28px;border-top:1px solid var(--bord)}
/* deux photos côte à côte, chacune avec sa légende */
.pg-article .b5-duo-fig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
.pg-article .b5-duo-fig figure{margin:0}
.pg-article .b5-duo-fig img{aspect-ratio:3/2;object-fit:cover}
/* les renvois vers les sources, et la liste des sources en fin d'article */
.pg-article .b5-ref{font-size:.72em;line-height:0;vertical-align:super}
.pg-article .b5-ref > a:not(.btn):not(.lien-fleche){display:inline-block;padding:4px 3px;margin:-4px -2px -4px -1px;font-weight:700;color:var(--rouge);text-decoration:none}
.pg-article .b5-ref > a:not(.btn):not(.lien-fleche):hover,.pg-article .b5-ref > a:not(.btn):not(.lien-fleche):focus-visible{text-decoration:underline;text-underline-offset:2px}
.pg-article .b5-sources{margin-top:44px;padding-top:24px;border-top:1px solid var(--bord)}
.b5-sources-t{font:700 var(--t-label)/1.2 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.pg-article .b5-sources ol{margin-top:12px}
.pg-article .b5-sources li{font-size:var(--t-petit);line-height:1.55;color:#2B2B2B}
.pg-article .b5-sources ol > li::before{font-size:var(--t-petit);line-height:1.55}
.pg-article .b5-sources-verif{margin-top:12px;font-size:var(--t-meta);color:var(--muted)}
/* un repère « à confirmer » posé en tête d'article */
.pg-article > .pg-article-chapo + .pg-manque{margin-top:24px}
/* le lien « Tous les articles » sous la colonne de côté */
.b5-tous{padding-left:2px}


/* ---------- 4 · LES PAGES LÉGALES : ce qui reste à écrire ---------- */
/* « Texte à fournir » : une ligne nette, la question au survol de la pastille */
.b5-a-fournir{display:inline-flex;align-items:center;gap:0;padding:9px 14px;background:var(--av-fond);border:1px dashed var(--av-bord);
  border-radius:var(--r);font:600 var(--t-meta)/1.35 var(--f-corps);color:var(--av-encre)}
.pg-rub > .b5-a-fournir{margin-top:2px}
.pg-tete-pied > .pg-manque{max-width:72ch}
/* un sous-titre dans une rubrique */
.pg-rub > .b5-sous{margin-top:28px;font:800 var(--t-court)/1.3 var(--f-titre);letter-spacing:-.005em;color:var(--encre)}
.pg-rub > .b5-sous + *{margin-top:12px}
.pg-rub > .pg-cit{margin-top:16px;padding-top:4px}
/* le texte du bandeau cookies, montré tel qu'il s'affichera */
.b5-bandeau{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-top:16px;
  padding:22px 26px;background:var(--charbon);border-radius:var(--r);color:#fff}
.b5-bandeau p{max-width:46ch;font-size:var(--t-texte);line-height:1.55;color:var(--sur-noir-2)}
.b5-bandeau-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.b5-bandeau-btn{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:var(--r);border:1.5px solid rgba(255,255,255,.6);
  font:600 14px/1 var(--f-corps);color:#fff}
.b5-bandeau-btn--plein{background:var(--rouge);border-color:var(--rouge)}
.b5-bandeau-btn--lien{border-color:transparent;padding:0 6px;text-decoration:underline;text-underline-offset:3px}


/* ---------- 5 · LE PLAN DU SITE ---------- */
.pg-rub > .b5-plan{margin-top:6px}
.b5-plan{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:32px clamp(32px,3vw,48px)}
.b5-plan-t{margin-bottom:10px;font:800 var(--t-court)/1.3 var(--f-titre);letter-spacing:-.005em}
.b5-plan-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--bord-fort)}
.b5-plan-liste li{border-bottom:1px solid var(--bord)}
.pg-rub .b5-plan a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;text-decoration:none;
  font:600 var(--t-texte)/1.4 var(--f-corps);color:var(--encre);transition:color .2s}
.pg-rub .b5-plan-t a{display:inline;padding:0;font:inherit}
.pg-rub .b5-plan a .fl{flex:none;color:var(--rouge);transition:transform .35s var(--ease)}
.pg-rub .b5-plan a:hover,.pg-rub .b5-plan a:focus-visible{color:var(--rouge)}
.pg-rub .b5-plan a:hover .fl,.pg-rub .b5-plan a:focus-visible .fl{transform:translateX(4px)}
/* une rubrique encore vide : le repère à côté du titre, la rubrique reste courte */
.pg-rub.b5-vide{padding-bottom:30px}
.pg-rub + .pg-rub.b5-vide,.pg-rub.b5-vide + .pg-rub{padding-top:30px}
.pg-rub.b5-vide .pg-rub-tete{flex-wrap:wrap;margin-bottom:0}
.pg-rub-tete > .b5-a-fournir{margin-left:6px;padding:6px 12px;transform:translateY(-3px)}
/* après un tableau, le repère prend de l'air */
.pg-rub > .pg-fiche + .b5-a-fournir{margin-top:18px}
/* une rubrique d'un seul groupe : la liste se range sur plusieurs colonnes */
.b5-plan--seul{display:block}
.b5-plan--seul .b5-plan-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));column-gap:clamp(32px,3vw,48px);border-top:0}
.b5-plan--seul .b5-plan-liste li{border-top:1px solid var(--bord-fort);border-bottom:0}


/* ---------- 6 · LE SOMMAIRE REPLIÉ (sous 1024 px) — masqué sur l'ordinateur ----------
   Articles et pages de texte : la colonne de côté (« Dans cet article », « Les pages légales »,
   « Sur cette page ») passe au-dessus du texte, repliée. Le bloc .b5-plis reprend ses liens ; il ne
   s'affiche que dans la requête ≤ 1023 (§ 7), où la colonne d'origine est masquée. */
.b5-plis{display:none}

/* 1024 à 1180 : les pages de texte (légal, plan du site) passent, elles aussi, au sommaire replié au-dessus du texte : sur une
   colonne, les deux sommaires dépliés repoussaient le premier titre de 680 à 730 px (contrôle de livraison du 10/10, point 6).
   Les règles du § 7 (sous 1024 px), limitées aux pages de texte (.pg-legal) : les articles gardent leur colonne de côté
   (pages.css). À la souris, un lien du sommaire rougit au survol, comme dans la colonne qu'il remplace. */
@media (min-width:1024px) and (max-width:1180px){
  .pg-legal .pg-legal-cote{display:none}
  .pg-legal .b5-plis{display:block;background:var(--creme);border-radius:var(--r);interpolate-size:allow-keywords}
  .pg-legal .b5-plis > nav + nav{border-top:1px solid var(--bord-fort)}
  .pg-legal .b5-plie > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:8px 14px 8px 20px;
    cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
  .pg-legal .b5-plie > summary::-webkit-details-marker{display:none}
  .pg-legal .b5-plie > summary:focus-visible{outline-offset:-3px}
  .pg-legal .b5-plie-t{font:700 var(--t-label)/1.2 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--encre)}
  .pg-legal .b5-plie-signe{position:relative;flex:none;width:32px;height:32px;border:1px solid var(--bord-fort);border-radius:50%}
  .pg-legal .b5-plie-signe::before,.pg-legal .b5-plie-signe::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;background:var(--encre);
    transform:translate(-50%,-50%);transition:transform .35s var(--ease)}
  .pg-legal .b5-plie-signe::after{transform:translate(-50%,-50%) rotate(90deg)}
  .pg-legal .b5-plie[open] .b5-plie-signe::after{transform:translate(-50%,-50%) rotate(0deg)}
  .pg-legal .b5-plie::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
  .pg-legal .b5-plie[open]::details-content{block-size:auto}
  .pg-legal .b5-plie ol{list-style:none;margin:0;padding:0 20px 8px;column-count:2;column-gap:40px}
  .pg-legal .b5-plie li{border-top:1px solid var(--bord);break-inside:avoid}
  .pg-legal .b5-plie a{display:flex;align-items:center;gap:10px;min-height:48px;padding-block:10px;font:600 var(--t-petit)/1.4 var(--f-corps);color:var(--encre);
    transition:color .2s}
  .pg-legal .b5-plie a[aria-current],.pg-legal .b5-plie a[aria-current] .pg-legal-num,
  .pg-legal .b5-plie a:hover,.pg-legal .b5-plie a:focus-visible{color:var(--rouge)}
  .pg-legal .b5-plie .pg-legal-num{font-size:var(--t-meta)}
}


/* =========================================================================================
   7 · TABLETTE ET TÉLÉPHONE — sous 1024 px seulement (l'ordinateur n'en voit rien)
   ========================================================================================= */
@media (max-width:1023px){

  /* --- le sommaire replié, au-dessus du texte --- */
  .pg-legal-cote,.pg-cote-col > .pg-sommaire{display:none}
  .b5-plis{display:block;background:var(--creme);border-radius:var(--r);interpolate-size:allow-keywords}
  .b5-plis > nav + nav{border-top:1px solid var(--bord-fort)}
  .b5-plie > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:8px 14px 8px 20px;
    cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
  .b5-plie > summary::-webkit-details-marker{display:none}
  .b5-plie > summary:focus-visible{outline-offset:-3px}
  .b5-plie-t{font:700 var(--t-label)/1.2 var(--f-corps);letter-spacing:.15em;text-transform:uppercase;color:var(--encre)}
  .b5-plie-signe{position:relative;flex:none;width:32px;height:32px;border:1px solid var(--bord-fort);border-radius:50%}
  .b5-plie-signe::before,.b5-plie-signe::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;background:var(--encre);
    transform:translate(-50%,-50%);transition:transform .35s var(--ease)}
  .b5-plie-signe::after{transform:translate(-50%,-50%) rotate(90deg)}
  .b5-plie[open] .b5-plie-signe::after{transform:translate(-50%,-50%) rotate(0deg)}
  .b5-plie::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
  .b5-plie[open]::details-content{block-size:auto}
  .b5-plie ol{list-style:none;margin:0;padding:0 20px 8px}
  .b5-plie li{border-top:1px solid var(--bord)}
  .b5-plie a{display:flex;align-items:center;gap:10px;min-height:48px;padding-block:10px;font:600 var(--t-petit)/1.4 var(--f-corps);color:var(--encre)}
  .b5-plie a[aria-current],.b5-plie a[aria-current] .pg-legal-num{color:var(--rouge)}
  .b5-plie .pg-legal-num{font-size:var(--t-meta)}
  /* en tablette, une longue liste ouverte se range sur deux colonnes (le téléphone repasse à une, § 7 bas) */
  .b5-plie ol{column-count:2;column-gap:40px}
  .b5-plie li{break-inside:avoid}

  /* --- l'article (la colonne mesurée, la relance sous le texte : remontées dans pages.css § 23 le 07/10) --- */
  .b5-tous{padding-left:0}
  /* « Tous les articles » : la tête de « À lire aussi » le donne juste dessous (audit du 07/10, point 10) */
  .pg-cote-col > .b5-tous{display:none}
  /* les liens dans le texte : 44 px au doigt, la ligne ne bouge pas */
  .pg-article p a:not(.btn):not(.lien-fleche),.pg-article li a:not(.btn):not(.lien-fleche),
  .pg-rub > p a:not(.btn),.pg-rub .pg-puces a:not(.btn){padding-block:13px}
  /* les renvois vers les sources : la zone d'appui grandit, pas le chiffre ; en ligne, le chiffre reste collé à son mot */
  .pg-article .b5-ref{font-size:14px}
  .pg-article .b5-ref > a:not(.btn):not(.lien-fleche){display:inline;position:relative;padding:2px 3px}
  .pg-article .b5-ref > a:not(.btn):not(.lien-fleche)::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:44px;transform:translate(-50%,-50%)}

  /* --- la page blog : l'article à la une en une colonne, la photo d'abord --- */
  .b5-une{grid-template-columns:minmax(0,1fr);gap:28px}
  .b5-une .pg-duo-img{aspect-ratio:16/9}
  .b5-dans a{min-height:44px;padding-block:11px}
  .b5-une-t a{display:inline-block;padding-block:11px;margin-block:-11px}

  /* --- les pages de texte : les liens d'une fiche au doigt, le trait collé au mot --- */
  .pg-rub .pg-fiche dd a{display:inline-block;padding-block:12px;margin-block:-12px;border-bottom:0;white-space:nowrap;
    text-decoration:underline;text-decoration-color:rgba(209,20,37,.5);text-underline-offset:4px}
  /* le bandeau cookies, tel qu'il s'affichera : des boutons de 44 px */
  .b5-bandeau-btn{height:44px}
  /* le plan du site : les groupes s'enchaînent sur deux colonnes, sans trou entre deux groupes de longueurs différentes */
  .pg-rub .b5-plan a{min-height:44px}
  .b5-plan:not(.b5-plan--seul){display:block;column-count:2;column-gap:40px}
  .b5-plan:not(.b5-plan--seul) > *{break-inside:avoid;margin-bottom:28px}
  .b5-plan:not(.b5-plan--seul) > :last-child{margin-bottom:0}
  .b5-plan--seul .b5-plan-liste{column-gap:40px}

  /* au doigt : pas de survol qui reste accroché après un appui */
  @media (hover:none){
    .b5-une:hover .pg-duo-img img{transform:none}
    .b5-une:hover .b5-une-t a{color:inherit}
    .pg-rub .b5-plan a:hover .fl{transform:none}
  }
}

/* au doigt (finitions du 09/10, point 1) : l'appui se voit, après la neutralisation du survol (§ tablette) */
@media (hover:none) and (pointer:coarse){
  .b5-une-t a:active,.b5-une:has(a:active) .b5-une-t a,.b5-dans a:active,.pg-rub .b5-plan a:active{color:var(--rouge)}
  .pg-rub .b5-plan a:active .fl{transform:translateX(4px)}
}

@media (max-width:767px){

  /* --- le sommaire replié : une colonne --- */
  .b5-plie ol{column-count:1}

  /* --- l'article : une ligne un peu moins haute pour des lignes courtes --- */
  .pg-article{line-height:1.65}
  .pg-article .b5-duo-fig{gap:12px;margin-top:28px}
  .pg-article .b5-sources{margin-top:36px}
  .pg-article > .pg-gestes{margin-top:32px;padding-top:24px}

  /* --- la page blog --- */
  .b5-une{gap:22px}
  .b5-une .pg-duo-img{aspect-ratio:3/2}
  .b5-une-t{margin-top:12px}
  .b5-une-p{margin-top:12px;font-size:16px}
  .b5-dans{margin-top:22px;padding-top:14px}
  .b5-une .pg-duo-txt > .lien-fleche{margin-top:18px}
  .b5-une + .articles{margin-top:48px;padding-top:40px}

  /* --- les pages de texte : le libellé au-dessus de sa valeur, la valeur en entier --- */
  .pg-rub .pg-fiche > div{grid-template-columns:minmax(0,1fr);gap:3px;padding:12px 0 13px}
  .pg-rub .pg-fiche dd{font-size:16px;line-height:1.45}
  .pg-rub .pg-fiche dd.a-voir{font-size:var(--t-meta)}
  /* une rubrique encore vide : le numéro et le titre sur la même ligne, le repère dessous */
  .pg-rub.b5-vide .pg-rub-tete{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:10px 12px}
  .pg-rub-tete > .b5-a-fournir{grid-column:2;justify-self:start;margin-left:0;transform:none}
  /* le bandeau cookies */
  .b5-bandeau{padding:20px 20px 18px;gap:16px}
  .b5-bandeau-btns{gap:10px 12px}
  .b5-bandeau-btn--lien{padding:0}
  /* le plan du site : les groupes l'un sous l'autre */
  .b5-plan:not(.b5-plan--seul){column-count:1}
  .b5-plan--seul .b5-plan-liste{grid-template-columns:minmax(0,1fr)}
  .b5-plan--seul .b5-plan-liste li:last-child{border-bottom:1px solid var(--bord)}

  /* --- la page introuvable : le bouton en pleine largeur, les deux liens côte à côte --- */
  .pg-introuvable .pg-gestes{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 28px}
  .pg-introuvable .pg-gestes .btn{flex:1 0 100%}
}

/* ≤ 359 : les très petits téléphones (style.css § 13) */
@media (max-width:359px){
  /* l'article à la une : 28 px à 375, dans la proportion de la largeur utile */
  .b5-une-t{font-size:calc(8.358vw - 3.343px)}
}