/* ═══════════════════════════════════════════════════════════════════════════
   Jetroque — design 2026 (maquette « lot 1 » validée le 26 septembre 2026)
   Couche de design commune à toutes les pages de www.jetroque.com.

   Chargée en dernier dans <head>. Chaque sélecteur est préfixé par `html` :
   il l'emporte sur les styles de la page à spécificité égale, quel que soit
   l'ordre des blocs <style> (l'accueil en a aussi dans <body>).
   Retirer ce fichier = revenir exactement au design précédent.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Une seule famille de gris, teintée vert (fini l'alternance gris-bleu / vert) ── */
html:root:not([data-theme="dark"]){--gray-soft:#f2f6f3;--border:#e1e8e3;--ink-2:#1f2a24;--gray:#626d66}
html:root[data-theme="dark"]{--card:#111814;--gray-soft:#16201b;--border:#22302a;--gray:#a7b3ab;--ink-2:#cfd8d2}
html[data-theme="dark"] .section--soft{background:#0f1613}
html[data-theme="dark"] .section--ink,
html[data-theme="dark"] .footer{background:#0c130f}
/* Pages qui suivent le réglage du système sans attribut data-theme (accueil anglais) */
@media (prefers-color-scheme:dark){
  html:root:not([data-theme="light"]){--card:#111814;--gray-soft:#16201b;--border:#22302a;--gray:#a7b3ab;--ink-2:#cfd8d2}
  html:root:not([data-theme]) .section--soft{background:#0f1613}
  html:root:not([data-theme]) :is(.section--ink,.footer){background:#0c130f}
}
/* Anneau autour des numéros d'étape : couleur du fond de la section */
html body{--ring:var(--bg)}
html .section--soft{--ring:var(--gray-soft)}
html .section--cream{--ring:var(--green-cream)}

/* Aucun défilement horizontal : l'ombre floue de certaines images débordait de 8 px sur téléphone.
   `clip` (et non `hidden`) ne crée pas de conteneur de défilement : les éléments collants restent collants. */
html:root{overflow-x:clip}

/* ── 2. Haut des pages intérieures : fil d'Ariane en tête, titre équilibré ── */
html :is(.hero,.dl-hero,.legal-hero) > .wrap:not(.hero__inner){display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:14px}
html :is(.hero,.dl-hero,.legal-hero) > .wrap:not(.hero__inner) > *{flex:0 0 100%}
html :is(.hero,.dl-hero,.legal-hero) > .wrap:not(.hero__inner) > .tag{flex:0 1 auto;max-width:100%}
/* Pastille contenant un exposant (« 1ʳᵉ édition ») : en ligne, sinon l'exposant se détache */
html .tag:has(sup){display:inline-block}
html :is(.hero,.dl-hero,.legal-hero) > .wrap:not(.hero__inner)::before{content:"";flex:0 0 100%;order:-1;height:0}
html :is(.hero,.dl-hero,.legal-hero) > .wrap:not(.hero__inner) > .breadcrumb{order:-3;flex:0 0 auto;margin:0 0 20px}
html :is(.hero,.dl-hero,.legal-hero) > .wrap:not(.hero__inner) > .page-updated{order:-2;flex:0 0 auto;margin:0 0 20px}
html :is(.hero,.dl-hero,.legal-hero) > .wrap:not(.hero__inner) > :is(.hero__cta,.hero__ctas){order:1}
html :is(.hero,.dl-hero,.legal-hero) > .wrap:not(.hero__inner) > .hero__stats{order:2;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
html :is(.hero,.dl-hero,.legal-hero) h1{text-wrap:balance;letter-spacing:-.03em;line-height:1.06}
html :is(.hero,.dl-hero,.legal-hero) .lead{text-wrap:pretty}
@media (min-width:900px){
  html :is(.hero,.dl-hero,.legal-hero):not(:has(.hero__inner)){text-align:left;background:radial-gradient(70% 70% at 12% 0%,var(--green-cream) 0%,transparent 70%);padding-top:56px;padding-bottom:48px}
  html :is(.hero,.dl-hero,.legal-hero) > .wrap:not(.hero__inner){justify-content:flex-start}
  html :is(.hero,.dl-hero,.legal-hero) > .wrap:not(.hero__inner) h1{max-width:34ch}
  html :is(.hero,.dl-hero,.legal-hero) > .wrap:not(.hero__inner) > :is(.lead,p:not([class])){max-width:62ch;margin-left:0;margin-right:0}
  html :is(.hero,.dl-hero,.legal-hero) > .wrap:not(.hero__inner) > :is(.hero__cta,.hero__ctas,.hero__stats,.meta,.search){justify-content:flex-start;margin-left:0;margin-right:0}
}

/* ── 3. Étapes : une ligne de progression au lieu de cartes identiques ── */
html .step{background:none;border:0;border-radius:0;box-shadow:none;text-align:left}
html .step:hover{transform:none;box-shadow:none}
html .step__num{position:relative;top:auto;left:auto;transform:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--green);color:#fff;font-weight:800;box-shadow:0 0 0 8px var(--ring)}
html .steps{position:relative}
@media (min-width:900px){
  html .steps{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0 44px!important}
  html .steps::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:2px;background:var(--border)}
  html .step{padding:0}
  html .step__num{width:56px;height:56px;font-size:1.2rem;margin:0 0 24px}
  html .step h3{font-size:1.25rem}
  html .step p{max-width:38ch}
}
@media (max-width:899.98px){
  html .steps{gap:30px}
  html .steps::before{content:"";position:absolute;left:21px;top:10px;bottom:10px;width:2px;background:var(--border)}
  html .step{padding:0 0 0 66px}
  html .step__num{position:absolute;left:0;top:0;width:44px;height:44px;font-size:1.15rem;margin:0}
}

/* ── 4. « À découvrir aussi » : une liste de liens, pas trois cartes ── */
html .related__grid{gap:0 36px}
html .related__card{background:none;border:0;border-top:1px solid var(--border);border-radius:0;padding:16px 0 14px;box-shadow:none;min-height:0}
html .related__card:hover{transform:none;box-shadow:none;border-color:var(--green)}
html .related__card strong::after{content:" →";color:var(--green)}

/* ═══ Accueil (FR et EN) : body.page-home ═══ */

/* Haut de page : 4 éléments, titre sur 2 lignes (ordinateur) */
@media (min-width:1024px){
  html .page-home .hero__inner{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr)!important;gap:40px!important}
  html .page-home .hero__title{font-size:clamp(2.6rem,3.9vw,3.45rem)!important;line-height:1.04!important;letter-spacing:-.035em}
  html .page-home .hero__title em{display:inline-block}
  html .page-home .hero__sub{max-width:52ch;font-size:1.1rem}
}
html .page-home .hero__actions{margin-bottom:0}

/* Bande « en bref » juste sous le haut de page */
html .band{background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:26px 0 16px}
html .band__inner{display:grid;gap:22px;align-items:center}
html .band__cycle{font-weight:700;color:var(--green-dark);font-size:.95rem;margin:0 0 4px}
html .band__rating{font-size:.9rem;color:var(--gray);margin:0}
html .band .hero__stats{display:flex;gap:40px;margin:0;flex-wrap:nowrap}
html .band__stores{display:flex;gap:10px;flex-wrap:wrap}
html .band__stores img{height:46px;width:auto;display:block}
html .band__note{font-size:.72rem;color:var(--gray);margin:14px 0 0}
@media (min-width:1024px){ html .band__inner{grid-template-columns:minmax(0,1fr) auto auto;gap:56px} }
@media (max-width:1023.98px){
  html .band__inner{text-align:center;justify-items:center}
  html .band .hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;width:100%}
  html .band__stores{justify-content:center}
  html .band__note{text-align:center}
}

/* Pastilles : 4 sur la page (haut de page, garantie, V5, différence) */
html .page-home .tag{display:none}
html .page-home :is(#garantie-60j,#jetroque-v5,#pourquoi) .tag{display:inline-flex}

/* « Comment ça fonctionne » : en-tête à gauche (la ligne d'étapes est commune, §3) */
@media (min-width:900px){ html .page-home #how .section__head{text-align:left;margin-inline:0;max-width:620px} }
html .page-home #how .step__emoji{font-size:1.6rem;margin-bottom:8px}

/* « Tout ce dont vous avez besoin » : mosaïque, une case de marque, une vraie capture */
html .page-home #features .feature:nth-child(1){background:linear-gradient(150deg,#15803d,#166534);border-color:transparent;color:#fff}
html .page-home #features .feature:nth-child(1) :is(.ct,p,strong){color:#fff}
html .page-home #features .feature:nth-child(1) .feature__icon{background:rgba(255,255,255,.16);color:#fff}
html .page-home #features .feature:nth-child(3){display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
html .page-home #features .feature:nth-child(6){background:var(--green-cream)}
html .page-home .feature__shot{display:block;width:74%;max-width:300px;margin:22px auto 0;border-radius:22px 22px 0 0;border:1px solid var(--border);border-bottom:0;height:240px;object-fit:cover;object-position:top;background:var(--gray-soft)}
@media (min-width:900px){
  html .page-home #features .section__head{text-align:left;margin-inline:0;max-width:620px}
  html .page-home #features .features{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-areas:"ia ia geo" "tro chat geo" "par imp imp";gap:16px!important}
  html .page-home #features .feature:nth-child(1){grid-area:ia;padding:34px;display:flex;flex-direction:column}
  html .page-home #features .feature:nth-child(1) .feature__icon{margin-bottom:auto}
  html .page-home #features .feature:nth-child(1) .ct{font-size:1.7rem;letter-spacing:-.02em;margin-top:28px}
  html .page-home #features .feature:nth-child(1) p{font-size:1.06rem;max-width:46ch}
  html .page-home #features .feature:nth-child(2){grid-area:tro}
  html .page-home #features .feature:nth-child(3){grid-area:geo}
  html .page-home #features .feature:nth-child(3) p{margin-bottom:22px}
  html .page-home #features .feature:nth-child(4){grid-area:chat}
  html .page-home #features .feature:nth-child(5){grid-area:par}
  html .page-home #features .feature:nth-child(6){grid-area:imp}
  html .page-home .feature__shot{flex:none;height:300px;margin-top:auto}
}

/* « Échangez en toute sérénité » : titre à gauche, liste à droite */
html .page-home #securite .trust__card{background:none;border:0;border-top:1px solid var(--border);border-radius:0;padding:22px 0;box-shadow:none}
html .page-home #securite .trust__card:last-child{border-bottom:1px solid var(--border)}
html .page-home #securite .trust__card:hover{transform:none;box-shadow:none}
@media (min-width:900px){
  html .page-home #securite .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px;align-items:start}
  html .page-home #securite .section__head{text-align:left;margin:0;position:sticky;top:120px}
  html .page-home #securite .trust{grid-template-columns:1fr!important;gap:0!important}
}

/* « Une entreprise québécoise » : liste en 2 colonnes au lieu de 7 cartes */
html .page-home #credibilite .cred{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;row-gap:2px;background:none;border:0;border-top:1px solid var(--border);border-radius:0;padding:18px 0;box-shadow:none}
html .page-home #credibilite .cred__icon{grid-row:span 2}
html .page-home #credibilite .cred :is(.ct,p){grid-column:2}
html .page-home #credibilite .cred:hover{transform:none;box-shadow:none}
@media (min-width:900px){
  html .page-home #credibilite .section__head{text-align:left;margin-inline:0;max-width:680px}
  html .page-home #credibilite .cred-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 56px!important}
}
