/* ==========================================================================
   Inertia Ingénierie - feuille de style unique.
   Ordre : jetons › base › accessibilité › animations › en-tête › pied ›
           composants › classes de mise en page.
   ========================================================================== */

/* --------------------------------------------------------------- Jetons -- */
:root{
  --ink:#222222;
  --paper:#F8F8F5;
  --paper-alt:#F1F0EA;
  --night:#181816;

  /* Deux verts : l'un pour les aplats et les tracés, l'autre pour le texte.
     #70844A ne passe pas le contraste AA en texte (3,88:1) - d'où #5C6E3D. */
  --green:#70844A;
  --green-text:#5C6E3D;
  --green-dark:#4E5F33;

  --line:rgba(34,34,34,.14);
  --line-soft:rgba(34,34,34,.12);
  --header-h:72px;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --gutter:clamp(20px,5vw,72px);
}

/* ----------------------------------------------------------------- Base -- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
p{margin:0}
a{color:var(--green-text);text-decoration:none}
a:hover{color:var(--green-dark)}
img{max-width:100%}
input,button,textarea,select{font-family:inherit}
::selection{background:var(--green);color:var(--paper)}
.page{width:100%;overflow-x:clip}

/* -------------------------------------------------------- Accessibilité -- */
:focus-visible{outline:2px solid var(--green-text);outline-offset:3px}
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;font-size:14px}
.skip-link:focus{left:0;color:var(--paper)}
[hidden]{display:none !important}

/* ----------------------------------------------------------- Animations -- */
@keyframes rev{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rev{animation:rev both;animation-timeline:view();animation-range:entry 2% cover 20%}
[data-anim="off"] .rev{animation:none !important;opacity:1 !important;transform:none !important}
@supports not (animation-timeline:view()){
  .rev{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
  .rev.is-in{opacity:1;transform:none}
}
@keyframes hvIn{from{opacity:0}to{opacity:1}}
.hv-sun{animation:hvIn .6s ease-out both;animation-delay:.15s}
.hv-ray{animation:hvIn .5s ease-out both;animation-delay:.46s}
.hv-air{animation:hvIn .55s ease-out both;animation-delay:.92s}
.hv-lab{animation:hvIn .5s ease-out both;animation-delay:1.3s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{animation:none !important;opacity:1 !important;transform:none !important}
  .hv-sun,.hv-ray,.hv-air,.hv-lab{animation:none}
}

/* -------------------------------------------------------------- En-tête -- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(248,248,245,.92);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--line);transition:box-shadow .3s ease,background .3s ease}
/* Une fois la page defilee, l'en-tete se detache legerement du contenu. */
html[data-scrolled] .site-header{background:rgba(248,248,245,.97);box-shadow:0 1px 16px rgba(34,34,34,.07)}
.site-header__inner{max-width:1240px;margin:0 auto;padding:16px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand__mark{display:block;flex:none;width:30px;height:37.5px}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-weight:500;font-size:19px;letter-spacing:.2em;color:var(--ink)}
.brand__sub{font-weight:400;font-size:10.5px;letter-spacing:.34em;color:var(--green-text);margin-top:3px}

.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,36px);justify-content:flex-end}
.nav__link{color:var(--ink);font-size:14px;letter-spacing:.02em}
.nav__link:hover{color:var(--green-text)}
.nav__link--cta{font-size:13.5px;font-weight:500;letter-spacing:.03em;border:1px solid rgba(34,34,34,.3);padding:9px 16px}
.nav-cta{transition:background .2s,color .2s,border-color .2s}
.nav-cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* État actif : piloté par data-nav sur <body>. */
body[data-nav="index"]         .nav__link[data-nav="index"],
body[data-nav="constructeurs"] .nav__link[data-nav="constructeurs"],
body[data-nav="hebergements"]  .nav__link[data-nav="hebergements"],
body[data-nav="journal"]       .nav__link[data-nav="journal"],
body[data-nav="philosophie"]   .nav__link[data-nav="philosophie"]{color:var(--green-text);font-weight:500}

.nav-toggle{display:none;align-items:center;gap:10px;background:none;border:1px solid rgba(34,34,34,.3);color:var(--ink);padding:9px 14px;font-size:13.5px;font-weight:500;letter-spacing:.03em;cursor:pointer}
.nav-toggle__bars{display:flex;flex-direction:column;gap:3px;width:16px}
.nav-toggle__bars i{display:block;height:1.5px;background:var(--ink);transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

@media (max-width:899px){
  .nav-toggle{display:inline-flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
       background:var(--paper);border-bottom:1px solid var(--line);padding:4px var(--gutter) 20px;
       box-shadow:0 18px 30px -22px rgba(24,24,22,.5);max-height:calc(100dvh - var(--header-h));overflow-y:auto}
  .nav[data-open="true"]{display:flex}
  .nav__link{padding:15px 2px;font-size:16px;border-bottom:1px solid var(--line-soft)}
  .nav__link--cta{margin-top:16px;border:1px solid rgba(34,34,34,.3);padding:14px 18px;text-align:center;font-size:15px}
}

/* ----------------------------------------------------------------- Pied -- */
.site-footer{background:var(--night)}
.site-footer__inner{max-width:1240px;margin:0 auto;padding:clamp(56px,6vw,88px) var(--gutter)}
.site-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px;align-items:start;padding-bottom:44px;border-bottom:1px solid rgba(248,248,245,.16)}
.site-footer__mark{display:block;margin-bottom:20px}
.site-footer__tagline{font-size:15px;line-height:1.6;color:rgba(248,248,245,.78);max-width:32ch}
.site-footer__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(248,248,245,.62);font-weight:500;margin:0 0 16px}
.site-footer__contact,.site-footer__nav{font-size:15px;line-height:1.9;color:rgba(248,248,245,.82)}
.site-footer a{color:rgba(248,248,245,.82)}
.site-footer__mail{color:var(--paper)}
.u-green:hover{color:#A8BC80}
.site-footer__social{margin:14px 0 0}
.site-footer__li{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:rgba(248,248,245,.82)}
.site-footer__li-text{text-decoration:underline;text-underline-offset:3px}
.site-footer__bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-top:26px}
.site-footer__legal{font-size:12.5px;color:rgba(248,248,245,.62)}

/* ----------------------------------------------------------- Composants -- */

/* Boutons et liens d'action */
.cta-green{transition:background .2s,border-color .2s}
.cta-green:hover{background:var(--green-dark);border-color:var(--green-dark);color:var(--paper)}
/* Bouton contour. Tout est dans la classe : une couleur posée en ligne dans le
   HTML l'emporterait sur la règle de survol, et le libellé disparaîtrait sur le
   fond sombre. C'est exactement ce qui arrivait avant. */
.cta-outline-dark{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;font-size:15px;
                  font-weight:500;letter-spacing:.02em;color:var(--ink);border:1px solid rgba(34,34,34,.3);
                  transition:background .2s,color .2s,border-color .2s}
.cta-outline-dark:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cta-outline-light{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;font-size:14.5px;
                   font-weight:500;letter-spacing:.02em;color:var(--paper);border:1px solid rgba(248,248,245,.3);
                   transition:background .2s,color .2s,border-color .2s}
.cta-outline-light:hover{background:var(--green-text);color:var(--paper);border-color:var(--green-text)}

.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(34,34,34,.18);background:#fff;padding:8px 14px;font-size:12.5px;letter-spacing:.02em;color:#333}
.badge b{width:6px;height:6px;background:var(--green);display:block}

.porte,.card{transition:border-color .25s,transform .25s}
.porte:hover,.card:hover{border-color:var(--green);transform:translateY(-3px)}

.illus{width:100%;height:auto;display:block}

/* Dépliants « en savoir plus » */
details.more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:var(--green-text);font-size:14.5px;font-weight:500}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"+";font-size:18px;line-height:1}
details.more[open]>summary::after{content:"–"}

/* FAQ */
#faq details{border-bottom:1px solid var(--line)}
#faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-weight:500;font-size:16.5px;letter-spacing:.005em;color:var(--ink)}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--green-text);flex:none;width:22px;text-align:center}
#faq details[open] summary::after{content:"–"}
#faq .faq-a{font-size:14.5px;line-height:1.65;color:rgba(34,34,34,.72);padding:0 0 24px;max-width:56ch}

/* Carrousel réalisations */
.ptrack{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(255px,1fr);gap:1px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;background:var(--line);border:1px solid var(--line)}
.ptrack::-webkit-scrollbar{display:none}
@media (min-width:760px){.ptrack{grid-auto-columns:calc((100% - 2px)/2)}}
@media (min-width:980px){.ptrack{grid-auto-columns:calc((100% - 3px)/3)}}
.pnav{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(34,34,34,.3);background:var(--paper);color:var(--ink);font-size:16px;line-height:1;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.pnav:hover{background:#fff;border-color:var(--green-text);color:var(--green-text)}
.pnav-row{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:18px}

/* Carte projet - générée depuis src/data/projets.json */
.card-proj{background:var(--paper);display:flex;flex-direction:column}
/* height:auto est indispensable : sans lui, les attributs width/height de la
   balise <img> l'emportent sur aspect-ratio et la carte devient trop haute. */
/* Les rendus de projet sont très contrastés. Un voile couleur papier et une
   désaturation légère les font tenir avec le reste de la page ; au survol,
   l'image reprend ses couleurs d'origine. */
.card-proj__media{position:relative;display:block;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.card-proj__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(248,248,245,.16) 0%,rgba(248,248,245,.08) 45%,rgba(241,240,234,.38) 100%);
  transition:opacity .55s ease}
.card-proj__img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  filter:saturate(.7) contrast(.9) brightness(1.03);
  transition:filter .55s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.card-proj:hover .card-proj__media::after{opacity:.35}
.card-proj:hover .card-proj__img{filter:none;transform:scale(1.025)}
@media (prefers-reduced-motion:reduce){
  .card-proj__img,.card-proj__media::after{transition:none}
  .card-proj:hover .card-proj__img{transform:none}
}
.card-proj__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-proj__cat{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-text);margin:0}
.card-proj__title{font-weight:500;font-size:16px;line-height:1.3;margin:0}
.card-proj__place{font-family:var(--mono);font-size:12px;color:rgba(34,34,34,.66);margin:0}
.card-proj__spec{font-size:13.5px;line-height:1.5;color:rgba(34,34,34,.72);margin:0}
.card-proj__spec--first{margin:6px 0 0}

/* Carte sujet du Journal - générée depuis src/data/journal.json */
.jgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card-sujet{background:var(--paper);padding:28px 28px 30px;display:flex;flex-direction:column;gap:12px;min-height:200px}
.card-sujet__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-sujet__status{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-text);font-weight:500}
.card-sujet__title{font-weight:500;font-size:17px;line-height:1.3;letter-spacing:-.005em;margin:8px 0 0}
.card-sujet__cat{font-size:12.5px;color:rgba(34,34,34,.62);margin-top:auto}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(34,34,34,.66);background:#fff;padding:5px 9px;border:1px solid var(--line)}

/* Aperçu du rapport */
dialog.zoom{border:1px solid rgba(34,34,34,.2);background:var(--paper);padding:clamp(16px,3vw,28px);max-width:min(640px,92vw);width:100%}
dialog.zoom::backdrop{background:rgba(24,24,22,.62)}

/* Titres d'illustration */
.hv-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(34,34,34,.6);margin:0 2px 10px;display:flex;align-items:center;gap:8px}
.hv-title::before{content:"";width:6px;height:6px;background:var(--green);flex:none}
.hv-mob{display:none}
@media (max-width:640px){.hv-desk{display:none}.hv-mob{display:block}}

/* ------------------------------------------------- Premier écran, accueil -- */
/* L'illustration n'est plus encadrée : son fond est exactement celui de la
   page (#F8F8F5), elle se pose donc directement dessus, sans filet ni légende. */
/* Le premier écran appartient au hero : la section occupe la hauteur de la
   fenêtre moins l'en-tête, la grille se centre dans l'espace restant et le
   bandeau de faits reste posé sur le bord bas. Les trois repères commerciaux
   (délai, prix, première étude) restent donc visibles sans scroller.
   100svh et non 100vh : sur mobile la barre d'URL ne coupe plus le bandeau.
   min-height et non height : sur un écran court, le contenu pousse. */
.hero-sec{display:flex;flex-direction:column;min-height:calc(100svh - var(--header-h))}
.hero-sec > .hero__grid{flex:1 1 auto}
@supports not (height:100svh){ .hero-sec{min-height:calc(100vh - var(--header-h))} }
/* Le hero a besoin d'environ 530 px pour respirer (titre sur trois lignes,
   repères, boutons, bandeau). En dessous de 640 px de fenêtre utile, le plein
   écran écraserait le titre : on rend la main au flux normal. Un 13 pouces
   reste au-dessus de ce seuil, il garde donc le premier écran complet. */
@media (max-height:640px){ .hero-sec{min-height:0} }
.hero__grid{max-width:1340px;margin:0 auto;padding:clamp(44px,6vw,88px) var(--gutter) clamp(28px,3.5vw,48px);
            display:grid;grid-template-columns:1fr;
            gap:clamp(24px,4vw,56px);align-items:center}
/* Au-delà de 900 px, l'illustration prend la part la plus large et déborde de
   la moitié de la gouttière : sa composition est très étalée, à colonnes égales
   la maison paraissait minuscule. */
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(22px,2.4vw,32px)}
  .hero__illu{margin-right:calc(var(--gutter) / -2)}
}
/* Accueil : le titre a grossi, il lui faut une colonne plus large, sinon
   « RE2020 pensées » casse sur une quatrième ligne. L'illustration reste plus
   large que le texte et gagne quand même en taille, la grille entière ayant
   pris 100 px. */
@media (min-width:900px){
  .hero-sec .hero__grid:not(.hero__grid--even){grid-template-columns:minmax(0,1fr) minmax(0,1.18fr)}
}
/* Plus l'écran est large, plus l'illustration mord dans la marge : au-delà de
   1400 px elle dépasse le cadre de 40 px, ce qui la pose comme une image de
   bord de page. Le débord reste borné pour garder au moins 35 px de marge. */
/* Page constructeurs : le titre est plus long que celui de l'accueil et
   l'illustration ne déborde pas - les deux colonnes sont donc plus proches. */
@media (min-width:900px){
  .hero__grid--even{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(28px,3.4vw,52px)}
}
@media (min-width:1240px){ .hero__illu{margin-right:calc(var(--gutter) * -0.75)} }
@media (min-width:1400px){ .hero__illu{margin-right:calc(var(--gutter) * -1 - 40px)} }
/* Le surtitre de l'accueil est long : légèrement resserré pour tenir sur une ligne. */
/* Le premier écran occupe toute la hauteur : à l'échelle précédente, calée sur
   un hero court, la composition flottait au milieu d'un grand vide. Tout le
   bloc monte d'un cran - surtitre, titre, repères, boutons et bandeau. */
.hero__grid .eyebrow--loose{font-size:11px;letter-spacing:.13em;text-wrap:balance}
.hero-sec .hero__h1{font-size:clamp(36px,4.8vw,68px);margin-bottom:24px}
.hero-sec .hero__creds{font-size:12.5px;padding-top:26px;margin-bottom:38px}
.hero-sec .hero__creds::before{width:72px}
.hero-sec .hero__cta .btn-solid{padding:18px 30px;font-size:16px}
.hero-sec .hero__cta .link-quiet{font-size:16px}
.hero-sec .hero__facts-in{font-size:11.5px;padding-top:22px;padding-bottom:22px}
.hero__h1{font-weight:500;font-size:clamp(34px,4.6vw,58px);line-height:1.03;letter-spacing:-.015em;margin:0 0 20px;text-wrap:balance}
.hero__lead{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:rgba(34,34,34,.78);max-width:42ch;margin:0 0 34px}
/* Les trois repères sous le titre, comme sur la bannière LinkedIn : un filet
   vert court, puis les chiffres en capitales espacées. */
.hero__creds{margin:0 0 34px;padding:22px 0 0;position:relative;display:flex;flex-wrap:wrap;
             gap:7px 28px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
             text-transform:uppercase;color:rgba(34,34,34,.72)}
.hero__creds::before{content:"";position:absolute;top:0;left:0;width:64px;height:2px;background:var(--green)}
/* Un point médian entre les repères. Il était posé en ::before sur le repère
   suivant, avec une marge négative : quand la ligne passait sur deux lignes -
   ce qui arrive presque toujours en bureau, la colonne du titre ne fait que
   ~490 px - le point se retrouvait seul en tête de la deuxième ligne, décalé
   à gauche du texte. Une media query ne sait pas voir un retour à la ligne.
   Le séparateur appartient donc maintenant au repère qui le précède : il
   termine la première ligne au lieu d'ouvrir la seconde. */
.hero__creds{gap:7px 0}
.hero__creds span{white-space:nowrap}
.hero__creds span:not(:last-child)::after{content:"·";padding:0 13px;color:rgba(34,34,34,.38)}
@media (max-width:860px){
  .hero__creds span:not(:last-child)::after{padding:0 9px}
}

/* Portrait de la section « Qui est derrière » */
.portrait{display:flex;align-items:center;gap:24px;margin:0 0 26px;flex-wrap:wrap}
.portrait__img{width:clamp(150px,17vw,220px);height:clamp(150px,17vw,220px);object-fit:cover;
               border:1px solid rgba(34,34,34,.18);display:block}

/* Premier écran de la page Philosophie : le portrait occupe une colonne entière. */
.philo-hero{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px);align-items:start;
            margin:0}
.philo-portrait{margin:0}
.philo-portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;
                    display:block;border:1px solid rgba(34,34,34,.18)}
@media (min-width:900px){
  .philo-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.hero__cta{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center}
.hero__illu img{width:100%;height:auto;display:block}
.hero__facts{border-top:1px solid var(--line)}
.hero__facts-in{max-width:1240px;margin:0 auto;padding:18px var(--gutter);display:flex;flex-wrap:wrap;
                gap:10px 44px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
                text-transform:uppercase;color:rgba(34,34,34,.58)}
/* Philosophie : cinq mentions au lieu de deux ou trois. On resserre la chasse
   et l'espacement pour que le bandeau tienne sur une ligne au format bureau ;
   en dessous, le retour à la ligne reprend la main tout seul. */
.hero__facts-in--tight{gap:10px clamp(12px,2vw,28px);font-size:10.5px;letter-spacing:.08em}

/* Second appel à l'action : un lien, pas un bouton - il ne doit pas rivaliser
   avec « Parlons de vos projets ». */
.link-quiet{color:var(--ink);font-size:15px;font-weight:500;letter-spacing:.02em;
            text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;
            text-decoration-color:rgba(34,34,34,.35)}
.link-quiet:hover{text-decoration-color:var(--ink)}

/* --------------------------------------------------------- Mise en page -- */
/* Ces classes remplacent les styles en ligne les plus répétés des pages.     */

.sec{border-bottom:1px solid var(--line)}
.sec--alt{background:var(--paper-alt)}

.wrap{max-width:1240px;margin:0 auto;padding:clamp(56px,7vw,104px) var(--gutter)}
.wrap--sm{max-width:1240px;margin:0 auto;padding:clamp(56px,7vw,96px) var(--gutter)}
.wrap--xs{max-width:1240px;margin:0 auto;padding:clamp(56px,6vw,88px) var(--gutter)}
.wrap--hero{max-width:1240px;margin:0 auto;padding:clamp(48px,7vw,96px) var(--gutter) clamp(40px,5vw,72px)}

.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(36px,5vw,72px);align-items:center}
.split--start{align-items:start}
.split--wide{gap:clamp(40px,5vw,80px)}

.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--green-text);font-weight:500;margin:0 0 18px}
.eyebrow--flush{margin-bottom:0}
.eyebrow--loose{margin-bottom:22px}

.sec-head{margin:0 0 clamp(28px,3.5vw,44px);max-width:56ch}
.h2{font-weight:500;font-size:clamp(24px,3vw,38px);line-height:1.1;letter-spacing:-.01em;margin:0;text-wrap:balance}
.h2--mb{margin:0 0 18px}
.lead{font-size:15.5px;line-height:1.7;color:rgba(34,34,34,.75)}
.mono{font-family:var(--mono);font-size:12px;color:var(--green-text)}
.mono--mb{margin:0 0 12px}

.panel{background:var(--paper);padding:28px clamp(18px,1.9vw,26px)}
/* Le périmètre compte cinq entrées. Le nombre de colonnes est fixé par palier -
   et la dernière carte s'étale sur la place restante - pour qu'aucune rangée
   incomplète ne laisse un trou gris au milieu du tableau. */
.perimetre{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
           grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1179px){
  .perimetre{grid-template-columns:repeat(3,minmax(0,1fr))}
  .perimetre>:last-child{grid-column:span 2}
}
@media (max-width:819px){ .perimetre{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:559px){
  .perimetre{grid-template-columns:minmax(0,1fr)}
  .perimetre>:last-child{grid-column:auto}
}
/* Même tableau que .perimetre, mais calibré pour trois entrées : à cinq
   colonnes, deux cellules vides laissaient apparaître le fond de la grille. */
.trio{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
      grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:819px){ .trio{grid-template-columns:minmax(0,1fr)} }
.row{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.tick{width:7px;height:7px;background:var(--green);flex:none;margin-top:7px}
.rule{flex:1;height:1px;background:rgba(34,34,34,.16)}

/* ------------------------------------------------------------ Utilitaires */
/* Petite couche utilitaire : ce sont les valeurs qui revenaient le plus
   souvent en style="" dans les pages. Noms volontairement descriptifs
   (taille / rôle) plutôt que sémantiques, car elles servent dans des
   contextes différents. */

.txt{font-size:14px;line-height:1.6;color:rgba(34,34,34,.7)}
.txt-sm{font-size:13.5px;line-height:1.5;color:rgba(34,34,34,.62);margin:0}
.txt-sm2{font-size:13.5px;line-height:1.55;color:rgba(34,34,34,.65);margin:0}
.txt-xs{font-size:13px;line-height:1.5;color:rgba(34,34,34,.62)}
.txt-xxs{font-size:12.5px;line-height:1.4;color:rgba(34,34,34,.62);margin:0}

.h-xs{font-weight:500;font-size:14.5px;margin:0 0 2px}
.h-sm{font-weight:500;font-size:16px;margin:0 0 3px}
.h-sm2{font-weight:500;font-size:16px;line-height:1.3;margin:0 0 8px}
.h-md{font-weight:500;font-size:17px;margin:0 0 8px}
.h-lg{font-weight:500;font-size:18px;line-height:1.25;margin:0 0 10px}

.stat{font-weight:500;font-size:26px;color:var(--green-text);margin:0 0 14px}
.num{font-family:var(--mono);font-size:13px;color:var(--green-text);flex:none}
.mono-xs{font-family:var(--mono);font-size:11.5px;color:var(--green-text);margin:0 0 14px}

.panel-lg{background:var(--paper);padding:26px 26px 28px}

/* Grille « Pourquoi me confier vos études » : cinq blocs, 3 puis 2.
   Sans la règle à six colonnes, le cinquième bloc reste seul sur sa ligne. */
.grid-5{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:680px){.grid-5{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){
  .grid-5{grid-template-columns:repeat(6,1fr)}
  .grid-5>*{grid-column:span 2}
  .grid-5>*:nth-child(n+4){grid-column:span 3}
}

/* Les modalités : délai, tarif, modifications, dossier. */
.modalites{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
           background:var(--line);border:1px solid var(--line)}
.modalites__k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
              color:var(--green-text);margin:0 0 12px}
.modalites__v{font-weight:500;font-size:clamp(20px,2.1vw,25px);line-height:1.1;letter-spacing:-.01em;
              margin:0 0 12px}
.panel-xs{background:var(--paper);padding:18px 16px}
.panel-row{background:var(--paper);padding:18px 24px;font-size:15px;line-height:1.5;display:flex;gap:14px;align-items:flex-start}

.btn-solid{display:inline-flex;align-items:center;gap:12px;background:var(--green-text);color:var(--paper);padding:16px 26px;font-size:15px;font-weight:500;letter-spacing:.02em;border:1px solid var(--green-text)}
.li-row{display:flex;align-items:center;gap:12px;font-size:14.5px}

/* ---------------------------------------------------------------- Tarifs -- */
.tarif-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:24px}
.tarif-card{border:1px solid rgba(34,34,34,.18);background:#fff;padding:clamp(24px,3vw,34px);
            display:flex;flex-direction:column}
.tarif-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 0 12px}
.tarif-card__t{font-weight:500;font-size:18px;line-height:1.25;margin:0}
.tarif-card__p{font-weight:500;font-size:20px;color:var(--green-text);white-space:nowrap;margin:0}
.tarif-card__txt{font-size:14px;line-height:1.6;color:rgba(34,34,34,.72);margin:0 0 14px}
.tarif-card__note{font-size:13px;line-height:1.5;color:rgba(34,34,34,.6);margin-top:auto;
                  border-top:1px solid var(--line-soft);padding-top:14px}

/* Les trois paliers du tarif partenaire */
.paliers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
         background:var(--line);border:1px solid var(--line)}
.palier{background:#fff;padding:26px clamp(20px,2.4vw,30px)}
.palier--fort{background:var(--paper-alt)}
.palier__n{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
           color:var(--green-text);margin:0 0 14px}
.palier__vol{font-size:14.5px;line-height:1.5;color:rgba(34,34,34,.72);margin:0 0 16px;min-height:2.9em}
.palier__p{font-weight:500;font-size:clamp(28px,3.2vw,38px);line-height:1;color:var(--green-text);margin:0}
.palier__p span{font-size:14px;color:rgba(34,34,34,.6);font-weight:400}

/* Pictogramme en tête de section */
.sec-icon{display:block;margin:0 0 16px}

/* Barre de raccourcis vers les offres, en tête de la page Tarifs */
.jump{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.jump a{display:inline-flex;align-items:center;border:1px solid rgba(34,34,34,.22);background:#fff;
        padding:10px 16px;font-size:13.5px;letter-spacing:.01em;color:var(--ink);
        transition:background .2s,color .2s,border-color .2s}
.jump a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Le raccourci mis en avant : l'offre partenaire est la porte principale. */
.jump .jump__fort{background:var(--green-text);border-color:var(--green-text);color:var(--paper);font-weight:500}
.jump .jump__fort:hover{background:var(--green-dark);border-color:var(--green-dark);color:var(--paper)}

/* Les règles du tarif partenaire : trois lignes, pas trois paragraphes. */
.regles{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.regles li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:rgba(34,34,34,.78)}
.regles li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--green)}
.tick-flush{width:7px;height:7px;background:var(--green);flex:none}
.rule-top{border-top:1px solid var(--ink);padding-top:22px}
.bg-night{background:var(--night)}

/* ----------------------------------------------------------- Formulaire -- */
/* Le formulaire fonctionne sans JavaScript : POST classique vers Web3Forms,
   qui renvoie sur merci.html. app.js n'ajoute que l'état du bouton. */

.form{max-width:560px}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
@media (max-width:560px){.form__grid{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:6px;margin:0}
.field--full{grid-column:1/-1}
.field__label{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:rgba(34,34,34,.7);font-weight:500}
.field__label abbr{color:var(--green-text);text-decoration:none;border:0}

.field__input{width:100%;border:1px solid rgba(34,34,34,.28);background:#fff;color:var(--ink);
  padding:12px 14px;font-size:15px;line-height:1.4;border-radius:0;
  transition:border-color .18s,box-shadow .18s}
.field__input:hover{border-color:rgba(34,34,34,.45)}
.field__input:focus{outline:none;border-color:var(--green-text);box-shadow:0 0 0 3px rgba(92,110,61,.16)}
.field__input:focus-visible{outline:none}
.field__input--area{resize:vertical;min-height:104px;font-size:15px}
.field__input::placeholder{color:rgba(34,34,34,.52)}

/* select : on remet une flèche, celle du système disparaît avec appearance:none */
select.field__input{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C6E3D' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:38px}

/* état d'erreur, posé par app.js après une tentative d'envoi */
.field__input[aria-invalid="true"]{border-color:#A8412F;background:#FEF9F8}
.field__error{font-size:12.5px;color:#8F3626;margin:0}

/* Pièces jointes - widget Uploadcare, aligné sur la charte du formulaire.
   Le conteneur est masqué tant que le widget n'est pas chargé (app.js le
   révèle), pour ne pas laisser un trou dans la grille si le CDN ne répond pas. */
.field--files{gap:8px}
.field__hint{font-size:12.5px;line-height:1.5;color:rgba(34,34,34,.6);max-width:46ch;margin:0}
.upload{display:block}
.upload[hidden]{display:none}
uc-file-uploader-minimal{
  display:block;
  --uc-font-family:inherit;
  --uc-font-size:14px;
  --uc-radius:0px;
  --uc-primary-light:var(--green-text);
  --uc-foreground-light:var(--ink);
  --uc-background-light:#ffffff;
  --uc-border-light:rgba(34,34,34,.28);
}
.form__attente{margin-top:4px}

.form__actions{margin:26px 0 0}
.form__submit{border:0;cursor:pointer;font-size:15px}
.form__submit[disabled]{opacity:.6;cursor:progress}
.form__note{font-size:13.5px;line-height:1.55;color:rgba(34,34,34,.7);margin:14px 0 0;max-width:46ch}
.form__legal{font-size:12.5px;line-height:1.5;color:rgba(34,34,34,.62);margin:10px 0 0;max-width:52ch}

/* Bandeau d'alerte si la clé Web3Forms n'a pas encore été renseignée */
.form__setup{background:#FDF6E7;border:1px solid #D9B65B;padding:14px 16px;margin:0 0 20px;
  font-size:13.5px;line-height:1.55;color:#5B4718;max-width:46ch}


/* ------------------------------------------------------- Figure pleine largeur */
/* Grande illustration technique présentée comme une planche : cadre blanc,
   légende en monospace sous l'image. */
.figure-band{border:1px solid var(--line);background:#fff;padding:clamp(10px,1.4vw,18px)}
.figure-band__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.figure-band__img{width:100%;height:auto;display:block}
.figure-band__cap{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:rgba(34,34,34,.62);margin:12px 2px 2px;display:flex;flex-wrap:wrap;gap:4px 20px}
.figure-band__hint{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--green-text);margin:10px 2px 0}
/* Sous 760 px, ces planches deviennent illisibles réduites : on les laisse
   à une largeur lisible et on fait glisser horizontalement dans le cadre. */
@media (max-width:760px){
  /* width:100% reste, min-width fait le plancher : l'image s'affiche à 760 px
     et non à sa largeur intrinsèque de 1760 px. */
  .figure-band__img{max-width:none;min-width:760px}
  .figure-band__hint{display:block}
}
.field__opt{font-weight:400;text-transform:none;letter-spacing:0;color:rgba(34,34,34,.5);font-size:12px}


/* Le parcours en cinq étapes (page constructeurs) : une seule ligne dès qu'il y a
   la place, sinon 3 puis 2 puis 1. La grille auto-fit ne tenait qu'à quatre
   colonnes et renvoyait la cinquième étape seule à la ligne suivante. */
.etapes{display:grid;grid-template-columns:1fr;gap:24px}
.etape__t{font-weight:500;font-size:17px;margin:0 0 10px;line-height:1.25}
.etape__d{font-size:14px;line-height:1.6;color:rgba(34,34,34,.72);margin:0}
@media (min-width:560px){ .etapes{grid-template-columns:repeat(2,1fr);gap:28px 26px} }
@media (min-width:820px){ .etapes{grid-template-columns:repeat(3,1fr);gap:30px 28px} }
@media (min-width:1060px){
  .etapes{grid-template-columns:repeat(5,1fr);gap:0 22px}
  .etape__t{font-size:15.5px;margin-bottom:8px}
  .etape__d{font-size:13px;line-height:1.55}
}

/* ------------------------------------------------------------ Journal
   Deux carnets - réglementation d'un côté, Riverback de l'autre. La bascule
   ne change pas de page : elle filtre les articles et l'accent de couleur.
   Vert pour la réglementation, terre pour Riverback. */
:root{--terre:#99663D;--terre-clair:rgba(153,102,61,.09);--sable:#F7F0E7;--sable-alt:#F0E6D9}
.jbasc-row{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:760px){ .jbasc-row{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} }
.jbasc{display:block;width:100%;text-align:left;background:var(--paper);border:0;cursor:pointer;
       padding:clamp(24px,3vw,34px);font:inherit;color:var(--ink);
       border-top:3px solid transparent;transition:background .18s,border-color .18s}
.jbasc:hover{background:#fff}
.jbasc__label{display:block;font-weight:500;font-size:clamp(18px,1.9vw,22px);line-height:1.2;margin-bottom:10px}
.jbasc__txt{display:block;font-size:14px;line-height:1.6;color:rgba(34,34,34,.7);max-width:44ch}
.jbasc__n{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
          text-transform:uppercase;color:rgba(34,34,34,.5)}
.jbasc.is-on{background:#fff;border-top-color:var(--green)}
.jbasc.is-on .jbasc__label{color:var(--green-text)}
.jbasc[data-univers="riverback"].is-on{border-top-color:var(--terre)}
.jbasc[data-univers="riverback"].is-on .jbasc__label{color:var(--terre)}

.june-wrap{display:block}
.june{border:1px solid rgba(34,34,34,.18);border-left:3px solid var(--green);background:#fff;
      padding:clamp(26px,3.2vw,40px);max-width:78ch}
.june[data-univers="riverback"]{border-left-color:var(--terre)}
.june__t{font-weight:500;font-size:clamp(20px,2.3vw,29px);line-height:1.18;letter-spacing:-.01em;margin:0 0 14px}
.june__c{font-size:15.5px;line-height:1.7;color:rgba(34,34,34,.75);margin:0 0 18px;max-width:60ch}

.jtags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(24px,3vw,34px)}
.jtag{font:inherit;font-size:13px;line-height:1;padding:9px 14px;cursor:pointer;color:rgba(34,34,34,.7);
      background:transparent;border:1px solid rgba(34,34,34,.22);transition:all .16s}
.jtag:hover{border-color:var(--green-text);color:var(--green-text)}
.jtag.is-on{background:var(--green-text);border-color:var(--green-text);color:var(--paper)}
[data-univers-actif="riverback"] .jtag:hover{border-color:var(--terre);color:var(--terre)}
[data-univers-actif="riverback"] .jtag.is-on{background:var(--terre);border-color:var(--terre);color:var(--paper)}

.jgrid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
/* auto-fit et non auto-fill : avec un seul article, la piste vide se replie
   au lieu de laisser une case de fond visible. */
@media (min-width:700px){ .jgrid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} }
@media (min-width:1080px){ .jgrid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))} }
.jcard{background:var(--paper);padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column}
.jcard__meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
             color:var(--green-text);margin:0 0 12px}
.jcard[data-univers="riverback"] .jcard__meta{color:var(--terre)}
.jcard__t{font-weight:500;font-size:17px;line-height:1.28;margin:0 0 10px}
.jcard__c{font-size:14px;line-height:1.6;color:rgba(34,34,34,.72);margin:0 0 16px}
.jcard__foot{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:auto 0 0;
             font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
             color:rgba(34,34,34,.5)}
.jcard__soon{border:1px solid rgba(34,34,34,.2);padding:3px 8px;color:rgba(34,34,34,.55)}
.jvide{margin:26px 0 0;font-size:14.5px;color:rgba(34,34,34,.6)}

/* Le carnet Riverback change l'ambiance de la page, pas seulement l'accent :
   les trois sections du journal passent sur un fond sable. */
[data-univers-actif="riverback"] #carnets,
[data-univers-actif="riverback"] #articles{background:var(--sable-alt)}
[data-univers-actif="riverback"] #une{background:var(--sable)}
[data-univers-actif="riverback"] .jbasc,
[data-univers-actif="riverback"] .jcard{background:var(--sable)}
[data-univers-actif="riverback"] .jbasc:hover,
[data-univers-actif="riverback"] .jbasc.is-on,
[data-univers-actif="riverback"] .june{background:#FDFAF6}
[data-univers-actif="riverback"] .jbasc-row,
[data-univers-actif="riverback"] .jgrid{background:rgba(153,102,61,.22);border-color:rgba(153,102,61,.22)}
[data-univers-actif="riverback"] .june,
[data-univers-actif="riverback"] .jtag{border-color:rgba(153,102,61,.3)}
[data-univers-actif="riverback"] .rule{background:rgba(153,102,61,.3)}
[data-univers-actif="riverback"] .eyebrow,
[data-univers-actif="riverback"] .eyebrow--flush{color:var(--terre)}
#carnets,#une,#articles{transition:background .25s ease}

/* ------------------------------------------------------- Journal : cartes
   Depuis que les articles ont une page, le titre et le pied de carte sont
   cliquables, et l'article à la une porte son image. */
.june--img{padding:0;display:grid;grid-template-columns:1fr;overflow:hidden}
.june__img{display:block;overflow:hidden}
.june__img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
               transition:transform .5s ease}
.june--img:hover .june__img img{transform:scale(1.03)}
.june__corps{padding:clamp(26px,3.2vw,40px)}
@media (min-width:900px){
  .june--img{grid-template-columns:minmax(0,45%) minmax(0,1fr)}
  .june__img img{height:100%;aspect-ratio:auto;object-fit:cover}
}
.june__t a,.jcard__t a{color:inherit}
.june__t a:hover,.jcard__t a:hover{color:var(--green-text)}
[data-univers-actif="riverback"] .june__t a:hover,
[data-univers-actif="riverback"] .jcard__t a:hover{color:var(--terre)}
.jcard__go{font:inherit;letter-spacing:inherit;color:var(--green-text);white-space:nowrap}
[data-univers-actif="riverback"] .jcard__go{color:var(--terre)}

/* ------------------------------------------------------------ Article
   Colonne de lecture étroite, images un cran plus larges que le texte,
   légendes discrètes. Le carnet Riverback teinte accents et fonds. */
.art{--accent:var(--green-text)}
.art[data-univers="riverback"]{--accent:var(--terre);background:var(--sable)}
.art[data-univers="riverback"] .sec--alt{background:var(--sable-alt)}
.art .eyebrow{color:var(--accent)}
.art .eyebrow a{color:inherit}
.art__tete{max-width:62ch}
.art__titre{font-weight:500;font-size:clamp(28px,4vw,50px);line-height:1.05;letter-spacing:-.018em;
            margin:0 0 20px;text-wrap:balance}
.art__chapo{font-size:clamp(16px,1.7vw,19px);line-height:1.65;color:rgba(34,34,34,.75);
            margin:0 0 26px;max-width:56ch}
.art__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--mono);font-size:10.5px;
           letter-spacing:.14em;text-transform:uppercase;color:rgba(34,34,34,.5);margin:0}

/* Tout est calé sur le même bord gauche que le titre et le reste du site :
   colonne de lecture à 41rem, images un cran plus larges à 53rem. Les mesures
   sont en rem et non en ch - un ch dépend de la taille du texte, un titre et un
   paragraphe n'auraient donc pas la même largeur. */
.art__corps{max-width:1240px;margin:0 auto;padding:clamp(34px,4.5vw,58px) var(--gutter) clamp(48px,6vw,84px)}
.art__corps>*{max-width:41rem;margin-left:0;margin-right:0}
.art__corps p{font-size:17px;line-height:1.75;color:rgba(34,34,34,.86);margin:0 0 1.15em}
.art__corps strong{font-weight:600;color:var(--ink)}
.art__h2{font-weight:500;font-size:clamp(21px,2.4vw,29px);line-height:1.2;letter-spacing:-.012em;
         margin:2.1em 0 .7em}
.art__h3{font-weight:500;font-size:clamp(17px,1.9vw,21px);line-height:1.3;margin:1.8em 0 .6em}
.art__ul{margin:0 0 1.4em;padding-left:1.15em}
.art__ul li{font-size:17px;line-height:1.7;color:rgba(34,34,34,.86);margin:0 0 .5em}
.art__ul li::marker{color:var(--accent)}
.art__hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.art__hero,.art__fig{margin:0 0 2em;max-width:53rem}
.art__fig{margin-top:2.4em}
.art__hero img,.art__fig img{display:block;width:100%;height:auto}
.art__fig figcaption{margin:10px 0 0;font-size:13px;line-height:1.55;color:rgba(34,34,34,.6);max-width:41rem}

.art__fin{max-width:1240px;margin:0 auto;padding:clamp(44px,5vw,72px) var(--gutter)}
.art__auteur{font-size:15.5px;line-height:1.7;color:rgba(34,34,34,.78);max-width:60ch;margin:0 0 26px}
.art__retour{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:11px;
             letter-spacing:.14em;text-transform:uppercase}

/* Tableaux d'article. Le conteneur défile horizontalement sur mobile plutôt
   que de faire déborder la page ; les colonnes de chiffres sont alignées à
   droite et en chiffres tabulaires pour que les ordres de grandeur se lisent. */
.art__tw{max-width:53rem;margin:0 0 2em;overflow-x:auto;-webkit-overflow-scrolling:touch}
.art__t{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.45}
.art__t th,.art__t td{padding:9px 14px 9px 0;text-align:left;vertical-align:top;
                      border-bottom:1px solid var(--line-soft)}
.art__t thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
                 text-transform:uppercase;color:rgba(34,34,34,.55);font-weight:400;
                 border-bottom:1px solid rgba(34,34,34,.28);padding-bottom:8px;white-space:nowrap}
.art__t tbody th{font-weight:500;color:var(--ink);padding-right:24px}
.art__t td{color:rgba(34,34,34,.8)}
.art__t .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:0}
.art__t tbody tr:last-child th,.art__t tbody tr:last-child td{border-bottom:0}
.art__t tbody tr:hover td,.art__t tbody tr:hover th{background:rgba(0,0,0,.02)}

/* Grille du Journal : les traits étaient dessinés par le fond du conteneur qui
   transparaissait dans les gouttières. Dès qu'une rangée est incomplète, les
   cases vides apparaissaient donc en gris. Le trait est maintenant porté par
   chaque carte (box-shadow, qui ne prend pas de place), et le conteneur n'a
   plus de fond : une rangée incomplète ne laisse plus rien voir. */
.jgrid{background:transparent;border:0;gap:1px}
.jcard{box-shadow:0 0 0 1px var(--line)}
.art__hero figcaption{margin:10px 0 0;font-size:13px;line-height:1.55;color:rgba(34,34,34,.6);max-width:41rem}

/* Bloc dépliant dans un article : un tableau de détail que le lecteur ouvre
   s'il en a besoin, sans couper le fil de lecture. */
.art__det{max-width:53rem;margin:0 0 2em;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.art__det summary{cursor:pointer;list-style:none;padding:15px 0;font-family:var(--mono);font-size:11px;
                  letter-spacing:.14em;text-transform:uppercase;color:var(--accent,var(--green-text))}
.art__det summary::-webkit-details-marker{display:none}
.art__det summary::after{content:" +";font-family:var(--mono)}
.art__det[open] summary::after{content:" −"}
.art__det summary:hover{color:var(--ink)}
.art__det[open] summary{border-bottom:1px solid var(--line-soft)}
.art__det>*:not(summary){margin-top:22px}
.art__det .art__tw{margin-bottom:1.4em}

/* Citation en exergue dans un article : sert à isoler la question ou la phrase
   sur laquelle on veut que le lecteur s'arrête. */
.art__cit{margin:1.9em 0;padding:0 0 0 24px;border-left:3px solid var(--accent,var(--green-text));max-width:41rem}
.art__cit p{font-size:19px;line-height:1.6;color:var(--ink);margin:0}
.art__ol{margin:0 0 1.4em;padding-left:1.4em}
.art__ol li{font-size:17px;line-height:1.7;color:rgba(34,34,34,.86);margin:0 0 .5em}
.art__ol li::marker{color:var(--accent,var(--green-text));font-weight:500}

/* ---------------------------------------------- Navigation d'un article -- */
/* Une barre discrète sous l'en-tête du site : sur un article long, le lecteur
   ne doit pas avoir à remonter tout en haut pour revenir au journal. */
.art__fil{position:sticky;top:var(--header-h);z-index:40;
          background:rgba(248,248,245,.94);backdrop-filter:saturate(120%) blur(6px);
          border-bottom:1px solid var(--line)}
.art[data-univers="riverback"] .art__fil{background:rgba(247,240,231,.94)}
.art__fil-in{max-width:1240px;margin:0 auto;padding:10px var(--gutter);
             display:flex;flex-wrap:wrap;gap:4px 20px;align-items:baseline;
             justify-content:space-between;
             font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.art__fil-retour{display:inline-flex;align-items:center;gap:9px;color:rgba(34,34,34,.62)}
.art__fil-retour:hover{color:var(--accent)}
.art__fil-fleche{display:inline-block;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.art__fil-retour:hover .art__fil-fleche{transform:translateX(-4px)}
.art__fil-carnet{color:var(--accent)}
@media (max-width:560px){ .art__fil-carnet{display:none} }

/* ------------------------------------------------------ Article suivant -- */
.art__suite{max-width:1240px;margin:0 auto;padding:clamp(30px,3.6vw,50px) var(--gutter) clamp(38px,4.5vw,64px)}
.art__suite .eyebrow{margin:0 0 16px}
.artnext{display:grid;grid-template-columns:1fr;overflow:hidden;background:#fff;color:var(--ink);
         border:1px solid var(--line);border-left:3px solid var(--accent);
         transition:border-color .2s ease,box-shadow .2s ease,transform .12s ease}
.art[data-univers="riverback"] .artnext{background:#FDFAF6}
.artnext:hover{color:var(--ink);border-color:rgba(34,34,34,.28);border-left-color:var(--accent);
               box-shadow:0 16px 32px -24px rgba(24,24,22,.6)}
.artnext:active{transform:translateY(1px) scale(.994)}
.artnext:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.artnext__img{display:block;overflow:hidden}
.artnext__img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
                  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.artnext:hover .artnext__img img{transform:scale(1.04)}
.artnext__corps{display:block;padding:clamp(24px,3vw,36px)}
.artnext__meta{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
               text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.artnext__t{display:block;font-weight:500;font-size:clamp(19px,2.1vw,26px);line-height:1.2;
            letter-spacing:-.01em;margin:0 0 12px;text-wrap:balance}
.artnext__c{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
            font-size:15px;line-height:1.65;color:rgba(34,34,34,.72);margin:0 0 20px;max-width:56ch}
.artnext__go{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;
             letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.artnext__fleche{display:inline-block;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.artnext:hover .artnext__fleche{transform:translateX(7px)}
.artnext:active .artnext__fleche{transform:translateX(16px)}
@media (min-width:760px){
  .artnext{grid-template-columns:minmax(0,38%) minmax(0,1fr)}
  .artnext__img img{height:100%;aspect-ratio:auto}
}
@media (prefers-reduced-motion:reduce){
  .artnext,.artnext__img img,.artnext__fleche,.art__fil-fleche{transition:none}
  .artnext:active,.artnext:hover .artnext__img img,
  .artnext:hover .artnext__fleche,.artnext:active .artnext__fleche,
  .art__fil-retour:hover .art__fil-fleche{transform:none}
}

/* --------------------------------------- Bandeau de consentement (audience) --
   Injecté par app.js uniquement tant qu'aucun choix n'a été fait, ou à la
   demande via le lien « Cookies » du pied de page. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--night);color:var(--paper);border-top:1px solid rgba(248,248,245,.14);animation:consentIn .35s ease-out both}
@keyframes consentIn{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.consent{animation:none}}
.consent__inner{max-width:1180px;margin:0 auto;padding:20px var(--gutter);display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.consent__text{font-size:14px;line-height:1.6;max-width:74ch;color:rgba(248,248,245,.86)}
.consent__text a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.consent__actions{display:flex;gap:10px;flex-shrink:0}
.consent__btn{cursor:pointer;font-size:14px;line-height:1;padding:12px 20px;border:1px solid rgba(248,248,245,.32);background:transparent;color:var(--paper);transition:background .2s ease,border-color .2s ease}
.consent__btn:hover{background:rgba(248,248,245,.1);border-color:rgba(248,248,245,.5)}
.consent__btn--yes{background:var(--green);border-color:var(--green);color:var(--paper);font-weight:600}
.consent__btn--yes:hover{background:var(--green-dark);border-color:var(--green-dark)}
.consent :focus-visible{outline:2px solid var(--paper);outline-offset:3px}
@media (max-width:640px){
  .consent__inner{flex-direction:column;align-items:stretch;gap:16px;padding:18px var(--gutter)}
  .consent__actions{justify-content:stretch}
  .consent__btn{flex:1}
}

/* ----------------------------------------------- Page de remerciement -- */
/* Quatre pistes de lecture, deux par deux : à quatre de front le texte des
   cartes devient illisible, à une seule colonne la page s'allonge pour rien. */
.merci-suite{display:grid;grid-template-columns:1fr;gap:1px;
             background:var(--line);border:1px solid var(--line)}
@media (min-width:760px){ .merci-suite{grid-template-columns:repeat(2,1fr)} }
.merci-carte{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.merci-carte:hover{color:inherit}
.merci-go{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:10px;
          font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
          color:var(--green-text)}
.merci-go span{display:inline-block;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.merci-carte:hover .merci-go span{transform:translateX(6px)}
@media (prefers-reduced-motion:reduce){
  .merci-go span{transition:none}
  .merci-carte:hover .merci-go span{transform:none}
}

/* ------------------------------------- Hero illustre par un dessin detoure -- */
/* Les dessins sont presque carres : on les contient en hauteur et on annule le
   debord lateral prevu pour les illustrations larges. */
.hero__illu--dessin{margin-right:0}
.hero__illu--dessin img{width:auto;max-width:86%;max-height:clamp(260px,30vw,420px);margin:0 auto}

/* ------------------------------------------------- Retour en haut de page --
   Les pages sont longues. Le bouton n'apparait qu'apres deux ecrans de
   defilement et se retire des qu'on remonte : il ne gene jamais la lecture. */
.tothetop{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:45;
          width:44px;height:44px;display:flex;align-items:center;justify-content:center;
          border:1px solid rgba(34,34,34,.22);background:rgba(248,248,245,.94);
          backdrop-filter:blur(6px);color:var(--ink);font-size:16px;line-height:1;cursor:pointer;
          opacity:0;transform:translateY(8px);
          transition:opacity .3s ease,transform .3s ease,background .2s,border-color .2s,color .2s}
.tothetop[data-on]{opacity:1;transform:none}
/* Le bandeau de consentement occupe le bas de l'ecran : le bouton attend son tour. */
html[data-consent-ouvert] .tothetop{opacity:0 !important;pointer-events:none}
.tothetop:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (prefers-reduced-motion:reduce){.tothetop{transition:opacity .2s ease}.tothetop[data-on]{transform:none}}
@media print{.tothetop{display:none}}

/* Emplacements à compléter dans les pages légales. Volontairement voyant :
   ces marques ne doivent pas survivre à la mise en ligne. */
mark{background:#FFF3A3;color:var(--ink);padding:1px 5px;font-weight:500;
     box-shadow:inset 0 -1px 0 rgba(34,34,34,.25)}

/* ---- Bandeau chiffres clés (accueil) ---- */
.chiffres{max-width:1240px;margin:0 auto;padding:clamp(40px,5vw,64px) var(--gutter)}
.chiffres__intro{font-size:16px;line-height:1.6;color:rgba(34,34,34,.75);max-width:62ch;margin:0 0 24px}
.chiffres__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.chiffre{background:#fff;padding:24px 26px 26px}
.chiffre__ico{width:34px;height:34px;background:var(--green-text);color:var(--paper);display:flex;align-items:center;justify-content:center;margin:0 0 18px}
.chiffre__num{font-size:clamp(40px,4.6vw,58px);font-weight:600;line-height:1;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
.chiffre__lbl{font-size:14.5px;line-height:1.5;color:rgba(34,34,34,.7);margin:0;max-width:26ch}

/* ---- Contact : promesse 24 h + WhatsApp ---- */
.reponse24{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);padding:18px 22px;margin:0 0 22px;max-width:520px}
.reponse24__num{font-size:clamp(36px,3.8vw,48px);font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--green-text);margin:0;flex:none}
.reponse24__txt{font-size:14.5px;line-height:1.55;color:rgba(34,34,34,.72);margin:0}
.reponse24__txt b{display:block;color:var(--ink);font-weight:600;font-size:16px;margin:0 0 4px}
.contact-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-wa{padding:12px 20px;gap:10px}
.contact-tel{font-size:13.5px;color:rgba(34,34,34,.6);margin:14px 0 0}
.contact-tel a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.bg-night .contact-tel{color:rgba(248,248,245,.6)}

/* ---- Renfort BE (accueil) ---- */
.renfort{border-left:4px solid var(--green)}
.renfort__t{display:block;font-weight:500;font-size:clamp(18px,1.9vw,22px);line-height:1.25;color:var(--ink);margin:0 0 6px}

/* ---- Accueil : chiffres clés intégrés au hero, visibles sans défiler ---- */
.hero-sec--home .hero__grid{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(20px,2.5vw,32px)}
.hero-sec--home .hero__h1{font-size:clamp(34px,4.2vw,60px);margin-bottom:18px}
.hero-sec--home .hero__illu--dessin img{max-width:100%;max-height:min(clamp(300px,34vw,520px),calc(100svh - 330px))}
.chiffres--hero{padding:0 var(--gutter) clamp(28px,3.5vw,44px);width:100%;box-sizing:border-box}
.chiffres--hero .chiffre{padding:16px 22px 18px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.chiffres--hero .chiffre__ico{width:28px;height:28px;margin:0;grid-row:1}
.chiffres--hero .chiffre__num{font-size:clamp(28px,2.8vw,40px);margin:0;grid-row:1}
.chiffres--hero .chiffre__lbl{grid-column:1 / -1;margin-top:8px;font-size:13.5px;max-width:30ch}
.chiffres--hero{max-width:1340px}
@media (max-width:600px){
  .chiffres--hero .chiffres__grid{grid-template-columns:1fr 1fr}
  .chiffres--hero .chiffre{padding:14px 14px 16px;column-gap:10px}
  .chiffres--hero .chiffre__ico{width:24px;height:24px}
  .chiffres--hero .chiffre__num{font-size:26px}
  .chiffres--hero .chiffre__lbl{font-size:12.5px}
}