/* =====================================================================
 * SOCLE-SITE — feuille CANONIQUE, identique sur toute la flotte.
 *
 * NE PAS LA MODIFIER POUR UN SITE. Elle porte la structure et les
 * composants ; l'identite d'un site tient entierement dans les
 * variables, redefinies par assets/skin.css charge juste apres.
 *
 * Pourquoi cette separation : la premiere feuille de la flotte a ete
 * ecrite a la main, 14 Ko, et gardait la creme et l'ambre de son site
 * dans six ombres, l'en-tete colle et tout le pied de page. Recopiee
 * ailleurs, elle y aurait plaque cette identite sans que rien ne le
 * signale. Une valeur en dur hors du bloc :root est donc un defaut.
 *
 * Les classes ici sont celles que rendent header.php, footer.php,
 * front-page.php, single.php, archive.php et 404.php. Elles ne
 * s'inventent pas : un selecteur ajoute au juge n'a rien a peindre.
 * ===================================================================== */

:root{
  /* ----------------------------------------------------------------
     JETONS DU SOCLE — valeurs NEUTRES, volontairement sans identite.
     Un site ne modifie JAMAIS ce fichier : il depose assets/skin.css,
     charge apres celui-ci, qui redefinit ces memes variables.
     Sans skin.css le site reste lisible et sobre, jamais casse.

     --*-rgb : les triplets existent parce qu'une ombre et un fond
     translucide ont besoin du canal alpha. Sans eux, la couleur
     d'origine se retrouvait ecrite en dur dans six ombres et dans
     l'en-tete colle, et suivait le theme sur tous les autres sites.
     ---------------------------------------------------------------- */
  --primary:#334155;  --primary-light:#475569;  --primary-dark:#1e293b;
  --primary-rgb:51,65,85;
  --accent:#0f766e;   --accent-light:#14857b;   --accent-dark:#0b5a54;
  --accent-rgb:15,118,110;
  --accent-doux:#e2e8f0;
  --bg:#ffffff;       --surface:#ffffff;        --surface-2:#f1f5f9;
  --bg-rgb:255,255,255;
  --text:#0f172a;     --muted:#475569;          --dim:#94a3b8;
  --line:rgba(15,23,42,.10);
  --sur-primaire:#ffffff;

  --pied-fond:var(--text);
  --pied-texte:#e2e8f0;
  --pied-attenue:#94a3b8;
  --pied-faible:#64748b;
  --pied-ligne:rgba(226,232,240,.15);

  --shadow-sm:0 2px 8px rgba(15,23,42,.06);
  --shadow:0 12px 32px -12px rgba(15,23,42,.18);
  --shadow-lg:0 24px 60px -18px rgba(15,23,42,.28);

  --font-display:system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max:1200px;
  --radius:1rem;
  --pad:clamp(1.25rem, 4vw, 2.5rem);
}
/* ============================================================
   SAINT-FARON.FR — feuille du site
   Couvreur, couverture, zinguerie. Lyon.

   Reprise integrale du design system extrait en juin
   (clients/_pbn/saint-faron.fr/data/rebuild/design-system.css) :
   memes jetons, memes couleurs, memes typographies, memes ombres.
   Seuls les noms de classes changent, pour coller a ceux que
   rend le socle : .entete, .ariane, .page-tete, .pied, etc.

   Ambiance : clair et chaleureux, creme ambree, accent ambre,
   rouge tuile en secondaire. Space Grotesk en titrage, Inter en texte.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');



/* ---------- socle ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);letter-spacing:-.04em}
h2{font-size:clamp(1.55rem,3.2vw,2.3rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
p{margin:0 0 1.1em}
strong{font-weight:700;color:var(--text)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(3rem,7vw,5.5rem)}
/* rythme : une section sur deux prend le fond chaud */
main > .section:nth-of-type(even){background:var(--surface-2)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.saut-contenu{position:absolute;left:-9999px;top:0;background:var(--primary);color:var(--sur-primaire);padding:.8rem 1.2rem;z-index:100;border-radius:0 0 .6rem 0}
.saut-contenu:focus{left:0}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:.3rem}

/* ---------- en-tete ---------- */
.entete{
  position:sticky;top:0;z-index:50;
  background:rgba(var(--bg-rgb), .9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.entete-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.9rem}
.marque-txt{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.03em}
.marque-txt::after{content:"";display:inline-block;width:.4rem;height:.4rem;border-radius:50%;background:var(--accent);margin-left:.35rem;vertical-align:.15rem}

.nav-liste{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav-liste a{color:var(--muted);font-size:.95rem;font-weight:500;transition:color .2s}
.nav-liste a:hover,.nav-liste .current-menu-item > a,.nav-liste [aria-current="page"]{color:var(--primary-dark)}
.nav-liste .sub-menu{display:none}

.entete-actions{display:flex;align-items:center;gap:.9rem}
.tel{font-family:var(--font-display);font-weight:700;color:var(--primary-dark);white-space:nowrap}

.nav-bascule{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.nav-bascule-barres,.nav-bascule-barres::before,.nav-bascule-barres::after{
  display:block;width:22px;height:2px;background:var(--text);border-radius:2px;position:relative
}
.nav-bascule-barres::before{content:"";position:absolute;top:-7px}
.nav-bascule-barres::after{content:"";position:absolute;top:7px}

@media (max-width:920px){
  .nav-bascule{display:block;order:3}
  .nav{display:none;flex-basis:100%;order:4}
  .nav-liste{flex-direction:column;align-items:flex-start;gap:.9rem;padding-block:1rem}
  .entete-in[data-ouvert="1"] .nav{display:block}
  .entete-actions .tel{display:none}
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;
  padding:.95rem 1.5rem;border-radius:.9rem;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.btn-primaire{background:var(--primary);color:var(--sur-primaire);box-shadow:0 12px 32px -10px rgba(var(--primary-rgb), .5)}
.btn-primaire:hover{transform:translateY(-2px);box-shadow:0 18px 44px -10px rgba(var(--primary-rgb), .7)}
.btn-accent{background:var(--accent);color:var(--sur-primaire);box-shadow:0 12px 32px -10px rgba(var(--accent-rgb), .5)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 18px 44px -10px rgba(var(--accent-rgb), .7)}
.btn-fantome{background:var(--surface);border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow-sm)}
.btn-fantome:hover{border-color:var(--primary)}

/* ---------- fil d'Ariane ---------- */
.ariane{padding-block:1.1rem;font-size:.88rem;color:var(--dim)}
.ariane ol{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:0;padding:0}
.ariane li+li::before{content:"/";margin-right:.45rem;color:var(--line)}
.ariane a:hover{color:var(--primary-dark)}
.ariane [aria-current="page"]{color:var(--muted)}

/* ---------- tete de page ---------- */
.page-tete{padding-block:clamp(1.5rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem)}
.page-tete h1{margin-bottom:.35em}
.chapo{font-size:clamp(1.08rem,1.9vw,1.28rem);color:var(--muted);max-width:62ch;margin:0}

/* ---------- accueil ---------- */
.hero{padding-block:clamp(3rem,7vw,6rem)}
.hero-g{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:.98}
.hero-a{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero-img img{border-radius:var(--radius);box-shadow:var(--shadow-lg)}
@media (max-width:860px){.hero-g{grid-template-columns:1fr}}

.reassur{background:var(--surface-2);border-block:1px solid var(--line);padding-block:1.6rem}
.reassur ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;list-style:none;margin:0;padding:0}
.reassur li{display:flex;gap:.75rem;align-items:flex-start;font-size:.94rem;color:var(--muted)}
.reassur b{display:block;font-family:var(--font-display);color:var(--text);font-size:1rem;margin-bottom:.15rem}
.reassur .ico{flex:0 0 auto;width:.55rem;height:.55rem;border-radius:50%;background:var(--primary);margin-top:.5rem}
@media (max-width:900px){.reassur ul{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.reassur ul{grid-template-columns:1fr}}

/* ---------- contenu de page ---------- */
.sommaire{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--primary);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:1.2rem 1.5rem;margin-block:2rem;max-width:64ch;
}
.sommaire ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.sommaire a{color:var(--muted);font-weight:500}
.sommaire a:hover{color:var(--primary-dark)}

.grille{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.carte{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--shadow-sm);transition:transform .25s, box-shadow .25s;
}
.carte:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

.dtable{width:100%;border-collapse:collapse;margin-block:1.5rem;font-size:.97rem;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.dtable th,.dtable td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--line)}
.dtable th{font-family:var(--font-display);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface-2)}
.dtable tr:last-child td{border-bottom:none}
.dtable td{font-variant-numeric:tabular-nums}

.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:.8rem;overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;padding:1.1rem 1.4rem;
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--primary);line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details > p{padding:1.1rem 1.4rem;margin:0;color:var(--muted)}

.cta{background:var(--surface-2)}
.cta .wrap{text-align:center;display:grid;gap:1.2rem;justify-items:center}
.cta p{font-family:var(--font-display);font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--text);max-width:44ch;margin:0}

/* ---------- articles ---------- */
.art-tete .art-meta{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.9rem;color:var(--dim);margin:.4rem 0 1rem}
.art-cover img{border-radius:var(--radius);box-shadow:var(--shadow)}

.auteur{background:var(--surface-2);border-block:1px solid var(--line);margin-top:3rem;padding-block:2.2rem}
.auteur-in{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);display:flex;gap:1.4rem;align-items:flex-start}
.auteur-img{border-radius:50%;flex:0 0 auto}
.auteur-ey{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:var(--primary);font-weight:600}
.auteur b{font-family:var(--font-display);font-size:1.12rem;display:block;margin-bottom:.3rem}
.auteur p{color:var(--muted);margin:0 0 .6rem;font-size:.96rem}
.auteur-cta{color:var(--primary-dark);font-weight:600}
.auteur-cta:hover{text-decoration:underline}

.liste-articles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem;padding-block:1rem 3rem}
.carte-art{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s, box-shadow .25s;display:flex;flex-direction:column}
.carte-art:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.carte-txt{padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.carte-txt h2{font-size:1.18rem;margin:0}
.carte-txt p{color:var(--muted);font-size:.95rem;margin:0}
.carte-lien{margin-top:auto;color:var(--primary-dark);font-weight:600}

.pagination,.nav-links{display:flex;gap:.5rem;justify-content:center;padding-block:2rem}
.page-numbers{padding:.55rem .9rem;border-radius:.6rem;border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.page-numbers.current{background:var(--primary);color:var(--sur-primaire);border-color:var(--primary)}

.page-404{padding-block:clamp(3rem,8vw,6rem);text-align:center}
.p404-liens{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.6rem}

/* ---------- pied ---------- */
.pied{background:var(--pied-fond);color:var(--pied-texte);margin-top:4rem;padding-block:3rem 1.5rem}
.pied a{color:var(--pied-texte)}
.pied a:hover{color:var(--primary-light)}
.pied h2{font-family:var(--font-display);font-size:.82rem;text-transform:uppercase;letter-spacing:.16em;color:var(--primary-light);margin-bottom:.9rem}
.pied-g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.95rem}
.pied .marque-txt{color:var(--sur-primaire);font-size:1.3rem}
.pied-marque p{color:var(--pied-attenue);font-size:.95rem;margin-top:.7rem;max-width:34ch}
.pied-zones p{color:var(--pied-attenue);font-size:.94rem;margin:0}
.pied-liste{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.95rem}
.pied-bas{border-top:1px solid var(--pied-ligne);margin-top:2.4rem;padding-top:1.2rem}
.pied-bas p{color:var(--pied-faible);font-size:.88rem;margin:0}
@media (max-width:900px){.pied-g{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pied-g{grid-template-columns:1fr}}

/* ---------- mouvement ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- pont vers rankit-widgets ----------
   Le plugin est generique et partage par toute la flotte : on ne le
   modifie pas, on lui traduit nos variables.

   Attention au faux ami : le plugin appelle --accent sa couleur
   PRINCIPALE, alors qu'ici --accent est le rouge tuile secondaire et
   que la principale s'appelle --primary. Sans la ligne ci-dessous,
   tous les widgets sortent rouges au lieu d'ambre, sans erreur visible.

   --line et --muted portent deja le meme sens des deux cotes : on ne
   les redeclare pas (une variable qui se cite elle-meme est un cycle,
   et la regle entiere serait ignoree).

   Les regles suivantes sont prefixees de body : le plugin pose des
   !important, et on ne sait pas laquelle des deux feuilles WordPress
   charge en dernier. Une specificite superieure tranche sans dependre
   de l'ordre. */
[data-rk]{
  --accent:var(--primary);
  --accent-soft:var(--accent-doux);
  --ink:var(--text);
  --fbody:var(--font-body);
  --fdisp:var(--font-display);
}

/* les 12 couleurs que le plugin ecrit en dur, ramenees a nos surfaces */
body .rk-faq[data-rk] .rk-faq-item{background:var(--surface-2)!important}
body .rk-faq[data-rk] .rk-faq-item[open]{background:var(--surface)!important}
body .rk-faq[data-rk] .rk-faq-answer{background:var(--surface)!important;color:var(--muted)!important}
body .rk-faq[data-rk] .rk-faq-answer p,
body .rk-faq[data-rk] .rk-faq-answer li{color:var(--muted)!important}
body .rk-checklist[data-rk],
body .rk-compare[data-rk],
body .rk-calculator[data-rk],
body .rk-counters[data-rk] .rk-counter,
body .rk-before-after[data-rk] .rk-after{background:var(--surface-2)}
body .rk-calculator[data-rk] .rk-calc-field select{background:var(--surface)}

/* =====================================================================
 * LES ARCHETYPES DE FORME
 *
 * Tout ce qui suit est porte par UNE feuille, identique sur toute la
 * flotte. Le site n'en active qu'une combinaison, via les classes que
 * functions.php pose sur le <body> depuis site.json.
 *
 * Pourquoi ici et pas dans l'habillage de chaque site : une variante
 * ajoutee ici profite a TOUS les sites suivants, sans en toucher un
 * seul. L'inverse — un CSS complet par site — c'est 150 feuilles a
 * maintenir, et 150 occasions d'inventer un selecteur qui ne peint rien.
 *
 * Un site sans classe d'archetype rend la variante par defaut : ombres
 * franches, alternance de fonds, aeree. Sobre, complet, jamais casse.
 * ===================================================================== */

/* ---------- EFFETS : comment une surface se detache du fond ---------- */

/* Verre depoli. Suppose un fond sombre ou teinte : sur un fond clair le
   flou n'a rien a diffuser et la carte disparait. */
.rk-effets-verre .carte,
.rk-effets-verre .sommaire,
.rk-effets-verre .faq details,
.rk-effets-verre .carte-art{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 32px -12px rgba(0,0,0,.5);
}
.rk-effets-verre .entete{
  background:rgba(var(--bg-rgb),.62);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.rk-effets-verre .dtable{background:rgba(255,255,255,.03)}
.rk-effets-verre .dtable th{background:rgba(255,255,255,.05)}

/* Halos colores. La lumiere vient de la couleur principale, pas d'une
   ombre grise. A reserver aux fonds sombres. */
.rk-effets-halo .carte,
.rk-effets-halo .carte-art{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 0 0 1px rgba(var(--primary-rgb),.10), 0 18px 48px -24px rgba(var(--primary-rgb),.55);
}
.rk-effets-halo .btn-primaire{
  box-shadow:0 0 28px -6px rgba(var(--primary-rgb),.75);
}
.rk-effets-halo .carte:hover{
  box-shadow:0 0 0 1px rgba(var(--primary-rgb),.28), 0 24px 60px -22px rgba(var(--primary-rgb),.75);
}
.rk-effets-halo .sommaire{box-shadow:0 0 32px -14px rgba(var(--primary-rgb),.5)}

/* Aplats. Aucune ombre nulle part : la hierarchie tient par le fond et
   l'espace. Le plus dur a reussir, le plus net quand il est reussi. */
.rk-effets-aplat .carte,
.rk-effets-aplat .sommaire,
.rk-effets-aplat .dtable,
.rk-effets-aplat .faq details,
.rk-effets-aplat .carte-art,
.rk-effets-aplat .btn,
.rk-effets-aplat .hero-img img,
.rk-effets-aplat .art-cover img{box-shadow:none}
.rk-effets-aplat .carte{background:var(--surface-2); border:0}
.rk-effets-aplat .carte:hover{transform:none; background:var(--accent-doux)}
.rk-effets-aplat .btn-primaire:hover,
.rk-effets-aplat .btn-accent:hover{transform:none; filter:brightness(1.08)}

/* Contours traces. Le trait porte tout : pas d'ombre, un filet net et une
   epaisseur assumee. Va bien avec les metiers de precision. */
.rk-effets-trace .carte,
.rk-effets-trace .sommaire,
.rk-effets-trace .faq details,
.rk-effets-trace .carte-art{
  background:var(--surface); box-shadow:none;
  border:1.5px solid var(--text);
}
.rk-effets-trace .carte:hover{transform:translateY(-2px); box-shadow:4px 4px 0 var(--primary)}
.rk-effets-trace .btn-primaire,
.rk-effets-trace .btn-accent{box-shadow:3px 3px 0 var(--text)}
.rk-effets-trace .btn-primaire:hover,
.rk-effets-trace .btn-accent:hover{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--text)}
.rk-effets-trace .btn-fantome{border:1.5px solid var(--text); box-shadow:none}
.rk-effets-trace .dtable{border:1.5px solid var(--text); box-shadow:none}

/* ---------- RYTHME : comment les sections se succedent ---------- */

/* Bandes pleine largeur. Une section sur trois passe en couleur pleine :
   le parcours se lit de loin, au defilement. */
.rk-rythme-bandes main > .section:nth-of-type(even){background:transparent}
.rk-rythme-bandes main > .section:nth-of-type(3n+2){
  background:var(--primary); color:var(--sur-primaire);
}
.rk-rythme-bandes main > .section:nth-of-type(3n+2) h2,
.rk-rythme-bandes main > .section:nth-of-type(3n+2) h3{color:var(--sur-primaire)}
.rk-rythme-bandes main > .section:nth-of-type(3n+2) p{color:rgba(255,255,255,.86)}
.rk-rythme-bandes main > .section:nth-of-type(3n+2) .carte{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); color:var(--sur-primaire);
}
.rk-rythme-bandes main > .section:nth-of-type(3n+3){background:var(--surface-2)}

/* Cartes flottantes. Le contenu est pose dans un panneau qui deborde du
   fond : plus editorial, plus aere. */
.rk-rythme-flottant main > .section{background:transparent; padding-block:clamp(1rem,2.5vw,1.8rem)}
.rk-rythme-flottant main > .section > .wrap{
  background:var(--surface); border-radius:calc(var(--radius) * 1.5);
  padding:clamp(1.5rem,4vw,2.8rem); box-shadow:var(--shadow);
}
.rk-rythme-flottant main > .section:nth-of-type(even) > .wrap{background:var(--surface-2)}
body.rk-rythme-flottant{background:var(--surface-2)}

/* Deux colonnes decalees. Le titre tient une colonne etroite, le contenu
   l'autre : la page se lit comme un document, pas comme une brochure. */
@media (min-width:900px){
  .rk-rythme-colonnes main > .section > .wrap{
    display:grid; grid-template-columns:minmax(180px,.32fr) 1fr; gap:clamp(1.6rem,4vw,3.4rem);
    align-items:start;
  }
  .rk-rythme-colonnes main > .section > .wrap > h2{
    grid-column:1; position:sticky; top:5.5rem; margin:0;
  }
  .rk-rythme-colonnes main > .section > .wrap > *:not(h2){grid-column:2}
  .rk-rythme-colonnes main > .section > .wrap > h2 ~ h2{grid-column:1}
}

/* ---------- DENSITE : le rythme vertical ---------- */
.rk-densite-compacte .section{padding-block:clamp(1.9rem,4vw,3.1rem)}
.rk-densite-compacte p{margin-bottom:.85em}
.rk-densite-compacte .grille{gap:.85rem}
.rk-densite-compacte .carte{padding:1.1rem}
.rk-densite-compacte h2{margin-bottom:.35em}
body.rk-densite-compacte{font-size:1rem; line-height:1.62}

.rk-densite-aeree .section{padding-block:clamp(3.6rem,9vw,7rem)}
.rk-densite-aeree .grille{gap:1.8rem}
.rk-densite-aeree .carte{padding:1.9rem}
.rk-densite-aeree p{margin-bottom:1.35em}

/* Le mouvement se coupe partout, y compris sur les variantes. */
@media (prefers-reduced-motion:reduce){
  .rk-effets-trace .carte:hover,
  .rk-effets-trace .btn-primaire:hover,
  .rk-effets-trace .btn-accent:hover{transform:none}
}