/* Petits « i » des outils de mesure (assets/js/aides.js, inc/aides.php), 01/10. Charte : anthracite, gris, doré. */
.aide-i { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-left: 0.4rem; padding: 0; border: 1px solid var(--bleu, #8c680c); border-radius: 50%; background: var(--blanc, #fafaf8); color: var(--bleu, #8c680c); font: italic 600 13px/1 var(--serif, Georgia, serif); vertical-align: middle; cursor: pointer; position: relative; }
.aide-i::after { content: ""; position: absolute; inset: -11px; }
.aide-i:hover, .aide-i[aria-expanded="true"] { background: var(--bleu, #8c680c); color: var(--blanc, #fafaf8); }
.aide-i:focus-visible { outline: 2px solid var(--moutarde, #d6a62b); outline-offset: 2px; }
.a-aide, .aide-lib { display: inline-flex !important; align-items: center; gap: 0; }
.projet__ligne { display: flex; align-items: center; min-height: 22px; }
.projet__ligne .projet__etiquette { margin: 0; }
p.projet__etiquette .aide-i { margin-top: -2px; }
.aide-bulle { position: fixed; z-index: 1000; width: min(22rem, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 0.9rem 1rem 1rem; border: 1px solid var(--trait, #d7d5cf); border-radius: 14px; background: var(--blanc, #fafaf8); box-shadow: 0 12px 34px rgba(35, 38, 43, 0.2); color: var(--anthracite, #25272b); box-sizing: border-box; }
.aide-bulle[hidden] { display: none; }
.aide-bulle:focus { outline: none; }
.aide-bulle__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.aide-bulle__titre { margin: 0.15rem 0 0.5rem; font: 600 var(--t-md, 1rem)/1.3 var(--sans, sans-serif); }
.aide-bulle__fermer { flex: none; width: 44px; height: 44px; margin: -0.6rem -0.6rem 0 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--feutre, #676a6f); font: 400 26px/1 var(--sans, sans-serif); cursor: pointer; }
.aide-bulle__fermer:hover { color: var(--anthracite, #25272b); }
.aide-bulle__fermer:focus-visible { outline: 2px solid var(--moutarde, #d6a62b); }
.aide-bulle__schema { margin: 0 0 0.6rem; padding: 0.4rem; border-radius: 10px; background: var(--platre, #efeeea); }
.aide-svg { display: block; width: 100%; height: auto; }
.aide-svg .m { fill: none; stroke: #25272b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.aide-svg .p { fill: none; stroke: #25272b; stroke-width: 2; stroke-linecap: round; }
.aide-svg .c { fill: #e4e2dc; stroke: #676a6f; stroke-width: 1.3; }
.aide-svg .c2 { fill: none; stroke: #9a9a98; stroke-width: 1; }
.aide-svg .c2f { fill: #d7d5cf; stroke: #9a9a98; stroke-width: 1; }
.aide-svg .z { fill: none; stroke: #676a6f; stroke-width: 1.2; stroke-dasharray: 4 4; }
.aide-svg .k { fill: none; stroke: #8c680c; stroke-width: 1.3; stroke-linecap: round; }
.aide-svg .kd { stroke-dasharray: 5 3; }
.aide-svg text { font: 500 11px/1 "Familjen Grotesk", system-ui, sans-serif; text-anchor: middle; }
.aide-svg .t { fill: #676a6f; }
.aide-svg .tk { fill: #8c680c; font-weight: 600; }
.aide-svg .s1 { fill: #f1efe9; stroke: #9a9a98; } .aide-svg .s2 { fill: #d8c7a8; stroke: #9a9a98; } .aide-svg .s3 { fill: #9a9a98; }
.aide-svg .s4 { fill: #2a2a2a; } .aide-svg .s5 { fill: #8c680c; } .aide-svg .s6 { fill: #676a6f; }
.aide-bulle__texte p { margin: 0 0 0.45rem; font: 400 var(--t-sm, 0.9rem)/1.5 var(--sans, sans-serif); color: var(--anthracite, #25272b); }
.aide-bulle__texte p:last-child { margin-bottom: 0; }
/* Phone: a panel at the bottom of the screen, easy to read and to close with the thumb. */
.aide-bulle--panneau { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; max-height: 80vh; border-radius: 16px 16px 0 0; padding: 1rem 16px calc(1rem + env(safe-area-inset-bottom, 0px)); }
/* Mon projet: a model that exists in the chosen colour shows it; otherwise the list says so. */
.projet__meilleur-coloris { display: block; font: 500 var(--t-xs, 0.8rem)/1.3 var(--sans, sans-serif); color: var(--feutre, #676a6f); }
/* Mon projet: « Nouveau depuis votre dernière visite », « Tout ajouter à ma sélection » (01/10). */
.projet__nouveau { display: block; margin-bottom: 0.1rem; font: 600 var(--t-xs, 0.8rem)/1.2 var(--sans, sans-serif); font-style: normal; letter-spacing: 0.02em; color: var(--bleu, #8c680c); }
.projet__ajouter { display: grid; gap: 0.3rem; margin: -0.4rem 0 1rem; }
.projet__ajouter--form { margin: 1.2rem 0 0; }
.projet__action--ajouter { justify-self: start; min-height: 44px; padding: 0 1rem; border: 1px solid var(--anthracite, #25272b); border-radius: 999px; }
.projet__action--ajouter[hidden] { display: none; }
.projet__action--ajouter:disabled { border-color: var(--trait, #d7d5cf); color: var(--feutre, #676a6f); cursor: default; }
.projet__action--ajouter:focus-visible { outline: 2px solid var(--moutarde, #d6a62b); outline-offset: 2px; }
.projet__ajoute { font: 500 var(--t-sm, 0.9rem)/1.4 var(--sans, sans-serif); color: var(--anthracite, #25272b); }
.projet__ajoute:empty { display: none; }
/* Mon projet, other colours (Romain 01/10 9 h 25): set apart under the main list, folded. */
.projet__autres { margin: -0.3rem 0 1.1rem; padding-top: 0.6rem; border-top: 1px solid var(--trait, #d7d5cf); }
.projet__autres[hidden] { display: none; }
.projet__autres summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 600 var(--t-sm, 0.9rem)/1.35 var(--sans, sans-serif); color: var(--anthracite, #25272b); }
.projet__autres summary:focus-visible { outline: 2px solid var(--moutarde, #d6a62b); outline-offset: 2px; }
.projet__autres .projet__meilleurs { margin: 0.5rem 0 0; }
.projet__autres-reste { font: 400 var(--t-xs, 0.8rem)/1.4 var(--sans, sans-serif); color: var(--feutre, #676a6f); }
.projet-badge.projet-badge--couleur { background: rgba(250, 250, 248, 0.94); color: var(--feutre, #676a6f); font-weight: 500; }
/* Mon projet: style with few proven models (01/10 9 h 35). */
.projet__style-peu { color: var(--bleu, #8c680c); font-weight: 600; }
.projet__style-peu[hidden] { display: none; }
/* « Ajouter à ma sélection » window (01/10 9 h 40). Phone: a full-height panel from the bottom. */
html.a-fenetre { overflow: hidden; }
.projet-fen { width: min(40rem, calc(100vw - 32px)); max-height: min(88vh, 52rem); padding: 0; border: 0; border-radius: 18px; background: var(--blanc, #fafaf8); color: var(--anthracite, #25272b); box-shadow: 0 24px 60px rgba(35, 38, 43, 0.3); overflow: hidden; }
.projet-fen[open] { display: flex; flex-direction: column; }
.projet-fen::backdrop { background: rgba(35, 38, 43, 0.5); }
.projet-fen__tete { position: relative; padding: 1.1rem 1.2rem 0.7rem; border-bottom: 1px solid var(--trait, #d7d5cf); }
.projet-fen__tete h2 { margin: 0 2.6rem 0.2rem 0; font: 600 var(--t-lg, 1.25rem)/1.25 var(--sans, sans-serif); }
.projet-fen__fermer { position: absolute; top: 0.45rem; right: 0.45rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; font: 400 28px/1 var(--sans, sans-serif); color: var(--feutre, #676a6f); cursor: pointer; }
.projet-fen__total { margin: 0 0 0.6rem; font: 400 var(--t-sm, 0.9rem)/1.4 var(--sans, sans-serif); color: var(--feutre, #676a6f); }
.projet-fen__outils { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1rem; }
.projet-fen__lien { min-height: 40px; padding: 0; border: 0; background: none; font: 600 var(--t-sm, 0.9rem)/1 var(--sans, sans-serif); color: var(--bleu, #8c680c); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.projet-fen__lien:disabled { color: var(--feutre, #676a6f); text-decoration: none; cursor: default; }
.projet-fen__n { margin-left: auto; font: 600 var(--t-sm, 0.9rem)/1 var(--sans, sans-serif); }
.projet-fen__liste { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0.3rem 0.6rem; list-style: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.projet-fen__ligne label { display: grid; grid-template-columns: 24px 64px minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; padding: 0.5rem 0.6rem; border-radius: 12px; cursor: pointer; }
.projet-fen__ligne label:hover { background: var(--platre, #efeeea); }
.projet-fen__ligne input { width: 20px; height: 20px; accent-color: var(--anthracite, #25272b); }
.projet-fen__ligne input:focus-visible { outline: 2px solid var(--moutarde, #d6a62b); outline-offset: 2px; }
.projet-fen__ligne img { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--platre-2, #e4e2dc); }
.projet-fen__nom { font: 600 var(--t-sm, 0.9rem)/1.3 var(--sans, sans-serif); min-width: 0; }
.projet-fen__nom small { display: block; font-weight: 500; color: var(--bleu, #8c680c); }
.projet-fen__coloris, .projet-fen__deja { display: block; font: 500 var(--t-xs, 0.8rem)/1.3 var(--sans, sans-serif); color: var(--feutre, #676a6f); }
.projet-fen__deja { color: var(--vert-ok, #5b7a55); }
.projet-fen__chiffres { display: grid; justify-items: end; font: 600 var(--t-sm, 0.9rem)/1.3 var(--sans, sans-serif); }
.projet-fen__chiffres small { font-weight: 500; color: var(--feutre, #676a6f); }
.projet-fen__ligne.est-deja label { opacity: 0.55; cursor: default; }
.projet-fen__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.8rem 1.2rem calc(0.9rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--trait, #d7d5cf); }
.projet-fen__retour { flex-basis: 100%; margin: 0; font: 500 var(--t-sm, 0.9rem)/1.4 var(--sans, sans-serif); }
.projet-fen__retour:empty { display: none; }
.projet-fen__principal { min-height: 48px; }
.projet-fen__principal:disabled { opacity: 0.5; cursor: default; }
.projet-fen__second { min-height: 44px; padding: 0 1rem; border: 1px solid var(--anthracite, #25272b); border-radius: 999px; background: none; font: 600 var(--t-sm, 0.9rem)/1 var(--sans, sans-serif); color: var(--anthracite, #25272b); cursor: pointer; }
.projet-fen__second:disabled { border-color: var(--trait, #d7d5cf); color: var(--feutre, #676a6f); cursor: default; }
.projet-fen button:focus-visible { outline: 2px solid var(--moutarde, #d6a62b); outline-offset: 2px; }
@media (max-width: 640px) {
  .projet-fen { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; inset: 0; box-sizing: border-box; }
  .projet-fen[open] { animation: projet-fen-monte 0.22s ease-out; }
  .projet-fen__ligne label { grid-template-columns: 22px 56px minmax(0, 1fr) auto; gap: 0.55rem; padding: 0.5rem 0.2rem; }
  .projet-fen__ligne img { width: 56px; height: 42px; }
  .projet-fen__pied { gap: 0.5rem; }
  .projet-fen__principal, .projet-fen__second { flex: 1 1 100%; justify-content: center; }
}
@keyframes projet-fen-monte { from { transform: translateY(24px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .projet-fen[open] { animation: none; } }
/* Colourway swatches under a result (Romain 01/10 9 h 45): 12 px dots, a 30 px touch area that does not grow the row. */
.projet__pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0.25rem 0 0; padding-left: calc(64px + 0.7rem); }
.projet-fen__ligne .projet__pastilles { margin: -0.35rem 0 0.35rem; padding-left: calc(0.6rem + 24px + 64px + 1.4rem); }
.projet__pc { position: relative; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: var(--c, #d9d4cb); box-shadow: inset 0 0 0 1px rgba(35, 38, 43, 0.22); cursor: pointer; }
.projet__pc::after { content: ""; position: absolute; inset: -9px; }
.projet__pc[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--blanc, #fafaf8), 0 0 0 3px var(--anthracite, #25272b); }
.projet__pc:focus-visible { outline: 2px solid var(--moutarde, #d6a62b); outline-offset: 3px; }
.projet__pc-reste { font: 600 0.72rem/1 var(--sans, sans-serif); color: var(--feutre, #676a6f); }
@media (max-width: 640px) { .projet-fen__ligne .projet__pastilles { padding-left: calc(0.2rem + 22px + 56px + 1.1rem); } }
/* « +N » of the swatches: unfolds every colourway in place (Romain 01/10 10 h 06). */
.projet__pc-plus { position: relative; min-width: 24px; height: 18px; padding: 0 0.3rem; border: 1px solid var(--trait, #d7d5cf); border-radius: 999px; background: var(--blanc, #fafaf8); font: 600 0.72rem/1 var(--sans, sans-serif); color: var(--anthracite, #25272b); cursor: pointer; }
.projet__pc-plus::after { content: ""; position: absolute; inset: -8px -4px; }
.projet__pc-plus:hover { border-color: var(--anthracite, #25272b); }
.projet__pc-plus:focus-visible { outline: 2px solid var(--moutarde, #d6a62b); outline-offset: 2px; }
.projet__pc-plus:disabled { opacity: 0.5; }
/* Header « Mon projet » (Romain 01/10 12 h 27): a pill with its label on computers, like « Rechercher »; a gold dot
   for a project in progress, a discreet gold border without one; icon only on tablets and phones (with the dot). */
.entete-projet { border-color: color-mix(in srgb, var(--moutarde, #d6a62b) 70%, var(--trait, #d7d5cf)); padding: 0 0.95rem 0 0.8rem; gap: 0.45rem; font: 500 var(--t-sm, 0.9rem)/1 var(--sans, sans-serif); }
.entete-projet .icone { width: 19px; height: 19px; color: var(--bleu, #8c680c); }
.entete-projet.est-actif { border-color: var(--trait, #d7d5cf); }
.entete-projet .entete-projet__resume { display: none; }
.entete-projet__point { display: none; top: -2px; right: -2px; width: 12px; height: 12px; background: var(--moutarde, #d6a62b); border: 2px solid var(--blanc, #fafaf8); }
.entete-projet.est-actif .entete-projet__point, .entete-projet.est-actif:has(.entete-projet__resume:not(:empty)) .entete-projet__point { display: block; }
.entete-projet:hover, .entete-projet:focus-visible { border-color: var(--moutarde, #d6a62b); }
.entete-projet:focus-visible { outline: 2px solid var(--moutarde, #d6a62b); outline-offset: 2px; }
@media (max-width: 1100px) {
  .entete-projet { width: 40px; padding: 0; justify-content: center; }
  .entete-projet .entete-projet__texte { display: none; }
}
@media (max-width: 480px) { .entete .entete-projet { display: inline-flex; order: 1; } }
@media (max-width: 440px) { .entete .entete-projet { width: 34px; min-width: 34px; height: 34px; } .entete-projet .icone { width: 17px; height: 17px; } }
/* Collections, reader without a project (Romain 01/10 12 h 25): the same place as « Votre projet », lighter; one
   compact line on phones so the first sofas stay above the fold. */
.projet-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 1rem; padding: 0.55rem 0.6rem 0.55rem 0.9rem; border: 1px solid color-mix(in srgb, var(--moutarde, #d6a62b) 45%, var(--trait, #d7d5cf)); border-radius: 14px; background: color-mix(in srgb, var(--moutarde-voile, #f5ecd3) 45%, var(--blanc, #fafaf8)); }
.projet-invite[hidden] { display: none; }
.projet-invite__texte { display: flex; align-items: center; gap: 0.55rem; flex: 1 1 18rem; min-width: 0; margin: 0; font: 400 var(--t-sm, 0.9rem)/1.35 var(--sans, sans-serif); color: var(--anthracite, #25272b); }
.projet-invite__texte .icone { flex: none; width: 20px; height: 20px; color: var(--bleu, #8c680c); }
.projet-invite__court { display: none; }
.projet-invite__commencer { display: inline-flex; align-items: center; min-height: 38px; padding: 0 0.95rem; border-radius: 999px; background: var(--anthracite, #25272b); color: var(--blanc, #fafaf8); font: 600 var(--t-sm, 0.9rem)/1 var(--sans, sans-serif); text-decoration: none; white-space: nowrap; }
.projet-invite__commencer:hover { background: #000; }
.projet-invite__masquer { position: relative; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--feutre, #676a6f); font: 400 22px/1 var(--sans, sans-serif); cursor: pointer; }
.projet-invite__masquer::after { content: ""; position: absolute; inset: -7px; }
.projet-invite__masquer:hover { color: var(--anthracite, #25272b); }
.projet-invite__commencer:focus-visible, .projet-invite__masquer:focus-visible { outline: 2px solid var(--moutarde, #d6a62b); outline-offset: 2px; }
@media (max-width: 640px) {
  .projet-invite { flex-wrap: nowrap; gap: 0.45rem; margin-bottom: 0.7rem; padding: 0.35rem 0.25rem 0.35rem 0.6rem; border-radius: 12px; }
  .projet-invite__long { display: none; }
  .projet-invite__court { display: inline; }
  .projet-invite__texte { flex: 1 1 auto; gap: 0.4rem; font-size: 0.78rem; line-height: 1.25; }
  .projet-invite__texte .icone { width: 17px; height: 17px; }
  .projet-invite__commencer { min-height: 34px; padding: 0 0.7rem; font-size: 0.78rem; }
  .projet-invite__commencer { font-size: 0; }
  .projet-invite__commencer::before { content: "Commencer"; font-size: 0.78rem; }
}
/* Phone header with « Mon projet » (01/10): room made at 360, 375 and 412 px (tighter gaps, 31 then 30 px round
   buttons with a wider touch area, a slightly smaller logo under 380 px); the menu never leaves the screen. */
@media (max-width: 440px) {
  .entete__barre { gap: 3px; }
  .entete .bouton-recherche, .entete .entete-projet, .entete .entete-selection { width: 31px; min-width: 31px; height: 31px; }
  .entete .bouton-menu { min-width: 30px; }
  .entete .entete-projet::after, .entete .entete-selection::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
}
@media (max-width: 380px) {
  .entete__barre { gap: 2px; }
  .entete .bouton-recherche, .entete .entete-projet, .entete .entete-selection { width: 30px; min-width: 30px; height: 30px; }
  .entete .marque-site { font-size: 0.86em; }
  .phare-mobile { padding: 0 0.5rem; }
}
/* « Commencer mon projet »: the theme's link hover (gold text) never reaches this button (Romain 01/10 12 h 33). */
.projet-invite a.projet-invite__commencer, .projet-invite a.projet-invite__commencer:visited { color: #fafaf8; }
.projet-invite a.projet-invite__commencer:hover, .projet-invite a.projet-invite__commencer:focus-visible { background: #000; color: #fff; text-decoration: none; }
.projet-invite a.projet-invite__commencer:active { background: var(--bleu-2, #6b4f07); color: #fff; }
.projet-invite a.projet-invite__commencer:focus-visible { outline: 2px solid var(--moutarde, #d6a62b); outline-offset: 2px; }