@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#1B1E36; --ink-soft:#585B76; --ink-faint:#9598AD;
  --surface:#FFFDF9; --surface-alt:#FBF6EE; --surface-raised:#FFFFFF;
  --border:#F1ECE4; --border-strong:#E4DCCB;
  --accent:#FF5C35; --accent-contrast:#FFFFFF; --accent-warm:#FFD23F;
  --accent-blue:#4C9FFF; --accent-purple:#9D7BFF; --accent-green:#2FBF8F; --accent-pink:#FF6FA0; --accent-yellow:#FFD23F;
  --shadow:0 18px 40px rgba(157,123,255,0.18); --shadow-sm:0 12px 30px rgba(157,123,255,0.12);
  --danger:#E23B5D; --success:#22B573;
  --st-a_contacter:#9598AD; --st-contacte:#4C9FFF; --st-relance:#FFD23F; --st-demande_recue:#2FBF8F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F3F1FA; --ink-soft:#B7B9D1; --ink-faint:#85879E;
    --surface:#16141F; --surface-alt:#1E1C2A; --surface-raised:#221F30;
    --border:#322F42; --border-strong:#423E58;
    --accent:#FF7A57; --accent-contrast:#1B1E36; --accent-warm:#FFDB63;
    --accent-blue:#6FB2FF; --accent-purple:#B39CFF; --accent-green:#4CD7A6; --accent-pink:#FF8FB8; --accent-yellow:#FFDB63;
    --shadow:0 18px 40px rgba(0,0,0,0.45); --shadow-sm:0 12px 30px rgba(0,0,0,0.35);
    --danger:#FF6B85; --success:#4CD7A6;
    --st-a_contacter:#85879E; --st-contacte:#6FB2FF; --st-relance:#FFDB63; --st-demande_recue:#4CD7A6;
  }
}
:root[data-theme="dark"]{
  --ink:#F3F1FA; --ink-soft:#B7B9D1; --ink-faint:#85879E;
  --surface:#16141F; --surface-alt:#1E1C2A; --surface-raised:#221F30;
  --border:#322F42; --border-strong:#423E58;
  --accent:#FF7A57; --accent-contrast:#1B1E36; --accent-warm:#FFDB63;
  --accent-blue:#6FB2FF; --accent-purple:#B39CFF; --accent-green:#4CD7A6; --accent-pink:#FF8FB8; --accent-yellow:#FFDB63;
  --shadow:0 18px 40px rgba(0,0,0,0.45); --shadow-sm:0 12px 30px rgba(0,0,0,0.35);
  --danger:#FF6B85; --success:#4CD7A6;
  --st-a_contacter:#85879E; --st-contacte:#6FB2FF; --st-relance:#FFDB63; --st-demande_recue:#4CD7A6;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0; background:var(--surface); color:var(--ink); font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; line-height:1.5;}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif; font-weight:700; text-wrap:balance; margin:0;}
.mono{font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
input,select,textarea,button{font-family:inherit; font-size:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
[hidden]{display:none !important;}

.field{display:flex; flex-direction:column; gap:4px;}
.field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600;}
.field label.choice-inline{display:flex; align-items:center; gap:7px; font-size:13px; text-transform:none; letter-spacing:normal; color:var(--ink); font-weight:500; cursor:pointer;}
.field input, .field select, .field textarea{
  padding:10px 13px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface-raised); color:var(--ink); width:100%;
  /* 16px minimum : en dessous, Safari iOS zoome automatiquement la page au
     focus d'un champ, ce qui casse la mise en page sur mobile. */
  font-size:16px; line-height:1.4;
}
/* Les cases à cocher et boutons radio n'ont pas à hériter du width:100% /
   padding ci-dessus (pensé pour les champs texte) : sans ça, une case à
   cocher posée dans une <label class="choice-inline"> en display:flex
   s'étire sur toute la largeur disponible et se retrouve visuellement
   "détachée" de son texte, poussé tout à droite. */
.field input[type="checkbox"], .field input[type="radio"]{
  width:16px; height:16px; flex:none; padding:0; border-radius:4px; accent-color:var(--accent);
}
.field textarea{resize:vertical; min-height:70px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
/* Lignes "Date + Idée/Détail" : une date tient sur une largeur fixe, le texte
   libre a besoin de toute la place restante pour rester lisible sans avoir à
   scroller dans le champ (remonté par l'utilisateur : le texte suggéré par
   l'IA n'était pas visible en entier dans la colonne 1fr/1fr). */
.field-row-note{display:grid; grid-template-columns:140px 1fr; gap:12px; align-items:start;}
.field-row-note .field textarea{min-height:44px; resize:vertical;}

/* Les champs date natifs ont tendance à s'écraser sur eux-mêmes (icône qui
   mange toute la place, valeur illisible) dès que la colonne qui les
   contient est un peu étroite (ex. modale "Action faite : et ensuite ?").
   On leur impose une taille confortable plutôt que de laisser le navigateur
   décider. */
.field input[type="date"]{
  min-height:40px; min-width:0; font-size:14.5px;
  color-scheme:light dark;
}
.field input[type="date"]::-webkit-calendar-picker-indicator{
  padding:4px; margin-left:4px; cursor:pointer;
}

/* Groupe de cases à cocher (segments multiples, etc.), avec le même habillage
   visuel qu'un champ classique pour rester cohérent avec le reste du formulaire. */
.check-group{
  display:flex; flex-wrap:wrap; gap:8px 16px;
  padding:10px 13px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface-raised);
}
.check-group label{
  display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500;
  color:var(--ink); cursor:pointer; white-space:nowrap;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 19px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface-raised); color:var(--ink); font-weight:700; font-size:13.5px;
  font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:.005em;
  cursor:pointer; transition:filter .12s ease, transform .12s ease, box-shadow .12s ease;
}
.btn:hover{filter:brightness(0.97); transform:translateY(-2px);}
:root:not([data-theme="light"]) .btn:hover{filter:brightness(1.15);}
:root[data-theme="dark"] .btn:hover{filter:brightness(1.15);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent);}
.btn-primary:hover{box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 50%, transparent);}
.btn-ghost{background:transparent; border-color:transparent; box-shadow:none;}
.btn-secondary{background:color-mix(in srgb, var(--accent) 10%, var(--surface-raised)); border-color:color-mix(in srgb, var(--accent) 35%, var(--border)); color:var(--accent);}
.btn-danger{color:var(--danger); border-color:var(--danger);}
.btn-block{width:100%;}
.btn-sm{padding:7px 14px; font-size:12px;}

/* ---------------- Mon hôtel : services / photos / points forts ---------------- */
.checklist-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px;}
.check-tile{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--border);
  border-radius:14px; background:var(--surface-raised); font-size:13px; cursor:pointer;
}
.check-tile:has(input:checked){border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface-raised));}
.chip-removable{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px;
  border:1px solid var(--border); background:var(--surface-raised); font-size:12.5px; font-weight:600;
  cursor:pointer; color:var(--ink);
}
.chip-removable:hover{border-color:var(--danger); color:var(--danger);}
.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
.photo-tile{border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface-alt);}
.photo-tile img{width:100%; height:110px; object-fit:cover; display:block;}
.photo-tile form{padding:6px;}
.photo-pick-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:10px;}
.photo-pick-tile{position:relative; border:2px solid transparent; border-radius:14px; overflow:hidden; cursor:pointer;}
.photo-pick-tile img{width:100%; height:100px; object-fit:cover; display:block;}
.photo-pick-tile.selected{border-color:var(--accent);}
.photo-pick-tile .pp-check{position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:6px; background:var(--surface-raised); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:11px;}
.photo-pick-tile.selected .pp-check{background:var(--accent); color:var(--accent-contrast); border-color:var(--accent);}
.prefill-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px;}
.prefill-row:last-child{border-bottom:none;}

/* ---------------- Accueil ---------------- */
.home-hero{
  background-color:var(--accent); background-size:cover; background-position:center;
  color:#fff; padding:56px 40px; display:flex; align-items:flex-end; min-height:280px;
  background-image:linear-gradient(135deg, var(--accent-pink), var(--accent) 55%, var(--accent-yellow));
  position:relative; overflow:hidden;
}
.home-hero::after{content:''; position:absolute; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.14); top:-140px; right:-50px;}
.home-hero-inner{max-width:760px; position:relative; z-index:1;}
.home-greeting{font-size:14px; font-weight:600; opacity:.9; margin-bottom:6px;}
.home-hero h1{font-size:clamp(26px,3.4vw,40px); margin:0 0 6px; color:#fff;}
.home-sub{font-size:14.5px; opacity:.92; margin-bottom:20px;}
.home-stats{display:flex; gap:10px; flex-wrap:wrap;}
.home-stat-pill{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:99px;
  background:var(--surface-raised); backdrop-filter:blur(4px); color:var(--ink); font-size:13.5px; font-weight:600;
  text-decoration:none; border:1.5px solid var(--border); box-shadow:0 1px 3px rgba(27,30,54,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.home-stat-pill:hover{transform:translateY(-1px); box-shadow:0 4px 10px rgba(27,30,54,.1); text-decoration:none;}
.home-stat-pill.warn{
  background-image:linear-gradient(120deg, var(--accent), var(--accent-pink));
  color:#fff; border-color:transparent;
  box-shadow:0 5px 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
.home-stat-pill.warn:hover{box-shadow:0 7px 20px color-mix(in srgb, var(--accent) 55%, transparent);}
.home-stat-pill strong{font-size:16px;}
.home-stat-pill.warn strong{font-size:17px;}

/* ---------------- Je prospecte : bandeau motivant + sélecteur d'action ---------------- */
.prospect-hero{
  background-image:linear-gradient(120deg, var(--accent-pink), var(--accent) 60%, var(--accent-yellow));
  color:#fff; border-radius:20px; padding:16px 20px; margin-bottom:18px;
  position:relative; overflow:hidden;
}
.prospect-hero::after{content:''; position:absolute; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.14); top:-90px; right:-40px;}
.prospect-hero-row{display:flex; align-items:center; justify-content:space-between; gap:14px; position:relative; z-index:1; flex-wrap:wrap;}
.prospect-hero-kicker{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; opacity:.85; margin-bottom:4px;}
.prospect-hero-phrase{font-size:15px; font-weight:600; line-height:1.35;}
.prospect-hero-refresh{
  flex-shrink:0; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 16px;
  border-radius:99px; border:1.5px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.22); color:#fff; font-size:13px; font-weight:700; cursor:pointer;
  white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.prospect-hero-refresh:hover{background:rgba(255,255,255,.34);}
.prospect-hero-stat{
  margin-top:10px; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,.18); padding:5px 12px; border-radius:99px; position:relative; z-index:1;
}

.action-type-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:4px;}
.action-type-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:14px 8px; border:2px solid var(--border); border-radius:18px; background:var(--surface-raised);
  cursor:pointer; text-align:center; transition:transform .12s ease, box-shadow .12s ease;
}
.action-type-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm);}
.action-type-card input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;}
.atc-icon{font-size:24px; line-height:1;}
.atc-label{font-size:12px; font-weight:700; color:var(--ink-soft); overflow-wrap:break-word; word-break:break-word; hyphens:auto;}
.action-type-card[data-color="pink"]:has(input:checked){border-color:var(--accent-pink); background:color-mix(in srgb, var(--accent-pink) 14%, var(--surface-raised));}
.action-type-card[data-color="pink"]:has(input:checked) .atc-label{color:var(--accent-pink);}
.action-type-card[data-color="purple"]:has(input:checked){border-color:var(--accent-purple); background:color-mix(in srgb, var(--accent-purple) 14%, var(--surface-raised));}
.action-type-card[data-color="purple"]:has(input:checked) .atc-label{color:var(--accent-purple);}
.action-type-card[data-color="blue"]:has(input:checked){border-color:var(--accent-blue); background:color-mix(in srgb, var(--accent-blue) 14%, var(--surface-raised));}
.action-type-card[data-color="blue"]:has(input:checked) .atc-label{color:var(--accent-blue);}
.action-type-card[data-color="green"]:has(input:checked){border-color:var(--accent-green); background:color-mix(in srgb, var(--accent-green) 14%, var(--surface-raised));}
.action-type-card[data-color="green"]:has(input:checked) .atc-label{color:var(--accent-green);}
.action-type-card[data-color="yellow"]:has(input:checked){border-color:var(--accent-warm); background:color-mix(in srgb, var(--accent-warm) 18%, var(--surface-raised));}
.action-type-card[data-color="yellow"]:has(input:checked) .atc-label{color:var(--ink);}

/* "Client concerné" : remplace les 3 radios en ligne (peu lisibles) par des
   boutons-cartes façon action-type-card, avec une sous-ligne d'explication.
   On réutilise .action-type-card/.atc-icon/.atc-label pour la cohérence
   visuelle, avec une grille un peu plus large adaptée à 3 choix. */
.action-type-grid.client-mode-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
.action-type-card.client-mode-card{padding:14px 12px;}
.atc-sub{font-size:10.5px; font-weight:500; color:var(--ink-faint); line-height:1.35;}

/* Champ "Autre" (type d'action / objectif) : texte libre affiché seulement
   quand ce choix est sélectionné. */
.inline-other-field{margin-top:8px;}

/* Sélecteur combiné (recherche + choix) qui remplace un <select> natif quand
   la liste de clients/prospects est longue (remonté par l'utilisateur :
   devoir taper une recherche PUIS rouvrir un menu déroulant séparé n'était
   pas intuitif). On tape, la liste filtrée apparaît juste en dessous, on
   choisit directement dedans. Le <select> d'origine reste dans le DOM,
   masqué, comme seule source de vérité pour le reste du code. */
.combo-wrap{position:relative; display:flex; flex-direction:column;}
.combo-input{
  padding:9px 13px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface-raised); color:var(--ink);
  /* Idem .field input : 16px pour éviter le zoom automatique de Safari iOS
     au focus. */
  font-size:16px;
}
.combo-input::placeholder{color:var(--ink-faint);}
.combo-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30;
  max-height:220px; overflow-y:auto; background:var(--surface-raised);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-sm);
  padding:4px;
}
.combo-item{padding:8px 10px; border-radius:8px; font-size:13.5px; cursor:pointer; color:var(--ink);}
.combo-item:hover, .combo-item.active{background:var(--surface-alt);}
.combo-empty{padding:8px 10px; font-size:12.5px; color:var(--ink-faint);}
.home-reco{margin:28px 40px 0; max-width:1000px; padding:18px 22px;}
.home-reco h3{margin:0 0 8px; font-size:15px;}
.home-reco ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--ink-soft); line-height:1.7;}
.home-reco-details{margin:0;}
.home-reco-details .home-reco{margin-top:10px;}
.home-reco-summary{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  font-size:13.5px; font-weight:700; color:var(--accent-purple); padding:9px 16px;
  border-radius:99px; border:1.5px solid color-mix(in srgb, var(--accent-purple) 35%, var(--border));
  background:color-mix(in srgb, var(--accent-purple) 8%, var(--surface-raised));
  transition:background .15s ease;
}
.home-reco-summary::-webkit-details-marker{display:none;}
.home-reco-summary:hover{background:color-mix(in srgb, var(--accent-purple) 16%, var(--surface-raised));}
.home-reco-summary::before{content:'💡'; font-size:13px;}
.home-reco-details[open] .home-reco-summary::after{content:'▲'; font-size:9px; margin-left:2px;}
.home-reco-details:not([open]) .home-reco-summary::after{content:'▼'; font-size:9px; margin-left:2px;}
.home-reco-count{
  background:var(--accent-purple); color:#fff; border-radius:99px; font-size:11px; font-weight:800;
  padding:1px 8px; line-height:1.5;
}
.home-section-label{
  padding:28px 40px 0; max-width:1080px; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-faint);
}
.home-menu{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px;
  padding:14px 40px 8px; max-width:1080px;
}
.home-menu:last-of-type{padding-bottom:48px;}
.home-card{
  --tint: var(--accent);
  display:block; padding:20px; border-radius:20px; border-top:4px solid var(--tint);
  background:color-mix(in srgb, var(--tint) 7%, var(--surface-raised));
  border-left:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  text-decoration:none; color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.home-menu .home-card:nth-child(4n+2){--tint:var(--accent-blue);}
.home-menu .home-card:nth-child(4n+3){--tint:var(--accent-purple);}
.home-menu .home-card:nth-child(4n+4){--tint:var(--accent-green);}
.home-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); text-decoration:none;}
.home-card h3{margin:0 0 4px; font-size:15.5px;}
.home-card p{margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.5;}

.rooms-table th{text-align:center; font-size:11px;}
.rooms-table th:first-child{text-align:left;}
.rooms-table td{text-align:center;}
.rooms-table td:first-child{text-align:left;}
.rooms-table .room-meta{font-size:11.5px; color:var(--ink-faint); margin-top:2px;}
/* La grille a des colonnes en partie fixes (55px/34px/58px×5) : sur un écran
   de téléphone, la somme dépasse largement la largeur disponible. Plutôt que
   de la laisser s'écraser illisible ou déborder de la page, on lui donne une
   largeur minimale et on rend son conteneur défilant horizontalement (voir
   #roomsDiscoverPanel ci-dessous) — comportement standard d'un tableau trop
   large sur mobile, cohérent avec .table-wrap utilisé ailleurs. */
.room-pick-row{display:grid; grid-template-columns:20px 1.5fr 55px 34px repeat(5, 58px); gap:6px; align-items:center; padding:6px 4px; border-bottom:1px solid var(--border); font-size:12.5px; min-width:480px;}
.room-pick-row input[type="text"], .room-pick-row input[type="number"]{padding:5px 6px; font-size:12px; border-radius:8px; border:1px solid var(--border); background:var(--surface-raised); width:100%;}
.room-pick-head{font-size:10.5px; font-weight:700; text-transform:uppercase; color:var(--ink-faint);}
#roomsDiscoverPanel{overflow-x:auto;}

/* ---------------- Tableau de bord : actions de prospection ---------------- */
.action-tabs{display:flex; border:1px solid var(--border); border-radius:999px; overflow:hidden;}
.action-tabs button{padding:7px 13px; border:none; background:var(--surface-raised); color:var(--ink-soft); font-weight:600; font-size:12.5px; cursor:pointer; border-right:1px solid var(--border);}
.action-tabs button:last-child{border-right:none;}
.action-tabs button.active{background:var(--accent); color:var(--accent-contrast);}

.actions-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap;}
.actions-collapse-btn{display:flex; align-items:center; gap:10px; background:none; border:none; padding:4px 2px; margin:0; cursor:pointer; font:inherit; font-weight:700; font-size:16px; color:var(--ink); border-radius:6px;}
.actions-collapse-btn:hover{color:var(--accent);}
/* Flèche agrandie et posée dans un petit rond pour rester facile à repérer et
   à cliquer (remontée trop petite par l'utilisateur) ; même style réutilisé
   pour "Activité récente". */
.actions-collapse-arrow{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--surface-alt); transition:transform .15s ease; font-size:15px; line-height:1; color:var(--ink-soft);}
.actions-collapse-btn:hover .actions-collapse-arrow{background:var(--accent-soft, var(--surface-alt)); color:var(--accent);}
.actions-collapse-btn[aria-expanded="false"] .actions-collapse-arrow{transform:rotate(-90deg);}
.actions-card-head-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

.action-row{display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.action-row:last-child{border-bottom:none;}
.action-row .a-main{flex:1; min-width:160px;}
.action-row .a-main strong{display:block; font-size:14px;}
.action-row .a-main span{font-size:12.5px; color:var(--ink-soft); display:block; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.action-row .a-date{font-size:12.5px; font-weight:700; white-space:nowrap;}
.action-row .a-date.overdue{color:var(--danger);}
.action-row .a-actions{display:flex; gap:8px; flex:none;}
.action-row .a-actions .btn{padding:8px 14px; font-weight:700;}
.action-row .a-actions .btn-ghost{background:var(--surface-raised); border-color:var(--border);}
.action-empty{padding:18px 4px; color:var(--ink-faint); font-size:13px;}

.card-surface{background:var(--surface-raised); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-sm);}

.badge{font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:99px; text-transform:uppercase; letter-spacing:.03em;}
.error-msg{background:color-mix(in srgb, var(--danger) 12%, var(--surface-raised)); border:1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); color:var(--danger); padding:10px 14px; border-radius:14px; font-size:13px;}
.success-msg{background:color-mix(in srgb, var(--accent) 12%, var(--surface-raised)); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); color:var(--accent); padding:10px 14px; border-radius:14px; font-size:13px;}

/* ---------------- Marketing / landing ---------------- */
.landing-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px; border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{
  position:relative; width:36px; height:36px; border-radius:11px; flex-shrink:0;
  background:linear-gradient(155deg, var(--accent-purple), #7C5CE0);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px color-mix(in srgb, var(--accent-purple) 35%, transparent);
}
.brand-mark svg{display:block;}
.brand-mark::after{
  content:''; position:absolute; top:-3px; right:-3px; width:11px; height:11px;
  border-radius:50%; background:var(--accent-warm); border:2px solid var(--surface-raised);
}
.brand-name{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px;}
.brand-greeting{font-size:11.5px; font-weight:600; color:var(--ink-faint); margin-top:2px;}
.wordmark{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:1.3rem; white-space:nowrap; letter-spacing:-0.01em; color:var(--ink);}
.wordmark .w-ink{color:var(--ink);}
.wordmark .w-call{
  display:inline-block; margin:0 1px; padding:2px 10px 4px; border-radius:999px;
  background:var(--accent-warm); color:var(--accent); font-size:.78em; letter-spacing:.02em; transform:translateY(-1px);
}
.landing-nav a{color:var(--ink-soft); font-weight:600; font-size:13.5px; margin-left:22px;}
.landing-nav a:hover{color:var(--ink);}
/* Bouton "menu" mobile de l'en-tête public (landing, tarifs) : même principe
   que .sidebar-toggle-btn côté app, caché par défaut et affiché uniquement
   sous 760px (voir media query plus bas). */
.nav-toggle-btn{
  display:none; flex:none; width:36px; height:36px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface-raised); color:var(--ink);
  font-size:17px; line-height:1; cursor:pointer; align-items:center; justify-content:center;
}

.hl{background-image:linear-gradient(120deg, transparent 0%, transparent 38%, var(--accent) 38%, var(--accent) 100%); background-repeat:no-repeat; background-size:100% 40%; background-position:0 92%; padding:0 3px; color:inherit;}

/* Mot final du H1 héro, qui défile sur une liste de types d'établissements
   (hôtel, auberge, résidence de tourisme, camping...) pour montrer d'un
   coup d'œil que l'outil ne s'adresse pas qu'aux hôtels. Un <br> avant ce
   span (dans landing.ejs) le place systématiquement sur sa propre ligne :
   comme il ne partage plus sa ligne avec le reste de la phrase, sa largeur
   peut varier librement d'un mot à l'autre sans jamais faire bouger le
   texte au-dessus. */
.hero-rotate-word{
  display:block; color:var(--accent-warm); font-weight:700; text-align:center;
}
.hero-rotate-word-inner{display:inline-block;}
.hero-rotate-word.hero-rotate-word-out .hero-rotate-word-inner{
  animation:heroRotateOut .26s ease-in both;
}
.hero-rotate-word.hero-rotate-word-in .hero-rotate-word-inner{
  animation:heroRotateIn .32s ease-out both;
}
@keyframes heroRotateOut{
  from{opacity:1; transform:translateY(0);}
  to{opacity:0; transform:translateY(-8px);}
}
@keyframes heroRotateIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .hero-rotate-word.hero-rotate-word-out .hero-rotate-word-inner,
  .hero-rotate-word.hero-rotate-word-in .hero-rotate-word-inner{animation:none;}
}

/* Bandeau héro : fond plein Bleu Encre (une des deux seules couleurs fortes
   de la landing, avec la Mandarine), plutôt que les taches pastel multicolores
   utilisées avant. */
.hero{
  background:var(--ink); color:#fff; padding:64px 40px 60px; text-align:left; position:relative; overflow:hidden;
}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.hero-video-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 95%, transparent) 0%, color-mix(in srgb, var(--ink) 92%, transparent) 55%, color-mix(in srgb, var(--ink) 96%, transparent) 100%);
}
.hero-inner{max-width:820px; margin:0 auto; position:relative; z-index:2;}
.hero h1{font-size:clamp(30px,4.4vw,50px); font-weight:700; line-height:1.12; max-width:820px; color:#fff;}
.hero .lede{font-size:17px; color:color-mix(in srgb, #fff 90%, var(--accent-purple) 10%); max-width:600px; margin-top:16px; line-height:1.6; text-shadow:0 1px 10px color-mix(in srgb, var(--ink) 60%, transparent);}
.hero-actions{display:flex; align-items:center; gap:12px; margin-top:26px; flex-wrap:wrap;}
.hero .btn-primary{background:#fff; border-color:#fff; color:var(--ink); box-shadow:0 10px 24px rgba(0,0,0,.25);}
.hero .btn-primary:hover{box-shadow:0 12px 28px rgba(0,0,0,.32);}
.hero .btn:not(.btn-primary){background:transparent; border-color:color-mix(in srgb, #fff 30%, transparent); color:#fff;}
.hero .btn:not(.btn-primary):hover{background:color-mix(in srgb, #fff 10%, transparent);}

.hero-centered{text-align:center;}
.hero-centered h1, .hero-centered .lede{margin-left:auto; margin-right:auto;}
.hero-centered .hero-actions{justify-content:center;}
.hero-logo{display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:22px;}
.hero-logo-mark .brand-mark{transform:scale(1.7);}
.hero-logo-word .wordmark{font-size:2.2rem;}
.hero-logo-word .wordmark .w-ink{color:#fff;}
.hero-tagline{
  font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--accent-warm);
  font-size:1.05rem; letter-spacing:.01em; margin:0 0 20px;
}
.hero-price-badge{
  display:inline-flex; align-items:center; gap:6px; margin-top:22px; padding:8px 16px;
  border-radius:999px; background:color-mix(in srgb, #fff 12%, transparent);
  border:1px solid color-mix(in srgb, #fff 20%, transparent); color:#fff; font-size:13px; font-weight:600;
}
.hero-price-badge strong{color:var(--accent-warm); font-family:'Space Grotesk',sans-serif;}

.section{max-width:1080px; margin:0 auto; padding:40px;}
.section h2{font-size:26px; margin-bottom:10px;}
.section .sub{color:var(--ink-soft); max-width:620px; margin-bottom:28px;}

/* Points clés : bande de mise en avant juste après le hero, avant les
   sections plus détaillées (douleurs, fonctionnalités). Aplats de couleur
   saturée (façon .pricing-callout) plutôt que des fonds pastel, pour un
   rendu plus vif. Réutilise la rotation de teintes déjà utilisée par
   .home-card dans l'app. */
.highlights-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:8px;}
.highlight-card{
  --tint: var(--accent);
  padding:26px 22px; border-radius:20px; color:#fff;
  background:linear-gradient(135deg, var(--tint), color-mix(in srgb, var(--tint) 75%, #000 25%));
  box-shadow:0 10px 22px color-mix(in srgb, var(--tint) 35%, transparent);
}
.highlight-card:nth-child(4n+2){--tint:var(--accent-blue);}
.highlight-card:nth-child(4n+3){--tint:var(--accent-purple);}
.highlight-card:nth-child(4n+4){--tint:var(--accent-green);}
.highlight-card h3{font-size:19px; color:#fff; margin:0 0 8px; line-height:1.25;}
.highlight-card p{margin:0; font-size:13.5px; color:color-mix(in srgb, #fff 84%, transparent); line-height:1.55;}

/* Fonctionnalités : frise verticale (icône colorée en médaillon + texte),
   pas de tuiles/cartes de fond. Les couleurs restent vives mais portées
   par les médaillons et les titres plutôt que par des aplats de fond. */
.feature-timeline{position:relative; margin-top:12px; max-width:760px;}
.timeline-item{
  --tint: var(--accent);
  position:relative; display:flex; gap:20px; padding-bottom:34px;
}
.timeline-item::before{
  content:''; position:absolute; left:23px; top:52px; bottom:2px; width:2px;
  background:var(--border);
}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item:last-child::before{display:none;}
.timeline-marker{
  position:relative; z-index:1; flex:none; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg, var(--tint), color-mix(in srgb, var(--tint) 75%, #000 25%));
  box-shadow:0 6px 14px color-mix(in srgb, var(--tint) 40%, transparent);
}
.timeline-marker svg{width:22px; height:22px;}
.timeline-content{flex:1; padding-top:7px; min-width:0;}
.timeline-content h3{font-size:18px; color:var(--tint); margin:0 0 6px; line-height:1.3;}
.timeline-content p{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.6; max-width:600px;}
.timeline-item:nth-child(3){--tint:var(--accent-blue);}
.timeline-item:nth-child(4){--tint:var(--accent-purple);}
.timeline-item:nth-child(5){--tint:var(--accent-green);}
.timeline-item:nth-child(6){--tint:var(--accent-pink);}
.timeline-item:nth-child(7){--tint:var(--accent-blue);}

.timeline-item--stat{--tint: var(--accent-warm);}
.timeline-item--stat .timeline-content{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-top:12px;}
.timeline-item--stat .stat-number{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:28px; color:var(--tint); line-height:1;}
.timeline-item--stat .stat-label{font-size:14px; color:var(--ink-soft); line-height:1.5;}

/* Petit schéma du pipeline réel de l'outil (à contacter → ... → demande
   reçue), en pastilles contourées de la couleur de l'item. */
.pipeline-flow{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px;}
.pipeline-step{
  background:color-mix(in srgb, var(--tint) 8%, var(--surface-raised));
  border:1.5px solid color-mix(in srgb, var(--tint) 45%, var(--border)); color:var(--tint);
  padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap;
}
.pipeline-arrow{color:var(--ink-soft); font-size:14px; flex:none;}

.pain-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}
.pain-item{
  padding:22px; border-left:4px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, var(--surface-raised));
}
.pain-item p{margin:0; font-size:15px; line-height:1.55; font-style:italic; color:var(--ink);}

.steps-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; max-width:1000px;}
.step-item{padding:6px 4px;}
.step-num{
  width:32px; height:32px; border-radius:50%; background:var(--accent); color:var(--accent-contrast);
  display:flex; align-items:center; justify-content:center; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; margin-bottom:10px;
}
.step-item h3{font-size:15.5px; margin-bottom:6px;}
.step-item p{margin:0; font-size:13px; color:var(--ink-soft); line-height:1.55;}

/* Bandeau tarif : un seul encart plein, façon "carte de prix" isolée sur
   fond clair — plutôt qu'une section entière en couleur. */
.pricing-callout{
  border-radius:24px; padding:40px; background:linear-gradient(135deg, var(--accent), #E14F2C);
  color:#fff; display:flex; flex-wrap:wrap; gap:32px; align-items:center; justify-content:space-between;
  box-shadow:0 20px 44px color-mix(in srgb, var(--accent) 30%, transparent);
}
.pricing-callout-price{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:clamp(34px,4vw,46px); line-height:1;}
.pricing-callout-price span{font-size:.4em; font-weight:600; opacity:.85; margin-left:4px;}
.pricing-callout-list{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:14px;}
.pricing-callout-list li{display:flex; align-items:center; gap:8px;}
.pricing-callout .btn-primary{background:#fff; border-color:#fff; color:var(--accent);}

/* Bandeau final : même couleur pleine que le héro, pour refermer la page sur
   les deux mêmes teintes (Bleu Encre + Mandarine) sans en ajouter d'autres. */
.final-cta{background:var(--ink); color:#fff; text-align:center; padding:64px 40px; position:relative; overflow:hidden;}
/* Bandeau de fin en fond vidéo (salle de réunion, en boucle) : la vidéo et
   un voile sombre restent derrière le contenu (z-index), pour garder le
   même contraste texte blanc / fond encre qu'avant, juste avec de la
   matière en fond plutôt qu'un aplat uni. */
.final-cta-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.final-cta-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 87%, transparent) 0%, color-mix(in srgb, var(--ink) 80%, transparent) 100%);
}
.final-cta-content{position:relative; z-index:2;}
.final-cta h2{color:#fff;}
.final-cta .btn:not(.btn-primary){background:transparent; border-color:color-mix(in srgb, #fff 30%, transparent); color:#fff;}
.final-cta .btn-primary{background:var(--accent); border-color:var(--accent); color:#fff;}

/* Bandeau de pied de page (site vitrine uniquement, pas l'app connectée) :
   même Bleu Encre que le bandeau final, pour refermer la page sans ajouter
   une troisième teinte de fond. */
.site-footer{background:var(--ink); color:#fff; padding:56px 40px 0;}
.site-footer-inner{
  max-width:1080px; margin:0 auto; padding-bottom:40px;
  display:flex; flex-wrap:wrap; gap:48px; justify-content:space-between;
}
.site-footer-brand{display:flex; flex-direction:column; gap:14px; max-width:320px;}
.site-footer-brand .brand{gap:10px;}
.site-footer-brand .wordmark, .site-footer-brand .wordmark .w-ink{color:#fff;}
.site-footer-tagline{color:color-mix(in srgb, #fff 68%, transparent); font-size:14px; line-height:1.5; margin:0;}
.site-footer-cols{display:flex; gap:56px; flex-wrap:wrap;}
.site-footer-col h3{
  font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color:color-mix(in srgb, #fff 55%, transparent); margin:0 0 14px;
}
.site-footer-col a{display:block; color:#fff; text-decoration:none; font-size:14px; margin-bottom:10px; opacity:.88;}
.site-footer-col a:hover{opacity:1; text-decoration:underline;}
.site-footer-bottom{
  border-top:1px solid color-mix(in srgb, #fff 14%, transparent); padding:20px 0;
  text-align:center; font-size:12px; color:color-mix(in srgb, #fff 55%, transparent);
}
@media (max-width:600px){
  .site-footer{padding:40px 20px 0;}
  .site-footer-inner{gap:32px;}
  .site-footer-cols{gap:32px;}
}

.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-box{width:100%; max-width:400px; padding:32px 30px; display:flex; flex-direction:column; gap:16px;}
.auth-box h1{font-size:21px;}
.auth-box .sub{color:var(--ink-soft); font-size:13px; margin-top:-8px;}
.auth-switch{text-align:center; font-size:13px; color:var(--ink-soft);}

/* ---------------- App shell ---------------- */
.app-shell{display:grid; grid-template-columns:236px 1fr; min-height:100vh;}
/* La bulle "Mon compte" (nav.ejs) insère un conteneur de modale juste après
   la barre latérale, donc toujours à l'intérieur de la grille .app-shell.
   Sans ça, cette div (vide au chargement) devient elle-même une cellule de
   grille et décale .app-main sur la ligne suivante en pleine largeur de la
   colonne de la barre latérale. display:contents la retire du calcul de la
   grille (comme les éléments position:fixed .assistant-toggle/.assistant-panel
   déjà présents ici), sans gêner la modale (elle-même en position:fixed) une
   fois injectée par account-settings.js. */
#accountModalRoot{display:contents;}
.app-sidebar{
  border-right:1px solid var(--border); background:var(--surface-alt);
  padding:20px 14px; display:flex; flex-direction:column; gap:20px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.app-sidebar-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
/* Bouton "menu" mobile : cache par défaut (desktop), affiché uniquement sous
   820px via le media query plus bas, pour replier le menu + le bloc compte
   et laisser directement la place au contenu de la page. */
.sidebar-toggle-btn{
  display:none; flex:none; width:36px; height:36px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface-raised); color:var(--ink);
  font-size:17px; line-height:1; cursor:pointer; align-items:center; justify-content:center;
}
.app-nav{display:flex; flex-direction:column; gap:3px;}
.app-nav a{
  display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:12px;
  color:var(--ink-soft); font-weight:600; font-size:13.5px; border-left:3px solid transparent;
}
.app-nav a:hover{background:var(--surface-raised); text-decoration:none;}
.app-nav a.active{background:color-mix(in srgb, var(--accent) 10%, var(--surface-raised)); color:var(--accent); border-left-color:var(--accent); box-shadow:var(--shadow-sm);}
.nav-group-label{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); padding:14px 10px 4px;
}
.app-nav .navicon{
  width:26px; height:26px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--tint, var(--accent)) 16%, var(--surface-raised)); font-size:13px;
}
.app-nav a[href="/app/prospection"] .navicon{--tint:var(--accent-blue);}
.app-nav a[href="/app/clients"] .navicon{--tint:var(--accent-purple);}
.app-nav a[href="/app/entreprises"] .navicon{--tint:var(--accent-green);}
.app-nav a[href="/app/profil"] .navicon{--tint:var(--accent-yellow);}
.app-nav a[href="/app/equipe"] .navicon{--tint:var(--accent-blue);}

.app-nav a.nav-primary{
  font-size:15px; font-weight:800; padding:11px 12px; margin-bottom:6px;
  color:#fff; background-image:linear-gradient(120deg, var(--accent-pink), var(--accent));
  box-shadow:var(--shadow-sm);
}
.app-nav a.nav-primary:hover{color:#fff; opacity:.94; text-decoration:none;}
.app-nav a.nav-primary.active{color:#fff; background-image:linear-gradient(120deg, var(--accent-pink), var(--accent)); border-left-color:transparent; box-shadow:var(--shadow);}
.app-nav a.nav-primary .navicon{background:rgba(255,255,255,.28); width:30px; height:30px; font-size:15.5px;}
.app-account{margin-top:auto; font-size:12px; color:var(--ink-faint); display:flex; flex-direction:column; gap:6px;}
.app-account-bubble{all:unset; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding:8px 10px; margin:-8px -10px; border-radius:10px; transition:background .15s;}
.app-account-bubble:hover, .app-account-bubble:focus-visible{background:rgba(255,255,255,.08);}
.app-account-bubble-hint{font-size:11px; color:var(--accent, #7C5CE0); margin-top:2px; opacity:.9;}
/* Déconnexion : auparavant un simple lien fantôme en bas de la barre latérale,
   peu visible et avec une zone cliquable très fine (padding-left:0). Séparée
   par un filet, avec une icône dans une pastille tintée "danger" (comme les
   icônes de nav, mais dans un ton distinct) pour la repérer d'un coup d'œil
   même en bas d'une liste chargée, et une zone de clic pleine largeur. */
.app-logout-form{margin-top:8px; padding-top:10px; border-top:1px solid var(--border);}
.app-logout-btn{
  all:unset; box-sizing:border-box; cursor:pointer; width:100%;
  display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:12px;
  font-weight:600; font-size:13.5px; color:var(--danger); transition:background .15s;
}
.app-logout-btn:hover, .app-logout-btn:focus-visible{background:color-mix(in srgb, var(--danger) 12%, var(--surface-raised));}
.app-logout-icon{
  width:26px; height:26px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--danger) 16%, var(--surface-raised)); font-size:13px;
}
.app-main{padding:26px 32px 48px; min-width:0;}
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap;}
.page-head h1{font-size:22px;}
.page-title-chip{
  display:inline-block; color:#fff; background-image:linear-gradient(120deg, var(--accent-purple), #7C5CE0);
  padding:7px 20px; border-radius:14px; letter-spacing:-.01em;
  box-shadow:0 8px 18px color-mix(in srgb, var(--accent-purple) 38%, transparent);
}
.page-head .sub{color:var(--ink-soft); font-size:13px; margin-top:4px;}

.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:16px; background:var(--surface-raised);}
table{width:100%; border-collapse:collapse; font-size:13px;}
th,td{padding:10px 13px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap;}
th{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600; background:var(--surface-alt);}
tbody tr:last-child td{border-bottom:none;}

.stat-tile{background:var(--surface-raised); border:1px solid var(--border); border-radius:16px; padding:12px 14px; display:flex; flex-direction:column; gap:4px;}
.stat-tile .label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); font-weight:600;}
.stat-tile .value{font-family:'Plus Jakarta Sans',sans-serif; font-size:21px; font-weight:700;}
.stats-row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px;}

.checklist{display:flex; flex-direction:column; gap:10px;}
.check-item{display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:var(--surface-raised);}
.check-item .dot{width:20px; height:20px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-top:1px;}
.check-item.pass .dot{background:color-mix(in srgb, var(--success) 22%, transparent); color:var(--success);}
.check-item.fail .dot{background:color-mix(in srgb, var(--danger) 20%, transparent); color:var(--danger);}
.check-item .ctext strong{display:block; font-size:13.5px;}
.check-item .ctext span{font-size:12.5px; color:var(--ink-soft);}
.score-ring{
  width:88px; height:88px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:22px; font-weight:700;
  background:conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--surface-alt) 0);
}
.score-ring-inner{width:70px; height:70px; border-radius:50%; background:var(--surface-raised); display:flex; align-items:center; justify-content:center;}

.section-divider{display:flex; align-items:center; gap:14px; max-width:820px; margin:30px 0 18px; color:var(--ink-faint); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;}
.section-divider::before, .section-divider::after{content:''; flex:1; height:1px; background:var(--border);}

.tpl-tabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap;}
.tpl-tabs button{padding:8px 14px; border:1px solid var(--border); background:var(--surface-raised); border-radius:99px; font-weight:600; font-size:12.5px; cursor:pointer; color:var(--ink-soft);}
.tpl-tabs button.active{background:var(--accent); border-color:var(--accent); color:var(--accent-contrast);}
.tpl-list{display:grid; grid-template-columns:260px 1fr; gap:18px; align-items:start;}
.tpl-item{padding:12px 13px; border-radius:12px; cursor:pointer; border:1px solid transparent;}
.tpl-item:hover{background:var(--surface-alt);}
.tpl-item.active{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface-raised));}
.tpl-item strong{display:block; font-size:13px;}
.tpl-item span{font-size:11.5px; color:var(--ink-faint);}
.tpl-preview{white-space:pre-wrap; font-size:13.5px; line-height:1.6;}

/* ---------------- Kanban board ---------------- */
.board{display:flex; gap:14px; overflow-x:auto; padding-bottom:10px;}
.column{flex:0 0 250px; display:flex; flex-direction:column; gap:10px;}
.column-head{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 4px;}
.column-dot{width:8px; height:8px; border-radius:50%; flex:none;}
.column-count{margin-left:auto; color:var(--ink-faint); font-family:'JetBrains Mono',monospace; font-weight:400;}
.column-drop{flex:1; display:flex; flex-direction:column; gap:8px; min-height:60px; border-radius:12px; padding:2px;}
.column-drop.drag-over{background:color-mix(in srgb, var(--accent) 10%, transparent); outline:2px dashed color-mix(in srgb, var(--accent) 50%, transparent);}
.card{background:var(--surface-raised); border:1px solid var(--border); border-radius:16px; padding:10px 12px; cursor:grab; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;}
.card:hover{border-color:var(--border-strong); transform:translateY(-2px); box-shadow:var(--shadow);}
.card-name{font-weight:600; font-size:13.5px;}
.card-meta{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.card-foot{display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11.5px; color:var(--ink-faint);}
.avatar{width:20px; height:20px; border-radius:50%; background:var(--surface-alt); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; color:var(--ink-soft); flex:none;}
.due-chip{font-family:'JetBrains Mono',monospace; padding:1px 8px; border-radius:999px; background:var(--surface-alt);}
.due-chip.overdue{background:color-mix(in srgb, var(--danger) 20%, var(--surface-alt)); color:var(--danger);}
.empty-col{font-size:12px; color:var(--ink-faint); padding:10px 6px; text-align:center; border:1px dashed var(--border); border-radius:12px;}

/* ---------------- Drawer & modal ---------------- */
.drawer-backdrop{position:fixed; inset:0; background:rgba(27,30,54,0.35); z-index:30;}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--surface-raised); border-left:1px solid var(--border); box-shadow:var(--shadow); z-index:31; display:flex; flex-direction:column;}
.drawer-head{padding:16px 18px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.drawer-body{padding:16px 18px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:16px;}
.drawer-foot{padding:12px 18px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:8px;}
/* Historique d'actions (tiroir client) : nommage distinct de .timeline-item
   (frise "Fonctionnalités" de la landing page, plus haut dans ce fichier) —
   les deux composants partageaient auparavant le même nom de classe, et
   celui-ci, déclaré après, écrasait la mise en page de l'autre. */
.activity-timeline{display:flex; flex-direction:column; gap:10px; margin-top:4px;}
.activity-timeline-item{border-left:2px solid var(--border); padding-left:10px; display:flex; flex-direction:column; gap:2px;}
.activity-timeline-item .tmeta{font-size:11px; color:var(--ink-faint); font-family:'JetBrains Mono',monospace;}
.activity-timeline-item .ttext{font-size:13px;}
.note-add{display:flex; gap:6px; margin-top:6px;}
.note-add textarea{flex:1;}
.modal-backdrop{position:fixed; inset:0; background:rgba(27,30,54,0.4); display:flex; align-items:center; justify-content:center; z-index:40; padding:20px;}
.modal{background:var(--surface-raised); border-radius:22px; border:1px solid var(--border); box-shadow:var(--shadow); width:min(480px,100%); max-height:88vh; overflow-y:auto; padding:20px 22px; display:flex; flex-direction:column; gap:14px;}
.modal h2{font-size:17px;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:4px;}
.icon-btn{background:transparent; border:none; color:var(--ink-faint); cursor:pointer; width:26px; height:26px; border-radius:999px; display:flex; align-items:center; justify-content:center;}
.icon-btn:hover{background:var(--surface-alt); color:var(--ink);}
.toast{box-shadow:var(--shadow);}

/* ---------------- Assistant widget ---------------- */
.assistant-toggle{
  position:fixed; right:22px; bottom:22px; z-index:45;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-contrast); font-size:22px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent);
}
.assistant-toggle:hover{filter:brightness(1.05);}
.assistant-panel{
  position:fixed; right:22px; bottom:86px; z-index:45;
  width:min(360px,90vw); max-height:min(560px,72vh);
  background:var(--surface-raised); border:1px solid var(--border); border-radius:20px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden;
}
.assistant-head{padding:14px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;}
.assistant-tabs{display:flex; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.assistant-tabs button{flex:1 1 auto; padding:9px 8px; border:none; background:transparent; color:var(--ink-soft); font-size:11.5px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent;}
.assistant-tabs button.active{color:var(--accent); border-bottom-color:var(--accent);}
.assistant-body{display:flex; flex-direction:column; flex:1; min-height:0; padding:14px 16px; overflow-y:auto;}
.assistant-messages{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
.assistant-msg{font-size:13px; line-height:1.45; padding:8px 12px; border-radius:14px; max-width:88%; white-space:pre-wrap;}
.assistant-msg-bot{background:var(--surface-alt); color:var(--ink); align-self:flex-start;}
.assistant-msg-user{background:var(--accent); color:var(--accent-contrast); align-self:flex-end;}
.assistant-input-row{display:flex; gap:8px;}
.assistant-input-row input{flex:1;}

/* ---------------- Clients / Entreprises ---------------- */
.pill-tabs{display:flex; gap:8px; margin-bottom:16px;}
.pill-tabs a{
  padding:7px 14px; border-radius:99px; font-size:13px; font-weight:600;
  border:1px solid var(--border); color:var(--ink-soft); background:var(--surface-raised);
}
.pill-tabs a.active{background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); text-decoration:none;}

/* Étoile "top client" : un badge plein (cercle doré) plutôt qu'un simple
   caractère ★/☆, pour que l'état actif se voie vraiment au premier coup
   d'œil dans la table, même en diagonale. */
.top-star{
  width:27px; height:27px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1; border:1.5px solid var(--border);
  background:var(--surface-alt); color:var(--ink-faint);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.top-star:hover{transform:scale(1.08); color:var(--ink-soft);}
.top-star.is-top{
  background:var(--accent-warm); border-color:var(--accent-warm); color:#6B4F00;
  box-shadow:0 2px 8px color-mix(in srgb, var(--accent-warm) 55%, transparent);
}
.top-star.is-top:hover{color:#6B4F00;}
.top-toggle-drawer{
  display:inline-flex; align-items:center; gap:6px; border:none; background:none;
  padding:2px 0; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink-faint);
}
.top-toggle-drawer .dot{
  width:15px; height:15px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  font-size:9.5px; border:1.5px solid var(--border); background:var(--surface-alt); color:var(--ink-faint);
}
.top-toggle-drawer.is-top{color:var(--accent-warm);}
.top-toggle-drawer.is-top .dot{background:var(--accent-warm); border-color:var(--accent-warm); color:#6B4F00;}

/* Repère d'enregistrement automatique, déplacé en haut du tiroir (à côté du
   nom) pour rester visible même quand le widget de chat flotte en bas de
   l'écran. Le point clignote brièvement à chaque sauvegarde réussie. */
.autosave-badge{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-faint); font-weight:600;}
.autosave-dot{width:7px; height:7px; border-radius:50%; background:var(--success); flex:none;}
.autosave-badge.flash .autosave-dot{animation:autosavePulse 900ms ease-out;}
@keyframes autosavePulse{
  0%{ transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
  30%{ transform:scale(1.9); box-shadow:0 0 0 5px color-mix(in srgb, var(--success) 0%, transparent); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); }
}

/* Petite ligne discrète "Créé(e) le ... · Propriétaire : ..." affichée sous
   l'en-tête des fiches (client, entreprise, agence). Le sélecteur de
   propriétaire reste minuscule et sans bordure pour ne pas ressembler à un
   champ de formulaire classique. */
.drawer-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; font-size:11.5px; color:var(--ink-faint);}
.drawer-meta-owner{display:inline-flex; align-items:center; gap:5px;}
.drawer-meta-owner select{
  font:inherit; font-size:11.5px; color:var(--ink-soft); background:var(--surface-alt);
  border:1px solid var(--border); border-radius:6px; padding:2px 6px; cursor:pointer; max-width:160px;
}

.contact-name-cell strong{display:block;}
.contact-name-cell span{font-size:11.5px; color:var(--ink-faint);}
.last-action-chip{font-size:11px; color:var(--ink-faint); font-family:'JetBrains Mono',monospace;}
.action-type-picker{display:flex; gap:8px; flex-wrap:wrap;}
.action-type-picker button{
  flex:1 1 auto; padding:10px 8px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface-raised); color:var(--ink-soft); font-weight:600; font-size:13px; cursor:pointer;
}
.action-type-picker button.active{background:color-mix(in srgb, var(--accent) 14%, var(--surface-raised)); border-color:var(--accent); color:var(--accent);}
.action-history{display:flex; flex-direction:column; gap:6px; margin-top:10px; max-height:180px; overflow-y:auto;}
.action-history-item{font-size:12.5px; color:var(--ink-soft); border-left:2px solid var(--border); padding-left:8px;}

/* ---------------- Agences ---------------- */
.agency-grid{display:flex; flex-direction:column; gap:14px;}
.agency-card{padding:18px 20px;}
.agency-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.agency-card-head h3{font-size:16.5px;}
.agency-card-sub{font-size:12px; color:var(--ink-faint); margin-top:2px;}
.agency-commission{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft);}
.agency-commission input{width:70px; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--surface-raised); color:var(--ink); font-size:13.5px; text-align:right;}
.agency-years{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:12px;}
.agency-year{padding:12px 14px; border-radius:14px; background:var(--surface-alt); border:1px solid var(--border);}
.agency-year .yr-label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:700;}
.yoy-badge{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; margin-top:5px;}
.yoy-badge .yoy-vs{font-weight:500; opacity:.75; text-transform:none; letter-spacing:0;}
.yoy-badge.yoy-up{background:color-mix(in srgb, var(--success) 16%, transparent); color:var(--success);}
.yoy-badge.yoy-down{background:color-mix(in srgb, var(--danger) 16%, transparent); color:var(--danger);}
.yoy-badge.yoy-flat{background:var(--surface-raised); color:var(--ink-faint);}
.yoy-badge.yoy-new{background:color-mix(in srgb, var(--accent-blue) 18%, transparent); color:var(--accent-blue);}
.agency-year input{width:100%; margin-top:6px; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--surface-raised); color:var(--ink); font-size:15px; font-family:'JetBrains Mono',monospace;}
.agency-year .commission-est{font-size:11.5px; color:var(--ink-faint); margin-top:6px; font-family:'JetBrains Mono',monospace;}
.agency-year .actions-count{font-size:11px; color:var(--ink-faint); margin-top:4px;}
.agency-card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}

/* CA confirmé par année sur la fiche Entreprise (dossier direct, sans
   commission) : même principe que .agency-years/.agency-year mais en
   nettement plus compact, comme demandé (pas de badge d'évolution, pas de
   commission estimée, pas de journal d'actions manuelles). */
.company-ca-years{display:grid; grid-template-columns:repeat(auto-fit,minmax(66px,1fr)); gap:8px; margin:2px 0 12px;}
.company-ca-year{padding:6px 8px; border-radius:10px; background:var(--surface-alt); border:1px solid var(--border); text-align:center;}
.company-ca-year .yr-label{font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:700;}
.company-ca-year input{width:100%; margin-top:4px; padding:5px 6px; border-radius:8px; border:1px solid var(--border); background:var(--surface-raised); color:var(--ink); font-size:12.5px; font-family:'JetBrains Mono',monospace; text-align:center;}
.agency-ideas{margin-top:12px; padding:12px 14px; border-radius:14px; background:color-mix(in srgb, var(--accent-purple) 8%, var(--surface-alt)); border:1px solid var(--border); font-size:13px; color:var(--ink-soft);}
.agency-ideas ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px;}

/* Fiche agence : coordonnées éditables directement sur la carte (l'agence
   n'a plus de fiche dans Entreprises, voir la séparation des deux dossiers). */
.agency-edit-details{margin-bottom:14px;}
.agency-edit-details summary{cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.agency-edit-details summary:hover{color:var(--accent);}
.agency-edit-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:10px;}

/* Journal manuel des actions par année (task: pouvoir noter facilement les
   actions menées avec l'agence, année par année, sans passer par une fiche
   contact). */
.agency-actions-log{margin-top:10px; padding-top:10px; border-top:1px dashed var(--border);}
.agency-actions-log-list{display:flex; flex-direction:column; gap:6px; margin-bottom:8px; max-height:150px; overflow-y:auto;}
.agency-actions-log-item{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; font-size:12px; color:var(--ink-soft); background:var(--surface-raised); border-radius:8px; padding:6px 8px;}
.agency-actions-log-item .aal-text{flex:1; min-width:0; word-break:break-word;}
.agency-actions-log-item .aal-date{color:var(--ink-faint); font-size:10.5px; display:block;}
.agency-actions-log-item button{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:13px; padding:0 2px; flex-shrink:0;}
.agency-actions-log-item button:hover{color:var(--accent-danger, #c0392b);}
.agency-actions-log-add{display:flex; gap:6px; flex-wrap:wrap;}
.agency-actions-log-add input[type="text"]{flex:1 1 120px; min-width:0; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--surface-raised); color:var(--ink); font-size:12px;}
.agency-actions-log-add input[type="date"]{flex:0 0 128px; padding:6px 6px; border-radius:8px; border:1px solid var(--border); background:var(--surface-raised); color:var(--ink); font-size:12px;}
.agency-actions-log-add select.aal-type-select{flex:0 0 132px; padding:6px 6px; border-radius:8px; border:1px solid var(--border); background:var(--surface-raised); color:var(--ink); font-size:12px;}
.agency-actions-log-add input.aal-custom-type{flex:1 1 140px; min-width:0; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:var(--surface-raised); color:var(--ink); font-size:12px;}
.agency-actions-log-add button{flex:0 0 auto; padding:6px 10px; border-radius:8px; border:none; background:var(--accent); color:var(--accent-contrast); font-size:12px; font-weight:600; cursor:pointer;}

.agency-page-head-actions{display:flex; align-items:center; gap:10px;}

/* ---------------- Potentiel de pipeline (Tableau de bord) ---------------- */
.potential-pipeline-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
.potential-pipeline-tile{background:var(--surface-alt); border-radius:10px; padding:12px 14px;}
.potential-pipeline-tile .ppt-label{font-weight:700; font-size:12.5px; margin-bottom:6px;}
.potential-pipeline-tile .ppt-value{font-size:13px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;}
.potential-pipeline-tile .ppt-value span{font-weight:400; color:var(--ink-faint); font-size:11px;}
.potential-pipeline-tile .ppt-sub{margin-top:4px; font-size:11px; color:var(--ink-faint);}

/* ---------------- Rapports ---------------- */
.report-kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:22px;}
.report-kpi-tile{background:var(--surface-raised); border:1px solid var(--border); border-radius:12px; padding:16px;}
.report-kpi-tile .label{font-size:12px; color:var(--ink-faint); margin-bottom:6px;}
.report-kpi-tile .value{font-size:26px; font-weight:800; font-variant-numeric:tabular-nums;}
.report-breakdown-table{width:100%; border-collapse:collapse;}
.report-breakdown-table th, .report-breakdown-table td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); font-size:13px;}
.report-breakdown-table td:last-child, .report-breakdown-table th:last-child{text-align:right; font-variant-numeric:tabular-nums;}

/* ---------------- Tarifs ---------------- */
.pricing-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; max-width:980px; margin:0 auto;}
.pricing-card{
  --tint: var(--accent-blue);
  padding:26px 24px; display:flex; flex-direction:column; gap:12px; border-top:4px solid var(--tint); position:relative;
  background:color-mix(in srgb, var(--tint) 5%, var(--surface-raised));
}
.pricing-grid .pricing-card:nth-child(3n+3){--tint:var(--accent-green);}
.pricing-card.highlight{--tint:var(--accent); border-color:var(--accent); box-shadow:var(--shadow-sm);}
.pricing-card .plan-tag{
  position:absolute; top:-12px; right:20px; background:var(--accent); color:var(--accent-contrast);
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:99px;
}
.pricing-card h3{font-size:17px;}
.pricing-card .price{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:26px;}
.pricing-card .price small{font-size:13px; font-weight:500; color:var(--ink-faint);}
.pricing-card ul{margin:0; padding-left:18px; font-size:13px; color:var(--ink-soft); line-height:1.8; flex:1;}
.pricing-note{max-width:640px; margin:36px auto 0; text-align:center; color:var(--ink-soft); font-size:13.5px;}

@media (max-width:820px){
  .app-shell{grid-template-columns:1fr;}
  .app-sidebar{position:relative; height:auto;}
  .field-row, .field-row-note, .tpl-list{grid-template-columns:1fr;}
  /* Barre latérale de l'app repliée par défaut sur mobile/tablette : seuls le
     nom de l'hôtel et le bouton menu restent visibles tant qu'on ne l'a pas
     ouverte, pour ne pas forcer un long défilement avant d'atteindre le
     contenu de la page. */
  .sidebar-toggle-btn{display:flex;}
  .app-sidebar-collapsible{display:none;}
  .app-sidebar.is-open .app-sidebar-collapsible{display:block; margin-top:16px;}
}

@media (max-width:760px){
  /* En-tête public (landing, tarifs) : les liens passent sous un bouton menu
     plutôt que de s'écraser ou de forcer un défilement horizontal de la page
     (ils sont trop nombreux pour tenir sur une largeur de téléphone). */
  .landing-header{flex-wrap:wrap; padding:16px 20px;}
  .nav-toggle-btn{display:flex;}
  .landing-nav{
    display:none; width:100%; flex-basis:100%; flex-direction:column; align-items:flex-start;
    gap:14px; padding-top:16px; margin-top:14px; border-top:1px solid var(--border);
  }
  .landing-nav.is-open{display:flex;}
  .landing-nav a, .landing-nav .btn, .landing-nav > span{margin-left:0 !important;}
}

@media (max-width:600px){
  /* Espacements pensés pour un écran large (40px de marge de chaque côté,
     etc.) : ramenés à des valeurs plus raisonnables sur téléphone, où ils
     mangeraient sinon une bonne partie de la largeur utile. */
  .app-main{padding:18px 16px 40px;}
  .home-hero{padding:32px 20px; min-height:0;}
  .home-reco{margin-left:16px; margin-right:16px;}
  .home-section-label{padding-left:16px; padding-right:16px;}
  .home-menu{padding-left:16px; padding-right:16px;}
  .landing-header{padding:14px 16px;}
  .hero{padding:40px 20px 34px;}
  .hero-actions{justify-content:center;}
  .section{padding:32px 20px;}
  .pricing-callout{padding:26px 22px;}
  .final-cta{padding:44px 20px;}
  .auth-wrap{padding:16px;}
  .auth-box{padding:24px 20px;}
  .modal-backdrop{padding:12px;}
  .modal{padding:18px 16px;}
}

/* ---------------- Sélecteur de langue ---------------- */
.lang-switch{display:inline-flex; align-items:center; gap:2px; vertical-align:middle;}
.lang-switch a{
  font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--ink-faint);
  padding:4px 7px; border-radius:8px; text-decoration:none;
}
.lang-switch a:hover{color:var(--ink);}
.lang-switch a.active{background:color-mix(in srgb, var(--accent) 14%, var(--surface-raised)); color:var(--accent);}
.lang-switch-fixed{position:fixed; top:18px; right:18px; z-index:5; background:var(--surface-raised); border:1px solid var(--border); border-radius:10px; padding:2px; box-shadow:0 6px 16px rgba(0,0,0,.08);}