/* RadarContrats, mobile-first, sans framework */
:root {
    --encre: #14212e;
    --accent: #2563eb;
    --accent-fonce: #1d4ed8;
    --fond: #f6f8fa;
    --carte: #ffffff;
    --ok: #1a7a4a;
    --alerte: #9a5b00;
    --erreur: #a3262c;
    --bordure: #e3e8ee;
    --texte-doux: #5a6b7c;
    /* Échelle d'espacement simple (§6) */
    --esp-1: .25rem;
    --esp-2: .5rem;
    --esp-3: 1rem;
    --esp-4: 1.5rem;
    --esp-5: 2.5rem;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    color: var(--encre);
    background: var(--fond);
    line-height: 1.55;
}
main { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem 3rem; }
section { margin: 2.5rem 0; }
h1 { font-size: 1.6rem; line-height: 1.25; }
h1 em { color: var(--accent); font-style: normal; }
h2 { font-size: 1.25rem; margin-bottom: .75rem; }
a { color: var(--accent); }

.site-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: .75rem 1rem; background: var(--carte); border-bottom: 1px solid #e3e8ee;
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 32px; width: auto; }
.site-header nav { display: flex; align-items: center; gap: 1.2rem; }
.site-header nav a { text-decoration: none; font-weight: 600; }
.site-header nav a:hover { text-decoration: underline; }
.site-header nav a[aria-current="page"] { color: var(--encre); }
/* lien secondaire du header connecté : présent mais en retrait */
.nav-secondaire { color: var(--texte-doux); font-weight: 500; }

/* ===== Focus clavier visible partout (plancher AA, §6) ===== */
:focus-visible {
    outline: 2px solid var(--accent-fonce);
    outline-offset: 2px;
    border-radius: .2rem;
}

/* ===== Distinction valeur saisie / placeholder (§3.6) ===== */
::placeholder { color: #6d7c8b; font-style: italic; opacity: 1; }

.hero .sub { font-size: 1.05rem; color: #3d4c5c; }
.champ-groupe { display: flex; flex-direction: column; gap: .6rem; }
input[type="text"], input[type="email"] {
    padding: .7rem .8rem; font-size: 1rem; border: 1px solid #c4ced8;
    border-radius: .4rem; width: 100%;
}
.rayon { border: 0; padding: 0; margin: 0; display: flex; gap: 1rem; }
.rayon label { display: flex; align-items: center; gap: .3rem; }
button, .bouton {
    display: inline-block; padding: .7rem 1.1rem; font-size: 1rem; font-weight: 600;
    color: #fff; background: var(--accent); border: 0; border-radius: .4rem;
    cursor: pointer; text-decoration: none; text-align: center;
}
button:hover, .bouton:hover { background: var(--accent-fonce); }
button:disabled { opacity: .6; cursor: wait; }
.bouton.secondaire { background: #5a6b7c; }

.cartes { display: grid; gap: .8rem; grid-template-columns: 1fr; margin: 1rem 0; }
.carte {
    background: var(--carte); border: 1px solid #e3e8ee; border-radius: .5rem;
    padding: 1rem;
}
.carte strong { font-size: 1.5rem; color: var(--accent); display: block; }

.alerte { padding: .8rem 1rem; border-radius: .4rem; background: #fff6e6; color: var(--alerte); }
.alerte.erreur { background: #fdeaea; color: var(--erreur); }
.alerte.succes { background: #e8f5ee; color: var(--ok); }

#capture-lead { background: var(--carte); border: 1px solid #e3e8ee; border-radius: .5rem; padding: 1rem; margin-top: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.consentement { font-size: .85rem; color: #3d4c5c; display: flex; gap: .5rem; align-items: flex-start; }
.consentement input { margin-top: .2rem; }

.contenu-digest ol { padding-left: 1.2rem; }
.contenu-digest li { margin: .5rem 0; }

.plan { display: flex; flex-direction: column; }
.plan h3 { margin-top: 0; }
/* bouton ancré en bas de la carte : les deux plans restent alignés
   même si l'un a plus de lignes de texte */
.plan .bouton { margin-top: auto; align-self: flex-start; }
.prix { font-size: 1.8rem; font-weight: 700; margin: .2rem 0; }
.prix span { font-size: 1rem; font-weight: 400; color: #5a6b7c; }
.plan-fondateur { border-color: var(--accent); border-width: 2px; }
.cadrage { font-size: .95rem; color: #3d4c5c; }

.faq details { background: var(--carte); border: 1px solid #e3e8ee; border-radius: .4rem; padding: .6rem .9rem; margin: .5rem 0; }
.faq summary { font-weight: 600; cursor: pointer; }

.site-footer {
    border-top: 1px solid #e3e8ee; background: var(--carte);
    padding: 1.5rem 1rem 2rem; font-size: .85rem; color: #3d4c5c;
    text-align: center;
}
.muted { color: #5a6b7c; }
.petit { font-size: .82rem; }

/* ===== Icônes (sprite inline, traits fins, monochrome bleu) ===== */
.ic {
    width: 1.25rem; height: 1.25rem; flex: none;
    color: var(--accent); vertical-align: -0.25em;
}

/* ===== Hero : grille texte + visuel ===== */
.hero-grille { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.hero-visuel { display: none; }

/* Badges métiers, système extensible : un badge = une icône du sprite + un libellé */
.badges-metiers {
    list-style: none; padding: 0; margin: .8rem 0 1.2rem;
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.badge-metier {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .75rem; font-size: .85rem; font-weight: 600;
    color: var(--encre); background: var(--carte);
    border: 1px solid #d4ddfb; border-radius: 999px;
}
.badge-metier .ic { width: 1rem; height: 1rem; }

/* Mockup du digest du lundi matin */
.mockup-digest {
    background: var(--carte); border: 1px solid #e3e8ee; border-radius: .75rem;
    padding: 1.1rem 1.2rem; max-width: 22rem; margin-left: auto;
    box-shadow: 0 12px 32px rgba(20, 33, 46, .10), 0 2px 6px rgba(20, 33, 46, .06);
    transform: rotate(1.2deg);
}
.mockup-entete {
    display: flex; align-items: center; gap: .5rem;
    padding-bottom: .6rem; border-bottom: 1px solid #eef1f5;
}
.mockup-titre { font-weight: 700; font-size: .9rem; }
.mockup-heure {
    margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--accent);
    background: #eaf0fe; border-radius: 999px; padding: .15rem .55rem;
}
.mockup-objet { font-size: .82rem; color: #5a6b7c; margin: .6rem 0 .4rem; }
.mockup-ligne { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; }
.mockup-ligne .ic { width: 1.1rem; height: 1.1rem; margin-top: .1rem; }
.mockup-ligne strong { display: block; font-size: .86rem; line-height: 1.3; }
.mockup-ligne span { display: block; font-size: .76rem; color: #5a6b7c; }
.mockup-squelette { display: flex; flex-direction: column; gap: .45rem; margin-top: .6rem; }
.mockup-squelette span { height: .5rem; border-radius: 999px; background: #edf1f6; }
.mockup-squelette span:nth-child(2) { width: 85%; }
.mockup-squelette span:nth-child(3) { width: 60%; }

/* ===== Preuves : icône au-dessus du chiffre ===== */
.carte-preuve .ic-preuve {
    width: 1.5rem; height: 1.5rem; display: block; margin-bottom: .45rem;
}

/* ===== Liste du digest : une icône par item ===== */
.liste-digest { list-style: none; padding: 0; counter-reset: digest; }
.liste-digest li {
    display: flex; gap: .8rem; align-items: flex-start;
    background: var(--carte); border: 1px solid #e3e8ee; border-radius: .5rem;
    padding: .8rem 1rem; margin: .5rem 0;
}
.liste-digest .ic { margin-top: .15rem; }

/* ===== Tarifs : plan mis en avant ===== */
.plan { position: relative; }
.plan-fondateur { background: #f6f9ff; }
.badge-plan {
    position: absolute; top: -.75rem; right: 1rem;
    padding: .2rem .7rem; font-size: .75rem; font-weight: 700;
    color: #fff; background: var(--accent); border-radius: 999px;
    letter-spacing: .02em;
}

/* ===== FAQ : chevron au style du set d'icônes ===== */
.faq summary { display: flex; align-items: center; gap: .5rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
    content: ""; width: 1rem; height: 1rem; flex: none;
    background-color: var(--accent);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>') center / contain no-repeat;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>') center / contain no-repeat;
    transition: transform .15s ease;
}
.faq details[open] summary::before { transform: rotate(90deg); }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

@media (min-width: 640px) {
    h1 { font-size: 2rem; }
    .champ-groupe { flex-direction: row; align-items: center; }
    .champ-groupe input[type="text"] { flex: 1; }
    .cartes { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}

@media (min-width: 860px) {
    /* Le hero s'élargit pour accueillir le mockup à droite, dans le même conteneur que le reste */
    .hero-grille { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .hero-visuel { display: block; }
}

/* ===== Accueil générique : une tuile par métier ===== */
.accueil-hero { text-align: center; max-width: 42rem; margin: 3rem auto 0; }
.tuiles-metiers { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.tuile-metier {
    display: flex; flex-direction: column; gap: .4rem;
    background: var(--carte); border: 1px solid var(--bordure); border-radius: .75rem;
    padding: 1.5rem; text-decoration: none; color: var(--encre);
}
a.tuile-metier:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(37, 99, 235, .12);
}
.tuile-metier h2 {
    display: flex; align-items: center; gap: .5rem;
    margin: 0; font-size: 1.2rem;
}
.tuile-metier p { margin: 0; color: var(--texte-doux); font-size: .95rem; }
.ic-tuile { width: 2rem; height: 2rem; margin-bottom: .35rem; }
.tuile-cta { margin-top: .8rem; font-weight: 600; color: var(--accent); }
a.tuile-metier:hover .tuile-cta { color: var(--accent-fonce); text-decoration: underline; }
/* métier annoncé mais pas encore live : présent, mais clairement en retrait */
.tuile-a-venir { background: transparent; border-style: dashed; }
.tuile-a-venir .ic-tuile { color: var(--texte-doux); }
.accueil-contact { text-align: center; margin-top: 1.2rem; }

@media (min-width: 640px) {
    .tuiles-metiers { grid-template-columns: repeat(3, 1fr); }
    .accueil-hero { margin-top: 4rem; }
}

/* =====================================================================
   Espace client « Mon compte », conteneur unifié, hiérarchie claire.
   Mobile d'abord (les clients consultent du camion, §4.7).
   ===================================================================== */

/* Conteneur unique : toutes les sections partagent la même largeur (§3.2) */
.compte { max-width: 46rem; margin: 0 auto; }
.compte-etroit { max-width: 34rem; }

.compte-entete { margin: var(--esp-4) 0 var(--esp-3); }
.compte-entete h1 { margin: 0 0 var(--esp-1); }
.compte-entete .muted { margin: 0; }

/* Panneaux : cartes de même poids, sauf le pipeline qui domine */
.panneau {
    background: var(--carte); border: 1px solid var(--bordure); border-radius: .75rem;
    padding: var(--esp-3) var(--esp-3) var(--esp-4); margin: var(--esp-3) 0;
}
.panneau h2 {
    display: flex; align-items: center; gap: var(--esp-2);
    font-size: 1.15rem; margin: 0 0 var(--esp-2);
}
.panneau-note { background: transparent; border-style: dashed; padding-bottom: var(--esp-3); }
.panneau-note h2 { font-size: 1rem; }

/* --- Pipeline : la preuve que les 199 $ travaillent (§4.2) --- */
.panneau-pipeline { background: #f6f9ff; border-color: #d4ddfb; }
.pipeline-contexte { margin: 0 0 var(--esp-3); color: #3d4c5c; }
.pipeline-chiffres { display: grid; gap: var(--esp-2); grid-template-columns: 1fr 1fr; }
.chiffre {
    background: var(--carte); border: 1px solid var(--bordure); border-radius: .5rem;
    padding: var(--esp-2) var(--esp-3);
}
.chiffre strong { display: block; font-size: 1.35rem; color: var(--encre); line-height: 1.2; }
.chiffre span { font-size: .85rem; color: var(--texte-doux); }
/* le chiffre principal : pleine largeur, en accent, c'est lui qu'on lit en premier */
.chiffre-principal { grid-column: 1 / -1; border-color: #d4ddfb; }
.chiffre-principal strong { font-size: 2.1rem; color: var(--accent-fonce); }
.chiffre-principal span { font-size: .95rem; color: var(--encre); }
.pipeline-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3);
    margin-top: var(--esp-3);
}

/* Lien discret : trouvable en moins de 10 secondes, jamais enterré (§5) */
.lien-discret { color: var(--texte-doux); text-decoration: underline; font-size: .95rem; }
.lien-discret:hover { color: var(--encre); }

/* --- Formulaire du profil de veille (§4.3) --- */
.form-profil { display: flex; flex-direction: column; gap: var(--esp-3); margin-top: var(--esp-2); }
.champ { display: flex; flex-direction: column; gap: var(--esp-1); }
.champ > label, .champ legend { font-weight: 600; font-size: .95rem; }
.label-optionnel { font-weight: 400; color: var(--texte-doux); }
.champ-aide { margin: 0; font-size: .85rem; color: var(--texte-doux); }
.champ-erreur { margin: 0; font-size: .85rem; font-weight: 600; color: var(--erreur); }
.champ input[type="text"]:hover { border-color: #9fb0c2; }
.champ input[type="text"]:focus { border-color: var(--accent); }
input.invalide { border-color: var(--erreur); background: #fdf3f3; }
.rayon { border: 0; padding: 0; margin: 0; }
.rayon-options { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
/* rayon : options en pastilles, cibles tactiles généreuses pour le terrain */
.option-rayon {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    padding: .55rem .9rem; border: 1px solid #c4ced8; border-radius: .5rem;
    background: var(--carte); cursor: pointer; font-weight: 500;
}
.option-rayon:hover { border-color: var(--accent); }
.option-rayon:has(input:checked) {
    border-color: var(--accent); background: #eaf0fe; font-weight: 600;
}
.option-rayon:has(input:focus-visible) { outline: 2px solid var(--accent-fonce); outline-offset: 2px; }
.form-actions { margin-top: var(--esp-1); }

/* --- Abonnement : badges de statut lisibles (§4.4) --- */
.abonnement-resume {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3);
    margin-bottom: var(--esp-2);
}
.abonnement-plan { margin: 0; }
.badge-statut {
    display: inline-flex; align-items: center;
    padding: .2rem .65rem; border-radius: 999px;
    font-size: .8rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.badge-actif { color: var(--ok); background: #e8f5ee; border: 1px solid #bfe3d0; }
.badge-attention { color: var(--alerte); background: #fff6e6; border: 1px solid #f0dcb4; }
.badge-erreur { color: var(--erreur); background: #fdeaea; border: 1px solid #f2c6c8; }
.badge-neutre { color: #3d4c5c; background: #edf1f5; border: 1px solid #d5dde5; }
.badge-bienvenue { color: var(--accent-fonce); background: #eaf0fe; border: 1px solid #d4ddfb; }
.abonnement-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3);
    margin-top: var(--esp-3);
}

/* --- Archives : pensées pour 52 entrées/an, groupées par mois (§4.5) --- */
.etat-vide { color: var(--texte-doux); margin: var(--esp-2) 0 0; }
.liste-archives { list-style: none; padding: 0; margin: var(--esp-2) 0; }
.archives-mois {
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--texte-doux); margin: var(--esp-3) 0 var(--esp-1); padding: 0 var(--esp-1);
}
.liste-archives .archives-mois:first-child { margin-top: 0; }
.archive-item {
    display: flex; align-items: center; gap: var(--esp-2);
    border-bottom: 1px solid var(--bordure);
}
.archive-item:last-child { border-bottom: 0; }
.archive-item a {
    flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-1) var(--esp-2);
    padding: .65rem var(--esp-1); text-decoration: none; color: var(--encre); font-weight: 600;
    border-radius: .4rem;
}
.archive-item a:hover { background: #f2f6fd; color: var(--accent-fonce); }
.archive-date { font-weight: 400; font-size: .88rem; color: var(--texte-doux); }

/* --- Page Intel : classement des concurrents du rayon, table simple --- */
.table-defile { overflow-x: auto; }
.table-intel { width: 100%; border-collapse: collapse; margin: var(--esp-3) 0 var(--esp-2); }
.table-intel th, .table-intel td {
    padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--bordure);
}
.table-intel th {
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--texte-doux);
}
.table-intel th.num, .table-intel td.num { text-align: right; white-space: nowrap; }
.table-intel .rang { color: var(--texte-doux); width: 2rem; }
.table-intel tbody tr:hover { background: #f2f6fd; }

/* --- Confirmation d'annulation : l'action de retour est la plus visible --- */
.confirmation-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3);
    margin-top: var(--esp-4);
}

@media (min-width: 640px) {
    .panneau { padding: var(--esp-4) var(--esp-4) var(--esp-5); }
    .pipeline-chiffres { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
    .chiffre-principal { grid-column: auto; }
    .chiffre { padding: var(--esp-3); }
}