/* ═══════════════════════════════════════════════════════════════════════
   finitions.css — couche de finition commune aux 24 pages
   ═══════════════════════════════════════════════════════════════════════

   TROIS PARTIES
     A. Accessibilité — focus clavier, contraste, mouvement réduit.
     B. Finitions     — rayons, ombres, traits, espacements, transitions.
     C. Structure     — composition des blocs entre eux.

   POURQUOI CE FICHIER
   Chaque page porte sa propre feuille (css/<page>.css) qui recopie la base
   commune — nav, footer, boutons, cartes. Les copies ont dérivé : .btn-primary
   existe en trois versions (padding .75 / .78 / .85rem, rayon 8 / 9px, graisse
   700 / 800), .nav-links en deux (gap 1.8 / 2rem), .card-body h3 en deux
   (.93 / .95rem) ; on compte 10 rayons différents (5, 6, 7, 8, 9, 10, 13, 14,
   18, 20px) et 30 ombres différentes. Invisible page par page, cette dérive
   se voit quand on navigue : c'est elle qui donne l'impression d'un site
   assemblé morceau par morceau. La factorisation de la base recopiée reste à
   faire (branche dev/refactor-*) ; ce fichier harmonise en attendant.

   CE FICHIER NE CHANGE NI LES TEXTES, NI LES POLICES, NI LA PALETTE.
   Toutes les couleurs employées ici sont déjà celles du site (#0077b6,
   #2ecc71, #1a2e44, #6b7280, #e5e7eb, #f8fafc, #f59e0b) ou du blanc/noir en
   transparence.

   ⚠️ PORTÉE : GLOBALE. Contrairement aux feuilles de page, ce fichier est lié
   partout. Une classe ciblée ici doit avoir le même sens sur toutes les pages
   qui l'emploient (relevé fait le 2026-09-23 sur les 23 pages). Les éléments
   génériques sont restreints : nav:has(> .nav-inner) et non nav — les guides
   ont un <nav class="toc"> et jamrent.js crée un <nav id="bottom-nav-bar">.

   ⚠️ PLACE DANS LA CASCADE
   Liée APRÈS css/<page>.css, css/jamrent.css et guides.css — elle gagne donc
   à spécificité égale sur la base recopiée — mais AVANT css/utilitaires.css,
   qui doit rester la dernière feuille du <head> (garde-fou : tests/e2e/14).
   Pour reprendre la main sur une classe de utilitaires.css il faut répéter le
   sélecteur ; chaque cas est signalé « renforcé », comme dans utilitaires.css.

   ⚠️ Cache 1 jour (firebase.json) → incrémenter ?v= dans les 23 pages à
   chaque modification de ce fichier.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   PARTIE A — ACCESSIBILITÉ
   ═══════════════════════════════════════════════════════════════════════ */


/* ── A1. Focus clavier ──────────────────────────────────────────────────
   jamrent.js posait déjà cet anneau ambre sur le menu du compte, le
   hamburger et le JamBot. Il s'applique maintenant à tout élément
   focalisable : la navigation au clavier ne perd plus le fil en cours de
   page. Aucun border-radius imposé ici : le contour suit déjà l'arrondi de
   l'élément, et en fixer un déformerait les cartes au focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #f59e0b;
  outline-offset:2px;
}
/* Sur fond sombre, un écart plus large détache l'anneau du fond. */
.hero :focus-visible,.page-hero :focus-visible,
footer :focus-visible,.index-cta :focus-visible{outline-offset:3px}


/* ── A2. Contraste du texte clair sur fond sombre ───────────────────────
   Même teinte (blanc), opacité relevée. Rapports calculés selon WCAG 2.x
   contre la couleur la plus défavorable de chaque fond :
     – dégradé bleu-vert : #0077b6 (blanc pur y plafonne à 4,87:1) ;
     – pied de page : #011e3a.
   Seuil AA pour du texte courant : 4,5:1.

   Texte courant posé sur le dégradé : 95 % de blanc (4,55:1).
   Avant : 60 % à 85 % — de 2,73:1 à 3,96:1. */
.hero-sub{color:rgba(255,255,255,.95)}                         /* 80 % → 3,69:1 */
.step p{color:rgba(255,255,255,.95)}                           /* 60 % → 2,73:1 */
.page-hero p{color:rgba(255,255,255,.95)}                      /* 70 % */
.page-hero .lede{color:rgba(255,255,255,.95)}                  /* guides : 78 % (sa règle bat .page-hero p) */
/* renforcés : ces deux classes viennent de utilitaires.css. */
.index-hero-note.index-hero-note{color:rgba(255,255,255,.95)}  /* 70 % → 3,18:1 */
.index-cta-texte.index-cta-texte{color:rgba(255,255,255,.95)}  /* 85 % → 3,96:1 */

/* Fil d'Ariane des bandeaux sombres : toujours en haut à gauche, sur la
   partie foncée du dégradé (#023e8a) — 50 % → 3,72:1, 70 % → 5,80:1.
   Limité à .page-hero : celui de annonce.html est posé sur fond clair, en
   gris, et deviendrait invisible en blanc. */
.page-hero .breadcrumb,.page-hero .breadcrumb a{color:rgba(255,255,255,.7)}
.page-hero .breadcrumb a:hover{color:#fff}
.hero-meta{color:rgba(255,255,255,.78)}                        /* guides : 60 % */

/* Pied de page, sur #011e3a. Les valeurs portées par des classes de
   utilitaires.css (.s-footer-lien, .index-footer-lien, .index-newsletter-*)
   y sont relevées directement. */
.footer-desc{color:rgba(255,255,255,.62)}                      /* 40 % → 3,70:1 · 62 % → 7,08:1 */
footer ul li a,.footer-legal-link{color:rgba(255,255,255,.66)} /* 30-40 % → 3,70:1 · 66 % → 7,86:1 */
.footer-bottom{color:rgba(255,255,255,.55)}                    /* 22 % → 2,00:1 · 55 % → 5,84:1 */
.footer-social a{color:rgba(255,255,255,.7)}                   /* 45 % → 4,34:1 · 70 % → 8,70:1 */
.frow.hdr .fcell{color:rgba(255,255,255,.78)}                  /* tarifs : en-tête de tableau */

/* renforcé : .index-note ×2 vient de utilitaires.css.
   L'avertissement « JamRent ne fournit aucune assurance… » était en #9ca3af
   sur blanc (2,54:1) — la phrase qui engage le plus la plateforme. Il passe
   au gris du texte courant, #6b7280 (4,83:1). */
.ins-content .index-note.index-note{color:#6b7280}


/* ── A3. Mouvement réduit ───────────────────────────────────────────────
   Réglage système « réduire les animations » : plus aucun déplacement ni
   changement d'échelle, les états de survol restent lisibles par la couleur
   et l'ombre seules. !important : cette préférence doit l'emporter sur
   toute règle de survol, y compris celles qui suivent dans ce fichier. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .listing-card:hover,.listing-card:hover .card-img img,.plan-card:hover,#jb-btn:hover,
  .btn-post:active,.btn-compte:active,.btn-primary:active,.btn-green:active,
  .btn-white:active,.btn-search:active,.btn-filter:active,.plan-btn:active,
  .home-empty .btn-empty:active,.btn-wa:active,.jrcb-btn:active,
  .index-cta-bouton-blanc:active,.index-cta-bouton-vert:active,
  .contact-succes-bouton:active,.index-newsletter-bouton:active{
    transform:none!important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   PARTIE B — FINITIONS
   ═══════════════════════════════════════════════════════════════════════ */


/* ── B1. Jetons ─────────────────────────────────────────────────────────
   Une échelle unique remplace les valeurs décidées au cas par cas.
   Les ombres sont teintées du bleu nuit de la marque (#1a2e44 → 26,46,68)
   plutôt que du noir pur : sur un fond #f8fafc légèrement bleuté, une ombre
   noire grise l'image, une ombre teintée reste dans la même famille. */
:root{
  /* Rayons — 7 valeurs au lieu de 10 */
  --jr-r-xs:6px;    /* puces, vignettes, étiquettes carrées */
  --jr-r-sm:8px;    /* petits champs, tags */
  --jr-r-md:10px;   /* boutons, champs de formulaire */
  --jr-r-lg:14px;   /* cartes */
  --jr-r-xl:18px;   /* panneaux mis en avant */
  --jr-r-2xl:22px;  /* carte d'appel à l'action */
  --jr-r-pill:999px;

  /* Élévation — 4 niveaux, deux couches chacun (contact net + diffusion) */
  --jr-e-0:0 1px 2px rgba(26,46,68,.05);
  --jr-e-1:0 1px 2px rgba(26,46,68,.05),0 4px 10px -4px rgba(26,46,68,.08);
  --jr-e-2:0 1px 2px rgba(26,46,68,.05),0 10px 22px -10px rgba(26,46,68,.16);
  --jr-e-3:0 2px 6px rgba(26,46,68,.06),0 22px 44px -18px rgba(26,46,68,.24);

  /* Traits */
  --jr-trait:#e5e7eb;        /* contour des surfaces */
  --jr-trait-fort:#d8dee7;   /* contour au survol */
  --jr-trait-doux:#eef1f6;   /* séparateurs internes */

  /* Mouvement — une seule courbe, deux durées */
  --jr-ez:cubic-bezier(.22,.61,.36,1);
  --jr-t-court:.16s;
  --jr-t-long:.26s;

  /* Gouttière latérale : 2rem au large, resserrée sous 640px (§ B13) */
  --jr-gouttiere:2rem;
}


/* ── B2. Rendu du texte ─────────────────────────────────────────────────
   Lissage en niveaux de gris : le rendu par défaut de macOS épaissit les
   graisses 700-900 de Nunito. Aucune police n'est changée. */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Les titres se coupent sur un équilibre de lignes plutôt qu'au dernier mot
   disponible ; les paragraphes évitent le mot orphelin en fin de bloc. */
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}

/* Resserrage optique : Nunito est large, et une capitale de 3 à 5rem paraît
   distendue au chasse par défaut. Proportionnel à la taille, sans toucher au
   corps de texte. */
.hero h1{letter-spacing:-.025em}
.page-hero h1,.index-cta-titre,.how-inner h2,.tarifs-plan-taux,
.plan-price .amount,.about-stat-num{letter-spacing:-.02em}
h2,h3{letter-spacing:-.012em}

/* Chiffres à chasse fixe partout où des montants s'alignent ou se comparent :
   les prix ne « dansent » plus d'une carte à l'autre. */
.card-price,.about-stat-num,.plan-price .amount,.tarifs-plan-taux,
.ex-row,.frais-table,.cat-compte,.results-count{font-variant-numeric:tabular-nums}

/* Sélection à la couleur de la marque plutôt qu'au bleu système. */
::selection{background:rgba(0,119,182,.16);color:#1a2e44}


/* ── B3. Barre de navigation ────────────────────────────────────────────
   Avant : une bordure ET une ombre portée, soit deux arêtes superposées sous
   la barre. Après : un seul trait net, et un fond légèrement translucide qui
   laisse deviner le défilement — seulement si le navigateur sait flouter,
   sinon la barre reste blanche opaque. Restreint à la barre principale. */
nav:has(> .nav-inner){
  box-shadow:none;
  border-bottom:1px solid var(--jr-trait);
}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  nav:has(> .nav-inner){
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:saturate(180%) blur(16px);
    backdrop-filter:saturate(180%) blur(16px);
  }
}

/* Les feuilles de page donnent aussi leur ombre au sommaire des guides
   (<nav class="toc">) et à la barre de liens créée par jamrent.js
   (<nav id="bottom-nav-bar">) : sélecteur nav trop large, corrigé ici. */
.toc,#bottom-nav-bar{box-shadow:none}

/* Gabarit unique : le gap et les corps différaient d'une page à l'autre. */
.nav-inner{padding:0 var(--jr-gouttiere)}
.nav-links{gap:1.6rem}
.nav-links a{font-size:.9rem}
.logo{letter-spacing:-.02em}

/* Les deux boutons de la barre ont désormais exactement la même hauteur. */
.btn-post,.btn-compte{
  padding:.55rem 1.15rem;
  font-size:.87rem;
  line-height:1.2;
}
.btn-post{box-shadow:0 1px 2px rgba(26,46,68,.06),0 6px 14px -8px rgba(46,204,113,.75)}
.btn-compte{border-width:1px;border-color:#0077b6}


/* ── B4. Boutons ────────────────────────────────────────────────────────
   Même rayon, même courbe, même retour à l'appui. Les couleurs de chaque
   bouton restent celles de sa feuille d'origine. */
.btn-post,.btn-compte,.btn-primary,.btn-green,.btn-white,.btn-search,
.btn-filter,.plan-btn,.home-empty .btn-empty,.btn-wa,.jrcb-btn{
  border-radius:var(--jr-r-md);
  transition:background var(--jr-t-court) var(--jr-ez),
             border-color var(--jr-t-court) var(--jr-ez),
             box-shadow var(--jr-t-court) var(--jr-ez),
             transform var(--jr-t-court) var(--jr-ez),
             color var(--jr-t-court) var(--jr-ez);
}
/* renforcés : ces boutons viennent de utilitaires.css. */
.index-cta-bouton-blanc.index-cta-bouton-blanc,
.index-cta-bouton-vert.index-cta-bouton-vert,
.contact-succes-bouton.contact-succes-bouton,
.index-newsletter-bouton.index-newsletter-bouton{
  border-radius:var(--jr-r-md);
  transition:background var(--jr-t-court) var(--jr-ez),
             box-shadow var(--jr-t-court) var(--jr-ez),
             transform var(--jr-t-court) var(--jr-ez);
}

/* Appui : 1px vers le bas. Un bouton qui ne bouge pas sous le doigt donne
   l'impression d'une image, pas d'une commande. (Neutralisé en § A3.) */
.btn-post:active,.btn-compte:active,.btn-primary:active,.btn-green:active,
.btn-white:active,.btn-search:active,.btn-filter:active,.plan-btn:active,
.home-empty .btn-empty:active,.btn-wa:active,.jrcb-btn:active,
.index-cta-bouton-blanc:active,.index-cta-bouton-vert:active,
.contact-succes-bouton:active,.index-newsletter-bouton:active{
  transform:translateY(1px);
}

/* Les CTA principaux portent une ombre teintée de leur propre couleur : ils
   avancent d'un plan sans qu'on ait eu à les agrandir. */
.btn-search{box-shadow:0 1px 2px rgba(26,46,68,.06),0 8px 18px -10px rgba(0,119,182,.85)}
.btn-primary,.btn-filter{box-shadow:0 1px 2px rgba(26,46,68,.06),0 6px 14px -8px rgba(0,119,182,.7)}
.btn-green,.home-empty .btn-empty{box-shadow:0 1px 2px rgba(26,46,68,.06),0 6px 14px -8px rgba(46,204,113,.75)}
.index-cta-bouton-vert.index-cta-bouton-vert,
.index-cta-bouton-blanc.index-cta-bouton-blanc{box-shadow:0 2px 10px -4px rgba(1,30,58,.4)}

/* Bouton pleine largeur de la colonne de filtres : même hauteur que les autres. */
.btn-filter{padding:.72rem 1rem;font-size:.87rem;margin-top:.5rem}


/* ── B5. Surfaces et cartes ─────────────────────────────────────────────
   Une carte = un fond blanc, un trait d'un pixel, une ombre de contact.
   Les ombres larges et sombres d'origine (jusqu'à 60px de diffusion à 20 %
   d'opacité) donnaient un effet « découpé et posé » ; une ombre courte et
   claire donne un effet « posé à plat », celui des interfaces auxquelles un
   investisseur compare le site. */
.listing-card,.plan-card,.ex-box,.frais-table,
.home-empty,.empty-state,.contact-carte,.info-box,.annonces-squelette-carte{
  border-radius:var(--jr-r-lg);
  border:1px solid var(--jr-trait);
  box-shadow:var(--jr-e-0);
}
.svc-icon{border-radius:var(--jr-r-md)}

/* renforcé : .annonces-squelette-carte vient de utilitaires.css. */
.annonces-squelette-carte.annonces-squelette-carte{border-radius:var(--jr-r-lg)}
/* renforcé : la vignette du squelette suit le format de la vraie (§ B6). */
.annonces-squelette-image.annonces-squelette-image{height:auto;aspect-ratio:4/3}


/* ── B6. Carte d'annonce ────────────────────────────────────────────────
   Même carte sur l'accueil et sur le catalogue : la vignette valait 190px de
   haut d'un côté, 240px de l'autre. Un rapport fixe 4/3 la rend identique
   quelle que soit la largeur de colonne. */
.listing-card{transition:transform var(--jr-t-long) var(--jr-ez),box-shadow var(--jr-t-long) var(--jr-ez),border-color var(--jr-t-long) var(--jr-ez)}
.listing-card:hover{
  transform:translateY(-2px);        /* était -5px : le saut se voyait plus que la carte */
  box-shadow:var(--jr-e-2);
  border-color:var(--jr-trait-fort);
}
.card-img{height:auto;aspect-ratio:4/3}
.listing-card:hover .card-img img{transform:scale(1.03)}
.card-body{padding:1rem 1.1rem 1.05rem}
.card-body h3{font-size:.94rem}
.card-location{font-size:.8rem}
.card-foot{font-size:.77rem;border-top-color:var(--jr-trait-doux)}

/* Pastille de prix : lisible sur n'importe quelle photo sans ombre lourde. */
.card-price{
  top:.6rem;right:.6rem;
  border-radius:var(--jr-r-sm);
  box-shadow:0 1px 2px rgba(26,46,68,.18),0 4px 10px -4px rgba(26,46,68,.3);
}
.card-badge{bottom:.6rem;left:.6rem;border-radius:var(--jr-r-pill)}
.tag-prem,.tag-cat{border-radius:var(--jr-r-pill)}


/* ── B7. Hero et bandeaux de tête ───────────────────────────────────────
   Voile lumineux en haut du dégradé : un aplat de dégradé est plat, une
   lumière décentrée lui donne une profondeur. Blanc transparent uniquement. */
.hero{isolation:isolate}
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 70% at 22% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 70%);
}

.hero-badge{
  border-radius:var(--jr-r-pill);
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.28);
  padding:.4rem 1.05rem;
  margin-bottom:1.8rem;
}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .hero-badge{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}

/* Champ de recherche : l'ombre de 60px à 20 % faisait flotter la boîte très
   au-dessus du bandeau. Ombre courte, et anneau sur la boîte entière quand
   un des deux champs est actif — pas sur le champ lui-même (§ B9). */
.search-box{
  border-radius:var(--jr-r-lg);
  padding:.38rem;
  box-shadow:var(--jr-e-3);
  transition:box-shadow var(--jr-t-long) var(--jr-ez);
}
.search-box:focus-within{box-shadow:var(--jr-e-3),0 0 0 4px rgba(255,255,255,.35)}
.search-field:first-child{border-right-color:var(--jr-trait)}

/* Bandeau de tête des pages intérieures : même gouttière partout. */
.page-hero{padding:3.25rem var(--jr-gouttiere)}
.page-hero .breadcrumb a{transition:color var(--jr-t-court) var(--jr-ez)}


/* ── B8. Sections et rythme vertical ────────────────────────────────────
   Les sections respiraient entre 2,5rem et 5rem sans raison apparente. Deux
   valeurs suffisent : 4,5rem pour une section de page, 3,5rem pour un
   bandeau secondaire. */
.section{padding:4.5rem var(--jr-gouttiere)}
.how-section{padding:4.5rem var(--jr-gouttiere)}
.insurance-section{padding:4.5rem var(--jr-gouttiere);gap:3.5rem}
.content-wrap{padding:3.5rem var(--jr-gouttiere)}
.plans-sec,.ex-s,.frais-s{padding:4.5rem var(--jr-gouttiere)}
.listings-layout{padding:2.75rem var(--jr-gouttiere);gap:2.25rem}
.section-header{margin-bottom:1.6rem}

.ins-img{border-radius:var(--jr-r-lg);box-shadow:var(--jr-e-2)}


/* ── B9. Formulaires ────────────────────────────────────────────────────
   Un seul gabarit de champ : trait d'un pixel (et non 1,5px par endroits),
   même rayon que les boutons, et un anneau au focus plutôt qu'un simple
   changement de couleur de bordure — qui passait inaperçu. */
input[type=text],input[type=email],input[type=tel],input[type=url],
input[type=number],input[type=date],input[type=search],input[type=password],
select,textarea,.sort-sel,.range-row input{
  border-radius:var(--jr-r-md);
  transition:border-color var(--jr-t-court) var(--jr-ez),
             box-shadow var(--jr-t-court) var(--jr-ez);
}
input:focus,select:focus,textarea:focus,.sort-sel:focus,.range-row input:focus{
  border-color:#0077b6;
  box-shadow:0 0 0 3px rgba(0,119,182,.12);
}
/* Les deux champs du hero n'ont pas de bordure : c'est la boîte qui s'éclaire
   (§ B7), un anneau autour du champ nu ferait double emploi. */
.search-field input:focus{box-shadow:none}
/* renforcé : .annonces-filtre-ville vient de utilitaires.css. */
.annonces-filtre-ville.annonces-filtre-ville{border-width:1px;border-radius:var(--jr-r-md)}
.range-row input,.sort-sel{border-width:1px}

.notif,.notif-inline,.notif-auth,.info-box{border-radius:var(--jr-r-md)}


/* ── B10. Filtres et tableaux ───────────────────────────────────────── */
.filter-card h2{font-size:.88rem;margin-bottom:.85rem}
.cat-note{border-top-color:var(--jr-trait-doux)}

.frais-table{border-radius:var(--jr-r-lg)}
.frow{border-bottom-color:var(--jr-trait-doux)}
.frow:not(.hdr){transition:background var(--jr-t-court) var(--jr-ez)}
.ex-row{border-bottom-color:var(--jr-trait-doux)}
.ex-ctx{border-radius:var(--jr-r-md)}

.plan-card{border-radius:var(--jr-r-xl);transition:transform var(--jr-t-long) var(--jr-ez),box-shadow var(--jr-t-long) var(--jr-ez),border-color var(--jr-t-long) var(--jr-ez)}
.plan-card:hover{transform:translateY(-2px);box-shadow:var(--jr-e-2)}
.plan-card.featured{box-shadow:0 1px 2px rgba(26,46,68,.05),0 14px 30px -14px rgba(0,119,182,.35)}
.plan-badge{border-radius:var(--jr-r-pill)}
/* renforcé : .tarifs-plan vient de utilitaires.css. */
.tarifs-plan.tarifs-plan{
  border-radius:var(--jr-r-xl);
  box-shadow:0 1px 2px rgba(26,46,68,.05),0 16px 36px -16px rgba(0,119,182,.35);
}
.tarifs-plan-badge.tarifs-plan-badge{border-radius:var(--jr-r-pill)}
/* renforcé : .contact-carte vient de utilitaires.css. */
.contact-carte.contact-carte{border-radius:var(--jr-r-lg)}


/* ── B11. Pied de page ──────────────────────────────────────────────────
   Contraste relevé en § A2 ; ici, seulement la forme. */
footer{padding:4rem var(--jr-gouttiere) 2rem}
footer h2{color:rgba(255,255,255,.95)}
.footer-bottom{border-top-color:rgba(255,255,255,.1);padding-top:1.5rem}
.footer-social a{
  border-radius:var(--jr-r-md);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  transition:background var(--jr-t-court) var(--jr-ez),color var(--jr-t-court) var(--jr-ez),border-color var(--jr-t-court) var(--jr-ez);
}
.footer-social a:hover{border-color:#0077b6}
.footer-news input[type=email]{
  border-radius:var(--jr-r-md);
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
}
.footer-news input[type=email]::placeholder{color:rgba(255,255,255,.5)}
.footer-news input[type=email]:focus{
  border-color:rgba(255,255,255,.4);
  box-shadow:0 0 0 3px rgba(255,255,255,.1);
}

/* Barre de liens de bas de page (jamrent.css) : même rayon que le reste. */
#bottom-nav-bar{padding:.85rem var(--jr-gouttiere)}
#bottom-nav-bar a{border-radius:var(--jr-r-md)}


/* ── B12. Blocs venus de jamrent.css ────────────────────────────────────
   JamBot, bandeau cookies, menu mobile : mêmes rayons et mêmes ombres que
   le reste du site. */
#jb-btn{box-shadow:0 2px 6px rgba(26,46,68,.12),0 12px 28px -12px rgba(0,119,182,.8)}
#jb-btn:hover{transform:scale(1.06);box-shadow:0 2px 6px rgba(26,46,68,.14),0 16px 34px -14px rgba(0,119,182,.9)}
#jb-box{border-radius:var(--jr-r-xl);box-shadow:var(--jr-e-3)}
#jb-in,#jb-snd{border-radius:var(--jr-r-md)}
#jb-in{border-width:1px}
.jbsg{border-width:1px;border-radius:var(--jr-r-pill)}
.mobile-menu{box-shadow:var(--jr-e-2)}
.mobile-menu a,.mobile-menu button{border-bottom-color:var(--jr-trait-doux)}
#jrcb{box-shadow:0 -2px 8px rgba(26,46,68,.18),0 -16px 40px -20px rgba(26,46,68,.5)}
#jrcb-inner{padding:1.2rem var(--jr-gouttiere)}


/* ── B13. Gouttière sur petit écran ─────────────────────────────────────
   2rem de marge de chaque côté sur un écran de 375px, c'est 17 % de la
   largeur perdue. 1,15rem laisse respirer le contenu sans le coller au bord.
   (Hero, services, « Qui sommes-nous » et CTA : voir § C9.) */
@media(max-width:640px){
  :root{--jr-gouttiere:1.15rem}
  .hero h1{letter-spacing:-.02em}
  .page-hero{padding-top:2.5rem;padding-bottom:2.5rem}
  .section,.plans-sec,.ex-s,.frais-s,.how-section,.insurance-section{padding-top:3.25rem;padding-bottom:3.25rem}
  .content-wrap{padding-top:2.5rem;padding-bottom:2.5rem}
  /* renforcés : ces bandeaux viennent de utilitaires.css. */
  .tarifs-avert.tarifs-avert{padding:.9rem var(--jr-gouttiere)}
  .assurance-avert.assurance-avert{padding:1.4rem var(--jr-gouttiere)}
  .contact-faq.contact-faq{padding:2.75rem var(--jr-gouttiere)}
  .annonces-conseils.annonces-conseils{padding:2.5rem var(--jr-gouttiere)}
  .tarifs-contenu.tarifs-contenu{padding:0 var(--jr-gouttiere)}
}


/* ═══════════════════════════════════════════════════════════════════════
   PARTIE C — STRUCTURE DES BLOCS
   ═══════════════════════════════════════════════════════════════════════
   La partie B harmonise les détails. Celle-ci touche à la composition :
   comment les blocs se tiennent entre eux. Même règle : ni texte, ni police,
   ni teinte nouvelle — uniquement la disposition, les séparations et la
   hiérarchie. */


/* ── C1. Hero : bord droit, panneau de confiance en chevauchement ───────
   La découpe en dôme (clip-path:ellipse(55% …)) creusait le bas du bandeau :
   le détail le plus « gabarit » de la page. Le hero se termine désormais
   par un bord net, et les trois engagements (constat, paiement, dépôt)
   montent le chevaucher dans un seul panneau : la promesse et ses garanties
   se lisent d'un seul regard, comme sur les places de marché établies. */
.hero{padding:4.5rem var(--jr-gouttiere) 8.5rem}
.hero::after{display:none}
/* Titre ramené de 5 à 4,25rem et élargi : deux lignes au lieu de trois au
   bureau. Un titre qui occupe la moitié de l'écran fait « modèle de page ». */
.hero h1{font-size:clamp(2.4rem,5.2vw,4.25rem);max-width:980px;line-height:1.06;margin-bottom:1.3rem}
.hero-sub{max-width:580px;font-size:1.1rem}
.search-box{max-width:720px}
.search-field{padding:.85rem 1.2rem}
.btn-search{padding:.95rem 1.9rem}

.services{padding:0 var(--jr-gouttiere);margin-top:-5.5rem;position:relative;z-index:2}
.services-grid{
  gap:0;
  background:#fff;
  border:1px solid var(--jr-trait);
  border-radius:var(--jr-r-xl);
  box-shadow:var(--jr-e-3);
  overflow:hidden;
}
.service-card{border:0;border-radius:0;box-shadow:none;background:transparent;padding:1.7rem 1.8rem}
.service-card+.service-card{border-left:1px solid var(--jr-trait-doux)}


/* ── C2. « Comment ça fonctionne » : une frise ──────────────────────────
   Trois cercles translucides côte à côte se lisent comme trois blocs ;
   reliés par un trait, ils se lisent comme un parcours. Pastilles pleines
   en blanc, chiffre au bleu de la marque. */
.steps-grid{position:relative}
.steps-grid::before{
  content:'';position:absolute;top:32px;height:1px;
  /* du centre de la 1re colonne au centre de la 3e (gouttières de 3rem) */
  left:calc((100% - 6rem) / 6);right:calc((100% - 6rem) / 6);
  background:rgba(255,255,255,.3);
}
.step-num{
  position:relative;z-index:1;
  background:#fff;border:0;color:#0077b6;
  box-shadow:0 0 0 6px rgba(255,255,255,.1),0 8px 20px -8px rgba(1,30,58,.55);
}


/* ── C3. Constat d'état : lecture guidée ────────────────────────────────
   Le texte est trois fois plus haut que la photo, qui restait suspendue au
   milieu d'un vide. Au bureau, elle accompagne désormais la lecture. */
@media(min-width:769px){
  .insurance-section{align-items:flex-start}
  .ins-img{position:sticky;top:120px}
}
.ins-list{gap:0;border-top:1px solid var(--jr-trait-doux)}
.ins-list li{padding:.72rem 0;border-bottom:1px solid var(--jr-trait-doux)}
/* renforcé : .index-note ×2 vient de utilitaires.css. L'avertissement sur
   l'absence d'assurance passe dans un encart (couleur : § A2 — 4,62:1 sur
   ce fond #f8fafc). */
.ins-content .index-note.index-note{
  background:#f8fafc;
  border:1px solid var(--jr-trait);
  border-radius:var(--jr-r-md);
  padding:1rem 1.15rem;
  margin-top:1.3rem;
}


/* ── C4. « Qui sommes-nous » : un tableau de chiffres ───────────────────
   Quatre tuiles de quatre couleurs pastel différentes : le motif le plus
   « généré » de la page. Un seul panneau, quatre cases séparées par un
   trait, chiffres alignés à gauche. Les chiffres gardent leur couleur ;
   seuls les fonds pastel disparaissent. */
.about-stats{
  gap:0;
  background:#fff;
  border:1px solid var(--jr-trait);
  border-radius:var(--jr-r-xl);
  box-shadow:var(--jr-e-1);
  overflow:hidden;
}
/* renforcé : les fonds pastel .index-stat-* viennent de utilitaires.css. */
.about-stat.about-stat{
  background:transparent;
  border:0;border-radius:0;box-shadow:none;
  text-align:left;
  padding:1.6rem 1.5rem;
}
.about-stat.about-stat:nth-child(odd){border-right:1px solid var(--jr-trait-doux)}
.about-stat.about-stat:nth-child(-n+2){border-bottom:1px solid var(--jr-trait-doux)}
.about-stat-num{font-size:2.1rem;line-height:1.1}
.about-stat-label{margin-top:.4rem;line-height:1.45}
/* La section faisait 1180px de large quand toutes les autres font 1216px de
   contenu (1280px moins les gouttières) : son bord gauche ne tombait pas sous
   celui des autres blocs. Alignée, et même respiration verticale. */
.about-grid{max-width:1216px}
/* renforcé : .index-apropos vient de utilitaires.css. */
.index-apropos.index-apropos{padding:4.5rem var(--jr-gouttiere)}


/* ── C5. Appel à l'action final : une carte, plus un bandeau ────────────
   Le même dégradé que le hero, pleine largeur, en bas de page : la page
   finissait comme elle commençait. Contenu dans une carte aux coins
   arrondis, il reste le temps fort de la fin sans répéter le hero. */
/* renforcé : .index-cta vient de utilitaires.css. */
.index-cta.index-cta{
  width:calc(100% - 2 * var(--jr-gouttiere));
  max-width:1216px;
  margin:4.5rem auto;
  padding:4rem 2rem;
  border-radius:var(--jr-r-2xl);
  position:relative;overflow:hidden;isolation:isolate;
  box-shadow:var(--jr-e-2);
}
.index-cta::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 90% at 15% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 70%);
}


/* ── C6. Catalogue : une colonne de filtres d'un seul tenant ────────────
   Trois cartes et trois boutons pleine largeur de trois couleurs (bleu,
   gris, vert) : six blocs pour un seul outil. Un panneau, des séparateurs,
   et « Réinitialiser » en bouton secondaire — c'est l'action la moins
   importante, elle n'a pas à peser autant que « Appliquer ». */
.filters{
  background:#fff;
  border:1px solid var(--jr-trait);
  border-radius:var(--jr-r-xl);
  box-shadow:var(--jr-e-0);
  overflow:hidden;
  padding-bottom:1.25rem;
}
.filter-card{
  border:0;border-radius:0;box-shadow:none;margin:0;
  border-bottom:1px solid var(--jr-trait-doux);
  padding:1.2rem 1.25rem;
}
.filters .btn-filter{width:calc(100% - 2.5rem);margin:.5rem 1.25rem 0}
.filter-card+.btn-filter{margin-top:1.1rem}
/* renforcés : .annonces-btn-* ×3 viennent de utilitaires.css.
   Contour en ombre intérieure plutôt qu'en bordure : même hauteur que les
   deux autres boutons. */
.filters .annonces-btn-reinit.annonces-btn-reinit.annonces-btn-reinit{
  background:transparent;color:#6b7280;
  box-shadow:inset 0 0 0 1px var(--jr-trait);
}
.filters .annonces-btn-reinit.annonces-btn-reinit.annonces-btn-reinit:hover{
  background:#f8fafc;color:#1a2e44;
  box-shadow:inset 0 0 0 1px var(--jr-trait-fort);
}
.filters .annonces-btn-geoloc.annonces-btn-geoloc.annonces-btn-geoloc{
  box-shadow:0 1px 2px rgba(26,46,68,.06),0 6px 14px -8px rgba(46,204,113,.75);
}


/* ── C7. Pages intérieures ──────────────────────────────────────────────
   Même lumière que le hero sur les bandeaux de tête, pour que les pages
   intérieures appartiennent visiblement au même site que l'accueil. */
.page-hero{position:relative;overflow:hidden;isolation:isolate}
.page-hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(80% 120% at 10% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 65%);
}
.page-hero p{max-width:72ch}

/* Pages légales : la barre bleue de 4px devant chaque titre (motif de
   gabarit) cède la place à un filet de séparation. Le titre garde son bleu. */
.content-wrap h2{
  border-left:0;padding-left:0;
  border-top:1px solid var(--jr-trait-doux);
  padding-top:1.75rem;margin-top:2.25rem;
}
.content-wrap h2:first-child{border-top:0;padding-top:0;margin-top:0}

/* FAQ (faq.html, assurance.html) : filtres en pastilles, question ouverte
   mise en relief. */
.faq-cat{border-width:1px;border-radius:var(--jr-r-pill);padding:.45rem 1rem}
.faq-group-title{border-bottom-width:1px}
.faq-item{
  border-radius:var(--jr-r-md);
  transition:border-color var(--jr-t-court) var(--jr-ez),box-shadow var(--jr-t-court) var(--jr-ez);
}
.faq-item:hover{border-color:var(--jr-trait-fort)}
.faq-item.open{border-color:var(--jr-trait-fort);box-shadow:var(--jr-e-1)}


/* ── C8. Pied de page : plus d'air entre les colonnes ─────────────────── */
footer{padding-top:4.5rem}
.footer-inner{gap:2.25rem 2rem;margin-bottom:3rem}
footer h2{margin-bottom:1.05rem}
footer ul li{margin-bottom:.65rem}


/* ── C9. Adaptations ────────────────────────────────────────────────── */
@media(max-width:1024px){
  /* Panneau de confiance empilé : séparateurs horizontaux. */
  .service-card+.service-card{border-left:0;border-top:1px solid var(--jr-trait-doux)}
}
@media(max-width:768px){
  .steps-grid::before{display:none}   /* étapes empilées : plus de frise */
}
@media(max-width:640px){
  .hero{padding-top:3.25rem;padding-bottom:6.25rem}
  .hero h1{font-size:2.3rem}
  .services{margin-top:-3.75rem}
  .service-card{padding:1.2rem 1.25rem}
  .index-apropos.index-apropos{padding:3.25rem var(--jr-gouttiere)}
  .index-cta.index-cta{padding:3rem 1.25rem;margin:3.25rem auto;border-radius:var(--jr-r-xl)}
}
@media(max-width:560px){
  .about-stat.about-stat{padding:1.15rem 1rem}
}
