/* =========================================================================
   Raccords WordPress : ce qui n’existait pas dans la maquette
   ========================================================================= */

/* transitions entre pages : le rideau de la maquette, version multi-pages
   (amélioration progressive : sans prise en charge, la navigation reste normale) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: var(--t3) var(--ease-in) both eco-vt-out; }
::view-transition-new(root) { animation: var(--t3) var(--ease) both eco-vt-in; }
@keyframes eco-vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes eco-vt-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* barre d’administration WordPress : l’en-tête collant passe dessous */
.admin-bar .hdr { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .hdr { top: 0; } }

/* contenu saisi dans l’éditeur de blocs */
.entry { max-width: 72ch; }
.entry > * + * { margin-top: 1em; }
.entry h2, .entry h3 { margin-top: 1.6em; }
.entry img { height: auto; }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry ul { list-style: disc; }
.entry ol { list-style: decimal; }
.entry li + li { margin-top: .35em; }
.entry li::marker { color: var(--mk); }
.entry a { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }

/* alignements standard de l’éditeur */
.alignwide { width: min(var(--max), 100%); margin-inline: auto; }
.alignfull { width: 100vw; margin-inline: calc(50% - 50vw); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* sans JavaScript : l’escalier narratif se lit comme une liste, rien n’est masqué */
html:not(.js) .stair { height: auto; }
html:not(.js) .stair-pin { position: static; height: auto; padding-block: 80px; }
html:not(.js) .stair-txt { min-height: 0; display: grid; gap: 40px; }
html:not(.js) .stair-step { position: static; opacity: 1; transform: none; }
html:not(.js) .stair-prog, html:not(.js) .stair-art .walker { display: none; }

/* fiche formation : le bouton d’impression n’a de sens qu’avec JavaScript */
html:not(.js) [data-imprimer] { display: none; }
.fs-cards .mod-kv { align-self: stretch; margin-top: 10px; }
/* textes longs saisis dans la fiche : cartes en pleine largeur plutôt qu’en colonnes très hautes */
.fs-cards.large, .eval.large { grid-template-columns: minmax(0, 1fr); }
.fs-cards.large .card p, .eval.large .card p { max-width: 70ch; }

/* impression du programme : contenu seul, accordéons dépliés */
@media print {
  .hdr, .ftr, .toc, .aside-card, .mobile-cta, .btn, .vis-slot, [data-imprimer], .skip { display: none !important; }
  .tp-art { max-height: 160px; }
  .fiche-layout { display: block !important; }
  .acc-b, .js .acc-h[aria-expanded="false"] + .acc-b { grid-template-rows: 1fr !important; }
  .fiche-main > section { padding-block: 0 24px; }
  .fiche-main .card, .fiche-main h2 { break-inside: avoid; }
  .fiche-main h2, .fiche-main .eb { break-after: avoid; }
  .fiche-main > section + section { margin-top: 24px; }
  .rv { opacity: 1 !important; transform: none !important; }
}

/* pages légales : informations propres à l’école, à compléter dans l’éditeur */
.entry mark.a-completer { padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--ocre) 22%, transparent); color: var(--tx); font-weight: 700; }

/* formulaires de contact et de candidature (extension « Demandes ») */
.apply form .alert { margin-bottom: 24px; }
.panel .alert { margin-bottom: 4px; }
fieldset.co-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.co-t { padding: 0; margin-bottom: 4px; }
.js .co-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js [data-file-natif], .js [data-nojs], .js [data-fmt-natif] { display: none; }
.upload { cursor: pointer; }
.upload > .icon { margin-inline: auto; }
[data-files] li > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.upload:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; }
.apply .confirm[tabindex]:focus, [data-ok]:focus { outline: none; }
/* sans JavaScript : les cinq marches se suivent, l’envoi se fait par le bouton de la dernière */
html:not(.js) .co-step { display: grid; gap: 20px; }
html:not(.js) .co-step + .co-step { margin-top: 48px; }
html:not(.js) [data-asteps], html:not(.js) [data-anav], html:not(.js) [data-drop], html:not(.js) [data-fmts], html:not(.js) .co-step[data-s="5"] { display: none; }
html:not(.js) [data-nojs] { justify-self: start; }
html:not(.js) [data-apply] { margin-top: 48px; }

/* fiche : encadré de vigilance (examen civique) */
.vigil > div { display: grid; gap: 10px; min-width: 0; }
.vigil ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; }
.vigil .ext { overflow-wrap: anywhere; }

/* fiche : indicateurs publiés (valeur, libellé, source), même carte que les emplacements de la maquette */
.ind .card { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: var(--corner); }

/* fiche : documents à télécharger (ligne non cliquable tant que le fichier n’est pas fourni) */
.docs .doc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--ln); font-weight: 650; font-size: 14.5px; color: var(--fg); }
.docs .doc .icon { width: 18px; height: 18px; }

/* pages entreprises : devis en trois étapes, situations, méthode */
fieldset.q-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.quote-form .alert { margin-top: 20px; }
.quote-form [data-ok]:focus { outline: none; }
.mstep-fin { background: var(--pin); border-color: var(--pin); justify-content: center; }
.js .disc-nojs { display: none; }
.disc-nojs { margin-top: 10px; }
/* sans JavaScript : étapes et réponses lisibles l’une sous l’autre, sans les commandes qui en dépendent */
html:not(.js) .q-step { display: grid; }
html:not(.js) .q-step + .q-step { margin-top: 40px; }
html:not(.js) :is([data-qsteps], [data-qfmt], [data-qn], [data-qp], [data-needs], [data-to-quote], [data-svcnav], .disc-l) { display: none; }
html:not(.js) .disc-p + .disc-p { margin-top: 40px; }
/* méthode : sans JavaScript ou sans animation, les cinq temps s’empilent au lieu de défiler à l’horizontale */
html:not(.js) .method { height: auto; }
html:not(.js) .method-pin { position: static; height: auto; padding-block: 64px; }
html:not(.js) .method-track { flex-wrap: wrap; }
html:not(.js) .method-line { display: none; }
@media (prefers-reduced-motion: reduce) {
  .method { height: auto; }
  .method-pin { position: static; height: auto; padding-block: 64px; }
  .method-track { flex-wrap: wrap; transform: none !important; }
  .method-line { display: none; }
}

/* Académie en ligne avant ouverture : bandeau « Bientôt ouverte » dans le héros (page-academie.php) */
.aca-bientot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; padding: 12px 16px; border-radius: var(--corner); background: var(--hl); box-shadow: inset 0 0 0 1px var(--ln); color: var(--fg); font-weight: 650; }
.rail.auto { scroll-snap-type: none; }
.fmt .go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 800; font-size: 14.5px; }
.fmt .go .icon { width: 18px; height: 18px; }
.aca-dispo { margin: 40px 0 -8px; color: var(--fg); font-weight: 650; }
.aca-bientot .tag { background: var(--ocre); color: var(--pin); }

/* Ressources (page-ressources.php) : articles, cartographie des financeurs, questions par public */
.res-articles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.res-articles .card { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.res-articles h3 { font-size: 20px; font-weight: 750; line-height: 1.25; }
.res-articles h3 a { color: var(--fg); text-decoration: none; }
.res-articles h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.res-articles p { font-size: 15px; color: var(--tx2); }
.res-articles .res-date { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: var(--tx2); }
.res-articles .res-lire { margin-top: auto; font-weight: 750; }

.carto { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: 8px; }
.carto-liens { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.carto-liens path { fill: none; stroke: var(--bd); stroke-width: 1; opacity: .35; transition: opacity var(--t2) var(--ease); }
.carto.sel .carto-liens path { opacity: .12; }
.carto.sel .carto-liens path.on { stroke: var(--act); stroke-width: 2; opacity: 1; }
.carto-col { position: relative; display: flex; flex-direction: column; gap: 8px; }
.carto-t { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fg); margin-bottom: 6px; }
.carto-t .num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 12px; letter-spacing: 0; }
.carto-n { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 10px 14px; text-align: left; border-radius: var(--r-s); background: var(--card); box-shadow: inset 0 0 0 1px var(--cardb); color: var(--fg); font-size: 15px; font-weight: 650; line-height: 1.3; transition: opacity var(--t2) var(--ease), background var(--t1), color var(--t1), box-shadow var(--t1); }
.carto-n .small { font-weight: 500; color: var(--tx2); }
.carto-n:hover { box-shadow: inset 0 0 0 2px var(--fg); }
.carto.sel .carto-n:not(.on):not(.rel) { opacity: .4; }
.carto-n.rel { box-shadow: inset 0 0 0 2px var(--act); }
.carto-n.on { background: var(--fg); color: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
.carto-n.on .small { color: inherit; opacity: .8; }
.carto-fiches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; scroll-margin-top: calc(var(--hdr) + 16px); }
.carto-fiche { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.carto-fiche h3 { font-size: 18px; font-weight: 750; }
.carto-fiche p { font-size: 15px; color: var(--tx2); }
.carto-aide { display: none; grid-column: 1 / -1; font-weight: 650; color: var(--tx); }
.js .carto-aide:not([hidden]) { display: block; }
.js .carto-fiche { display: none; }
.js .carto-fiche.on { display: flex; }
.res-faq-f { gap: 8px; margin-bottom: 32px; }
.res-faq-g + .res-faq-g { margin-top: 40px; }
.res-faq-g .h4 { margin-bottom: 12px; }
@media (max-width: 760px) {
  .res-articles, .carto-fiches { grid-template-columns: minmax(0, 1fr); }
  .carto { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .carto-liens { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .carto-n, .carto-liens path { transition: none; }
}

.fs-q img { display: block; height: auto; margin: 10px 0 6px; }

/* Visiteurs : les emplacements réservés (à renseigner) ne sont pas affichés */
.site-propre .slot:not(.rep), .site-propre .vis-slot { display: none !important; }

/* L’école : repères renseignés (les emplacements « à compléter » gardent le style .slot) */
.ind .slot.rep { border: 1px solid var(--cardb) !important; background: var(--card) !important; }
.ind .rep .v { color: var(--fg); }

/* Campus : photos fournies par l’école, légende en pastille, agrandissement dans la visionneuse */
.photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--corner-xl); background: var(--card); }
.photo > a { display: block; height: 100%; cursor: zoom-in; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t3) var(--ease); }
.photo > a:hover img, .photo > a:focus-visible img { transform: scale(1.04); }
.photo > a:focus-visible { outline-offset: -4px; }
.photo figcaption { position: absolute; left: 12px; bottom: 12px; background: var(--creme); color: var(--pin); box-shadow: var(--shadow-1); pointer-events: none; }
.photo-duo { position: relative; padding: 0 0 12% 14%; }
.photo-duo .photo:first-child { aspect-ratio: 3 / 2; }
.photo-duo .photo + .photo { position: absolute; left: 0; bottom: 0; width: 34%; aspect-ratio: 4 / 5; border: 6px solid var(--bg); box-shadow: var(--shadow-2); }
.photo-duo .photo + .photo figcaption { left: 8px; bottom: 8px; }
.photo-duo .photo:first-child figcaption { left: auto; right: 12px; }
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.galerie .photo { aspect-ratio: 3 / 2; }
.galerie .g0 { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.galerie .g5, .galerie .g6 { grid-column: span 2; aspect-ratio: 2 / 1; }
.visionneuse .modal-box { width: min(1200px, 100%); margin: 0; overflow: hidden; background: var(--bg); color: var(--tx); }
.visionneuse img { display: block; width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; }
.visionneuse figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-weight: 700; color: var(--fg); }
.visionneuse figcaption .row { gap: 8px; }
@media (max-width: 760px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .galerie .photo, .galerie .g5, .galerie .g6 { grid-column: auto; aspect-ratio: 4 / 3; }
  .galerie .g0 { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; }
  .galerie figcaption { left: 8px; bottom: 8px; height: 22px; font-size: 10px; padding: 0 8px; }
  .photo-duo { padding-left: 10%; }
  .photo-duo .photo + .photo { width: 38%; border-width: 4px; }
}

/* Infos pratiques : accès au campus, un mode de transport à la fois, schéma des accès */
.acces { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; }
.acces-m { gap: 8px; margin-bottom: 16px; }
.acces-ps { display: grid; gap: 16px; }
.acces-p { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; }
.acces-p h3, .acces-st h3 { font-size: 20px; font-weight: 750; color: var(--fg); }
.acces-p .ticks { margin-top: 4px !important; }
.acces-p .ic, .acces-st .ic { width: 44px; height: 44px; border-radius: var(--corner); display: grid; place-items: center; background: var(--hl); color: var(--action); }
.js .acces-p { display: none; }
.js .acces-p.on { display: flex; }
.acces-st { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
.acces-st p { font-size: 15px; color: var(--tx2); }
.acces-plan { margin: 0; padding: 12px; border-radius: var(--corner-xl); background: var(--card); border: 1px solid var(--cardb); }
.acces-plan svg { display: block; width: 100%; height: auto; font-family: inherit; }
.acces-plan figcaption { padding: 4px 8px 4px; color: var(--tx2); }
/* plan : fond OpenStreetMap aux couleurs du thème, lieux à l’échelle --k (cadrage) × --m (petits écrans) */
.acces-plan svg { --k: 1; --m: 1; background: var(--creme); border-radius: var(--corner); }
.pm-terre { fill: var(--creme); }
.pm-vert { fill: var(--ton-pro); }
.pm-mer, .pm-eau { fill: color-mix(in srgb, var(--sauge) 38%, var(--creme)); }
.pm-r3, .pm-r2, .pm-r1, .pm-rail, .pm-t1, .pm-t23 { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pm-r3 { stroke: var(--n200); stroke-width: 1.1; }
.pm-r2 { stroke: var(--n300); stroke-width: 1.8; }
.pm-r1 { stroke: var(--n300); stroke-width: 3.2; }
.pm-rail { stroke: var(--n600); stroke-width: 1.8; stroke-dasharray: 7 4; }
.pm-t1 { stroke: var(--vert); stroke-width: 3; }
.pm-t23 { stroke: var(--ocre-d); stroke-width: 3; }
.pm-tun { stroke-dasharray: 2 5; stroke-opacity: .7; }
.pm-r1, .pm-rail, .pm-t1, .pm-t23 { transition: stroke-width var(--t2), opacity var(--t2); }
.acces.sel .pm-t1, .acces.sel .pm-t23, .acces.sel .pm-rail { opacity: .35; }
.acces[data-mode="tram"] .pm-t1, .acces[data-mode="tram"] .pm-t23 { opacity: 1; stroke-width: 5; }
.acces[data-mode="train"] .pm-rail { opacity: 1; stroke-width: 3; }
.acces[data-mode="voiture"] .pm-r1 { stroke: var(--o300); }
.ap-s { transform: scale(calc(var(--k) * var(--m))); transition: transform var(--t2) var(--ease); }
.ap-l { stroke: var(--action); stroke-width: calc(2px * var(--k) * var(--m)); stroke-dasharray: calc(6px * var(--k) * var(--m)) calc(5px * var(--k) * var(--m)); opacity: 0; transition: opacity var(--t2); }
.ap-n { color: var(--fg); transition: opacity var(--t2) var(--ease); }
.ap-n circle { fill: var(--creme); stroke: currentColor; stroke-width: 1.6; transition: fill var(--t2), stroke var(--t2); }
.ap-n use { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ap-n text, .ap-c text { fill: var(--fg); font-size: 14px; font-weight: 800; paint-order: stroke; stroke: var(--creme); stroke-width: 4px; stroke-linejoin: round; }
.ap-n text.d, .ap-c text.d { fill: var(--tx2); font-size: 11.5px; font-weight: 650; }
.ap-c circle { fill: var(--action); stroke: var(--creme); stroke-width: 3; }
.ap-c .ap-p { fill: none; stroke: var(--action); stroke-width: 2; animation: apPouls 2.4s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }
.acces.sel .ap-n:not(.on) { opacity: 0; pointer-events: none; }
.acces.sel .ap-l.on { opacity: 1; animation: apFlux 1.2s linear infinite; }
.ap-n.on { color: var(--on-act); }
.ap-n.on circle { fill: var(--action); stroke: var(--action); }
@keyframes apFlux { to { stroke-dashoffset: -44; } }
@keyframes apPouls { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@media (max-width: 1100px) { .acces-st { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .acces { grid-template-columns: minmax(0, 1fr); } .acces-plan { order: -1; } }
@media (max-width: 760px) {
  .acces-st { grid-template-columns: minmax(0, 1fr); }
  .acces-m { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; }
  .acces-plan { padding: 4px; }
  .acces-plan svg { --m: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .photo img, .ap-l, .ap-n, .ap-n circle, .ap-s, .pm-r1, .pm-rail, .pm-t1, .pm-t23 { transition: none; }
  .acces.sel .ap-l.on, .ap-c .ap-p { animation: none; }
}

/* Pied de page : certification Qualiopi et lien vers le certificat */
.ftr-q { display: grid; gap: 10px; max-width: 34ch; color: var(--tx2); text-decoration: none; }
.ftr-q img { width: 168px; height: auto; padding: 8px 10px; border-radius: var(--corner); background: var(--n0); }
.ftr-q u { color: var(--fg); text-underline-offset: 3px; }
.ftr-q:hover u { color: var(--lk); }

/* =========================================================================
   Journal de la formation : liste des articles, cartes, article (demande du 06/11/2026)
   ========================================================================= */
.art-filtres { margin-top: 28px; gap: 8px; }
.art-filtres .chip, .art-partage .chip, .art-meta .tag { text-decoration: none; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; font-weight: 750; letter-spacing: .04em; color: var(--tx2); }
.art-meta > span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 14px; border-radius: 50%; background: var(--mk); vertical-align: middle; }

/* vignette : fond du thème et marches du pas (grammaire des cartes formation) */
.art-vis { position: relative; overflow: hidden; height: 148px; background: var(--tone); border-radius: 6px 28px 0 0; }
.art-vis svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-vis-t { position: absolute; left: 18px; top: 16px; z-index: 1; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tone-fg); }
.art-vis.grand { height: auto; min-height: 280px; border-radius: var(--corner-xl); }
.art-vis.art-couv { height: clamp(140px, 18vw, 220px); margin-top: clamp(32px, 4vw, 48px); border-radius: var(--corner-xl); }
.art-vis.art-couv .art-vis-t, .art-vis.grand .art-vis-t { left: 24px; top: 22px; }

/* cartes : toute la carte est cliquable par le lien du titre */
.art-carte { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--cardb); border-radius: var(--corner-xl); transition: box-shadow var(--t2) var(--ease), border-color var(--t2), transform var(--t2) var(--ease); }
.art-carte:hover { box-shadow: var(--shadow-2); border-color: transparent; transform: translateY(calc(var(--a1) * -1)); }
.art-carte:focus-within { box-shadow: var(--shadow-2); }
.art-carte-b { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 22px 24px 24px; }
.art-carte-t { font-size: 21px; line-height: 1.22; font-weight: 750; letter-spacing: -.01em; color: var(--fg); }
.art-carte-t a { color: inherit; text-decoration: none; }
.art-carte-t a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.art-carte-t a:focus-visible { outline: none; }
.art-carte-t a:focus-visible::after { outline: 2px solid var(--action); outline-offset: 3px; }
.art-carte-x { font-size: 15px; line-height: 1.55; color: var(--tx2); }
.art-lire { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 10px; font-weight: 750; color: var(--lk); }
.art-carte:hover .art-lire .ar { transform: translateX(var(--a1)); }

.art-carte.une { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-bottom: 24px; }
.art-carte.une .art-vis { border-radius: 6px 0 0 6px; }
.art-carte.une .art-carte-b { justify-content: center; gap: 16px; padding: clamp(28px, 4vw, 56px); }
.art-carte.une .art-carte-t { font-size: clamp(26px, 2.8vw, 38px); font-weight: 300; letter-spacing: -.025em; line-height: 1.1; }
.art-carte.une .art-carte-x { font-size: 17px; }
.art-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.art-pages { margin-top: 48px; }
.art-liste { padding-top: 0; margin-top: calc(clamp(64px, 8vw, 112px) * -0.6); }


/* article */
.art-tete { padding-block: clamp(32px, 5vw, 64px) 0; }
.art-meta-tete { margin-top: 28px; }
.art-h1 { margin-top: 18px; max-width: 24ch; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.035em; font-weight: 300; color: var(--fg); }
.art-chapo { margin-top: 20px; max-width: 62ch; }
.art-auteur { margin-top: 18px; }
.art-image { margin-top: clamp(32px, 4vw, 48px); }
.art-image img { width: 100%; height: auto; border-radius: var(--corner-xl); }
.art-cols { display: grid; grid-template-columns: 260px minmax(0, 72ch); justify-content: space-between; gap: clamp(32px, 6vw, 96px); align-items: start; }
.art-cote { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 32px; }
.art-som ol { margin-top: 14px; display: grid; gap: 2px; border-left: 2px solid var(--ln); }
.art-som a { display: block; margin-left: -2px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.35; font-weight: 650; color: var(--tx2); text-decoration: none; transition: color var(--t1), border-color var(--t1); }
.art-som a:hover { color: var(--fg); }
.art-som a[aria-current="true"] { color: var(--fg); border-left-color: var(--mk); }
.art-partage .row { margin-top: 14px; gap: 8px; }
.art-partage .chip { min-height: 36px; padding: 0 14px; font-size: 14px; }
.art-essentiel { margin-bottom: 40px; }
.art-essentiel ul { margin-top: 12px; display: grid; gap: 10px; }
.art-essentiel li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; color: var(--tx); }
.art-essentiel li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 2px 5px 2px 2px; background: var(--mk); }
.art-texte { max-width: none; font-size: 18px; line-height: 1.7; }
.art-texte > p:first-child { font-size: 20px; line-height: 1.6; color: var(--fg); }
.art-texte h2 { position: relative; margin-top: 2.2em; padding-top: 20px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.02em; font-weight: 750; color: var(--fg); scroll-margin-top: calc(var(--hdr) + 24px); }
.art-texte h2::before { content: ""; position: absolute; left: 0; top: 0; width: var(--m); height: 4px; background: var(--mk); }
.art-texte h3 { margin-top: 1.6em; font-size: 21px; font-weight: 750; color: var(--fg); }
.art-texte strong { color: var(--fg); }
.art-texte ol { list-style: none; padding-left: 0; counter-reset: etape; display: grid; gap: 12px; }
.art-texte ol > li { position: relative; counter-increment: etape; padding-left: 48px; min-height: 32px; }
.art-texte ol > li::before { content: counter(etape); position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--corner); background: var(--pin); color: var(--n0); font-size: 14px; font-weight: 800; }
.art-texte li + li { margin-top: .5em; }
.art-texte ol > li + li { margin-top: 0; }
.art-sources { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--ln); }
.art-sources ul { margin-top: 14px; display: grid; gap: 8px; }
.art-sources .small { margin-top: 16px; }
.art-formations { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

@media (max-width: 1100px) {
  .art-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .art-cols { grid-template-columns: minmax(0, 1fr); }
  .art-cote { position: static; order: 2; }
  .art-som { display: none; }
  .art-carte.une { grid-template-columns: minmax(0, 1fr); }
  .art-carte.une .art-vis { min-height: 200px; border-radius: 6px 28px 0 0; }
}
@media (max-width: 640px) {
  .art-grille { grid-template-columns: minmax(0, 1fr); }
  .art-texte { font-size: 17px; }
  .art-texte > p:first-child { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .art-carte:hover { transform: none; }
}
@media print {
  .art-cote, .art-formations { display: none; }
  .art-cols { display: block; }
}