/* Viziome : styles du thème. Charte : bleu électrique #1683FF, cyan #38D9FF,
   graphite #081016, navy #111D2B, gris #8A96A6, blanc #F5F7FA, police Sora. */

@font-face {
	font-family: "Sora";
	font-style: normal;
	font-display: swap;
	font-weight: 100 800;
	src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Sora";
	font-style: normal;
	font-display: swap;
	font-weight: 100 800;
	src: url("../fonts/sora-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Charte */
	--bleu: #1683FF;
	--cyan: #38D9FF;
	--graphite: #081016;
	--navy: #111D2B;
	--gris: #8A96A6;
	--blanc: #F5F7FA;
	/* Dérivés pour l'accessibilité (contraste ≥ 4,5:1 avec le texte) */
	--bleu-action: #0B6BDB;   /* fond des boutons, texte blanc : 5,1:1 */
	--bleu-survol: #0A5BBD;
	--texte: #0E1A27;
	--texte-doux: #4F5B6B;    /* sur fond clair : 6,9:1 */
	--texte-clair: #C9D2DD;   /* sur fond sombre */
	--bordure: #DCE3EC;
	--bordure-sombre: rgba(138, 150, 166, .22);

	--police: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--rayon: 14px;
	--rayon-petit: 10px;
	--ombre: 0 10px 30px rgba(8, 16, 22, .08);
	--largeur: 1200px;
	--marge: clamp(16px, 4vw, 32px);
	--transition: 180ms ease-out;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
	margin: 0;
	font-family: var(--police);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--texte);
	background: var(--blanc);
	overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: var(--bleu-action); }
a:hover { color: var(--bleu-survol); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.visuellement-cache {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement {
	position: absolute; left: 16px; top: -60px; z-index: 100;
	padding: 10px 16px; background: var(--blanc); color: var(--graphite); border-radius: var(--rayon-petit);
}
.lien-evitement:focus { top: 12px; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.conteneur--etroit { max-width: 820px; }

.icone { width: 24px; height: 24px; flex: none; }
.icone--petite { width: 18px; height: 18px; }

/* Boutons ----------------------------------------------------------------- */
.bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 48px; padding: 0 24px;
	font: 600 .95rem/1.2 var(--police); text-decoration: none; text-align: center;
	color: #fff; background: var(--bleu-action);
	border: 2px solid transparent; border-radius: 999px; cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}
.bouton:hover { color: #fff; background: var(--bleu-survol); }
.bouton:active { transform: translateY(1px); }
.bouton--contour { background: transparent; border-color: var(--bleu); color: var(--blanc); }
.bouton--contour:hover { background: rgba(22, 131, 255, .14); color: #fff; }
.bouton--secondaire { background: transparent; border-color: var(--bleu-action); color: var(--bleu-action); }
.bouton--secondaire:hover { background: var(--bleu-action); color: #fff; }
.bouton--petit { min-height: 44px; padding: 0 18px; font-size: .875rem; }
.lien-fleche {
	display: inline-flex; align-items: center; gap: .4em; min-height: 44px;
	font-weight: 600; text-decoration: none;
}
.lien-fleche:hover .icone { transform: translateX(3px); }
.lien-fleche .icone { transition: transform var(--transition); }

/* En-tête ----------------------------------------------------------------- */
.entete {
	position: sticky; top: 0; z-index: 50;
	background: rgba(8, 16, 22, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--bordure-sombre);
}
.admin-bar .entete { top: 32px; }
.entete__barre { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 24px; }
.entete__marque { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.entete__logo { text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; }
.entete__slogan { margin: 0; font-size: .7rem; line-height: 1.3; color: var(--gris); max-width: 32ch; }
@media (max-width: 960px) { .entete__slogan { max-width: 22ch; } }
@media (max-width: 600px) { .entete__slogan { display: none; } }

.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--blanc); }
.logo__v { width: 46px; height: auto; }
.logo__nom { font-weight: 600; font-size: 1.35rem; line-height: 1; letter-spacing: .32em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 32px; }
.nav__liste { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav__liste a {
	display: inline-flex; align-items: center; min-height: 44px;
	color: var(--texte-clair); text-decoration: none; font-size: .9rem;
	border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition);
}
.nav__liste a:hover, .nav__liste .current-menu-item > a, .nav__liste a[aria-current="page"] { color: #fff; border-color: var(--bleu); }
.nav__actions { display: flex; align-items: center; gap: 16px; }
.nav__bouton { display: none; }

.langues { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.langues a {
	display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
	color: var(--gris); text-decoration: none; font-size: .85rem; font-weight: 600; border-radius: 8px;
}
.langues a:hover { color: #fff; }
.langues a[aria-current="true"] { color: #fff; background: rgba(22, 131, 255, .18); }

/* Sections ---------------------------------------------------------------- */
.surtitre {
	margin: 0 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
	color: var(--bleu-action);
}
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section--claire { background: #fff; }
.section--douce { background: var(--blanc); }
.section__entete { max-width: 720px; margin-bottom: 40px; }
.section__entete--ligne { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.section__titre { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; color: var(--graphite); }
.section__intro { color: var(--texte-doux); }
.sous-titre { margin: 56px 0 20px; font-size: 1.15rem; color: var(--graphite); }
.accent { color: var(--bleu); }

/* Hero -------------------------------------------------------------------- */
.hero {
	position: relative; isolation: isolate; overflow: hidden;
	color: var(--blanc);
	background:
		radial-gradient(ellipse 60% 70% at 78% 45%, rgba(22, 131, 255, .28), transparent 70%),
		radial-gradient(ellipse 50% 40% at 70% 100%, rgba(56, 217, 255, .12), transparent 70%),
		linear-gradient(180deg, var(--graphite) 0%, var(--navy) 100%);
	padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 88px);
}
.hero::before {
	/* Trame « réseau » discrète, purement décorative. */
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
	background-image: radial-gradient(rgba(56, 217, 255, .55) 1px, transparent 1.2px);
	background-size: 28px 28px;
	mask-image: radial-gradient(ellipse 70% 60% at 75% 60%, #000 10%, transparent 75%);
}
.hero .surtitre { color: var(--cyan); }
.hero__grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 48px; }
.hero__titre { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 700; color: #fff; }
.hero__titre .accent { display: block; color: var(--bleu); }
.hero__intro { max-width: 600px; font-size: 1.075rem; color: var(--texte-clair); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 40px; }
.hero__atouts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 18px 40px; margin: 0; padding: 0; list-style: none; }
.hero__atouts li { display: flex; align-items: center; gap: 12px; font-size: .85rem; color: var(--texte-clair); }
.hero__atouts .icone { width: 30px; height: 30px; color: var(--bleu); }
.hero__atouts strong { display: block; color: #fff; font-weight: 600; }
.logos-os { display: inline-flex; gap: 6px; flex: none; color: #fff; }
.logo-os { width: 22px; height: 22px; flex: none; }
.compatibilite { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 4px 0 0; color: var(--texte-clair); font-size: .95rem; }
.compatibilite span { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }

.hero__visuel { position: relative; display: grid; justify-items: center; }
.embleme { position: relative; width: min(440px, 80%); aspect-ratio: 1; }
.embleme img {
	width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
	mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 70%);
}
.embleme::after {
	content: ""; position: absolute; inset: 4%; border-radius: 50%;
	border: 1.5px solid rgba(56, 217, 255, .55);
	box-shadow: 0 0 40px rgba(22, 131, 255, .45), inset 0 0 40px rgba(22, 131, 255, .25);
}
.carte-prix {
	position: relative; margin-top: -60px; width: min(320px, 100%);
	padding: 22px 24px; border-radius: var(--rayon);
	background: rgba(17, 29, 43, .82); backdrop-filter: blur(8px);
	border: 1px solid rgba(22, 131, 255, .45);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.carte-prix__titre { font-weight: 600; color: #fff; margin-bottom: 12px; }
.carte-prix .liste-points li { color: var(--texte-clair); }
.carte-prix__prix { margin: 16px 0 2px; padding-top: 14px; border-top: 1px solid var(--bordure-sombre); color: var(--texte-clair); font-size: .9rem; }
.carte-prix__prix strong { font-size: 1.6rem; color: #fff; margin: 0 4px; }
.carte-prix__note { margin: 0; font-size: .8rem; color: var(--gris); }

.hero--page { padding-bottom: clamp(48px, 6vw, 72px); }
.hero--page .hero__titre { max-width: 900px; }
.philosophie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 40px 0 0; padding: 0; list-style: none; }
.philosophie li { display: flex; gap: 14px; padding: 20px; border-radius: var(--rayon); background: rgba(17, 29, 43, .7); border: 1px solid var(--bordure-sombre); color: var(--texte-clair); font-size: .9rem; }
.philosophie .icone { width: 30px; height: 30px; color: var(--cyan); }
.philosophie strong { display: block; color: #fff; margin-bottom: 4px; }

/* Listes et pastilles ----------------------------------------------------- */
.liste-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.liste-points li { display: flex; align-items: flex-start; gap: 10px; }
.liste-points .icone { margin-top: 3px; color: var(--bleu); }
.pastille {
	display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none;
	border-radius: 12px; color: var(--bleu-action);
	background: rgba(22, 131, 255, .1); border: 1px solid rgba(22, 131, 255, .2);
}
.etiquette {
	margin-left: auto; align-self: flex-start; padding: 4px 10px; border-radius: 999px;
	font-size: .72rem; font-weight: 600; letter-spacing: .04em;
	background: var(--cyan); color: var(--graphite);
}

/* Arguments --------------------------------------------------------------- */
.arguments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.argument, .carte {
	padding: 28px 24px; border-radius: var(--rayon); background: #fff;
	border: 1px solid var(--bordure); box-shadow: var(--ombre);
}
.argument h3, .carte h3 { margin-top: 18px; font-size: 1.1rem; color: var(--graphite); }
.argument p, .carte p { margin: 0; color: var(--texte-doux); font-size: .93rem; }

/* Offres ------------------------------------------------------------------ */
.offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.offre {
	display: flex; flex-direction: column; gap: 20px; padding: 32px;
	border-radius: var(--rayon); background: #fff; border: 1px solid var(--bordure); box-shadow: var(--ombre);
}
.offre__entete { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.offre__nom { margin: 0; font-size: 1.35rem; color: var(--graphite); }
.offre__resume { margin: 2px 0 0; font-size: .9rem; color: var(--texte-doux); }
.offre__texte { margin: 0; color: var(--texte-doux); }
.offre__prix { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--bordure); }
.prix { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.prix__montant { font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; color: var(--graphite); }
.prix__unite { font-size: .9rem; color: var(--texte-doux); }
.prix__details { margin: 4px 0 20px; font-size: .85rem; color: var(--texte-doux); }

.offre--vedette {
	color: var(--texte-clair); border-color: rgba(22, 131, 255, .6);
	background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(22, 131, 255, .3), transparent 70%), var(--navy);
	box-shadow: 0 20px 50px rgba(8, 16, 22, .3);
}
.offre--vedette .offre__nom, .offre--vedette .prix__montant { color: #fff; }
.offre--vedette .offre__resume, .offre--vedette .offre__texte,
.offre--vedette .prix__unite, .offre--vedette .prix__details { color: var(--texte-clair); }
.offre--vedette .offre__prix { border-color: var(--bordure-sombre); }
.offre--vedette .pastille { color: var(--cyan); background: rgba(56, 217, 255, .1); border-color: rgba(56, 217, 255, .3); }
.offre--vedette .liste-points .icone { color: var(--cyan); }
.offre__bonus { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--rayon-petit); background: rgba(22, 131, 255, .07); border: 1px solid rgba(22, 131, 255, .25); font-size: .88rem; color: var(--texte-doux); }
.offre__bonus .icone { flex: none; margin-top: 3px; color: var(--bleu); }
.offre__bonus strong { display: block; color: var(--graphite); }
.offre__bonus a { color: var(--bleu-action); font-weight: 600; }
.offre--vedette .offre__bonus { background: rgba(56, 217, 255, .08); border-color: rgba(56, 217, 255, .3); color: var(--texte-clair); }
.offre--vedette .offre__bonus .icone, .offre--vedette .offre__bonus a { color: var(--cyan); }
.offre--vedette .offre__bonus strong { color: #fff; }

/* Aperçu du coffre de mots de passe (accueil, page « Gestionnaire de mots de passe »). */
.coffre-apercu { margin: 0; }
.coffre-apercu__fenetre { padding: 22px; border-radius: var(--rayon); background: var(--navy); color: var(--texte-clair); box-shadow: var(--ombre); }
.coffre-apercu__entete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--bordure-sombre); font-size: .85rem; }
.coffre-apercu__titre, .coffre-apercu__etat { display: inline-flex; align-items: center; gap: 8px; }
.coffre-apercu__titre { color: #fff; font-weight: 600; }
.coffre-apercu .icone { color: var(--cyan); }
.coffre-apercu__liste { margin: 0; padding: 0; list-style: none; }
.coffre-apercu__liste li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bordure-sombre); }
.coffre-apercu__liste .pastille { width: 36px; height: 36px; color: var(--cyan); background: rgba(56, 217, 255, .1); border-color: rgba(56, 217, 255, .3); }
.coffre-apercu__nom { font-size: .8rem; color: var(--gris); }
.coffre-apercu__nom strong { display: block; font-size: .92rem; font-weight: 600; color: #fff; }
.coffre-apercu__secret { letter-spacing: 2px; color: var(--gris); }
.coffre-apercu__generateur { margin: 14px 0 0; font-size: .82rem; }
.coffre-apercu__generateur code { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #fff; }
.coffre-apercu__generateur span { margin-left: 6px; color: #34D399; font-weight: 600; }
.coffre-apercu figcaption { margin-top: 10px; font-size: .8rem; color: var(--texte-doux); }
@media (max-width: 600px) { .coffre-apercu__secret { display: none; } .coffre-apercu__liste li { grid-template-columns: auto minmax(0, 1fr); } }

.volumes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.volume { padding: 20px; border-radius: var(--rayon-petit); background: #fff; border: 1px solid var(--bordure); }
.volume strong { display: block; font-size: 1.6rem; color: var(--graphite); }
.volume span { color: var(--texte-doux); font-size: .9rem; }
.volume--devis strong { font-size: 1.2rem; padding: 6px 0; }

/* Experts ----------------------------------------------------------------- */
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.deux-colonnes p { color: var(--texte-doux); }
.tarifs-experts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tarif-carte { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; border-radius: var(--rayon); border: 1px solid var(--bordure); background: var(--blanc); }
.tarif-carte h3 { margin: 0; font-size: 1.05rem; color: var(--graphite); }
.tarif-carte p { margin: 0; font-size: .9rem; }
.tarif-carte .bouton { margin-top: auto; }
.tarif-carte--vedette { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu), var(--ombre); }

.rapports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.carte .liste-points { margin-top: 8px; color: var(--texte-doux); font-size: .93rem; }

/* Étapes ------------------------------------------------------------------ */
.etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.etape { position: relative; padding: 28px 24px; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--bordure); counter-increment: etape; }
.etape::before {
	content: counter(etape); position: absolute; top: 20px; right: 22px;
	font-size: 2rem; font-weight: 700; line-height: 1; color: rgba(22, 131, 255, .18);
}
.etape h3 { margin-top: 18px; font-size: 1.05rem; color: var(--graphite); }
.etape p { margin: 0; color: var(--texte-doux); font-size: .93rem; }
.arguments--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Tableau comparatif ------------------------------------------------------ */
.tableau-defilant { position: relative; overflow-x: auto; border-radius: var(--rayon); border: 1px solid var(--bordure); background: #fff; box-shadow: var(--ombre); }
.comparatif { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .95rem; }
.comparatif th, .comparatif td { padding: 14px 20px; border-bottom: 1px solid var(--bordure); text-align: center; }
.comparatif tbody tr:last-child > * { border-bottom: 0; }
.comparatif tbody th { text-align: left; font-weight: 500; color: var(--texte); }
.comparatif thead th { font-size: 1.05rem; color: var(--graphite); background: var(--blanc); }
.comparatif thead th span { display: block; margin-top: 4px; font-size: .8rem; font-weight: 500; color: var(--texte-doux); }
.comparatif td { color: var(--texte-doux); }
.icone--ok { color: var(--bleu-action); }
.tableau-defilant + .section__intro { margin-top: 20px; }

/* Aperçu de rapport ------------------------------------------------------- */
.deux-colonnes--rapport { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.rapport { margin: 0; }
.rapport__page {
	padding: 22px; border-radius: 16px; font-size: .8rem; color: #24324A;
	background: linear-gradient(180deg, #F3F7FD, #fff 40%);
	border: 1px solid var(--bordure); box-shadow: 0 24px 60px rgba(8, 16, 22, .16);
}
.rapport .logo { color: var(--graphite); }
.rapport .logo__v { width: 30px; }
.rapport .logo__nom { font-size: .85rem; }
.rapport p { margin: 0; }
.rapport__entete { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.rapport__titre { margin-top: 12px !important; font-size: 1rem; font-weight: 700; color: var(--graphite); line-height: 1.3; }
.rapport__periode { color: var(--texte-doux); }
.rapport__score { flex: none; display: grid; justify-items: center; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--bordure); }
.rapport__score svg { width: 96px; height: auto; }
.rapport__score strong { font-size: 1.4rem; color: var(--graphite); }
.rapport__etat { font-weight: 600; }
.rapport__etat--moyen, .rapport__valeur--moyen { color: #B45309; }
.rapport__valeur--risque { color: #C2410C; }
.rapport__indicateurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.rapport__indicateurs li { padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--bordure); }
.rapport__indicateurs span { display: block; color: var(--texte-doux); font-size: .72rem; line-height: 1.3; }
.rapport__indicateurs strong { font-size: 1.5rem; color: var(--graphite); }
.rapport__bloc { padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--bordure); margin-bottom: 10px; }
.rapport__soustitre { font-weight: 700; color: var(--graphite); margin-bottom: 8px !important; }
.rapport__table { width: 100%; border-collapse: collapse; }
.rapport__table th { text-align: left; font-weight: 500; color: var(--texte-doux); padding: 6px 8px; background: var(--blanc); }
.rapport__table td { padding: 7px 8px; border-top: 1px solid var(--bordure); }
.rapport__badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-weight: 600; font-size: .72rem; white-space: nowrap; }
.rapport__badge--risque { background: #FDE7E2; color: #9A3412; }
.rapport__badge--moyen { background: #FEF3C7; color: #92400E; }
.rapport__badge--bon { background: #DCFCE7; color: #166534; }
.rapport__connecte { color: #166534; }
.rapport__priorites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rapport__priorites li { display: flex; gap: 8px; padding: 8px; border-radius: 8px; background: var(--blanc); color: var(--texte-doux); font-size: .72rem; line-height: 1.35; }
.rapport__priorites strong { display: block; color: var(--graphite); font-size: .76rem; }
.rapport__priorites .icone { color: var(--bleu-action); margin-top: 1px; }
.rapport__legende { margin-top: 10px; font-size: .8rem; color: var(--texte-doux); text-align: center; }
.tarifs-experts--page { max-width: 760px; }
.tarif-carte .etiquette { margin-left: 0; }
.prix__apartir { flex-basis: 100%; font-size: .9rem; color: var(--texte-doux); }
.tarif-carte .prix { flex-wrap: wrap; row-gap: 0; }
.tarif-carte .prix__montant { font-size: clamp(1.8rem, 2.6vw, 2.2rem); }
.tarif-carte .liste-points { font-size: .9rem; margin: 4px 0 8px; }

/* Espace client (Mon compte) ---------------------------------------------- */
.hero--compte { padding: clamp(36px, 5vw, 56px) 0 clamp(40px, 5vw, 60px); }
.hero--compte .hero__titre { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.hero--compte .hero__intro { margin: 0; }
.compte { background: var(--blanc); padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 7vw, 88px); }
.compte .woocommerce { color: var(--texte); }
.logged-in .compte .woocommerce { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }

.woocommerce-MyAccount-navigation {
	position: sticky; top: 100px; padding: 10px;
	background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.admin-bar .woocommerce-MyAccount-navigation { top: 132px; }
.woocommerce-MyAccount-navigation ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation a {
	display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px;
	border-radius: 10px; color: var(--texte); font-size: .95rem; font-weight: 500; text-decoration: none;
	transition: background-color var(--transition), color var(--transition);
}
.woocommerce-MyAccount-navigation a::before {
	content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--blanc); color: var(--bleu-action); }
.woocommerce-MyAccount-navigation .is-active a { background: rgba(22, 131, 255, .1); color: var(--bleu-action); font-weight: 600; }
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bordure); }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--texte-doux); }

.woocommerce-MyAccount-content {
	min-width: 0; padding: clamp(20px, 3vw, 36px);
	background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.woocommerce-MyAccount-content > :first-child, .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty + * { margin-top: 0; }
.compte h2, .compte h3, .compte legend { color: var(--graphite); }
.compte h2 { font-size: 1.3rem; margin: 0 0 16px; }
.compte h3 { font-size: 1.1rem; }
.compte .compte__intro { color: var(--texte-doux) !important; margin-bottom: 0; }
.compte .woocommerce-MyAccount-content p { color: var(--texte); }
.compte .woocommerce-MyAccount-content a:not(.bouton):not(.button):not(.compte-raccourci) { text-decoration: underline; text-underline-offset: 3px; }

/* Formulaires */
.compte form .form-row, .compte form p { margin: 0 0 16px; }
.compte label { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 600; color: var(--graphite); }
.compte .required { color: #C2410C; text-decoration: none; border: 0; }
.compte input[type="text"], .compte input[type="email"], .compte input[type="password"], .compte input[type="tel"],
.compte input[type="number"], .compte select, .compte textarea {
	width: 100%; min-height: 48px; padding: 10px 14px;
	font: inherit; font-size: 1rem; color: var(--texte); background: #fff;
	border: 1px solid #C3CDD9; border-radius: 10px;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.compte input:focus, .compte select:focus, .compte textarea:focus { border-color: var(--bleu-action); box-shadow: 0 0 0 3px rgba(22, 131, 255, .2); outline: none; }
.compte input[type="checkbox"], .compte input[type="radio"] { width: 18px; height: 18px; accent-color: var(--bleu-action); }
.compte .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.compte fieldset { margin: 24px 0 0; padding: 0; border: 0; }
.compte fieldset legend { padding: 0; margin-bottom: 12px; font-size: 1.1rem; font-weight: 700; }
.compte em, .compte .woocommerce-privacy-policy-text, .compte .description { font-size: .85rem; color: var(--texte-doux); font-style: normal; }
.password-input { position: relative; display: block; }
.password-input input { padding-right: 52px; }
.show-password-input {
	position: absolute; top: 50%; right: 6px; width: 40px; height: 40px; transform: translateY(-50%);
	border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--texte-doux);
}
.show-password-input::after {
	content: ""; position: absolute; inset: 10px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.show-password-input.display-password { color: var(--bleu-action); }
.woocommerce-password-strength { margin-top: 8px; padding: 8px 12px; border-radius: 8px; font-size: .85rem; font-weight: 600; background: #FEF3C7; color: #92400E; }
.woocommerce-password-strength.strong { background: #DCFCE7; color: #166534; }
.woocommerce-password-strength.short, .woocommerce-password-strength.bad { background: #FDE7E2; color: #9A3412; }

/* Boutons WooCommerce et plugin */
.compte .button, .compte button[type="submit"], .compte .woocommerce-Button {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 48px; padding: 0 24px; margin: 0;
	font: 600 .95rem/1.2 var(--police); text-align: center; text-decoration: none;
	color: #fff; background: var(--bleu-action); border: 2px solid transparent; border-radius: 999px; cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.compte .button:hover, .compte button[type="submit"]:hover { color: #fff; background: var(--bleu-survol); }
.compte .button[disabled], .compte .button:disabled { opacity: .5; cursor: not-allowed; }
.compte .button[disabled]:hover { background: var(--bleu-action); }

/* Messages */
.compte .woocommerce-message, .compte .woocommerce-info, .compte .woocommerce-error {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	margin: 0 0 20px; padding: 14px 18px; list-style: none;
	border-radius: 10px; border: 1px solid; font-size: .95rem;
}
.compte .woocommerce-message { background: #ECFDF3; border-color: #A7E3BE; color: #14532D; }
.compte .woocommerce-info { background: #EEF5FF; border-color: #BFD8FB; color: #10345F; }
.compte .woocommerce-error { display: block; background: #FEF2F0; border-color: #F5C2B8; color: #7C2D12; }
.compte .woocommerce-error li + li { margin-top: 6px; }
.compte .woocommerce-message .button, .compte .woocommerce-info .button { order: 2; min-height: 40px; padding: 0 16px; }

/* Connexion et création de compte */
#customer_login { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
#customer_login > div, .compte .woocommerce > form.login, .compte .woocommerce > form.lost_reset_password, .compte .woocommerce > form.woocommerce-ResetPassword {
	padding: clamp(22px, 3vw, 36px); background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.compte .woocommerce > form.login, .compte .woocommerce > form.lost_reset_password, .compte .woocommerce > form.woocommerce-ResetPassword { max-width: 560px; margin: 0 auto; }
#customer_login h2 { font-size: 1.35rem; margin-bottom: 20px; }
#customer_login .u-column2 { background: linear-gradient(180deg, #F3F7FD, #fff 50%); }
.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.compte .woocommerce-LostPassword { margin: 4px 0 0; font-size: .9rem; }
.compte-reassurance { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 28px 0 0; padding: 0; list-style: none; font-size: .9rem; color: var(--texte-doux); }
.compte-reassurance li { display: inline-flex; align-items: center; gap: 8px; }
.compte-reassurance .icone { color: var(--bleu-action); }

/* Tableau de bord */
.compte-raccourcis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.compte-raccourci {
	display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 18px;
	border: 1px solid var(--bordure); border-radius: 12px; color: var(--texte-doux); font-size: .9rem; text-decoration: none;
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.compte-raccourci strong { display: block; margin-bottom: 2px; color: var(--graphite); font-size: 1rem; }
.compte-raccourci:hover { border-color: var(--bleu-action); box-shadow: var(--ombre); color: var(--texte-doux); }
.compte-raccourci .pastille { width: 42px; height: 42px; }

/* Adresses et tableaux */
.compte .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 640px; margin-top: 16px; }
.compte .woocommerce-Address { padding: 18px; border: 1px solid var(--bordure); border-radius: 12px; }
.compte .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.compte .woocommerce-Address-title h2 { font-size: 1.05rem; margin: 0; }
.compte address { font-style: normal; color: var(--texte-doux); margin-top: 10px; }
.compte table.shop_table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.compte table.shop_table th, .compte table.shop_table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--bordure); }
.compte .form-row-first, .compte .form-row-last { width: calc(50% - 6px); }
.compte .form-row-first { float: left; }
.compte .form-row-last { float: right; }
.compte .clear, .compte .form-row-wide { clear: both; }

/* Mon abonnement */
.abonnement { margin: 0 0 16px; padding: clamp(18px, 2.5vw, 26px); border: 1px solid var(--bordure); border-radius: 14px; background: #fff; }
.abonnement--secondaire { background: var(--blanc); }
.abonnement__entete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.abonnement__entete > div { flex: 1 1 220px; min-width: 0; }
.abonnement__entete h3 { margin: 0; font-size: 1.1rem; }
.abonnement__entete p { margin: 2px 0 0 !important; font-size: .9rem; color: var(--texte-doux) !important; }
.abonnement__entete .statut { margin-left: auto; }
.statut { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.statut--ok { background: #DCFCE7; color: #166534; }
.statut--attention { background: #FEF3C7; color: #92400E; }
.statut--neutre { background: #E8EDF3; color: #3D4A5C; }
.abonnement__details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; }
.abonnement__details div { padding: 14px 16px; border-radius: 10px; background: var(--blanc); }
.abonnement__details dt { font-size: .8rem; color: var(--texte-doux); }
.abonnement__details dd { margin: 4px 0 0; font-weight: 600; color: var(--graphite); }
.abonnement__message { margin: 16px 0 !important; }
.abonnement__note { margin: 14px 0 0 !important; font-size: .88rem; color: var(--texte-doux) !important; }
.abonnement-paiements { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--bordure); }
.abonnement-paiements h3 { margin-top: 0; }

/* Parcours d'achat et espace client (issue #39) */
.parcours-offres { display: grid; gap: 10px; margin: 8px 0 16px; padding: 0; border: 0; }
.parcours-offres legend { margin-bottom: 8px; font-size: .9rem; font-weight: 600; color: var(--graphite); }
.parcours-offre { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--bordure); border-radius: 10px; cursor: pointer; font-weight: 600; }
.parcours-offre:has(input:checked) { border-color: var(--bleu-action); background: rgba(22, 131, 255, .06); }
.parcours-consentement { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: #FFF8E6; border: 1px solid #F5D98B; }
.parcours-consentement label { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 500 !important; line-height: 1.5; }
.parcours-consentement input { margin-top: 3px; flex: none; }
.parcours-expert { display: flex; gap: 14px; margin: 0 0 18px; padding: 16px; border-radius: 12px; border: 1px dashed var(--bleu); background: linear-gradient(180deg, #F3F7FD, #fff); }
.parcours-expert p { margin: 0 0 6px !important; font-size: .9rem; color: var(--texte-doux) !important; }
.parcours-expert .parcours-expert__titre { font-size: 1rem; font-weight: 700; color: var(--graphite) !important; }
.parcours-expert .pastille { width: 42px; height: 42px; }
.parcours-expert__bientot a { font-weight: 600; }
.parcours-message { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #FEF2F0; border: 1px solid #F5C2B8; color: #7C2D12; }
.consignes { margin: 0 0 24px; padding: 18px 20px; border-radius: 12px; background: var(--blanc); border: 1px solid var(--bordure); }
.consignes__titre { display: flex; align-items: center; gap: 8px; margin: 0 0 10px !important; font-weight: 700; color: var(--graphite) !important; }
.consignes__titre .icone { color: var(--bleu-action); }
.consignes ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: .93rem; }
.informations-adresse { margin-top: 28px; }
.informations-adresse address { font-style: normal; }
[hidden] { display: none !important; }

/* Bloc Facturation (plugin viziome-woocommerce, habillé sans modification) */
.viziome-woo-billing h2, .viziome-woo-devices h2 { font-size: 1.3rem; }
.compte .viziome-woo-plan-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.compte .viziome-woo-plan-choice legend { font-size: .95rem; font-weight: 600; margin-bottom: 10px; }
.compte .viziome-woo-plan-option {
	display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 18px;
	border: 1.5px solid var(--bordure); border-radius: 12px; background: #fff; cursor: pointer;
	font-size: 1rem; font-weight: 600; transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.compte .viziome-woo-plan-option:hover { border-color: var(--bleu); }
.compte .viziome-woo-plan-option:has(input:checked) { border-color: var(--bleu-action); background: rgba(22, 131, 255, .06); box-shadow: 0 0 0 1px var(--bleu-action); }
.compte .viziome-woo-plan-option:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 2px; }
.compte .viziome-woo-billing { display: block; }
.compte .viziome-woo-billing .viziome-woo-billing-action { margin: 0 10px 10px 0; }
.compte .viziome-woo-billing-action[data-viziome-woo-action="portal"] { background: transparent; border-color: var(--bleu-action); color: var(--bleu-action); }
.compte .viziome-woo-billing-action[data-viziome-woo-action="portal"]:hover:not([disabled]) { background: var(--bleu-action); color: #fff; }
.compte .viziome-woo-billing-feedback, .compte .viziome-woo-devices-feedback { margin-top: 8px; padding: 12px 16px; border-radius: 10px; background: #EEF5FF; color: #10345F; }
.compte .viziome-woo-billing-feedback:empty, .compte .viziome-woo-devices-feedback:empty { display: none; }
.compte .viziome-woo-devices { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--bordure); }
.compte .viziome-woo-devices-quota { color: var(--texte-doux); }
.compte .viziome-woo-devices-list { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.compte .viziome-woo-devices-list:empty { display: none; }
.compte .viziome-woo-device {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
	padding: 12px 14px 12px 16px; border: 1px solid var(--bordure); border-radius: 10px; background: #fff;
}
.compte .viziome-woo-device-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; }
.compte .viziome-woo-device-name { font-weight: 600; color: var(--graphite); overflow-wrap: anywhere; }
.compte .viziome-woo-device-meta { font-size: .82rem; color: var(--texte-doux); }
.compte .viziome-woo-device-state {
	display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
	font-size: .78rem; font-weight: 600; white-space: nowrap; background: #E8EDF3; color: #3D4A5C;
}
.compte .viziome-woo-device-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.compte .viziome-woo-device-state--active { background: #DCFCE7; color: #166534; }
.compte .viziome-woo-device-state--failed, .compte .viziome-woo-device-state--revoking { background: #FEF3C7; color: #92400E; }
.compte .viziome-woo-device-pending { font-size: .82rem; color: var(--texte-doux); }
.compte .viziome-woo-device-state--expired { background: #FEF3C7; color: #92400E; }
.compte .viziome-woo-device-cancel {
	display: inline-flex; align-items: center; width: auto; min-height: 0; margin: 0; padding: 6px 10px;
	border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--texte-doux);
	font: 600 .85rem/1.3 var(--police); cursor: pointer; transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}
.compte .viziome-woo-device-cancel:hover, .compte .viziome-woo-device-cancel:focus-visible { color: #B42318; border-color: #F3C6C1; background: #FEF3F2; }
.compte .viziome-woo-device-cancel:disabled { opacity: .5; cursor: wait; }
/* Boutons compacts de la liste et du formulaire (pas de pastille pleine hauteur). */
.compte .button.viziome-woo-device-download {
	display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 0; margin: 0;
	padding: 6px 12px; border: 1px solid var(--bordure); border-radius: 8px;
	background: #fff; color: var(--bleu-action); font-size: .85rem; font-weight: 600; line-height: 1.3; box-shadow: none;
}
.compte .button.viziome-woo-device-download:hover { border-color: var(--bleu-action); background: rgba(22, 131, 255, .06); color: var(--bleu-action); }
.compte .viziome-woo-device-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.compte [data-viziome-woo-reserve-form] button[type="submit"] {
	width: auto; min-height: 0; height: 40px; padding: 0 14px; border-radius: 8px; font-size: .85rem; white-space: nowrap; justify-self: start;
}
.compte [data-viziome-woo-reserve-form] {
	display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; align-items: end;
	padding: 18px; border: 1px dashed #C3CDD9; border-radius: 12px; background: var(--blanc);
}
.compte [data-viziome-woo-reserve-form] label { display: grid; gap: 6px; margin: 0; }
.compte [data-viziome-woo-reserve-form] input, .compte [data-viziome-woo-reserve-form] select { height: 40px; min-height: 0; padding-top: 0; padding-bottom: 0; }

/* Bandeau sombre ---------------------------------------------------------- */
.bandeau {
	padding: clamp(48px, 6vw, 72px) 0; color: var(--texte-clair);
	background: radial-gradient(ellipse 50% 90% at 90% 50%, rgba(22, 131, 255, .3), transparent 70%), var(--graphite);
}
.bandeau .surtitre { color: var(--cyan); }
.bandeau .section__titre { color: #fff; }
.bandeau p { max-width: 640px; margin: 0; }
.bandeau__grille { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }

/* FAQ --------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; margin-top: 24px; }
.faq details { border: 1px solid var(--bordure); border-radius: var(--rayon-petit); background: var(--blanc); }
.faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 20px;
	font-weight: 600; color: var(--graphite); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--bleu-action); transition: transform var(--transition); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 20px 18px; color: var(--texte-doux); }

/* Pages simples et WooCommerce ------------------------------------------- */
.page-simple { padding: clamp(40px, 6vw, 72px) 0; background: #fff; min-height: 50vh; }
.page-simple__titre { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--graphite); }
.contenu { color: var(--texte); }
.contenu a { text-decoration: underline; text-underline-offset: 3px; }

/* Blog : article, listes d'articles, recherche ------------------------------ */
.rank-math-breadcrumb { margin-bottom: 24px; font-size: .85rem; color: var(--texte-doux); }
.rank-math-breadcrumb p { margin: 0; }
.article__entete { margin-bottom: 32px; }
.article__entete .surtitre a { color: inherit; text-decoration: none; }
.article__meta { margin: 0; font-size: .9rem; color: var(--texte-doux); }
.article__image { margin: 0 0 32px; }
.article__image img { width: 100%; height: auto; border-radius: var(--rayon); }
.article__contenu { font-size: 1.05rem; line-height: 1.7; }
.article__contenu h2 { margin-top: 1.8em; font-size: 1.6rem; color: var(--graphite); }
.article__contenu h3 { margin-top: 1.5em; font-size: 1.25rem; color: var(--graphite); }
.article__contenu ul, .article__contenu ol { padding-left: 1.4em; margin: 0 0 1em; }
.article__contenu li { margin-bottom: .4em; }
.article__contenu img { height: auto; border-radius: var(--rayon-petit); }
.article__contenu blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--bleu); color: var(--texte-doux); }
.article__contenu pre { overflow-x: auto; padding: 16px; background: var(--blanc); border-radius: var(--rayon-petit); font-size: .9rem; }
.article__contenu table { display: block; overflow-x: auto; border-collapse: collapse; }
.article__contenu th, .article__contenu td { padding: 8px 12px; border: 1px solid var(--bordure); text-align: left; }
.article__etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; }
.article__etiquettes a {
	padding: 4px 12px; border: 1px solid var(--bordure); border-radius: 999px;
	font-size: .85rem; color: var(--texte-doux); text-decoration: none;
}
.article__appel { margin-top: 48px; padding: 28px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--rayon); }
.article__appel-titre { font-size: 1.2rem; font-weight: 700; color: var(--graphite); }
.articles-lies { margin-top: 24px; }
.liste-articles__entete { max-width: 820px; margin-bottom: 40px; }
.liste-articles__description { color: var(--texte-doux); }
.grille-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.carte-article {
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.carte-article__image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.carte-article__corps { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.carte-article__date { margin: 0; font-size: .8rem; color: var(--texte-doux); }
.carte-article__titre { margin: 0; font-size: 1.15rem; }
.carte-article__titre a { color: var(--graphite); text-decoration: none; }
.carte-article__titre a:hover { color: var(--bleu-action); }
.carte-article__extrait { margin: 0; font-size: .95rem; color: var(--texte-doux); }
.search-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.search-form label { flex: 1 1 240px; }
.search-form .search-field {
	width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--bordure); border-radius: 999px;
	font: inherit; color: var(--texte);
}
.search-form .search-submit {
	min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--bleu-action); color: #fff; font: inherit; font-weight: 600;
}
.search-form .search-submit:hover { background: var(--bleu-survol); }
.pagination { margin-top: 40px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px;
	border: 1px solid var(--bordure); border-radius: var(--rayon-petit); text-decoration: none;
}
.pagination .page-numbers.current { background: var(--bleu-action); border-color: var(--bleu-action); color: #fff; }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.woocommerce .button.alt, .wc-block-components-button {
	background: var(--bleu-action) !important; color: #fff !important; border-radius: 999px !important; font-family: var(--police);
}
.woocommerce .button:hover, .woocommerce .button.alt:hover { background: var(--bleu-survol) !important; }
/* Mes postes : boutons compacts (l'habillage générique ci-dessus en pastille ne s'applique pas). */
.compte a.button.viziome-woo-device-download { background: #fff !important; color: var(--bleu-action) !important; border-radius: 8px !important; }
.compte a.button.viziome-woo-device-download:hover { background: rgba(22, 131, 255, .06) !important; }
.compte [data-viziome-woo-reserve-form] button.button[type="submit"] { border-radius: 8px !important; }

/* Pied de page ------------------------------------------------------------ */
.pied { background: var(--graphite); color: var(--texte-clair); font-size: .9rem; border-top: 1px solid var(--bordure-sombre); }
.pied a { color: var(--texte-clair); }
.pied a:hover { color: #fff; }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-top: 56px; padding-bottom: 40px; }
.pied__marque > a { display: inline-flex; align-items: center; min-height: 48px; margin-bottom: 16px; text-decoration: none; }
.pied__badge { display: flex; align-items: center; gap: 8px; color: var(--gris); }
.pied__titre { font-size: .95rem; color: #fff; margin-bottom: 12px; letter-spacing: 0; }
.pied__liens ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.pied__liens a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.pied__contact .bouton { color: var(--blanc); margin-right: 10px; }
.pied__social { display: inline-grid; place-items: center; width: 44px; height: 44px; vertical-align: middle; border-radius: 10px; }
.pied__bas {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
	padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--bordure-sombre); color: var(--gris); font-size: .8rem;
}
.pied__bas p { margin: 0; }
.pied__legal { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.pied__legal a { color: var(--gris); }
.pied__domaines { color: var(--texte-clair); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1080px) {
	.arguments, .arguments--trois, .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.deux-colonnes--rapport { grid-template-columns: minmax(0, 1fr); }
	.deux-colonnes { grid-template-columns: minmax(0, 1fr); }
	.nav__liste { gap: 18px; }
}
@media (max-width: 960px) {
	.hero__grille { grid-template-columns: minmax(0, 1fr); }
	.embleme { width: min(260px, 65%); }
	.offres, .rapports, .philosophie { grid-template-columns: minmax(0, 1fr); }
	.volumes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pied__grille { grid-template-columns: 1fr 1fr; }
	.pied__marque { grid-column: 1 / -1; }

	.nav__bouton {
		display: inline-grid; place-items: center; width: 48px; height: 48px;
		color: #fff; background: transparent; border: 1px solid var(--bordure-sombre); border-radius: 12px; cursor: pointer;
	}
	.nav__fermer, .nav__bouton[aria-expanded="true"] .nav__ouvrir { display: none; }
	.nav__bouton[aria-expanded="true"] .nav__fermer { display: inline; }
	.js .nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 16px; padding: 16px var(--marge) 24px;
		background: var(--graphite); border-bottom: 1px solid var(--bordure-sombre);
	}
	.js .nav.est-ouvert { display: flex; }
	.nav { flex-wrap: wrap; }
	.nav__liste { flex-direction: column; gap: 0; }
	.nav__actions { justify-content: space-between; }
	.entete__barre { position: relative; flex-wrap: wrap; }
}
@media (max-width: 782px) { .admin-bar .entete { top: 46px; } }
@media (max-width: 600px) {
	.arguments, .arguments--trois, .etapes, .tarifs-experts, .pied__grille { grid-template-columns: minmax(0, 1fr); }
	.rapport__indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rapport__priorites { grid-template-columns: minmax(0, 1fr); }
	.rapport__col-option { display: none; }
	.rapport__page { padding: 16px; }
	.offre .bouton, .tarif-carte .bouton { width: 100%; }
	.offre { padding: 24px 20px; }
	.hero__actions .bouton { width: 100%; }
	.logo__nom { font-size: 1.1rem; letter-spacing: .26em; }
	.carte-prix { margin-top: -40px; }
}
@media (max-width: 400px) {
	.hero__atouts { grid-template-columns: minmax(0, 1fr); }
	.logo { gap: 8px; }
	.logo__v { width: 36px; }
	.logo__nom { font-size: 1rem; letter-spacing: .2em; }
	.entete__barre { gap: 12px; }
}
@media (max-width: 960px) {
	.logged-in .compte .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.woocommerce-MyAccount-navigation { position: static; padding: 6px; }
	.woocommerce-MyAccount-navigation ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
	.woocommerce-MyAccount-navigation a { min-height: 44px; padding: 0 10px; font-size: .9rem; }
	.woocommerce-MyAccount-navigation-link--customer-logout { grid-column: 1 / -1; margin-top: 2px; padding-top: 4px; }
	#customer_login { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.abonnement__details, .compte-raccourcis, .compte .woocommerce-Addresses, .compte .viziome-woo-plan-choice, .compte [data-viziome-woo-reserve-form] { grid-template-columns: minmax(0, 1fr); }
	.compte .form-row-first, .compte .form-row-last { float: none; width: auto; }
	.compte .button, .compte button[type="submit"] { width: 100%; }
	.compte .button.viziome-woo-device-download { width: auto; }
	.compte [data-viziome-woo-reserve-form] button[type="submit"] { width: auto; }
	.compte .viziome-woo-billing .viziome-woo-billing-action { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* Mes factures (issue #39, lot 2) */
.factures { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--rayon); background: #fff; }
.factures__table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.factures__table th { padding: 12px 16px; text-align: left; font-size: .8rem; font-weight: 600; color: var(--texte-doux); background: var(--blanc); border-bottom: 1px solid var(--bordure); }
.factures__table td { padding: 14px 16px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.factures__table tbody tr:last-child td { border-bottom: 0; }
.factures__montant { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.factures__table td:nth-child(-n+2) { white-space: nowrap; }
.factures__liens { white-space: nowrap; text-align: right; }
.factures__liens a { font-weight: 600; }
.factures__liens a + a { margin-left: 14px; }
.parcours-expert__note { font-size: .85rem !important; }
@media (max-width: 640px) {
	.factures { border: 0; background: transparent; }
	.factures__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.factures__table, .factures__table tbody, .factures__table tr, .factures__table td { display: block; width: 100%; }
	.factures__table tr { margin: 0 0 12px; padding: 6px 0; border: 1px solid var(--bordure); border-radius: var(--rayon); background: #fff; }
	.factures__table td { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; border: 0; text-align: right; }
	.factures__table td[data-titre]::before { content: attr(data-titre); font-weight: 600; color: var(--texte-doux); text-align: left; }
	.factures__table td.factures__liens { justify-content: flex-end; gap: 18px; }
	.factures__liens a + a { margin-left: 0; }
}

/* Demander un diagnostic (issue #39, lot 5) */
.diagnostic-tarif { margin-bottom: 20px; }
.diagnostic-tarif .bouton { margin-top: 14px; }
.diagnostic-formulaire select, .diagnostic-formulaire textarea { width: 100%; }
.diagnostic-formulaire textarea { min-height: 140px; resize: vertical; }

/* Désinstallation et vérification de l'e-mail (story 15) */
.desinstallation { margin-top: 24px; }
.desinstallation__etapes { margin: 14px 0; padding-left: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: .93rem; }
.desinstallation__etapes li { min-width: 0; }
.desinstallation__commande { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--graphite); color: #E6EDF5; font-size: .82rem; overflow-x: auto; white-space: nowrap; max-width: 100%; }
.desinstallation__code { margin: 12px 0 0 !important; padding: 12px 14px; border-radius: 10px; background: #EEF5FF; color: #10345F; font-weight: 700; letter-spacing: .04em; }
.verification { margin-bottom: 20px; border-color: #F3D9A4; background: #FFFBF0; }
.verification form { margin: 12px 0 0; }

/* Story 16 : coordonnées à l'inscription, encart « complétez vos coordonnées », désinstallation repliable. */
.parcours-identite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; margin: 8px 0 16px; padding: 0; border: 0; }
.parcours-identite legend { grid-column: 1 / -1; margin-bottom: 8px; font-size: .9rem; font-weight: 600; color: var(--graphite); }
.parcours-identite .form-row { margin: 0 0 8px; min-width: 0; }
.parcours-identite__address_1, .parcours-identite__address_2, .parcours-identite__country { grid-column: 1 / -1; }
.parcours-identite select { width: 100%; }
@media (max-width: 560px) { .parcours-identite { grid-template-columns: minmax(0, 1fr); } }
.identite-encart { margin-bottom: 20px; border-color: #F3D9A4; background: #FFFBF0; }
.desinstallation-repli { margin-top: 20px; }
.desinstallation-repli > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.desinstallation-repli > summary::-webkit-details-marker { display: none; }
.desinstallation-repli > summary .icone { width: 18px; height: 18px; }
.desinstallation-repli[open] > summary { margin-bottom: 12px; }

/* Page d'accueil : produit grand public, adapté aux pros (même logiciel, même prix). */
.hero__pour-tous { max-width: 600px; margin: 14px 0 0; color: var(--cyan); font-weight: 600; font-size: 1.02rem; }
.pour-tous { background: linear-gradient(180deg, #fff 0%, var(--blanc) 100%); }
.pour-tous .section__intro { max-width: 680px; margin: 12px 0 0; }
.pour-tous__egalite { margin: 32px auto 0; max-width: 900px; padding: 16px 22px; text-align: center; color: var(--navy); font-weight: 600;
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); }
.pour-tous__egalite strong { color: var(--bleu-action); }

/* Cartes « Pour qui ? » de l'accueil : toute la carte mène à la page du profil (lien du titre étendu) */
.argument--lien { position: relative; transition: border-color var(--transition), box-shadow var(--transition); }
.argument--lien h3 a { color: inherit; text-decoration: none; }
.argument--lien h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.argument--lien h3 a::before { content: "→"; float: right; margin-left: 8px; color: var(--bleu-action); }
.argument--lien:hover, .argument--lien:focus-within { border-color: var(--bleu); }
.argument--lien h3 a:focus-visible { outline: none; }
.argument--lien:focus-within { outline: 3px solid var(--bleu); outline-offset: 2px; }