/* Héros en deux colonnes — 24/09/2026
 * Retour de Kylian : « trop de blanc », une colonne de texte et la moitié
 * droite vide. Texte à gauche, visuel à droite à partir de 900 px (même
 * hauteur visuelle), visuel sous les boutons en mobile (220-260 px).
 * Coins arrondis du kit, filet fin, aucune ombre lourde.
 */

.page-hero {
  display: grid;
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 24px;
}
.page-hero > .page-head { padding: 0; max-width: none; }
.page-hero > .page-head > p:not(.eyebrow) { max-width: 600px; }

.page-hero__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  height: clamp(220px, 62vw, 260px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.page-hero__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 50% 50%);
}

@media (min-width: 900px) {
  .page-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 56px;
    padding-top: 64px;
    padding-bottom: 32px;
  }
  .page-hero > .page-head { align-self: center; }
  .page-hero__media { height: auto; min-height: 360px; }
  .page-hero__media > img { object-position: var(--hero-pos-wide, var(--hero-pos, 50% 50%)); }
}

/* entrée douce : léger zoom arrière de l'image (aucun effet si mouvement réduit) */
@media (prefers-reduced-motion: no-preference) {
  .page-hero__media > img { animation: hero-settle 1.4s var(--ease) both; }
  @keyframes hero-settle { from { transform: scale(1.045); opacity: .0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
}

/* ------------------------------------------------ appareil dans le héros */

.page-hero__device {
  display: grid;
  place-items: center;
  margin: 0;
}
.page-hero__device .dv--laptop { --dv-w: 100%; width: 100%; }
@media (max-width: 899px) {
  .page-hero__device .dv--laptop { width: min(100%, 420px); }
}

/* fondu enchaîné entre vraies captures (réglages, puis mode phrase) */
.dv__view.hero-fade { position: relative; }
.dv__view.hero-fade > img + img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .dv__view.hero-fade > img:nth-child(2) { animation: hero-fade-2 12s ease-in-out infinite; }
  .dv__view.hero-fade > img:nth-child(3) { animation: hero-fade-3 12s ease-in-out infinite; }
  @keyframes hero-fade-2 { 0%, 28% { opacity: 0; } 34%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
  @keyframes hero-fade-3 { 0%, 60% { opacity: 0; } 66%, 94% { opacity: 1; } 100% { opacity: 0; } }
}
.hero-fade__legend {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}
.hero-fade__legend span {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-fade__legend span:nth-child(1) { animation: hero-chip-1 12s ease-in-out infinite; }
  .hero-fade__legend span:nth-child(2) { animation: hero-chip-2 12s ease-in-out infinite; }
  .hero-fade__legend span:nth-child(3) { animation: hero-chip-3 12s ease-in-out infinite; }
  @keyframes hero-chip-1 { 0%, 28%, 100% { color: var(--ink); border-color: var(--accent); } 34%, 94% { color: var(--muted); border-color: var(--line); } }
  @keyframes hero-chip-2 { 0%, 28%, 66%, 100% { color: var(--muted); border-color: var(--line); } 34%, 60% { color: var(--ink); border-color: var(--accent); } }
  @keyframes hero-chip-3 { 0%, 60%, 100% { color: var(--muted); border-color: var(--line); } 66%, 94% { color: var(--ink); border-color: var(--accent); } }
}

/* ------------------------------------------------ installer : téléphone + icône */

.install-visual {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 8px 0;
}
.install-visual .dv--phone { --dv-w: 230px; }
.install-visual__icon {
  position: absolute;
  top: 18%;
  left: calc(50% + 134px);
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 124px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
}
.install-visual__icon img {
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.install-visual__icon small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .install-visual__icon { animation: install-pop 6s var(--ease) infinite; }
  @keyframes install-pop {
    0%, 12% { opacity: 0; transform: translateY(10px) scale(.8); }
    22%, 82% { opacity: 1; transform: none; }
    92%, 100% { opacity: 0; transform: translateY(-4px) scale(.96); }
  }
}
@media (max-width: 899px) {
  .install-visual { display: none; }
}

/* ------------------------------------------------ signaler un bug : colonne visuelle */

.bug-page { display: grid; gap: 32px; padding-bottom: var(--section-y); }
.bug-page .bug-layout { max-width: none; }
.bug-page__aside { display: grid; gap: 20px; align-content: start; }
.bug-page__aside .page-hero__media { height: 200px; }
.bug-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: bug-step; }
.bug-steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}
.bug-steps li::before {
  counter-increment: bug-step;
  content: counter(bug-step);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
}
.bug-steps strong { display: block; color: var(--ink); font-weight: 600; }
@media (min-width: 900px) {
  .bug-page { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .bug-page__aside { position: sticky; top: 96px; margin-top: 64px; }
  .bug-page__aside .page-hero__media { height: auto; aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------ CTA de fin en deux colonnes */

.cta-duo { display: grid; gap: 32px; align-items: center; }
.cta-duo__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  aspect-ratio: 4 / 3;
}
.cta-duo__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .cta-duo { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; }
}
@media (max-width: 899px) {
  .cta-duo__media { aspect-ratio: auto; height: clamp(200px, 56vw, 240px); }
}

/* ------------------------------------------------ FAQ : héros court + rubriques */

.page-hero--short .page-hero__media { min-height: 0; }
@media (min-width: 900px) {
  .page-hero--short .page-hero__media { min-height: 320px; }
}
.faq-jump {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 24px;
  max-width: 560px;
}
.page-head .faq-jump a {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.faq-jump a svg { grid-row: span 2; width: 20px; height: 20px; color: var(--accent); }
.faq-jump a small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.page-head .faq-jump a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, #fff); }
@media (max-width: 380px) { .faq-jump { grid-template-columns: 1fr; } }

/* installer : la colonne visuelle garde la hauteur du texte */
.install-head.page-hero { padding-bottom: 8px; }
.install-visual__icon small svg { width: 12px; height: 12px; color: var(--accent); }

/* ------------------------------------------------ phrase de passe : générateur vivant */

.phrase-live {
  display: grid;
  gap: 14px;
  align-content: center;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.phrase-live__tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-sm);
  background: var(--soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.phrase-live__tabs span { flex: 1; padding: 7px 8px; border-radius: 8px; text-align: center; }
.phrase-live__tabs .is-on { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.phrase-live__label { margin: 4px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.phrase-live__value {
  display: block;
  min-height: 3.2em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.phrase-live__meter { height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.phrase-live__meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .6s var(--ease); }
.phrase-live__meta { margin: 0; font-size: 14px; color: var(--muted); }
.phrase-live__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.phrase-live__actions .btn svg { width: 18px; height: 18px; }
.phrase-live__note { font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .phrase-live.is-new .phrase-live__value { animation: phrase-in .5s var(--ease) both; }
  @keyframes phrase-in { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
}
@media (max-width: 899px) {
  .phrase-live { padding: 20px; }
  .phrase-live__actions .btn { flex: 1; }
}
@media (max-width: 480px) {
  .phrase-live__tabs { font-size: 12px; }
  .phrase-live__tabs span { padding: 7px 4px; white-space: nowrap; }
}

/* ------------------------------------------------ blog : « À la une » dans le héros */

.blog-hero { display: grid; gap: 28px; }
.blog-une {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.blog-une__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #FA6605; }
.blog-une__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; transition: transform .6s var(--ease); }
.blog-une:hover .blog-une__media img { transform: scale(1.03); }
.blog-une__text { display: grid; gap: 10px; padding: 20px 22px 22px; }
.blog-une__text h2 { margin: 0; }
.blog-une__text h2 a { color: var(--ink); text-decoration: none; }
.blog-une__text h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.blog-une__text p { margin: 0; color: var(--text); }
@media (min-width: 900px) {
  .blog-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; }
}

/* CTA de fin avec un appareil (vraie capture) */
.cta-duo .dv--laptop { --dv-w: 100%; width: 100%; }
.cta-duo .dv--phone { --dv-w: 220px; }
.cta-duo__text > * + * { margin-top: var(--space-2); }
.cta-duo__text .actions { margin-top: var(--space-4); }
.try--duo { text-align: left; }
.try--duo .try__inner { max-width: none; margin-inline: 0; }
.try--duo .try__inner .actions { justify-content: flex-start; }
@media (max-width: 899px) { .try--duo .dv--laptop { width: min(100%, 420px); margin-inline: auto; } }

/* ------------------------------------------------ cartes vivantes des fins de page */

.live-card {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.live-card__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.live-card__pills button {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.live-card__pills button:hover { border-color: var(--line-strong); }
.live-card__pills button[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, #fff);
  color: var(--ink);
}
.live-card__label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.live-card__value {
  display: block;
  min-height: 1.6em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.live-card__meter { height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.live-card__meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .6s var(--ease); }
.live-card__meta { margin: 0; font-size: 14px; color: var(--muted); }
.live-card__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.live-card__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .live-card.is-new .live-card__value { animation: phrase-in .45s var(--ease) both; }
}

/* sécurité : ce qui part / ce qui ne part jamais */
.flow-split { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .flow-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.flow-cols { display: grid; gap: 16px; }
@media (min-width: 520px) { .flow-cols { grid-template-columns: 1fr 1fr; } }
.flow-cols h3 { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.flow-cols ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.flow-cols li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.flow-cols li svg { width: 18px; height: 18px; margin-top: 2px; }
.flow-cols .is-out svg { color: #34C759; }
.flow-cols .is-never svg { color: #FF3B30; }
.net-probe { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.net-probe__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.net-probe output[data-net-count] { font-size: 14px; font-weight: 600; color: var(--ink); }
.live-card.is-zero output[data-net-count] { color: #1f9d49; }

/* ------------------------------------------------ pages légales : colonne collante */

.legal-layout { display: grid; gap: 8px; }
.legal-aside { display: grid; gap: 16px; align-content: start; padding-bottom: 48px; }
.legal-brief, .legal-toc {
  display: grid;
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.legal-brief p { margin: 0; color: var(--text); font-size: 15px; }
.legal-brief ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.legal-brief li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 15px; color: var(--ink); }
.legal-brief li svg { width: 18px; height: 18px; margin-top: 2px; color: #34C759; }
.legal-brief .btn { justify-self: start; }
.legal-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.legal-toc a {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text);
  font-size: 14.5px;
  text-decoration: none;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.legal-toc a:hover { color: var(--ink); background: var(--soft); }
.legal-toc a[aria-current="true"] { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--accent) 9%, #fff); }
@media (min-width: 900px) {
  .legal-layout { grid-template-columns: minmax(0, 760px) minmax(0, 340px); justify-content: space-between; gap: 48px; }
  .legal-aside { position: sticky; top: 96px; margin-top: 64px; padding-bottom: 24px; }
}
@media (max-width: 899px) {
  .legal-toc { display: none; }
}
.legal-aside { align-self: start; }
@media (max-width: 899px) { .legal-brief--wide { display: none; } }

/* ------------------------------------------------ guides du blog : titre + couverture, sommaire collant */

.art-hero .art-head { padding-block: var(--space-8) 0; }
.art-hero .art-cover { max-width: 720px; margin: var(--space-6) auto 0; }
.art-toc { display: none; }
.art-toc__bar { height: 3px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.art-toc__bar span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.art-toc .legal-brief .btn { justify-self: stretch; }
@media (min-width: 1200px) {
  .art-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
    padding-top: var(--space-8);
  }
  .art-hero .art-head { padding: 0; }
  .art-hero .art-head__inner { max-width: none; margin: 0; }
  .art-hero .art-cover { max-width: none; margin: 0; }
  .art-hero .art-cover img { aspect-ratio: 4 / 3; }
  .art-body { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 320px); justify-content: space-between; gap: 48px; }
  .art-body .prose { max-width: 720px; margin-inline: 0; }
  .art-toc { display: grid; gap: 16px; align-self: start; position: sticky; top: 96px; margin-top: var(--space-8); }
}

/* tarifs : les volets de l'accompagnement cybersécurité, en tuiles */
.bridge-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bridge-tiles li {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 118px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
}
.bridge-tiles li svg {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 9px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  color: var(--accent);
}
@media (max-width: 480px) { .bridge-tiles li { min-height: 0; padding: 16px; font-size: 15px; } }

/* FAQ : titre de rubrique collant à gauche, questions à droite (plus de moitié vide) */
@media (min-width: 900px) {
  :is(#faq-capot, #faq-choisir, #faq-quotidien, #faq-gratuit) > .container {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 760px);
    justify-content: space-between;
    gap: 48px;
    align-items: start;
  }
  :is(#faq-capot, #faq-choisir, #faq-quotidien, #faq-gratuit) .section-head {
    position: sticky;
    top: 112px;
    margin: 0;
  }
  :is(#faq-capot, #faq-choisir, #faq-quotidien, #faq-gratuit) .faq { margin: 0; max-width: none; }
}
.faq-count { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); }
.legal-anchor { display: block; height: 0; scroll-margin-top: 96px; }

/* ------------------------------------------------ en-tête identique sur toutes les pages (24/09/2026)
 * Contrôle indépendant : sur les 10 pages vitrine, la nav restait en flex (liens
 * centrés entre la marque, large, et le bouton EN, étroit : +80 px à droite) et
 * statique. Même bloc que pages/home.css l. 25-42 et 745 : marque à gauche,
 * liens au milieu de la fenêtre, actions à droite, barre collante translucide
 * au-dessus de 900 px ; en dessous, burger et barre statique, comme l'accueil. */
.nav--centered {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
          backdrop-filter: saturate(180%) blur(12px);
}
.nav--centered .nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav--centered .nav__links { margin-left: 0; justify-content: center; }
.nav--centered .nav__actions { justify-self: end; }
.nav__actions .btn--ghost { padding-inline: 14px; font-weight: 600; }
@media (max-width: 900px) {
  .nav--centered { position: static; }
  .nav--centered .nav__inner { display: flex; }
}

/* ------------------------------------------------ recadrages des héros (24/09/2026)
 * Cas d'usage, sous 900 px : les objets sont posés en diagonale et laissaient
 * beaucoup de blanc dans la boîte 356 x 240. Léger rapproché (x 1,08, propriété
 * « scale », qui se compose avec l'animation d'entrée) : la carte de gauche et la
 * note de droite restent entières (6 à 8 px du bord), le cordon orange aussi.
 * Définition : 384 px CSS affichés, source 1200w, soit 3,1 px par px CSS. */
@media (max-width: 899px) {
  .page-hero__media--tight > img { scale: 1.08; }
}

/* ------------------------------------------------ débordements entre 900 et 1 200 px (24/09/2026)
 * Signaler un bug : le min-height 360 px des héros, combiné à l'aspect-ratio 4/3
 * de la colonne, élargissait l'image à 480 px dans une colonne de 383 px
 * (défilement horizontal de 73 px à 900 px). Installer : l'icône posée à
 * « 50 % + 134 px » sortait de la colonne étroite (36 px à 900 px) ; elle passe
 * à côté du téléphone, dans la grille, jusqu'à 1 199 px. */
@media (min-width: 900px) {
  .bug-page__aside .page-hero__media { min-height: 0; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .install-visual { grid-template-columns: auto auto; justify-content: center; column-gap: 12px; }
  /* largeur fixe : en colonne « auto », le conteneur (container-type) retombait à 0 px */
  .install-visual .dv--phone { width: 230px; }
  .install-visual__icon { position: static; align-self: start; margin-top: 64px; }
}