/* ============================================================
   Diag-Tertiaire Blog : styles differes des articles
   Charge en differe par src/layouts/Base.astro (gabarit « article »), apres
   site.css ; suivent embarque.css (HTML embarque dans le Markdown : schemas,
   encarts, tableaux a classe) et, sur les seuls articles qui en contiennent,
   calculatrices.css. Le premier ecran de l'article (tete, grille, texte courant,
   sommaires) est inline : src/styles/critical-article.css.
   Couleurs : jetons --dt-* seulement. Ombre decalee : jamais sur un conteneur.
   ============================================================ */

/* --- Prose : elements Markdown hors premier ecran ----------------------------
   Les regles a :where() ont la specificite d'une seule classe : les tableaux et
   blocs a classe d'embarque.css (et les <style> de certains articles) passent
   devant. */
.page-article .prose>blockquote{padding:var(--esp-5) 0;border-top:3px solid var(--dt-ink);border-bottom:3px solid var(--dt-ink);font:700 clamp(21px,1.9vw,26px)/1.35 var(--display);letter-spacing:-.015em}
.page-article .prose>blockquote>*+*{margin-top:.6em}
.page-article .prose>blockquote strong{font-weight:800}
.prose :where(sup){font-size:.68em;line-height:0;vertical-align:.42em}
.prose :where(code){font:600 .86em/1.35 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;color:var(--dt-ink)}
.prose :where(hr){border:0;border-top:3px dashed var(--dt-surface-alt-2);margin:var(--esp-7) 0}
.prose :where(em){font-style:italic}

/* Tableaux Markdown (et, par defaut, tableaux HTML sans classe) : filets d'encre,
   chiffres alignes */
.prose :where(table){width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;font-variant-numeric:tabular-nums}
.prose :where(th){text-align:left;font-weight:600;font-size:14px;line-height:1.3;color:var(--dt-ink-2);padding:0 14px 10px 0;vertical-align:bottom}
.prose :where(td){padding:13px 14px 13px 0;border-top:2px solid var(--dt-ink);vertical-align:top}
.prose :where(tbody tr:last-child td){border-bottom:2px solid var(--dt-ink)}
.prose :where(td:first-child){font-weight:600}
.prose :where(th:last-child,td:last-child){padding-right:0}
.tableau-defilant:focus-visible{outline-offset:4px}

/* --- Encarts d'appel du milieu : encart d'appel du corps (section d'appel du
   Markdown au milieu de l'article, enveloppee au build par BlogPost.astro) et
   relance du milieu (CTAMid.astro). Le bandeau petrole du site (.appel-final,
   .ap-bg-bande), en carte aux coins arrondis : il se voit sur les deux fonds des
   parties (blanc, bleu-gris), la ou l'ancien encart bleu-gris se perdait sur le
   fond bleu-gris de la page (relecture du 20/10/2026). Bouton blanc a ombre
   framboise, comme la bande finale. --- */
.page-article .prose>.appel-corps,.cta-mid{padding:var(--esp-7) var(--esp-6);border-radius:var(--r-panel);background:var(--dt-band);color:var(--dt-on-band)}
.appel-corps>*+*{margin-top:.7em}
.page-article .appel-corps h2{margin-top:0;font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-.02em;color:var(--dt-on-band)}
.page-article .appel-corps p{font-size:17px;line-height:1.55;color:var(--dt-on-band-2)}
.page-article .appel-corps .appel-corps-action{margin-top:var(--esp-5)}
.cta-mid>*+*{margin-top:var(--esp-5)}
.cta-mid-repere{font:700 15px/1.2 var(--display);color:var(--dt-on-band-2)}
.cta-mid-repere::before{content:"";display:inline-block;width:22px;height:10px;margin-right:10px;vertical-align:1px;border-radius:3px;background:var(--dt-logo-accent);transform:rotate(-6deg)}
.cta-mid-text{margin-top:var(--esp-2);font:700 22px/1.3 var(--display);letter-spacing:-.015em;color:var(--dt-on-band)}
.cta-mid-action{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-3) var(--esp-5)}
.cta-mid-micro{font-size:15px;color:var(--dt-on-band-2)}
.appel-corps .btn,.cta-mid .btn{background:var(--dt-band-action);color:var(--dt-on-band-action);box-shadow:0 4px 0 var(--dt-band-action-shadow)}
.appel-corps .btn:hover,.cta-mid .btn:hover{box-shadow:0 6px 0 var(--dt-band-action-shadow)}
.appel-corps :focus-visible,.cta-mid :focus-visible{outline-color:var(--dt-on-band)}

/* --- Sommaire collant efface au passage d'un bloc large (script du rail,
   BlogPost.astro) : il ne se superpose jamais a un bloc --- */
.rail-sommaire{transition:opacity 160ms var(--ease),visibility 0s}
.rail-sommaire.rail-efface{opacity:0;visibility:hidden;transition:opacity 160ms var(--ease),visibility 0s linear 160ms}
@media(prefers-reduced-motion:reduce){.rail-sommaire,.rail-sommaire.rail-efface{transition:none}}

/* --- Encarts d'appel en pleine largeur (ordinateur : ils prennent la largeur utile,
   critical-article.css) : le texte a gauche, l'action a droite --- */
@media(min-width:1024px){
.page-article .partie>.appel-corps{display:grid;grid-template-columns:minmax(0,var(--mesure)) auto;column-gap:var(--esp-7);align-items:center;padding:var(--esp-7)}
.page-article .partie>.appel-corps>*{grid-column:1}
.page-article .partie>.appel-corps>.appel-corps-action{grid-column:2;grid-row:1/span 6;margin-top:0;justify-self:end}
.page-article .partie>.cta-mid{display:grid;grid-template-columns:minmax(0,var(--mesure)) auto;column-gap:var(--esp-7);align-items:center;padding:var(--esp-7)}
.page-article .partie>.cta-mid>*+*{margin-top:0}
.page-article .partie>.cta-mid .cta-mid-action{flex-direction:column;align-items:center;justify-self:end}
}
/* --- Telephone : les blocs vont bord a bord (marges : critical-article.css). Les
   feuilles qui touchent les bords de l'ecran perdent leurs coins et leurs cotes :
   un filet d'encre en haut et en bas, comme une bande du site. --- */
@media(max-width:760px){
.page-article .partie>:is(.pull-key,.calc-widget,.cmp2,figure.dt-timeline-rattrapage,figure.timeline-reg),.page-article .partie>:is(figure.sch,figure.schema)>:is(.sch-feuille,.schema-feuille){border-radius:0;box-shadow:inset 0 2px 0 var(--dt-ink),inset 0 -2px 0 var(--dt-ink)}
.page-article .partie>:is(.cta-mid,.appel-corps){border-radius:0}
}

/* --- Composants sur une partie blanche (fond : critical-article.css, « Parties du
   corps ») : ce qui se detachait du fond bleu-gris par sa seule couleur blanche
   recoit le contour d'encre du papier decoupe (calculatrice), ou passe au bleu-gris
   clair (colonne mise en avant des tableaux comparatifs). Les autres feuilles
   (schemas, « A retenir », tableaux en cartes) ont deja leur contour. --- */
.page-article .partie--papier .calc-widget{box-shadow:var(--ombre-decoupe)}
.partie--papier .dt-compare :is(th.dt-highlight,td.dt-highlight-cell){background:var(--dt-surface)}

/* --- Fin de l'article : l'auteur (AuthorBox.astro), puis le partage
   (ShareButtons.astro). Apres les parties du corps, une feuille du fond de la
   page posee sur la derniere (meme dessin que .partie, critical-article.css). --- */
.article-fin{margin-top:var(--esp-8)}
.article-fin--feuille{position:relative;z-index:0;margin-top:calc(-1 * var(--recouvre));padding-top:var(--esp-7)}
.article-fin--feuille::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(-1 * max(var(--g),(100vw - var(--max)) / 2));width:100vw;border-radius:var(--recouvre) var(--recouvre) 0 0;background:var(--dt-surface)}

/* --- Suite de la page, en feuilles empilees comme le site : questions sur papier,
   articles lies sur le fond de la page, bande d'appel finale petrole --- */
.page-article .faq-section,.page-article .faq-section+.related-section,.page-article .appel-final{position:relative;margin-top:calc(-1 * var(--recouvre));border-radius:var(--recouvre) var(--recouvre) 0 0}
.page-article .faq-section{padding-top:var(--sec);background:var(--dt-paper)}
.page-article .faq-section+.related-section{padding-top:var(--sec);background:var(--dt-surface)}
.author-box{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--esp-5);align-items:start;padding-top:var(--esp-5);border-top:3px solid var(--dt-ink)}
.author-avatar{width:96px;height:96px}
.author-info p{font-size:16px;line-height:1.5;color:var(--dt-ink-2)}
.author-box .author-repere{font:700 15px/1.2 var(--display)}
.author-box .author-name{margin:var(--esp-1) 0 var(--esp-2);font:800 26px/1.15 var(--display);letter-spacing:-.02em;color:var(--dt-ink)}
.author-name a{text-decoration:none}
.author-name a:hover{text-decoration:underline;text-decoration-color:var(--dt-accent);text-underline-offset:4px}
.author-box .author-actions{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-5);margin-top:var(--esp-3)}
.author-actions .lien{font-weight:600}
.share-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-3) var(--esp-4);margin-top:var(--esp-6);padding-top:var(--esp-5);border-top:2px dashed var(--dt-surface-alt-2)}
.share-label{font:700 16px/1.2 var(--display)}
.share-buttons .btn-2{min-height:48px;padding:0 20px;font-size:16px}

/* --- Questions frequentes (FAQ.astro) : le titre a gauche, les questions a droite --- */
.faq-section{padding-bottom:var(--sec)}
.faq-grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px;align-items:start}
.faq-title{font-size:clamp(34px,4.4vw,60px);line-height:.98;letter-spacing:-.028em;font-variation-settings:"opsz" 72}
.faq-item{border-top:3px solid var(--dt-ink)}
.faq-item:last-of-type{border-bottom:3px solid var(--dt-ink)}
.faq-question{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;padding:18px 0;font:700 20px/1.25 var(--display);letter-spacing:-.015em}
.faq-question::-webkit-details-marker{display:none}
.faq-question svg{width:26px;height:26px;flex:none;transition:transform 200ms var(--ease)}
.faq-item[open] .faq-question svg{transform:rotate(180deg)}
.faq-answer{padding:0 48px 22px 0;font-size:17px;line-height:1.55;color:var(--dt-ink-2)}

/* --- A lire aussi : cartes de BlogCard.astro (critical-cartes.css), grille
   .cartes-articles --- */
.related-section{padding-bottom:var(--sec)}
.lies-titre{font-size:clamp(34px,4.4vw,60px);line-height:.98;letter-spacing:-.028em;font-variation-settings:"opsz" 72}
.related-section .cartes-articles{margin-top:var(--esp-6)}
/* Comme la maquette : resume entier, titre de 22 px a toutes les largeurs, date a
   l'interligne du texte (les listings gardent leurs regles, critical-cartes.css) */
.related-section .blog-card-title{font-size:22px}
.related-section .blog-card-date{line-height:1.55}

/* --- Appel final (CTA.astro) : une bande pleine largeur, l'action du site en blanc --- */
.appel-final{padding:var(--sec) 0;background:var(--dt-band);color:var(--dt-on-band);text-align:center}
.appel-final h2{color:var(--dt-on-band);font-size:clamp(38px,5.4vw,76px);line-height:.96;letter-spacing:-.032em;font-variation-settings:"opsz" 96}
.appel-final-texte{margin-top:var(--esp-5);font-size:19px;line-height:1.45;color:var(--dt-on-band-2)}
.appel-final-texte>*+*{margin-top:.6em}
.appel-final-liste{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--esp-2) var(--esp-5);margin-top:var(--esp-3);padding:0;font-size:17px;line-height:1.45}
.appel-final-liste li::before{content:"";display:inline-block;width:12px;height:8px;margin-right:10px;border-radius:2px;background:var(--dt-accent);transform:rotate(-6deg)}
.appel-final-action{margin-top:36px}
.appel-final .btn{background:var(--dt-band-action);color:var(--dt-on-band-action);box-shadow:0 4px 0 var(--dt-band-action-shadow)}
.appel-final .btn:hover{box-shadow:0 6px 0 var(--dt-band-action-shadow)}
.appel-final-micro{margin-top:var(--esp-4);font-size:15px;color:var(--dt-on-band-2)}
.appel-final-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--esp-2) var(--esp-6);margin-top:var(--esp-6);font-size:16px}
.appel-final .lien{color:var(--dt-on-band)}
.appel-final :focus-visible{outline-color:var(--dt-on-band)}

/* --- Tablette --- */
@media (max-width:1023px){
  .faq-grille{grid-template-columns:minmax(0,1fr);gap:var(--esp-6)}
}

/* --- Telephone --- */
@media (max-width:760px){
  .page-article .prose>.appel-corps,.cta-mid{padding:var(--esp-5)}
  .cta-mid-text{font-size:19px}
  .cta-mid .btn,.appel-corps .btn,.appel-final .btn{width:100%}
  .author-box{grid-template-columns:64px minmax(0,1fr);gap:var(--esp-4)}
  .author-avatar{width:64px;height:64px}
  .share-buttons{display:grid;grid-template-columns:minmax(0,1fr)}
  .faq-question{font-size:18px}
  .faq-answer{padding-right:0}
  .appel-final{text-align:left}
  .appel-final-texte{font-size:17px}
  .appel-final-liste{display:block}
  .appel-final-liste li+li{margin-top:var(--esp-1)}
  .appel-final-liens{justify-content:flex-start}
  .related-section{padding-top:var(--esp-4)}
}

@media (prefers-reduced-motion:reduce){
  .faq-question svg{transition:none}
}

/* ==========================================================
   IMPRESSION
   ========================================================== */
/* L'article seul, a transmettre a sa direction. Image d'ouverture, sommaires,
   appels a l'action, partage et articles lies sont masques (en-tete, pied et
   bandeau de cookies : site.css) ; l'adresse des liens s'imprime apres eux. */
@media print{
  .partie::before,.article-fin--feuille::before{display:none}
  .partie,.article-fin--feuille{margin-top:0;padding:0}
  .page-article .faq-section{margin-top:0;background:none;border-radius:0}
  .article-rail,.toc-mobile,.article-hero,.cta-mid,.appel-corps,.appel-final,.share-buttons,.related-section{display:none!important}
  .page-article{background:var(--dt-paper)}
  .article-header,.article-layout,.article-body,.article-fin,.page-article .prose,.faq-grille{display:block;padding:0}
  .article-header{padding-bottom:12pt}
  .article-title{font-size:22pt}
  .page-article .prose{font-size:11pt;line-height:1.5}
  .page-article .article-entree>p{font-size:12pt!important}
  .lede-stat{font-size:18pt}
  .page-article .prose>h2{margin-top:18pt;font-size:16pt;break-after:avoid}
  .page-article .prose>h3{font-size:12.5pt;break-after:avoid}
  .page-article .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:var(--dt-ink-2);word-break:break-all}
  .faq-section{padding:18pt 0 0}
  .faq-title{font-size:16pt}
  figure,table,blockquote,.faq-item,.author-box{break-inside:avoid}
}

/* --- Bouton d'appel flottant (#dt-sticky-cta, src/components/BoutonFlottant.astro) ---
   Livraison de la session maquette (audits/refonte-articles/livraisons-design/bouton-flottant/,
   bouton-flottant.css), decision de Yannis du 14/10/2026. Une feuille de papier posee en bas
   de l'ecran, alignee sur la colonne de lecture (jamais sur le sommaire colle) ; sur
   telephone, une barre sur toute la largeur. Differee : le bouton n'apparait qu'apres la
   moitie de l'article. Seul ecart au fichier livre : pas de text-wrap: balance (AGENTS.md
   §7). Tant qu'il est visible, le bouton de l'en-tete se retire (.top-cta.cache). */
#dt-sticky-cta{position:fixed;z-index:45;/* au-dessus de l'en-tete colle (40), sous le bandeau de cookies (99990) */
  left:var(--sticky-gauche,max(16px,env(safe-area-inset-left,0px)));width:var(--sticky-largeur,auto);
  bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:var(--esp-4);
  padding:12px 12px 12px 20px;border-radius:18px;background:var(--dt-paper);color:var(--dt-ink);
  box-shadow:0 0 0 2px var(--dt-ink),6px 6px 0 var(--dt-shadow);
  transform:translateY(calc(100% + 40px));visibility:hidden;
  transition:transform 260ms cubic-bezier(.2,.7,.2,1),visibility 0s linear 260ms}
#dt-sticky-cta.visible{transform:translateY(0) rotate(-.4deg);visibility:visible;transition:transform 320ms cubic-bezier(.2,.7,.2,1),visibility 0s}
#dt-sticky-cta .sticky-texte{flex:1 1 auto;min-width:0;display:grid;gap:2px}
#dt-sticky-cta .sticky-titre{font:800 18px/1.15 var(--display);letter-spacing:-.015em}
#dt-sticky-cta .sticky-sous{font-size:14px;color:var(--dt-ink-2)}
#dt-sticky-cta .sticky-action{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
  border-radius:999px;background:var(--dt-action);color:var(--dt-on-action);font:700 16px/1.1 var(--display);text-decoration:none;
  box-shadow:0 0 0 2px var(--dt-action),4px 4px 0 var(--dt-action-shadow);transition:transform 140ms ease,box-shadow 140ms ease}
#dt-sticky-cta .sticky-action:hover{transform:translate(-1px,-1px);box-shadow:0 0 0 2px var(--dt-action),6px 6px 0 var(--dt-action-shadow)}
#dt-sticky-cta .sticky-fermer{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-left:-6px;
  border:0;border-radius:12px;background:transparent;color:var(--dt-ink-2);cursor:pointer}
#dt-sticky-cta .sticky-fermer:hover{background:var(--dt-surface-alt);color:var(--dt-ink)}
#dt-sticky-cta .sticky-fermer svg{width:20px;height:20px}
#dt-sticky-cta :focus-visible{outline:3px solid var(--dt-accent);outline-offset:3px}
@media (max-width:760px){
  #dt-sticky-cta{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));width:auto;
    bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:8px;gap:var(--esp-2);border-radius:16px}
  #dt-sticky-cta.visible{transform:translateY(0)}
  #dt-sticky-cta .sticky-texte{display:none}
  #dt-sticky-cta .sticky-action{flex:1 1 auto;min-width:0;min-height:48px;padding:0 14px;font-size:clamp(14px,4vw,16px);letter-spacing:-.01em;white-space:nowrap}
  #dt-sticky-cta .sticky-fermer{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  #dt-sticky-cta,#dt-sticky-cta.visible{transition:visibility 0s,opacity 160ms linear;transform:none;opacity:0}
  #dt-sticky-cta.visible{opacity:1}
  #dt-sticky-cta .sticky-action,#dt-sticky-cta .sticky-action:hover{transition:none;transform:none}
}
@media (forced-colors:active){#dt-sticky-cta{border:2px solid CanvasText}}
@media print{#dt-sticky-cta{display:none!important}}
.top .top-cta.cache{display:none}