/* ==========================================================================
   OBSERVATOIRE DU BAILLEUR — système de design (refonte 2026)

   Idée : le calcaire des Calanques et le bleu marine de la rade.
   Une seule famille (Archivo, variable) jouée en largeur : titres élargis,
   texte à largeur normale. Une seule couleur d'action, le rouge « sceau »,
   réservée à l'unique geste que le site demande : commander un avis de
   valeur ou une expertise. Tout le reste est marine sur calcaire.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&display=swap');

:root{
  --calcaire:   #EFEEE9;   /* fond de page */
  --calcaire-2: #E4E2DA;   /* fond secondaire, lignes épaisses */
  --blanc:      #FAFAF7;   /* panneaux, champs */
  --marine:     #0E2740;   /* encre principale, panneau instrument */
  --marine-2:   #244B73;   /* liens, survol */
  --marine-3:   #3F6690;   /* texte sur marine, secondaire */
  --gris:       #5D6572;   /* texte secondaire */
  --ligne:      #CFCDC4;
  --sceau:      #C63D28;   /* action payante uniquement */
  --sceau-2:    #A32F1D;
  --ok:         #2E6B3F;
  --sceau-tint: #F6E4DF;   /* fond de badge, très léger */
  --marine-tint:#DCE4EC;   /* fond de puce, très léger */

  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --w-max: 1180px;
  --gutter: clamp(20px, 4vw, 48px);
  --r: 4px;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--calcaire);
  color:var(--marine);
  font-family:var(--font);
  font-variation-settings:'wdth' 100;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--marine-2); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--marine); }
::selection{ background:var(--marine); color:var(--calcaire); }
button{ font:inherit; }

h1,h2,h3,h4{
  font-family:var(--font);
  font-variation-settings:'wdth' 112;
  font-weight:640;
  line-height:1.05;
  letter-spacing:-0.022em;
  margin:0 0 .45em;
  color:var(--marine);
  text-wrap:balance;
}
h1{ font-size:clamp(2.35rem, 4.6vw, 3.6rem); }
h2{ font-size:clamp(1.7rem, 3vw, 2.35rem); }
h3{ font-size:1.25rem; font-variation-settings:'wdth' 106; letter-spacing:-0.012em; line-height:1.2; }
h4{ font-size:1.02rem; font-variation-settings:'wdth' 100; letter-spacing:0; line-height:1.3; }
p{ margin:0 0 1em; max-width:64ch; }
.lede{ font-size:1.16rem; line-height:1.5; color:var(--gris); max-width:56ch; }
.muted{ color:var(--gris); }
.small{ font-size:.9rem; }
.num{ font-variant-numeric:tabular-nums; font-weight:600; }

/* ---------- gabarit ---------- */
.wrap{ max-width:var(--w-max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.wrap-narrow{ max-width:800px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
section{ padding:clamp(56px, 8vw, 112px) 0; }
section + section{ padding-top:0; }
.band{ background:var(--marine); color:var(--calcaire); }
.band h1,.band h2,.band h3{ color:var(--blanc); }
.band p{ color:#C9D3DF; }
.band a{ color:var(--blanc); }

.grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:clamp(20px, 3vw, 40px); }
.col-7{ grid-column:span 7; }
.col-6{ grid-column:span 6; }
.col-5{ grid-column:span 5; }
.col-4{ grid-column:span 4; }
.col-8{ grid-column:span 8; }
@media (max-width:900px){
  .col-7,.col-6,.col-5,.col-4,.col-8{ grid-column:1 / -1; }
}

.section-head{ max-width:62ch; margin-bottom:clamp(28px, 4vw, 48px); }
.section-head p{ color:var(--gris); }

/* ---------- entête ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--calcaire) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ligne);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:66px; }
.brand{
  display:flex; flex-direction:column; line-height:1.05;
  text-decoration:none; color:var(--marine);
}
.brand strong{ font-variation-settings:'wdth' 112; font-weight:680; letter-spacing:-0.02em; font-size:1.06rem; }
.brand span{ font-size:.78rem; color:var(--gris); margin-top:2px; }
.site-nav{ display:flex; align-items:center; gap:26px; font-size:.95rem; }
.site-nav a{ text-decoration:none; color:var(--marine); padding:6px 0; border-bottom:2px solid transparent; }
.site-nav a:hover{ border-color:var(--ligne); }
.site-nav a[aria-current]{ border-color:var(--marine); }
.site-nav .btn{ margin-left:6px; border-bottom-width:1px; }
.site-nav .nav-tel{ font-variant-numeric:tabular-nums; font-weight:560; color:var(--marine); }
@media (max-width:1060px){ .site-nav .nav-tel{ display:none; } .site-nav{ gap:20px; } }
@media (max-width:820px){ .site-nav .nav-tel{ display:block; } }
.site-nav a.btn-marine{ color:var(--calcaire); border-color:var(--marine); }
.site-nav a.btn-marine:hover{ background:var(--marine-2); border-color:var(--marine-2); color:var(--calcaire); }
.nav-toggle{ display:none; }
@media (max-width:820px){
  .site-nav{ display:none; position:absolute; left:0; right:0; top:66px; background:var(--calcaire); border-bottom:1px solid var(--ligne); flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gutter) 16px; }
  .site-nav.is-open{ display:flex; }
  .site-nav a{ padding:12px 0; border-bottom:1px solid var(--calcaire-2); }
  .site-nav .btn{ margin:12px 0 0; justify-content:center; border-bottom:0; }
  .nav-toggle{ display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid var(--ligne); border-radius:var(--r); padding:8px 12px; color:var(--marine); cursor:pointer; }
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-weight:560; font-size:.98rem; line-height:1;
  padding:.9em 1.35em; border-radius:var(--r);
  border:1px solid var(--marine); color:var(--marine); background:transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover{ background:var(--marine); color:var(--calcaire); }
.btn-primary{ background:var(--sceau); border-color:var(--sceau); color:#fff; }
.btn-primary:hover{ background:var(--sceau-2); border-color:var(--sceau-2); color:#fff; }
.btn-marine{ background:var(--marine); color:var(--calcaire); }
.btn-marine:hover{ background:var(--marine-2); border-color:var(--marine-2); }
.btn-light{ border-color:#7F97B1; color:var(--blanc); }
.btn-light:hover{ background:var(--blanc); color:var(--marine); border-color:var(--blanc); }
.btn-lg{ font-size:1.05rem; padding:1em 1.55em; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px 14px; align-items:center; margin-top:28px; }
.btn-row .aside{ font-size:.92rem; color:var(--gris); }

/* ---------- hero ---------- */
.hero{ padding-top:clamp(48px, 7vw, 96px); padding-bottom:clamp(48px, 7vw, 96px); }
.hero h1{ max-width:15ch; }
.hero .lede{ margin-top:1.2em; }
.hero-proof{
  margin-top:36px; padding-top:20px; border-top:1px solid var(--ligne);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 32px; font-size:.9rem; color:var(--gris);
}
.hero-proof b{ color:var(--marine); font-weight:600; }

/* ---------- l'instrument (panneau marine) ---------- */
.instrument{
  background:var(--marine); color:var(--calcaire);
  border-radius:8px; padding:clamp(22px, 3vw, 32px);
  box-shadow:0 30px 60px -30px rgba(14,39,64,.55);
}
.instrument h2{ color:var(--blanc); font-size:1.15rem; margin-bottom:4px; font-variation-settings:'wdth' 106; }
.instrument .muted{ color:#9DB0C6; font-size:.9rem; margin-bottom:18px; }
.instrument .field label{ color:#C9D3DF; }
.instrument .field select, .instrument .field input{
  background:#16344F; border-color:#2D5078; color:var(--blanc);
}
.instrument .field select:focus, .instrument .field input:focus{ outline-color:var(--blanc); border-color:var(--blanc); }
.instrument .field select option{ color:var(--marine); background:var(--blanc); }
.instrument .btn{ margin-top:16px; width:100%; }

.instrument-out{ margin-top:22px; padding-top:20px; border-top:1px solid #2D5078; }
.instrument-out[hidden]{ display:none; }
.instrument-out .label{ font-size:.86rem; color:#9DB0C6; margin-bottom:6px; }
.instrument-out .value{ font-size:clamp(1.55rem, 2.6vw, 2rem); font-weight:640; letter-spacing:-0.02em; color:var(--blanc); font-variant-numeric:tabular-nums; line-height:1.1; }
.instrument-out .sub{ font-size:.9rem; color:#C9D3DF; margin:6px 0 0; }
.instrument-cta{ margin-top:20px; padding:16px; background:#16344F; border-radius:6px; }
.instrument-cta p{ font-size:.92rem; color:#C9D3DF; margin:0 0 12px; }
.instrument-cta p b{ color:var(--blanc); }
.instrument-cta .btn{ margin-top:0; }
.instrument-cta .alt{ display:block; text-align:center; margin-top:10px; font-size:.86rem; color:#9DB0C6; }

/* ---------- fourchette (motif récurrent) ---------- */
.range{ position:relative; margin:14px 0 6px; height:44px; }
.range .bar{ position:absolute; left:0; right:0; top:10px; height:2px; background:#2D5078; }
.range .span{ position:absolute; top:6px; height:10px; background:var(--blanc); border-radius:2px; left:8%; right:8%; transform-origin:center; }
.range .tick{ position:absolute; top:0; width:2px; height:22px; background:var(--blanc); }
.range .tick.min{ left:8%; } .range .tick.max{ right:8%; }
.range .lbl{ position:absolute; top:26px; font-size:.78rem; color:#9DB0C6; font-variant-numeric:tabular-nums; }
.range .lbl.min{ left:0; } .range .lbl.max{ right:0; }
.range.is-on .span{ animation:widen .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes widen{ from{ transform:scaleX(.08); } to{ transform:scaleX(1); } }
.range.on-light .bar{ background:var(--ligne); }
.range.on-light .span, .range.on-light .tick{ background:var(--marine); }
.range.on-light .lbl{ color:var(--gris); }

/* ---------- offres (tableau comparatif) ---------- */
.offers{ width:100%; border-collapse:collapse; border-top:2px solid var(--marine); margin-top:8px; }
.offers th, .offers td{ text-align:left; vertical-align:top; padding:20px 20px 20px 0; border-bottom:1px solid var(--ligne); }
.offers th{ font-weight:500; color:var(--gris); width:22%; font-size:.95rem; }
.offers thead th{ color:var(--marine); font-weight:640; font-size:1.35rem; font-variation-settings:'wdth' 108; letter-spacing:-0.015em; padding-top:26px; padding-bottom:22px; border-bottom:1px solid var(--marine); }
.offers thead th small{ display:block; font-size:.9rem; font-weight:400; color:var(--gris); font-variation-settings:'wdth' 100; letter-spacing:0; margin-top:6px; }
.offers td{ width:39%; }
.offers td .price{ font-size:1.7rem; font-weight:640; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.offers td .price small{ font-size:.9rem; font-weight:400; color:var(--gris); letter-spacing:0; margin-left:6px; }
.offers td ul{ margin:0; padding-left:1.1em; }
.offers td li{ margin-bottom:.35em; }
.offers tfoot td{ border-bottom:0; padding-top:22px; }
.offers .rec{ position:relative; }
.offers .rec::after{ content:"le plus demandé"; position:absolute; top:6px; right:20px; font-size:.74rem; color:var(--sceau); font-weight:560; }
@media (max-width:760px){
  .offers, .offers thead, .offers tbody, .offers tfoot, .offers tr, .offers th, .offers td{ display:block; width:auto; }
  .offers thead{ display:none; }
  .offers tr{ border-bottom:1px solid var(--ligne); padding:16px 0; }
  .offers th, .offers td{ border:0; padding:6px 0; }
  .offers td::before{ content:attr(data-col); display:block; font-weight:640; font-size:1.05rem; margin-top:10px; margin-bottom:2px; }
  .offers .rec::after{ display:none; }
}

/* ---------- étapes (vraie séquence) ---------- */
.steps{ list-style:none; margin:0; padding:0; counter-reset:step; display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; }
.steps li{ counter-increment:step; padding-top:14px; border-top:2px solid var(--marine); }
.steps li::before{ content:counter(step); display:block; font-size:2.2rem; font-weight:640; letter-spacing:-0.03em; line-height:1; color:var(--marine); margin-bottom:12px; font-variation-settings:'wdth' 112; }
.steps h3{ font-size:1.08rem; margin-bottom:.35em; }
.steps p{ font-size:.94rem; color:var(--gris); margin:0; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; gap:20px; } }

/* ---------- cas d'usage (liste deux colonnes) ---------- */
.uses{ list-style:none; margin:0; padding:0; columns:2; column-gap:48px; }
.uses li{ break-inside:avoid; padding:14px 0; border-bottom:1px solid var(--ligne); }
.uses li b{ display:block; font-weight:600; margin-bottom:2px; }
.uses li span{ color:var(--gris); font-size:.94rem; }
@media (max-width:700px){ .uses{ columns:1; } }

/* ---------- outils (rangées) ---------- */
.toollist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--marine); }
.toollist li{ border-bottom:1px solid var(--ligne); }
.toollist a, .toollist .soon{ display:grid; grid-template-columns:1.1fr 2fr auto; gap:20px; align-items:baseline; padding:18px 0; text-decoration:none; color:var(--marine); }
.toollist a:hover b{ text-decoration:underline; text-underline-offset:4px; }
.toollist b{ font-weight:600; }
.toollist span{ color:var(--gris); font-size:.94rem; }
.toollist em{ font-style:normal; font-size:.84rem; color:var(--gris); white-space:nowrap; }
.toollist .soon b{ color:var(--gris); font-weight:500; }
@media (max-width:700px){ .toollist a, .toollist .soon{ grid-template-columns:1fr; gap:4px; } }

/* ---------- carte expert ---------- */
.expert{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(24px, 4vw, 56px); align-items:start; }
.expert .sig{ padding:24px; background:var(--blanc); border:1px solid var(--ligne); border-radius:8px; }
.expert .sig .name{ font-size:1.35rem; font-weight:640; letter-spacing:-0.015em; font-variation-settings:'wdth' 108; }
.expert .sig .role{ color:var(--gris); margin:2px 0 16px; }
.expert .sig dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:.93rem; }
.expert .sig dt{ color:var(--gris); }
.expert .sig dd{ margin:0; }
.expert .stamp{ margin-top:18px; padding-top:14px; border-top:1px dashed var(--ligne); font-size:.86rem; color:var(--gris); }
.expert .stamp b{ color:var(--sceau); }
@media (max-width:820px){ .expert{ grid-template-columns:1fr; } }

/* ---------- formulaires ---------- */
.panel{ background:var(--blanc); border:1px solid var(--ligne); border-radius:8px; padding:clamp(22px, 3.5vw, 40px); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
.form-grid .full{ grid-column:1 / -1; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.4em; }
.field label{ font-size:.9rem; font-weight:500; color:var(--marine); }
.field .hint{ font-size:.82rem; color:var(--gris); font-weight:400; }
.field select, .field input, .field textarea{
  font-family:var(--font); font-size:1rem; padding:.7em .75em;
  border:1px solid var(--ligne); background:var(--blanc); color:var(--marine); border-radius:var(--r);
  width:100%;
}
.field textarea{ min-height:110px; resize:vertical; }
.field select:focus, .field input:focus, .field textarea:focus{ outline:2px solid var(--marine); outline-offset:1px; border-color:var(--marine); }
.field input:user-invalid, .field select:user-invalid{ border-color:var(--sceau); }
fieldset{ border:0; padding:0; margin:0; }
legend{ font-size:.9rem; font-weight:500; margin-bottom:.5em; padding:0; }
.choice{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice label{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--ligne); border-radius:var(--r); cursor:pointer; background:var(--calcaire); }
.choice label:has(input:checked){ border-color:var(--marine); background:var(--blanc); box-shadow:inset 0 0 0 1px var(--marine); }
.choice input{ margin-top:.25em; accent-color:var(--marine); }
.choice b{ display:block; font-weight:600; }
.choice span{ font-size:.86rem; color:var(--gris); }
@media (max-width:640px){ .choice{ grid-template-columns:1fr; } }
.consent{ display:flex; gap:.7em; align-items:flex-start; font-size:.88rem; color:var(--gris); margin-top:18px; }
.consent input{ margin-top:.3em; accent-color:var(--marine); }
.form-note{ font-size:.86rem; color:var(--gris); }
.form-status{ font-size:.94rem; margin-top:12px; }
.form-status.ok{ color:var(--ok); }
.form-status.err{ color:var(--sceau); }

/* résultat d'outil */
.result{ margin-top:28px; padding-top:24px; border-top:1px solid var(--ligne); }
.result[hidden]{ display:none; }
.result .label{ font-size:.88rem; color:var(--gris); margin-bottom:4px; }
.result .value{ font-size:clamp(1.7rem, 3.4vw, 2.4rem); font-weight:640; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.result .value.good{ color:var(--ok); }
.result .sub{ font-size:.92rem; color:var(--gris); margin:6px 0 0; max-width:56ch; }
.result .block + .block{ margin-top:22px; }
.callout{ margin-top:18px; padding:14px 18px; background:var(--calcaire); border-left:3px solid var(--marine); font-size:.94rem; }

/* passerelle vers l'offre payante, après un calcul */
.upsell{ margin-top:28px; padding:clamp(20px, 3vw, 28px); background:var(--marine); color:var(--calcaire); border-radius:8px; }
.upsell[hidden]{ display:none; }
.upsell h3{ color:var(--blanc); margin-bottom:.4em; }
.upsell p{ color:#C9D3DF; font-size:.95rem; }
.upsell .btn-row{ margin-top:18px; }
.upsell .aside{ color:#9DB0C6; }
.upsell .aside a{ color:var(--blanc); }

/* ---------- prose ---------- */
.prose h2{ margin-top:1.8em; font-size:1.5rem; }
.prose h3{ margin-top:1.4em; }
.prose ul{ padding-left:1.2em; }
.prose li{ margin-bottom:.45em; max-width:62ch; }
.faq{ border-top:1px solid var(--marine); }
.faq details{ border-bottom:1px solid var(--ligne); }
.faq summary{ cursor:pointer; padding:18px 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:20px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-weight:400; color:var(--gris); flex:0 0 auto; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 18px; color:var(--gris); max-width:66ch; }

/* ---------- pied ---------- */
.site-footer{ border-top:1px solid var(--ligne); padding:40px 0 36px; font-size:.88rem; color:var(--gris); }
.site-footer .wrap{ display:flex; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; }
.site-footer a{ color:var(--gris); }
.foot-links{ display:flex; gap:18px; flex-wrap:wrap; }

/* ---------- accessibilité ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible{ outline:2px solid var(--marine); outline-offset:3px; }
.band a:focus-visible, .instrument a:focus-visible, .instrument button:focus-visible, .upsell a:focus-visible{ outline-color:var(--blanc); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}


/* ==========================================================================
   REFONTE v2 (sept. 2026) — composants de conversion
   Même identité, nouveaux composants : bandeau de garanties, cartes d'offre,
   maquette du livrable, cas d'usage cliquables, formulaire en étapes avec
   devis indicatif, capture email sur les outils, barre d'action mobile.
   ========================================================================== */

/* ---------- utilitaires ---------- */
.eyebrow{ display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--sceau); margin-bottom:10px; }
.eyebrow.marine{ color:var(--marine-3); }
.badge{ display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:4px 8px; border-radius:3px; background:var(--sceau-tint); color:var(--sceau); }
.badge.marine{ background:var(--marine-tint); color:var(--marine); }
.ico{ width:18px; height:18px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hero .microcopy{ margin-top:14px; font-size:.88rem; color:var(--gris); }
.hero .microcopy b{ color:var(--marine); font-weight:600; }
.p-center{ max-width:none; text-align:center; }
.section-head .row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.section-head.wide{ max-width:none; }
.link-arrow{ font-weight:560; text-decoration:none; white-space:nowrap; }
.link-arrow::after{ content:" →"; }
.link-arrow:hover{ text-decoration:underline; text-underline-offset:4px; }

/* ---------- bandeau de garanties (sous le hero) ---------- */
.trust{ border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne); background:var(--calcaire-2); padding:0; }
.trust ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); }
.trust li{ display:flex; gap:12px; align-items:flex-start; padding:18px 20px 18px 0; font-size:.92rem; line-height:1.35; }
.trust li + li{ padding-left:20px; border-left:1px solid var(--ligne); }
.trust li .ico{ margin-top:2px; color:var(--sceau); }
.trust li b{ display:block; font-weight:600; color:var(--marine); }
.trust + section{ padding-top:clamp(56px, 8vw, 112px); }
.trust li span{ color:var(--gris); font-size:.86rem; }
@media (max-width:900px){ .trust ul{ grid-template-columns:1fr 1fr; } .trust li:nth-child(3){ padding-left:0; border-left:0; } .trust li{ border-top:1px solid var(--ligne); } .trust li:nth-child(-n+2){ border-top:0; } }
@media (max-width:520px){ .trust ul{ grid-template-columns:1fr; } .trust li{ padding-left:0 !important; border-left:0 !important; border-top:1px solid var(--ligne) !important; padding-top:14px; padding-bottom:14px; } .trust li:first-child{ border-top:0 !important; } }

/* ---------- cartes d'offre ---------- */
.offer-cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px, 2.5vw, 32px); align-items:stretch; }
.offer{ position:relative; display:flex; flex-direction:column; background:var(--blanc); border:1px solid var(--ligne); border-radius:10px; padding:clamp(22px, 3vw, 34px); box-shadow:0 1px 0 rgba(14,39,64,.04); }
.offer.rec{ border-color:var(--marine); box-shadow:0 24px 50px -30px rgba(14,39,64,.45); }
.offer.rec::before{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:6px; background:var(--sceau); border-radius:10px 10px 0 0; }
.offer .badge{ position:absolute; top:18px; right:18px; }
.offer h3{ font-size:1.55rem; margin:4px 0 4px; font-variation-settings:'wdth' 110; letter-spacing:-0.02em; }
.offer .tag{ color:var(--gris); font-size:.96rem; margin:0 0 18px; max-width:30ch; }
.offer .price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:2px 0 4px; }
.offer .price .from{ font-size:.9rem; color:var(--gris); }
.offer .price .amt{ font-size:clamp(2rem, 3.4vw, 2.6rem); font-weight:680; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; line-height:1; color:var(--marine); }
.offer .price .unit{ font-size:1rem; color:var(--gris); }
.offer .delay{ display:flex; align-items:center; gap:8px; font-size:.92rem; color:var(--marine); margin:6px 0 20px; }
.offer .delay .ico{ color:var(--sceau); }
.offer .delay b{ font-weight:600; }
.offer ul.checks{ list-style:none; margin:0 0 22px; padding:18px 0 0; border-top:1px solid var(--ligne); }
.offer ul.checks li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; margin-bottom:9px; }
.offer ul.checks .ico{ color:var(--ok); margin-top:3px; width:16px; height:16px; }
.offer .offer-foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.offer .offer-foot .btn{ width:100%; }
.offer .offer-foot .fine{ font-size:.84rem; color:var(--gris); text-align:center; margin:0; }
.offer .offer-foot .fine a{ color:var(--marine-2); }
.offer .doc{ position:absolute; right:22px; bottom:150px; width:92px; display:none; }
@media (max-width:820px){ .offer-cards{ grid-template-columns:1fr; } }

/* ---------- maquette du livrable (dessinée en CSS) ---------- */
.doc-stage{ position:relative; padding:8% 10% 6% 6%; }
.doc-stage::before{ content:""; position:absolute; inset:14% 0 0 14%; background:var(--calcaire-2); border-radius:12px; z-index:0; }
.doc{ position:relative; z-index:1; background:#FFFFFF; color:var(--marine); border:1px solid #D9D7CF; border-radius:3px; aspect-ratio:1/1.3; padding:7% 8%; font-size:clamp(8px, .95vw, 12px); line-height:1.35; box-shadow:0 30px 60px -28px rgba(14,39,64,.5), 0 2px 6px rgba(14,39,64,.08); display:flex; flex-direction:column; gap:.9em; overflow:hidden; }
.doc.behind{ position:absolute; z-index:0; top:2%; left:12%; right:-2%; bottom:-2%; transform:rotate(2.2deg); aspect-ratio:auto; opacity:.9; }
.doc .d-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid #E6E4DC; padding-bottom:.9em; }
.doc .d-head .brand-line{ font-weight:680; font-variation-settings:'wdth' 110; letter-spacing:-0.02em; font-size:1.1em; }
.doc .d-head .brand-line small{ display:block; font-weight:400; color:var(--gris); font-size:.8em; letter-spacing:0; }
.doc .d-head .ref{ text-align:right; color:var(--gris); font-size:.82em; }
.doc .d-title{ font-size:1.9em; font-weight:680; letter-spacing:-0.025em; line-height:1.05; font-variation-settings:'wdth' 112; }
.doc .d-title small{ display:block; font-size:.5em; font-weight:400; color:var(--gris); letter-spacing:0; margin-top:.4em; font-variation-settings:'wdth' 100; }
.doc .d-kpi{ display:grid; grid-template-columns:1fr 1fr; gap:.8em; }
.doc .d-kpi > div{ background:var(--calcaire); border-radius:3px; padding:.8em .9em; }
.doc .d-kpi .k{ font-size:.78em; color:var(--gris); text-transform:uppercase; letter-spacing:.06em; }
.doc .d-kpi .v{ font-size:1.5em; font-weight:680; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1.15; margin-top:.2em; }
.doc .d-kpi .r{ font-size:.8em; color:var(--gris); margin-top:.15em; }
.doc .d-range{ position:relative; height:1.6em; margin:.1em 0 .3em; }
.doc .d-range .bar{ position:absolute; left:0; right:0; top:.55em; height:2px; background:#D9D7CF; }
.doc .d-range .span{ position:absolute; left:22%; right:30%; top:.25em; height:.6em; background:var(--marine); border-radius:2px; }
.doc .d-range .dot{ position:absolute; left:46%; top:0; width:1.1em; height:1.1em; border-radius:50%; background:var(--sceau); border:2px solid #fff; box-shadow:0 0 0 1px var(--sceau); }
.doc .d-range .lbl{ position:absolute; top:1em; font-size:.72em; color:var(--gris); }
.doc .d-range .lbl.a{ left:0; } .doc .d-range .lbl.b{ right:0; }
.doc .d-sec{ font-size:.78em; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--marine-3); margin-top:.4em; }
.doc .d-table{ width:100%; border-collapse:collapse; font-size:.82em; }
.doc .d-table th, .doc .d-table td{ text-align:left; padding:.35em 0; border-bottom:1px solid #EDEBE4; }
.doc .d-table th{ color:var(--gris); font-weight:500; }
.doc .d-table td.n{ text-align:right; font-variant-numeric:tabular-nums; }
.doc .d-lines{ display:flex; flex-direction:column; gap:.45em; }
.doc .d-lines i{ display:block; height:.55em; background:#ECEAE3; border-radius:2px; }
.doc .d-lines i:nth-child(2){ width:92%; } .doc .d-lines i:nth-child(3){ width:78%; } .doc .d-lines i:nth-child(4){ width:85%; }
.doc .d-sign{ margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid #E6E4DC; padding-top:.9em; }
.doc .d-sign .who{ font-size:.85em; }
.doc .d-sign .who b{ display:block; font-weight:640; }
.doc .d-sign .who span{ color:var(--gris); }
.doc .d-sign .stamp{ width:5.2em; height:5.2em; border:2px solid var(--sceau); border-radius:50%; color:var(--sceau); display:flex; align-items:center; justify-content:center; text-align:center; font-size:.68em; font-weight:640; text-transform:uppercase; letter-spacing:.06em; line-height:1.15; transform:rotate(-8deg); opacity:.9; }
.doc.mini{ font-size:5px; padding:6% 7%; gap:.7em; box-shadow:0 10px 24px -14px rgba(14,39,64,.5); }

/* numéros d'annotation sur la maquette */
.doc-stage .pin{ position:absolute; z-index:3; width:28px; height:28px; border-radius:50%; background:var(--sceau); color:#fff; font-size:.82rem; font-weight:640; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px var(--calcaire); }
.deliverable{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px, 5vw, 72px); align-items:center; }
.deliverable .notes{ list-style:none; margin:0; padding:0; counter-reset:n; }
.deliverable .notes li{ counter-increment:n; display:grid; grid-template-columns:28px 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--ligne); }
.deliverable .notes li::before{ content:counter(n); width:28px; height:28px; border-radius:50%; background:var(--sceau); color:#fff; font-size:.82rem; font-weight:640; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.deliverable .notes b{ display:block; font-weight:600; }
.deliverable .notes span{ color:var(--gris); font-size:.94rem; }
@media (max-width:820px){ .deliverable{ grid-template-columns:1fr; } .doc-stage{ max-width:440px; margin:0 auto; } }

/* ---------- cas d'usage cliquables ---------- */
.usecases{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.usecases a{ display:flex; flex-direction:column; gap:8px; height:100%; padding:18px 18px 16px; background:var(--blanc); border:1px solid var(--ligne); border-radius:8px; text-decoration:none; color:var(--marine); transition:border-color .12s ease, transform .12s ease, box-shadow .12s ease; }
.usecases a:hover{ border-color:var(--marine); transform:translateY(-2px); box-shadow:0 14px 30px -22px rgba(14,39,64,.5); }
.usecases b{ font-weight:600; line-height:1.25; }
.usecases span{ color:var(--gris); font-size:.9rem; flex:1; }
.usecases .rec-doc{ display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--gris); margin-top:6px; padding-top:10px; border-top:1px dashed var(--ligne); }
.usecases .rec-doc em{ font-style:normal; font-weight:600; color:var(--marine); }
.usecases .rec-doc::after{ content:"→"; color:var(--sceau); font-weight:600; margin-left:auto; }
@media (max-width:1000px){ .usecases{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .usecases{ grid-template-columns:1fr; } }

/* ---------- preuves : missions et témoignage (bloc à remplir) ---------- */
.missions{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.missions li{ background:var(--blanc); border:1px solid var(--ligne); border-radius:8px; padding:20px; display:flex; flex-direction:column; gap:6px; }
.missions .what{ font-weight:600; }
.missions .where{ color:var(--gris); font-size:.9rem; }
.missions .why{ margin-top:8px; font-size:.92rem; }
.missions .meta{ margin-top:auto; padding-top:12px; display:flex; gap:12px; font-size:.8rem; color:var(--gris); }
.missions .meta b{ color:var(--marine); font-weight:600; }
.quote{ margin-top:32px; padding:clamp(22px, 3vw, 32px); background:var(--blanc); border-left:3px solid var(--sceau); border-radius:0 8px 8px 0; }
.quote p{ font-size:1.12rem; line-height:1.45; max-width:60ch; margin:0 0 12px; }
.quote footer{ font-size:.9rem; color:var(--gris); }
.quote footer b{ color:var(--marine); font-weight:600; }
@media (max-width:820px){ .missions{ grid-template-columns:1fr; } }

/* ---------- carte expert : monogramme / photo ---------- */
.expert .sig .portrait{ width:96px; height:96px; border-radius:50%; background:var(--marine); color:var(--calcaire); display:flex; align-items:center; justify-content:center; font-weight:680; font-size:1.4rem; letter-spacing:-0.02em; margin-bottom:14px; overflow:hidden; font-variation-settings:'wdth' 112; }
.expert .sig .portrait img{ width:100%; height:100%; object-fit:cover; }
.expert .sig .portrait.large{ width:140px; height:140px; }
.hero-proof .who{ display:flex; align-items:center; gap:10px; }
.hero-proof .who img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto; }

/* ---------- formulaire en étapes ---------- */
.stepper{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:26px; counter-reset:st; }
.stepper li{ list-style:none; counter-increment:st; display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--gris); padding-bottom:10px; border-bottom:3px solid var(--ligne); }
.stepper li::before{ content:counter(st); width:24px; height:24px; border-radius:50%; border:1px solid var(--ligne); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:600; }
.stepper li.is-active{ color:var(--marine); border-color:var(--marine); font-weight:600; }
.stepper li.is-active::before{ background:var(--marine); border-color:var(--marine); color:var(--calcaire); }
.stepper li.is-done{ color:var(--marine); border-color:var(--marine); }
.stepper li.is-done::before{ content:"✓"; background:var(--marine-tint); border-color:var(--marine-tint); color:var(--marine); }
.stepper{ padding:0; margin-left:0; }
.step[hidden]{ display:none; }
.step > h2{ font-size:1.35rem; margin-bottom:.35em; }
.step > .muted{ margin-bottom:22px; }
.step-nav{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:26px; padding-top:20px; border-top:1px solid var(--ligne); flex-wrap:wrap; }
.step-nav .aside{ font-size:.88rem; color:var(--gris); }
.qb-inline{ display:none; font-weight:600; color:var(--marine); }
@media (max-width:900px){ .qb-inline{ display:inline; } .step-nav{ gap:10px; } }
@media (max-width:480px){ .stepper li{ font-size:.8rem; gap:6px; } }
.btn-back{ border-color:transparent; color:var(--gris); padding-left:.4em; }
.btn-back:hover{ background:transparent; color:var(--marine); }
.choice.three{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:640px){ .choice.three{ grid-template-columns:1fr; } }
.choice label .badge{ margin-left:auto; align-self:flex-start; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* devis indicatif (panneau latéral) */
.quote-box{ position:sticky; top:86px; background:var(--marine); color:var(--calcaire); border-radius:8px; padding:22px; }
.quote-box .eyebrow{ color:#9DB0C6; margin-bottom:6px; }
.quote-box .svc{ font-weight:640; font-size:1.05rem; color:var(--blanc); }
.quote-box .amt{ font-size:2.1rem; font-weight:680; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; line-height:1.05; margin:10px 0 2px; color:var(--blanc); }
.quote-box .amt small{ font-size:1rem; font-weight:400; color:#C9D3DF; letter-spacing:0; margin-left:6px; }
.quote-box .delay{ font-size:.9rem; color:#C9D3DF; }
.quote-box .base{ margin:14px 0 0; padding-top:12px; border-top:1px solid #2D5078; font-size:.84rem; color:#9DB0C6; }
.quote-box ul{ list-style:none; margin:10px 0 0; padding:0; font-size:.86rem; color:#C9D3DF; }
.quote-box ul li{ display:flex; gap:8px; align-items:flex-start; margin-bottom:6px; }
.quote-box ul .ico{ width:15px; height:15px; margin-top:3px; color:#9DB0C6; }
.quote-box .empty{ color:#C9D3DF; font-size:.94rem; margin:8px 0 0; }
.summary{ margin:0 0 22px; padding:16px 18px; background:var(--calcaire); border-radius:6px; font-size:.94rem; }
.summary dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; }
.summary dt{ color:var(--gris); }
.summary dd{ margin:0; }
.summary .quote-line{ margin-top:12px; padding-top:12px; border-top:1px solid var(--ligne); font-weight:600; }
.after-steps{ margin-top:22px; }
.after-steps h3{ font-size:1rem; margin-bottom:8px; }
.after-steps ol{ margin:0; padding-left:1.2em; font-size:.9rem; color:var(--gris); }
.after-steps li{ margin-bottom:6px; }
@media (max-width:900px){ .quote-box{ position:static; } }

/* ---------- upsell chiffré + capture email sur les outils ---------- */
.upsell .quote-line{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:14px 0 4px; }
.upsell .quote-line .amt{ font-size:1.7rem; font-weight:680; letter-spacing:-0.02em; color:var(--blanc); font-variant-numeric:tabular-nums; }
.upsell .quote-line .lbl{ color:#C9D3DF; font-size:.94rem; }
.capture{ margin-top:18px; padding:18px 20px; background:var(--blanc); border:1px solid var(--ligne); border-radius:8px; }
.capture[hidden]{ display:none; }
.capture h3{ font-size:1rem; margin-bottom:4px; }
.capture p{ font-size:.88rem; color:var(--gris); margin-bottom:12px; }
.capture form{ display:flex; gap:10px; flex-wrap:wrap; }
.capture input{ flex:1 1 220px; font-family:var(--font); font-size:1rem; padding:.7em .75em; border:1px solid var(--ligne); background:var(--blanc); color:var(--marine); border-radius:var(--r); }
.capture input:focus{ outline:2px solid var(--marine); outline-offset:1px; }
.capture .fine{ flex-basis:100%; font-size:.78rem; color:var(--gris); margin:4px 0 0; }
.capture .form-status{ flex-basis:100%; margin-top:6px; }

/* ---------- page merci : pièces à préparer ---------- */
.checklist{ list-style:none; margin:0; padding:0; }
.checklist li{ display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--ligne); }
.checklist .ico{ color:var(--ok); margin-top:3px; }
.checklist b{ font-weight:600; }
.checklist span{ display:block; color:var(--gris); font-size:.9rem; }

/* ---------- bandeau final avec deux voies ---------- */
.band .btn-row .aside{ color:#9DB0C6; flex-basis:100%; }
.band .btn-row .aside a{ color:var(--blanc); }

/* ---------- barre d'action fixe (mobile) ---------- */
.sticky-cta{ display:none; }
@media (max-width:820px){
  body.has-sticky{ padding-bottom:76px; }
  .sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; gap:10px; padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--calcaire) 94%, transparent); backdrop-filter:blur(8px); border-top:1px solid var(--ligne); transform:translateY(110%); transition:transform .25s ease; }
  .sticky-cta.is-on{ transform:none; }
  .sticky-cta .btn{ flex:1; padding:.9em .6em; font-size:.95rem; }
  .sticky-cta .btn-tel{ flex:0 0 auto; }
}

/* ---------- comparatif : lien "devis indicatif" sous le tableau ---------- */
.quote-widget{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px, 3vw, 32px); align-items:start; }
.quote-widget .out{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.quote-widget .out > div{ background:var(--blanc); border:1px solid var(--ligne); border-radius:8px; padding:18px; }
.quote-widget .out .k{ font-size:.86rem; color:var(--gris); }
.quote-widget .out .v{ font-size:1.7rem; font-weight:680; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; margin:4px 0 2px; }
.quote-widget .out .d{ font-size:.84rem; color:var(--gris); }
.quote-widget .out .btn{ margin-top:12px; width:100%; }
.quote-widget .out > div.rec{ border-color:var(--marine); }
@media (max-width:820px){ .quote-widget{ grid-template-columns:1fr; } }
@media (max-width:480px){ .quote-widget .out{ grid-template-columns:1fr; } }

/* ---------- publications ---------- */
.pub-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.pub-card a{ display:flex; flex-direction:column; gap:12px; height:100%; padding:24px; background:var(--blanc); border:1px solid var(--ligne); border-radius:8px; text-decoration:none; color:var(--marine); transition:border-color .15s, transform .15s; }
.pub-card a:hover{ border-color:var(--marine); transform:translateY(-2px); }
.pub-card b{ font-size:1.18rem; line-height:1.25; font-weight:650; }
.pub-meta{ font-size:.82rem; color:var(--gris); display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pub-excerpt{ color:var(--gris); font-size:.95rem; line-height:1.5; flex:1; }
.pub-card .link-arrow{ font-size:.92rem; font-weight:600; }
@media (max-width:980px){ .pub-list{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .pub-list{ grid-template-columns:1fr; } }

.newsletter{ display:grid; grid-template-columns:1fr; gap:18px; padding:clamp(24px, 4vw, 40px); background:var(--marine); color:var(--calcaire); border-radius:8px; }
.newsletter.wide{ grid-template-columns:1.1fr 1fr; gap:clamp(24px, 4vw, 56px); align-items:center; }
.newsletter .eyebrow{ color:#E9A597; }
.newsletter h2{ color:var(--blanc); font-size:clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom:.4em; }
.newsletter p{ color:#C9D3DF; }
.nl-fields{ display:flex; gap:10px; flex-wrap:wrap; }
.nl-fields input, .nl-fields select{ flex:1 1 200px; font-family:var(--font); font-size:1rem; padding:.72em .8em; border:1px solid var(--marine-3); background:#132F4C; color:var(--blanc); border-radius:var(--r); }
.nl-fields select{ flex:0 1 190px; }
.nl-fields input::placeholder{ color:#9FB0C3; }
.nl-fields input:focus, .nl-fields select:focus{ outline:2px solid var(--calcaire); outline-offset:1px; }
.nl-fields .btn{ background:var(--calcaire); color:var(--marine); border-color:var(--calcaire); }
.nl-fields .btn:hover{ background:var(--blanc); }
.newsletter .consent{ margin-top:12px; font-size:.82rem; color:#C9D3DF; display:flex; gap:8px; align-items:flex-start; }
.newsletter .consent a{ color:#C9D3DF; }
.newsletter .form-status{ margin-top:8px; color:var(--blanc); }
.newsletter .form-status.err{ color:#F3B8AC; }
@media (max-width:820px){ .newsletter.wide{ grid-template-columns:1fr; } }

.article-head{ padding:clamp(40px, 7vw, 88px) 0 clamp(20px, 3vw, 32px); }
.article-head h1{ font-size:clamp(2rem, 4vw, 3rem); margin-bottom:.45em; }
.crumbs{ font-size:.86rem; color:var(--gris); margin-bottom:18px; }
.crumbs a{ color:var(--marine-2); }
.article-meta{ display:flex; gap:10px; align-items:center; font-size:.9rem; color:var(--gris); margin-top:22px; padding-top:18px; border-top:1px solid var(--ligne); max-width:none; }
.article-meta img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.article-meta b{ color:var(--marine); font-weight:600; }
.article-body{ padding-bottom:clamp(40px, 6vw, 72px); font-size:1.06rem; line-height:1.65; }
.article-body p, .article-body li{ max-width:68ch; }
.article-body h2:first-child{ margin-top:.6em; }
.formula{ font-variant-numeric:tabular-nums; background:var(--blanc); border:1px solid var(--ligne); border-radius:6px; padding:14px 18px; font-weight:600; }
.figures{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 1.2em; }
.figures > div{ background:var(--blanc); border:1px solid var(--ligne); border-top:3px solid var(--marine); border-radius:6px; padding:16px 18px; display:flex; flex-direction:column; gap:2px; }
.figures .k{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gris); }
.figures .v{ font-size:2rem; font-weight:650; font-variant-numeric:tabular-nums; }
.figures .r{ font-size:.9rem; color:var(--gris); }
.figures .r.down{ color:var(--sceau); }
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:1.2em 0; }
.compare > div{ background:var(--blanc); border:1px solid var(--ligne); border-radius:8px; padding:20px; }
.compare ul{ margin:0; font-size:.95rem; }
.compare .price-line{ font-size:1.1rem; margin-bottom:.6em; }
@media (max-width:620px){ .figures, .compare{ grid-template-columns:1fr; } }
.article-cta{ margin:2.4em 0 1.6em; padding:20px 22px; border:1px solid var(--marine); border-radius:8px; display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--blanc); }
.article-cta div{ display:flex; flex-direction:column; gap:4px; max-width:46ch; }
.article-cta span{ color:var(--gris); font-size:.94rem; line-height:1.45; }
.sources{ border-top:1px solid var(--ligne); padding-top:12px; font-size:.9rem; }
.sources summary{ cursor:pointer; font-weight:600; padding:6px 0; }
.sources ul{ margin-top:8px; }
.sources li{ font-size:.88rem; color:var(--gris); }
.nl-section{ padding-top:0; }
.h-small{ font-size:1.3rem; }
.pub-mini{ list-style:none; margin:0; padding:0; border-top:1px solid var(--marine); }
.pub-mini li{ border-bottom:1px solid var(--ligne); }
.pub-mini a{ display:flex; justify-content:space-between; gap:20px; padding:16px 0; text-decoration:none; color:var(--marine); }
.pub-mini a:hover b{ text-decoration:underline; text-underline-offset:4px; }
.pub-mini b{ font-weight:600; }
.pub-mini span{ color:var(--gris); font-size:.88rem; white-space:nowrap; }
@media (max-width:620px){ .pub-mini a{ flex-direction:column; gap:4px; } }

/* ---------- nav : ajustements publications ---------- */
.site-nav a{ white-space:nowrap; }
.site-nav a.btn{ padding:.72em 1.1em; }
@media (max-width:1240px){ .site-nav .nav-tel{ display:none; } .site-nav{ gap:22px; } }
@media (max-width:980px){ .brand span{ display:none; } .site-nav{ gap:16px; font-size:.9rem; } }
@media (max-width:820px){ .site-nav .nav-tel{ display:block; } .site-nav a.btn{ padding:.9em 1.35em; } .brand span{ display:block; } }
.pub-meta time, .pub-meta .mins{ white-space:nowrap; }