/* Emblem and wordmark are transparent crops of the supplied logo (see IDENTITE.md). */
:root {
  --brand-navy: #103c65;
  --brand-orange: #e96732;
  --brand-soft: #fff0e6;
  --ink: var(--brand-navy);
  --orange: #b74319; /* Accessible text variant of the logo orange. */
  --paper: #fbfaf7;
  --muted: #596b7a;
  --line: #dce3e9;
}
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; line-height: 1; letter-spacing: 0; }
.brand-emblem, .brand-name { display: block; flex-shrink: 0; }
.brand-emblem { width: 60px; aspect-ratio: 180 / 169; }
.brand-name { width: 190px; aspect-ratio: 570 / 99; }
.brand .brand-emblem img, .brand .brand-name img { display: block; width: 100%; height: auto; max-width: none; margin: 0; object-fit: initial; }
.brand small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; margin-top: 5px; letter-spacing: .08px; }
header { box-shadow: 0 2px 12px #103c6505; }
header nav button { min-height: 44px; }
button:hover { background: #edf3f8; }
.primary:hover { background: #194f7e; border-color: #194f7e; }
#submit:hover { background: #194f7e; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--orange); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-navy); }
.search { border-color: #ccd8e2; box-shadow: 0 8px 24px #103c6508; }
.search .primary { box-shadow: inset 0 -3px 0 #e96732; }
.categories button.active { background: var(--brand-soft); border-color: #f0bb9d; }
.advanced-panel, .profile-details, .recipient-list, .recovery-codes, .thread, .draft-save-panel { background: #f0f4f8; }
.publication-panel { background: var(--brand-soft); }
.contact-avatar { background: #edf1f4; }
.status, .public-profile-link:hover { background: #edf3f8; }
#toggleAdvancedFilters[aria-expanded="true"] { background: #edf3f8; border-color: #7894ac; }
.pill, .review, thead th { background: #f0f4f8; }
.card-photo, #map { background-color: #edf1f4; }
.pro-banner { background: var(--brand-soft); border: 1px solid #f4d7c5; }
.pro-banner h2 { color: var(--brand-navy); }
.lebonarti-rating { color: var(--brand-navy); }
.lebonarti-rating small { color: var(--muted); }
.plan-card, .sponsor-card, .sponsor-explanation { border-color: var(--line); }
.plan-featured { border-color: var(--orange); }
.album-usage p { background: #f0f4f8; }
dialog::backdrop { background: #102f4aaa; }
footer { flex-wrap: wrap; align-items: center; gap: 18px 28px; background: white; }
footer .brand { margin-right: 4px; }
/* Success/verification greens and warning/error colors keep their meaning. */
@media (max-width: 650px) {
  header { gap: 12px; }
  .brand { gap: 8px; }
  .brand-emblem { width: 43px; }
  .brand-name { width: 144px; }
  .brand small { font-size: 11px; margin-top: 3px; letter-spacing: 0; white-space: nowrap; }
  header #userLabel { display: none; }
  header nav button { padding: 8px; white-space: nowrap; }
  footer .brand { margin-bottom: 6px; }
}
@media (max-width: 360px) {
  .brand-emblem { width: 37px; }
  .brand-name { width: 129px; }
  .brand small { font-size: 10px; }
}

/* Espace personnel : onglets regroupés par usage, une rangée défilante par groupe sur téléphone. */
/* <nav> hérite d'un centrage global (site.css) : alignement explicite pour que chaque rangée reste dans la fenêtre. */
.tab-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 26px; margin: 16px 0 22px; font-size: inherit; }
.tab-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tab-group-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tab-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tab-row button { white-space: nowrap; font-size: 14px; }
.tab-row button.active { background: var(--brand-navy); border-color: var(--brand-navy); color: white; }
.tab-count { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: var(--orange); color: white; font-size: 12px; line-height: 20px; text-align: center; }
@media (max-width: 650px) {
  .tab-groups { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
  .tab-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
}

/* Fiche artisan : résumé en tête, vérifications validées en pastilles, action principale toujours accessible. */
.profile-summary { margin: 0 0 16px; }
.profile-summary p { margin: 0 0 6px; }
.profile-summary .available { margin: 0 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: #f0f4f8; color: var(--muted); font-size: 13px; font-weight: 600; }
.chip-ok { background: #e6f2ea; color: #1f5d36; }
.chip-rating { background: var(--brand-soft); color: var(--brand-navy); }
.profile-checks { margin-top: 26px; padding-top: 6px; border-top: 1px solid var(--line); }
.profile-checks-title { font-size: 21px; }
.profile-action-bar { display: none; }
@media (max-width: 760px) {
  .profile-action-bar { position: sticky; bottom: 0; z-index: 6; display: flex; gap: 10px; align-items: center; margin: 22px -32px -32px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: white; border-top: 1px solid var(--line); box-shadow: 0 -6px 18px #103c6512; }
  .profile-action-bar .primary { flex: 1; min-height: 48px; }
  .profile-action-bar .call-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 9px; font-weight: 700; text-decoration: none; color: var(--brand-navy); }
}
@media (max-width: 650px) { .profile-action-bar { margin: 22px -18px -23px; } }

/* Accueil : fonctionnement et engagements, lisibles en un coup d'œil. */
.how-it-works { margin: 34px 0 10px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.how-it-works h2 { margin-bottom: 18px; }
.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: step; }
.how-steps li { counter-increment: step; display: flex; flex-direction: column; gap: 4px; padding-left: 46px; position: relative; }
.how-steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--orange); font-weight: 800; }
.how-steps span, .how-promises li { color: var(--muted); font-size: 15px; }
.how-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; }
.how-promises strong { display: block; color: var(--brand-navy); }
@media (max-width: 760px) {
  .how-it-works { padding: 22px 18px; }
  .how-steps, .how-promises { grid-template-columns: 1fr; }
}

/* Fiche sans photo : visuel de marque plutôt qu'un rectangle gris (fréquent au lancement). */
.photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding-bottom: 22px; background: url("/assets/lebonarti-symbol.svg") no-repeat center 38% / 64px, linear-gradient(135deg, #fff0e6, #edf3f8); color: var(--brand-navy); font-weight: 600; }

/* Fiche artisan en préparation : aide à la saisie depuis l'annuaire officiel. */
.siret-lookup { min-height: 44px; padding: 4px 0; font-size: 14px; }

/* Comparaison : le défilement reste repérable au toucher et utilisable au clavier. */
.compare-scroll-help { display: none; }
.compare-scroll:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.compare-scroll { scrollbar-width: auto; overscroll-behavior-x: contain; }
@media (max-width: 760px) {
  .compare-scroll-help { display: block; margin: 0 0 10px; }
}

/* Téléphone : un seul menu « Rubrique » au lieu de 16 onglets (29 septembre 2026). */
.tab-select { display: none; }
@media (max-width: 650px) {
  .tab-select { display: flex; margin: 12px 0 16px; }
  .tab-select select { font-size: 16px; min-height: 46px; font-weight: 600; }
  .tab-groups { display: none; }
}

/* Analyse du 30 septembre 2026 : lisibilité et zones à toucher sur téléphone
   (au moins 12 px pour les textes utiles, environ 44 px pour les commandes). */
@media (max-width: 650px) {
  .section-head .eyebrow, .card small, .card-bottom small { font-size: 12px; }
  .card h3 a { display: block; padding: 6px 0; }
  .card-bottom a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .check input { width: 22px; height: 22px; }
  footer a, footer .text { display: inline-flex; align-items: center; min-height: 44px; }
  summary { padding: 10px 0; }
  .public-profile-link, .legal-explainer a { display: inline-flex; align-items: center; min-height: 44px; }
  .quote-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  .quote-steps button { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; border-radius: 20px; font-size: 14px; }
}
/* Petits textes d’appoint lisibles aussi sur ordinateur. */
.intro-aside small, .card small, .card-bottom small, .map-title small { font-size: 12px; }

/* Liens isolés : zone à toucher d’au moins 40 px sur téléphone (30 septembre 2026). */
@media (max-width: 650px) {
  .local-links a { padding: 10px 0; margin-top: 0; margin-bottom: 0; }
  .external-source, main > a[href^="mailto:"] { display: inline-block; padding: 10px 0; }
}

/* Barre du bas et cloche : boutons colorés, pastille de nouveautés (30 septembre 2026). */
.alerts-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; color: var(--brand-navy); }
.alerts-button[hidden] { display: none; }
.alerts-button.has-alerts { color: var(--brand-orange); border-color: var(--brand-orange); }
.alert-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--brand-orange); color: #fff; font: 700 12px/20px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px #fff; }
.alert-count[hidden] { display: none; }
@media (max-width: 650px) {
  .mobile-nav { gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px #103c6514; }
  .mobile-nav button { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; padding: 6px 4px; border: 0; border-radius: 14px; font-size: 13px; font-weight: 700; line-height: 1.1; }
  .mobile-nav .nav-filters { background: #e8f0f8; color: var(--brand-navy); }
  .mobile-nav .nav-space { background: var(--brand-navy); color: #fff; }
  .mobile-nav .nav-space.has-alerts { box-shadow: 0 0 0 3px #e9673255; }
  .mobile-nav .nav-compare { background: var(--brand-soft); color: #a3441c; }
  .mobile-nav .alert-count { top: 4px; right: calc(50% - 26px); }
  .mobile-nav button:hover { filter: brightness(.96); }
  header nav .alerts-button { width: 40px; height: 40px; }
}

/* Pied de page sur téléphone : une ligne par lien, séparées, au lieu de liens collés (30 septembre 2026). */
@media (max-width: 650px) {
  footer { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 110px; }
  footer .brand { margin-bottom: 8px; }
  footer > p { margin: 0 0 10px; }
  footer > a:not(.brand), footer > button.text { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; text-decoration: none; font-weight: 600; color: var(--brand-navy); }
  footer > a:not(.brand)::after, footer > button.text::after { content: "›"; font-size: 22px; line-height: 1; color: var(--muted); }
  footer > button.text[hidden] { display: none; }
  footer > details { margin-top: 14px; }
}

/* Champ piège de l’inscription : invisible pour les personnes, rempli seulement par les robots. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Bandeau hors ligne du devis : même aspect qu’une erreur, sans en être une (30 septembre 2026). */
.email-confirm-notice.attention { border: 2px solid #c2410c; margin-top: 12px; }
/* Password fields: the « Afficher » button on the field's row, above the iPhone keyboard (3 October 2026). */
.password-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: end; }
.password-field > .password-toggle { margin: 0; min-height: 48px; min-width: 6.5em; padding: 0 14px; font-size: 15px; white-space: nowrap; touch-action: manipulation; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.offline-banner { padding: 10px; background: #fff1ed; color: #93311e; border-radius: 8px; }

/* Carte : commune cherchée au-delà du rayon déclaré par l’artisan (30 septembre 2026). */
.zone-note { margin: 2px 0; color: #8a4b06; font-size: 13px; }

/* Explications repliées derrière « ⓘ » et vérifications détaillées repliables (30 septembre 2026). */
.info-tip { margin: 4px 0 10px; }
.info-tip > summary { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; cursor: pointer; list-style: none; color: var(--brand-navy); font-size: 14px; font-weight: 600; }
.info-tip > summary::-webkit-details-marker { display: none; }
.info-tip-icon { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 50%; font: italic 700 12px/1 Georgia, serif; }
.info-tip-body { margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: #f3f6f9; color: var(--muted); font-size: 14px; line-height: 1.5; }
.info-tip-body p { margin: 0 0 8px; }
.info-tip-body p:last-child { margin: 0; }
details.profile-checks > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; }
details.profile-checks > summary::-webkit-details-marker { display: none; }
details.profile-checks > summary::after { content: "+"; flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; font-size: 20px; color: var(--brand-navy); }
details.profile-checks[open] > summary::after { content: "−"; }
details.profile-checks > summary h3 { margin: 10px 0; }

/* Résultats sur téléphone : cartes compactes, photo à gauche, au moins deux par écran. */
@media (max-width: 650px) {
  .cards { gap: 12px; }
  .cards .card { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .cards .card-photo { height: auto; min-height: 140px; }
  .cards .card-photo .photo-placeholder { padding: 0; font-size: 0; }
  .cards .demo-pill { left: 6px; top: 6px; padding: 3px 6px; font-size: 11px; }
  .cards .heart { right: 6px; top: 6px; width: 34px; height: 34px; font-size: 19px; }
  .cards .card-body { min-width: 0; padding: 10px 12px 6px; }
  .cards .card-loc { font-size: 12px; }
  .cards .card h3 { margin: 2px 0 0; font-size: 17px; line-height: 1.25; }
  .cards .card h3 a { padding: 2px 0; }
  .cards .card .trade { margin: 0; font-size: 14px; }
  .cards .card .services { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0; font-size: 13px; }
  .cards .card .available { margin: 2px 0; font-size: 13px; }
  .cards .card-body > .meta { display: none; }
  .cards .card-bottom { flex-wrap: wrap; gap: 0 10px; }
  .cards .card-bottom .lebonarti-rating { font-size: 13px; }
  .cards .card-bottom a { min-height: 40px; }
  .cards .card .check { margin-top: 2px; padding-top: 6px; font-size: 13px; }
}
@media (max-width: 650px) {
  .cards .heart { top: auto; bottom: 6px; }
  .cards .card .services { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cards .card-bottom .lebonarti-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; margin: 0; }
  .cards .card-bottom .lebonarti-rating > strong { display: none; }
  .cards .card-bottom .lebonarti-rating small { font-size: 12px; }
}
@media (max-width: 650px) {
  .cards .card .services { min-height: 0; }
  .cards .card-bottom { gap: 0 10px; margin-top: 2px; }
  .cards .card-bottom a { min-height: 36px; }
  .cards .card .check { margin-top: 0; padding-top: 4px; min-height: 36px; }
}

/* Assistant de fiche sur téléphone (3 octobre 2026) : la barre fixe ne cache plus le champ visé,
   le bouton de publication y prend la place principale, et le cœur se touche facilement. */
.wizard-step { scroll-margin-top: 70px; }
.wizard-nav .publish { margin-left: auto; }
.unpublished-notice, .official-name-notice { margin: 10px 0 0; }
@media (max-width: 650px) {
  dialog { scroll-padding-bottom: 96px; }
  .wizard-nav .publish { flex: 1; margin-left: 0; min-height: 48px; }
  .cards .heart { width: 40px; height: 40px; }
}

/* Inscription (4 octobre 2026) : « J’ai déjà un compte » en haut, visible sans faire défiler sur téléphone ; le type de compte
   en deux cartes, sans présélection ; adresse déjà inscrite : « Me connecter » et « Mot de passe oublié ? ». */
#authForm > p { margin: 0; }  /* The form's grid spaces its rows: no paragraph margin on top of it. */
#authForm > .auth-switch { margin: -8px 0 -4px; }
#authForm > #authProHint { margin-top: -8px; }
.auth-switch .text { min-height: 44px; padding: 10px 0; }
.inline-link { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.role-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.role-choice legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; }
.role-card { flex-direction: row; align-items: flex-start; gap: 10px; min-height: 48px; padding: 12px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 400; }
.role-card input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; }
.role-card strong { display: block; color: var(--brand-navy); font-size: 15px; line-height: 1.3; }
.role-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.role-card:has(input:checked) { border-color: var(--brand-navy); background: #edf3f9; }
.role-card:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }
.auth-recover { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.auth-recover button { margin: 0; min-height: 44px; }
@media (max-width: 359px) {
  .role-choice { grid-template-columns: 1fr; }
}
/* Revue du 4 octobre 2026, sur téléphone : un bouton pris dans une phrase (« connectez-vous », « créez votre compte gratuit
   en une minute », « Créez plutôt un compte particulier ») garde l’interligne du texte mais se touche sur 44 px de haut ;
   les cartes du type de compte n’affichent que leur titre, la description reste lue par les lecteurs d’écran. */
@media (max-width: 650px) {
  .inline-link { position: relative; }
  .inline-link::after { content: ""; position: absolute; top: -12px; right: 0; bottom: -12px; left: 0; }
  .role-card { position: relative; align-items: center; padding: 10px; }
  .role-card small { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* Liens d'action dessinés comme des boutons (4 octobre 2026, audit B05) : « Je suis artisan », « Créer mon profil gratuit »
   et la page « Artisans » sont de vrais liens vers /artisans, lisibles sans script et par les moteurs. */
.button-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--brand-navy); font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; }
.button-link.primary { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
.button-link.primary:hover { background: #194f7e; border-color: #194f7e; color: #fff; }
/* site.css masque les liens simples de l'en-tête sous 1050 px : « Je suis artisan » reste affiché. */
header nav > a.button-link { display: inline-flex; white-space: nowrap; }
.pro-banner .offers-line { margin: 10px 0 0; }
.pro-banner .offers-line a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-navy); font-weight: 600; }
@media (max-width: 650px) {
  header nav > a.button-link { padding: 8px; font-size: 13px; }
  .pro-banner > .button-link { margin-top: 14px; }
}

/* Fenêtres sur téléphone (4 octobre 2026, audit B11) : une feuille plein écran. Le titre et « × » restent dans une barre collée
   en haut, sur fond blanc : le « × » flottant ne recouvre plus le contenu (il cachait « Ajouter » pendant la saisie). */
@media (max-width: 650px) {
  #modal, #modal:has([data-tab]) { width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; border-radius: 0; box-shadow: none; scroll-padding-top: 76px; }
  #modal > .close { position: sticky; top: 6px; z-index: 7; float: none; display: block; width: 44px; height: 44px; min-height: 44px; margin: 6px 8px -50px auto; background: #fff; }
  #modalBody { padding: 0 18px 23px; }
  #modalBody > .dialog-top { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; min-height: 56px; margin: 0 -18px 14px; padding: 8px 60px 8px 18px; background: #fff; border-bottom: 1px solid var(--line); }
  #modalBody > .dialog-top h2 { font-size: 20px; line-height: 1.25; letter-spacing: -.3px; }
}

/* Demandes en attente (4 octobre 2026, audit B07) : en tête de chaque rubrique, « Répondre » mène à « Demandes reçues ». */
.quotes-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 14px 0; padding: 12px 14px; border: 1px solid #f0bb9d; border-radius: 12px; background: var(--brand-soft); }
.quotes-banner p { margin: 0; }
.quotes-banner strong { color: var(--brand-navy); }
.quotes-banner button { min-height: 44px; padding-inline: 22px; }
.tab-select-waiting { color: var(--orange); font-weight: 700; }
@media (max-width: 650px) { .quotes-banner button { flex: 1 1 100%; } }