/* Résidence La Rome : feuille de style, reprise de la maquette (maquette/index.html) le 2026-10-24 */

:root {
  color-scheme: light;
  --fond: #f4f8fc;
  --papier: #ffffff;
  --sable: #e8f0f8;
  --encre: #1c2733;
  --encre-2: #4e5d6c;
  --encre-3: #7d8a98;
  --ligne: #d5e1ee;
  --bleu: #1f5fae;
  --bleu-fonce: #13447f;
  --bleu-pale: #dce9f7;
  --bleu-clair: #4fa8ef;
  --clochette: #3f8a25;
  --ondine: #2b86c4;
  --roselia: #b0353a;
  --licorne: #b88a00;
  --basse: #33568f;
  --haute: #b8601a;
  --cure: #7f2a8f;
  --ok: #2f7a3e;
  --ok-pale: #e3f1e5;
  --attente: #a86a00;
  --attente-pale: #fbf0d9;
  --alerte: #a3261d;
  --alerte-pale: #fdecea;
  --pris: #e3e8ee;
  --rayon: 14px;
  --ombre: 0 1px 2px rgba(20,40,70,.06), 0 6px 24px rgba(20,40,70,.08);
  --titre: "Fraunces", Georgia, serif;
  --texte: "Source Sans 3", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 17px/1.55 var(--texte); -webkit-text-size-adjust: 100%; }
img { max-width: 100%; display: block; }
a { color: var(--bleu-fonce); }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 5vw, 50px); }
h2 { font-size: clamp(25px, 3.4vw, 34px); }
h3 { font-size: 21px; }
p { margin: 0 0 1em; }
.enveloppe { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .enveloppe { padding: 0 28px; } }
.discret { color: var(--encre-2); }
.petit { font-size: 15px; }
.cache { display: none !important; }
/* Le titre des contrats : capitales épaisses, dégradé du bleu clair au bleu soutenu */
.titre-rome { font-family: "Arial Black", "Source Sans 3", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; background: linear-gradient(180deg, #5bb8ff 0%, #1f6fc6 55%, #0b3f86 100%); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }

/* ---------- Bandeau de la maquette ---------- */
.bandeau-maquette { position: sticky; top: 0; z-index: 60; background: #16212e; color: #e8eef5; font-size: 14px; }
.bandeau-maquette .enveloppe { display: flex; align-items: center; gap: 12px; min-height: 46px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.bandeau-maquette .marque { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; background: #f0b429; color: #16212e; padding: 3px 8px; border-radius: 6px; }
.bandeau-maquette .note { color: #b8c4d1; flex: 1 1 200px; }
.bascule { display: inline-flex; background: #2a3746; border-radius: 999px; padding: 3px; }
.bascule a { color: #dfe7f0; text-decoration: none; padding: 5px 12px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.bascule a[aria-current="true"] { background: #eef3f8; color: #16212e; }
.bouton-guide { background: transparent; color: #e8eef5; border: 1px solid #4a5868; border-radius: 999px; padding: 5px 12px; }

/* ---------- Entête du site ---------- */
.entete { background: rgba(244,248,252,.95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--ligne); position: sticky; top: 0; z-index: 50; }
.entete .enveloppe { display: flex; align-items: center; gap: 12px; min-height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); flex: none; margin-right: 18px; }
.logo img { width: 46px; height: 46px; flex: none; }
.logo .titre-rome { font-size: 19px; }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a { color: var(--encre); text-decoration: none; padding: 8px 9px; border-radius: 8px; font-weight: 600; font-size: 16px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--sable); }
.langue { display: inline-flex; border: 1px solid var(--ligne); border-radius: 8px; overflow: hidden; margin-left: 6px; }
.nav .langue a { border-radius: 0; padding: 6px 8px; font-weight: 700; font-size: 13px; color: var(--encre-2); }
.nav .langue a[aria-current="true"] { background: var(--bleu); color: #fff; }
.bouton-menu { display: none; margin-left: auto; border: 1px solid var(--ligne); background: var(--papier); border-radius: 10px; padding: 8px 12px; font-weight: 600; flex: none; }
/* 1340 px : l'en-tête anglais, le plus long des quatre, débordait encore à 1280 px (mesuré le 2026-10-24) */
@media (max-width: 1340px) {
  .bouton-menu { display: inline-flex; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--papier); flex-direction: column; align-items: stretch; padding: 8px 16px 14px; border-bottom: 1px solid var(--ligne); box-shadow: var(--ombre); }
  .nav.ouvert { display: flex; }
  .nav a { padding: 12px 8px; }
  .nav .langue a { padding: 8px 12px; }
  .langue { align-self: flex-start; margin: 8px 0 0; }
}
@media (max-width: 420px) {
  .logo img { width: 38px; height: 38px; }
  .logo .titre-rome { font-size: 15px; letter-spacing: .07em; }
}

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 13px 20px; font-weight: 700; text-decoration: none; background: var(--bleu); color: #fff; font-size: 17px; }
.bouton:hover { background: var(--bleu-fonce); }
.bouton[disabled], .bouton.vert[disabled] { background: #c3ccd6; color: #fff; cursor: not-allowed; }
.bouton.second { background: var(--papier); color: var(--encre); border: 1px solid var(--ligne); }
.bouton.second:hover { background: var(--sable); }
.bouton.vert { background: var(--ok); }
.bouton.vert:hover { background: #245f30; }
.bouton.rouge { background: var(--alerte); }
.bouton.petit { padding: 9px 14px; font-size: 15px; border-radius: 10px; }
.bouton.plein { width: 100%; }
.lien-bouton { background: none; border: 0; color: var(--bleu-fonce); text-decoration: underline; padding: 0; font-weight: 600; }

/* ---------- Accueil ---------- */
.heros { position: relative; min-height: min(72vh, 600px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.heros img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.heros::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,24,44,.25) 0%, rgba(8,24,44,.55) 35%, rgba(8,24,44,.85) 100%); }
.heros h1, .heros p { text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.heros .enveloppe { position: relative; z-index: 1; padding-bottom: 40px; width: 100%; }
.heros h1 { color: #fff; max-width: 19ch; }
.heros p { font-size: clamp(17px, 2.2vw, 21px); max-width: 48ch; color: #eef4fa; }
.recherche { background: var(--papier); color: var(--encre); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px 12px; align-items: end; max-width: 640px; }
.recherche .champ { margin: 0; }
@media (max-width: 560px) { .recherche { grid-template-columns: 1fr 1fr; } .recherche .bouton { grid-column: span 2; } }
.dispos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; }
.dispo { background: var(--papier); border-radius: 12px; box-shadow: var(--ombre); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; border-left: 5px solid var(--ligne); }
.dispo h3 { font-size: 21px; margin: 0; display: flex; gap: 8px; align-items: center; }
.dispo .prix { font-size: 20px; font-weight: 700; }
.dispo.pris { opacity: .7; }
.atouts { background: var(--papier); border-bottom: 1px solid var(--ligne); }
.atouts ul { list-style: none; margin: 0; padding: 18px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 24px; }
.atouts li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.atouts li span.ic { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--bleu-pale); color: var(--bleu-fonce); display: grid; place-items: center; font-size: 15px; }
section.bloc { padding: 56px 0; scroll-margin-top: 114px; }
#encadre { scroll-margin-top: 130px; }
@media (max-width: 700px) {
  .bandeau-maquette { position: static; }
  .bandeau-maquette .note { flex-basis: 100%; order: 5; font-size: 13px; }
  section.bloc { padding: 40px 0; scroll-margin-top: 68px; }
  #encadre { scroll-margin-top: 80px; }
}
section.bloc.sable { background: var(--sable); }
.chapeau { max-width: 62ch; color: var(--encre-2); font-size: 18px; }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; margin-top: 28px; }
.cartes + .cartes { margin-top: 22px; }
@media (min-width: 900px) { .cartes { grid-template-columns: repeat(3, 1fr); } }
.carte { background: var(--papier); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.carte .photo { aspect-ratio: 4 / 3; overflow: hidden; }
.carte .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.carte:hover .photo img { transform: scale(1.04); }
.carte .corps { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.carte h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 25px; }
.pastille { width: 13px; height: 13px; border-radius: 50%; flex: none; display: inline-block; }
.faits { color: var(--encre-2); font-size: 16px; }
.etiquette { display: inline-block; font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--sable); color: var(--encre-2); margin: 0 4px 4px 0; }
.etiquette.animaux { background: #fbe7e2; color: var(--roselia); }
.etiquette.etoiles { background: #fbf2d5; color: #7a5b00; }
.prix-carte { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ligne); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 16px; }
.prix-carte strong { font-size: 19px; }
.prix-carte .cure { color: var(--cure); font-weight: 700; }
.deux-col { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 820px) { .deux-col { grid-template-columns: 1fr; gap: 24px; } }
.mosaique { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mosaique img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; cursor: zoom-in; }
.mosaique img:first-child { grid-column: span 2; aspect-ratio: 16/9; }
.liste-coches { list-style: none; padding: 0; margin: 0 0 1em; }
.liste-coches li { padding-left: 28px; position: relative; margin-bottom: 8px; }
.liste-coches li::before { content: "✓"; position: absolute; left: 4px; top: 0; color: var(--ok); font-weight: 700; }
.encart-cure { background: var(--papier); border-radius: var(--rayon); padding: 24px; box-shadow: var(--ombre); border-top: 5px solid var(--cure); }
.encart-cure .gros { font-family: var(--titre); font-size: 22px; color: var(--cure); }
.encart-cure .ligne-cure { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--ligne); flex-wrap: wrap; }
/* Téléphone : prix toujours sous le nom, pour que les lignes se ressemblent (2026-10-24). */
@media (max-width: 560px) { .encart-cure .ligne-cure { flex-direction: column; gap: 2px; } }
.etapes-cure { counter-reset: e; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.etapes-cure li { counter-increment: e; background: var(--papier); border-radius: 12px; padding: 14px 16px 14px 58px; position: relative; box-shadow: var(--ombre); }
.etapes-cure li::before { content: counter(e); position: absolute; left: 14px; top: 13px; width: 30px; height: 30px; border-radius: 50%; background: var(--bleu); color: #fff; font-weight: 700; display: grid; place-items: center; }
.avis-vide { background: var(--papier); border: 2px dashed var(--ligne); border-radius: var(--rayon); padding: 18px; color: var(--encre-2); }
.encadre-airbnb { background: var(--papier); border-left: 5px solid #e0565b; border-radius: 12px; padding: 14px 16px; box-shadow: var(--ombre); margin: 18px 0; }

/* Grille des tarifs */
.tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; border-radius: var(--rayon); box-shadow: var(--ombre); background: var(--papier); }
table.tarifs { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 16px; }
table.tarifs th, table.tarifs td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--ligne); }
table.tarifs thead th { font-weight: 700; }
table.tarifs th.saison-b { color: var(--basse); background: #eef2f9; }
table.tarifs th.saison-h { color: var(--haute); background: #fbf0e5; }
table.tarifs .col-cure { color: var(--cure); font-weight: 700; }
table.tarifs tbody th { text-align: left; white-space: nowrap; }
table.tarifs tbody th span { display: inline-flex; align-items: center; gap: 8px; }
table.tarifs tbody th span.empile { display: block; white-space: normal; min-width: 190px; }
.tarifs-saison { display: none; }
@media (max-width: 700px) { .tarifs-large { display: none; } .tarifs-saison { display: block; } table.tarifs.court th small { font-weight: 400; } table.tarifs.court tbody th { white-space: normal; } table.tarifs.court th span.empile { min-width: 0; } }
/* Petite grille de l'encadré d'un logement : tient dans la colonne, sans défilement */
table.tarifs.court { min-width: 0; font-size: 15px; }
table.tarifs.court th, table.tarifs.court td { padding: 8px 6px; }
.regles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.regle { background: var(--papier); border: 1px solid var(--ligne); border-radius: 12px; padding: 14px 16px; }
.regle strong { display: block; margin-bottom: 2px; }
.carte-geo { width: 100%; height: 340px; border: 0; border-radius: var(--rayon); box-shadow: var(--ombre); background: var(--sable); }
.carte-attente { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 20px; text-align: center; }
.contact-ligne { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 18px; }
.contact-carte { background: var(--papier); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px; }
.a-rediger { background: var(--attente-pale); color: #6d4700; border-radius: 10px; padding: 12px 14px; font-size: 15px; }
footer.pied { background: #142233; color: #c9d5e2; padding: 36px 0; font-size: 15px; }
footer.pied a { color: #eef4fa; }
footer.pied .enveloppe.cree-par { display: block; margin-top: 22px; padding-top: 18px; border-top: 1px solid #2b3f55; text-align: center; }
footer.pied .cree-par a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
footer.pied .cree-par img { background: #fff; border-radius: 50%; }
footer.pied .enveloppe { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- Page d'un logement ---------- */
.fil { padding: 18px 0 6px; }
.galerie { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: min(56vh, 470px); border-radius: var(--rayon); overflow: hidden; }
.galerie button { border: 0; padding: 0; background: var(--sable); position: relative; overflow: hidden; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.galerie button:hover img { transform: scale(1.03); }
.galerie button:first-child { grid-row: span 2; }
.galerie .toutes { position: absolute; right: 12px; bottom: 12px; background: rgba(255,255,255,.95); color: var(--encre); border-radius: 10px; padding: 7px 12px; font-weight: 700; font-size: 14px; }
@media (max-width: 700px) {
  .galerie { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .galerie button { display: none; aspect-ratio: 4/3; }
  .galerie button:first-child { display: block; grid-row: auto; }
}
.page-logement { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; padding: 28px 0 70px; align-items: start; }
@media (max-width: 960px) {
  .page-logement { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .page-logement .colonne-reserver { order: -1; }
}
.titre-logement { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.titre-logement h1 { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 22px; }
.chip { background: var(--papier); border: 1px solid var(--ligne); border-radius: 999px; padding: 5px 12px; font-size: 15px; font-weight: 600; }
.texte-logement { max-width: 66ch; }
.equipements { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; margin: 18px 0 28px; }
.equipements h3 { font-family: var(--texte); font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.equipements ul { margin: 0; padding-left: 18px; color: var(--encre-2); }
.equipements li { margin-bottom: 3px; }
.a-savoir { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 18px 20px; margin-bottom: 16px; }
.a-savoir ul { margin: 0; padding-left: 18px; }
.a-savoir li { margin-bottom: 6px; }

/* Encadré de réservation (devis) */
.encadre { background: var(--papier); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 20px; border: 1px solid var(--ligne); }
.encadre h2 { font-size: 24px; margin-bottom: 4px; }
.encadre h3.sous { font-family: var(--texte); font-size: 17px; font-weight: 700; margin: 18px 0 8px; }
.aide-cure { font-size: 14px; background: #f3eaf6; color: #5c1f69; border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.calendrier-tete { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; }
.calendrier-tete button { border: 1px solid var(--ligne); background: var(--papier); border-radius: 10px; width: 40px; height: 40px; font-size: 20px; line-height: 1; }
.calendrier-tete button[disabled] { opacity: .35; cursor: default; }
.mois-titre { font-weight: 700; text-align: center; margin-bottom: 6px; display: flex; justify-content: center; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mois-titre small { font-weight: 600; font-size: 12px; padding: 1px 7px; border-radius: 999px; }
.mois-titre small.haute { background: #fbf0e5; color: var(--haute); }
.mois-titre small.basse { background: #eef2f9; color: var(--basse); }
.grille-mois { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.grille-mois .jsem { font-size: 12px; text-align: center; color: var(--encre-3); font-weight: 700; padding-bottom: 4px; }
.jour { height: 40px; border: 0; background: transparent; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--encre); position: relative; }
.jour:hover:not([disabled]) { background: var(--sable); }
.jour[disabled] { color: #bcc6d0; cursor: default; }
.jour.pris { background: var(--pris); color: #9aa6b3; text-decoration: line-through; }
.jour.pris.depart-possible { cursor: pointer; }
.jour.dans { background: var(--bleu-pale); border-radius: 0; color: var(--bleu-fonce); }
.jour.arrivee, .jour.depart { background: var(--bleu); color: #fff; text-decoration: none; }
.jour.arrivee { border-radius: 9px 0 0 9px; }
.jour.depart { border-radius: 0 9px 9px 0; }
.jour.arrivee.seul { border-radius: 9px; }
.jour.aujourdhui::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--encre-2); margin-top: 10px; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.dates-choisies { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ligne); border-radius: 12px; overflow: hidden; margin-top: 14px; }
.dates-choisies div { padding: 9px 12px; }
.dates-choisies div + div { border-left: 1px solid var(--ligne); }
.dates-choisies small { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--encre-3); }
.message-cal { font-size: 15px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--attente-pale); color: #6d4700; }
.personnes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.detail-prix { margin-top: 12px; border-top: 1px solid var(--ligne); padding-top: 12px; font-size: 16px; }
.detail-prix .ligne { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.detail-prix .ligne span:first-child { color: var(--encre-2); }
.detail-prix .ligne span:last-child { white-space: nowrap; }
.detail-prix .ligne small { display: block; font-size: 13px; color: var(--encre-3); }
.detail-prix .remise span:last-child { color: var(--ok); font-weight: 700; }
.detail-prix .total { border-top: 1px solid var(--ligne); margin-top: 6px; padding-top: 10px; font-weight: 700; font-size: 18px; }
.detail-prix .total span:first-child { color: var(--encre); }
.echeancier { background: var(--sable); border-radius: 12px; padding: 12px 14px; margin-top: 12px; font-size: 15px; }
.echeancier .ligne { padding: 3px 0; }
.echeancier strong { color: var(--encre); }
.court-sejour { font-size: 15px; margin-top: 12px; color: var(--encre-2); }

/* Formulaire */
.formulaire { margin-top: 18px; border-top: 1px solid var(--ligne); padding-top: 16px; }
.champ { margin-bottom: 12px; }
.champ label, .champ .etiquette-champ { display: block; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.champ input[type=text], .champ input[type=email], .champ input[type=tel], .champ input[type=date], .champ input[type=number], .champ select, .champ textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid #c4d2e1; border-radius: 10px; background: #fff; color: var(--encre); }
.champ textarea { min-height: 84px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); }
.champ .aide { font-size: 13px; color: var(--encre-3); margin-top: 3px; }
.case { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: 16px; }
.case input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--bleu); flex: none; }
.case small { display: block; color: var(--encre-3); font-size: 13px; }
.champ label.case { display: flex; font-weight: 400; font-size: 16px; margin-bottom: 10px; }
.sous-cases { margin: -4px 0 10px 28px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; }
.sous-cases label { display: inline-flex; gap: 6px; align-items: center; }
.sous-cases input[type=number] { width: 64px; font: inherit; padding: 4px 6px; border: 1px solid #c4d2e1; border-radius: 8px; }
.choix-paiement { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choix-paiement label { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--ligne); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 600; }
.choix-paiement label small { display: block; font-weight: 400; color: var(--encre-3); font-size: 13px; }
.choix-paiement input { accent-color: var(--bleu); margin-top: 4px; }
.choix-paiement label:has(input:checked) { border-color: var(--bleu); background: #eef5fc; }
.erreur { color: var(--alerte); font-size: 14px; font-weight: 600; margin-top: 4px; }
.envoi-en-cours { display: flex; align-items: center; gap: 10px; color: var(--encre-2); }
.rouage { width: 18px; height: 18px; border: 3px solid var(--ligne); border-top-color: var(--bleu); border-radius: 50%; animation: tourne 0.8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.merci { background: var(--ok-pale); border-radius: 12px; padding: 16px; margin-top: 16px; }
.merci h3 { color: var(--ok); }
/* Champ du formulaire de contact que seuls les robots remplissent : hors de l'écran */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.etapes { margin: 10px 0 0; padding-left: 20px; }
.etapes li { margin-bottom: 6px; }

/* Courriel montré */
.courriel { border: 1px solid var(--ligne); border-radius: 12px; background: #fff; margin-top: 14px; font-size: 15px; overflow: hidden; }
.courriel .tete-courriel { background: #f1f5fa; padding: 10px 14px; border-bottom: 1px solid var(--ligne); color: var(--encre-2); font-size: 13px; line-height: 1.5; }
.courriel .tete-courriel b { color: var(--encre); }
.courriel .corps-courriel { padding: 14px; overflow-wrap: anywhere; }
.courriel-bloc { border-top: 1px solid var(--ligne); padding: 8px 0; }
.courriel-bloc > summary { cursor: pointer; font-size: 15px; }
.etat-courriel { font-size: 13px; font-weight: 700; border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.etat-courriel.essai { background: var(--attente-pale); color: var(--attente); }
.etat-courriel.envoye { background: var(--ok-pale); color: var(--ok); }
.etat-courriel.echec, .etat-courriel.attendu { background: var(--alerte-pale); color: #7d2019; }
.etat-courriel.attendu { background: var(--bleu-pale); color: var(--bleu-fonce); white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.courriel .corps-courriel p:last-child { margin-bottom: 0; }
.courriel .piece { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--ligne); border-radius: 8px; padding: 5px 10px; font-size: 14px; font-weight: 600; background: var(--fond); margin: 6px 6px 0 0; }
.courriel .cadre-paiement { background: var(--fond); border-radius: 10px; padding: 10px 12px; margin: 8px 0 12px; }
.courriel .cadre-paiement div { padding: 2px 0; }
.titre-courriel { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-3); margin-top: 18px; }

/* Visionneuse */
.visionneuse { position: fixed; inset: 0; z-index: 100; background: rgba(8,16,26,.93); display: flex; align-items: center; justify-content: center; }
.visionneuse img { max-width: min(92vw, 1200px); max-height: 82vh; border-radius: 8px; object-fit: contain; }
.visionneuse .legende-v { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #e2eaf3; font-size: 15px; }
.visionneuse button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 24px; }
.visionneuse button:hover { background: rgba(255,255,255,.25); }
.visionneuse .fermer { top: 16px; right: 16px; }
.visionneuse .prec { left: 16px; top: 50%; margin-top: -24px; }
.visionneuse .suiv { right: 16px; top: 50%; margin-top: -24px; }

/* Guide de la maquette */
.guide { position: fixed; left: 16px; bottom: 16px; z-index: 70; width: min(340px, calc(100vw - 32px)); background: #16212e; color: #e8eef5; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.35); padding: 16px 18px; font-size: 15px; max-height: calc(100vh - 80px); overflow: auto; }
.guide h2 { font-family: var(--texte); font-size: 17px; font-weight: 700; margin: 0 0 8px; color: #fff; padding-right: 30px; }
.guide ol { margin: 0; padding-left: 20px; }
.guide li { margin-bottom: 8px; color: #d3dde8; }
.guide li.fait { color: #9fd3a8; }
.guide li.fait::marker { content: "✓  "; }
.guide button.lien { background: none; border: 0; color: #f0b429; font-weight: 700; padding: 0; text-decoration: underline; }
.guide .fermer-guide { position: absolute; top: 10px; right: 10px; background: transparent; border: 0; color: #b8c4d1; font-size: 22px; width: 32px; height: 32px; }
.guide .note-guide { color: #a9b6c4; font-size: 13px; margin-top: 8px; }
.guide:not(.deplie) li:not(.courante), .guide:not(.deplie) .note-guide { display: none; }
.guide:not(.deplie) ol { list-style: none; padding-left: 0; }
.guide li.courante { color: #fff; }
.guide #fin-guide { color: #9fd3a8; margin: 0 0 6px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 120; background: #16212e; color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.3); font-weight: 600; max-width: calc(100vw - 32px); }

/* ---------- Page de suivi ---------- */
.suivi { background: #edf2f7; min-height: 100vh; }
[hidden] { display: none !important; }
.suivi .enveloppe { max-width: 880px; }
.suivi-tete { background: var(--papier); border-bottom: 1px solid var(--ligne); position: sticky; top: 0; z-index: 40; }
.suivi-tete .enveloppe { display: flex; align-items: center; gap: 10px; min-height: 62px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.suivi-tete h1 { font-size: 20px; margin: 0; }
.suivi-tete .qui { font-size: 13px; color: var(--encre-3); display: block; font-family: var(--texte); font-weight: 600; }
.suivi-tete .logo img { width: 36px; height: 36px; }
.onglets { display: flex; gap: 2px; margin-left: auto; flex: 1 1 auto; justify-content: space-between; max-width: 900px; }
.onglets a { text-decoration: none; color: var(--encre-2); font-weight: 700; padding: 8px clamp(6px, 1vw, 14px); border-radius: 10px; white-space: nowrap; font-size: clamp(14px, 1.3vw, 17px); }
.suivi-tete .enveloppe { max-width: 1400px; }
.onglets a[aria-current="true"] { background: var(--bleu); color: #fff; }
/* Onglet « Inventaire » (repris de la maquette) */
.choix-logement { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 14px 0; }
.choix-logement a { text-align: center; text-decoration: none; color: var(--encre); font-weight: 600; border: 1px solid var(--ligne); border-radius: 10px; padding: 10px 12px; background: var(--papier); }
.choix-logement a[aria-current="true"] { border-color: var(--bleu); background: #eef5fc; }
.edl-piece { background: var(--papier); border-radius: 12px; box-shadow: var(--ombre); margin-bottom: 10px; padding: 0 14px; }
.edl-piece summary { cursor: pointer; padding: 14px 0; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 18px; }
.edl-piece h4 { font-family: var(--texte); font-size: 15px; margin: 10px 0 4px; }
.defauts-connus { background: var(--sable); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.defauts-connus h4 { margin-top: 2px !important; }
.defaut-ligne { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--ligne); flex-wrap: wrap; font-size: 15px; }
.defaut-ligne span { flex: 1 1 180px; }
.defaut-ligne select, .defaut-ligne input[type=text] { font: inherit; padding: 6px 8px; border: 1px solid #c4d2e1; border-radius: 8px; min-width: 0; flex: 1 1 160px; }
.inv-ligne { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--ligne); flex-wrap: wrap; }
.inv-ligne input[type=number] { width: 64px; font: inherit; padding: 6px 8px; border: 1px solid #c4d2e1; border-radius: 8px; }
.inv-ligne input[type=text] { flex: 1 1 160px; font: inherit; padding: 6px 8px; border: 1px solid #c4d2e1; border-radius: 8px; min-width: 0; }
.inv-suppr { border: 1px solid var(--ligne); background: #fff; border-radius: 8px; width: 36px; height: 36px; color: var(--alerte); font-weight: 700; }
.groupe { margin: 22px 0; }
.groupe h2 { font-family: var(--texte); font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.compte { background: var(--encre); color: #fff; border-radius: 999px; font-size: 13px; padding: 1px 9px; }
.compte.zero { background: #c3ccd6; }
.compte.alerte { background: var(--alerte); }
.vide { color: var(--encre-3); font-size: 15px; padding: 6px 2px; }
.ligne-resa { display: grid; grid-template-columns: 6px 1fr auto; gap: 0 14px; align-items: center; background: var(--papier); border-radius: 12px; padding: 12px 14px 12px 0; margin-bottom: 8px; box-shadow: var(--ombre); text-decoration: none; color: inherit; border: 2px solid transparent; }
.ligne-resa:hover { border-color: var(--ligne); }
.ligne-resa.surbrillance { border-color: var(--bleu); }
.ligne-resa .barre { align-self: stretch; border-radius: 12px 0 0 12px; }
.ligne-resa .nom-v { font-weight: 700; font-size: 17px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ligne-resa .quoi { color: var(--encre-2); font-size: 15px; }
.ligne-resa .montant { text-align: right; font-weight: 700; white-space: nowrap; }
.ligne-resa .montant small { display: block; font-weight: 600; color: var(--encre-3); font-size: 13px; }
.ligne-resa .montant small.retard { color: var(--alerte); }
.ligne-simple { background: var(--papier); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; box-shadow: var(--ombre); font-size: 15px; display: flex; gap: 10px; align-items: center; }
.nouvelle { background: var(--bleu); color: #fff; font-size: 12px; border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.statut { display: inline-block; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.statut.a_accepter { background: var(--bleu-pale); color: var(--bleu-fonce); }
.statut.arrhes_attendues { background: var(--attente-pale); color: var(--attente); }
.statut.confirmee { background: var(--ok-pale); color: var(--ok); }
.statut.reglee { background: #e5e9f3; color: var(--basse); }
.statut.refusee, .statut.annulee { background: #e9edf1; color: var(--encre-3); }
.fiche { padding: 18px 0 120px; }
.fiche .retour { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; text-decoration: none; margin-bottom: 12px; }
.fiche-carte { background: var(--papier); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.fiche-carte .bandeau-logement { padding: 16px 18px; color: #fff; display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.fiche-carte .bandeau-logement h2 { margin: 0; font-size: 24px; color: #fff; }
.fiche-carte .bandeau-logement .statut { background: rgba(255,255,255,.92); }
.fiche-section { padding: 16px 18px; border-top: 1px solid var(--ligne); }
.fiche-section h3 { font-family: var(--texte); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-3); margin-bottom: 8px; }
.fiche-section .ligne { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.fiche-section .ligne span:first-child { color: var(--encre-2); }
.fiche-section .ligne span:last-child { text-align: right; }
.paiements { display: grid; gap: 8px; }
.paiement { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--ligne); border-radius: 10px; padding: 10px 12px; }
.paiement .quoi-p { flex: 1 1 180px; }
.paiement .quoi-p b { display: block; }
.paiement .recu { color: var(--ok); font-weight: 700; }
.paiement select { font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid #c4d2e1; border-radius: 8px; }
.citation { background: var(--fond); border-left: 4px solid var(--ligne); padding: 10px 12px; border-radius: 0 10px 10px 0; font-style: italic; }
.historique { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.historique li { padding: 3px 0 3px 18px; position: relative; color: var(--encre-2); }
.historique li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--encre-3); }
.actions-fiche { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 18px; border-top: 1px solid var(--ligne); background: #f8fafc; }
.actions-fiche .bouton { flex: 1 1 160px; }
.panneau-action { padding: 16px 18px; border-top: 1px solid var(--ligne); background: #f6f9fd; }
.panneau-action h3 { font-family: var(--texte); font-size: 18px; margin-bottom: 10px; }
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .grille-champs { grid-template-columns: 1fr; } }
.avertissement { background: var(--alerte-pale); color: #7d2019; border-radius: 10px; padding: 10px 12px; font-size: 15px; margin-bottom: 12px; }
.planning-cadre { background: var(--papier); border-radius: var(--rayon); box-shadow: var(--ombre); overflow-x: auto; margin: 12px 0 8px; -webkit-overflow-scrolling: touch; }
.planning { position: relative; }
.planning .rangee { display: flex; border-bottom: 1px solid var(--ligne); position: relative; }
.planning .nom { position: sticky; left: 0; z-index: 3; background: var(--papier); width: 104px; flex: none; padding: 0 10px; display: flex; align-items: center; gap: 8px; font-weight: 700; border-right: 1px solid var(--ligne); }
.planning .jours { display: flex; position: relative; }
.planning .j { width: 30px; flex: none; text-align: center; font-size: 12px; color: var(--encre-3); border-left: 1px solid #edf1f5; }
.planning .j.we { background: #f6f8fb; }
.planning .j.auj { background: #e4eefa; }
.planning .tete-j .j { padding: 4px 0; line-height: 1.2; }
.planning .tete-j .j b { display: block; color: var(--encre); font-size: 13px; }
.planning .mois-l { position: absolute; top: 0; font-size: 12px; font-weight: 700; color: var(--encre-2); padding: 2px 6px; white-space: nowrap; }
.planning .rangee.logement .j { height: 52px; }
.bloc-p { position: absolute; top: 9px; height: 34px; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 700; padding: 0 8px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-decoration: none; z-index: 2; }
.bloc-p.google { background: #7d8aa0; }
.bloc-p.airbnb { background: #e0565b; }
.bloc-p.abritel { background: #1f4f8f; }
.bloc-p.leboncoin { background: #ec5a13; }
.bloc-p.blocage { background: repeating-linear-gradient(135deg, #9aa3ad, #9aa3ad 6px, #c3c9d0 6px, #c3c9d0 12px); color: #2b3138; border: 0; font: inherit; cursor: pointer; text-align: left; }
.bloc-p.battement { background: repeating-linear-gradient(135deg, #d5dbe2, #d5dbe2 6px, #eef1f4 6px, #eef1f4 12px); border-radius: 0; padding: 0; z-index: 1; }
.bloc-p.a_accepter { background: repeating-linear-gradient(135deg, #1f5fae, #1f5fae 6px, #4f86c8 6px, #4f86c8 12px) !important; }
.bloc-p.arrhes_attendues { opacity: .7; }
.legende-planning { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: var(--encre-2); }
.legende-planning span { display: inline-flex; align-items: center; gap: 6px; }
.legende-planning i { width: 16px; height: 12px; border-radius: 4px; display: inline-block; }
.connexion { max-width: 400px; margin: 50px auto; background: var(--papier); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 28px; text-align: center; }
.connexion img { width: 84px; margin: 0 auto 10px; }
.connexion .bouton { margin-top: 10px; }
.ajout { background: var(--papier); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px; margin: 18px 0; }
/* Contrat : page de vérification et aperçu */
.contrat-form { background: var(--papier); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px; margin-top: 14px; }
.contrat-form fieldset { border: 1px solid var(--ligne); border-radius: 12px; padding: 12px 14px 4px; margin: 0 0 14px; }
.contrat-form legend { font-weight: 700; padding: 0 6px; }
.lettres { font-size: 13px; color: var(--encre-3); font-style: italic; margin-top: 3px; }
.apercu-contrat { background: #fff; border: 1px solid var(--ligne); border-radius: 6px; padding: 22px 20px; margin-top: 14px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.45; box-shadow: 0 4px 18px rgba(20,40,70,.12); }
.desc-joint { border-top: 2px solid #333; margin-top: 16px; padding-top: 10px; font-size: 10.5px; line-height: 1.3; }
.desc-joint h4 { margin: 0 0 6px; font-size: 14px; text-align: center; }
.desc-joint h5 { margin: 8px 0 3px; font-size: 11.5px; }
.desc-joint .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 14px; }
.desc-joint table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.desc-joint th, .desc-joint td { border: 1px solid #555; padding: 2px 5px; text-align: left; font-weight: 400; }
.desc-joint th { font-style: italic; text-align: center; }
.desc-joint p { margin: 4px 0; }
@media (max-width: 560px) { .desc-joint .cols2 { grid-template-columns: 1fr; } .desc-joint th, .desc-joint td { padding: 2px 3px; } }
.inv-joint { border-top: 2px solid #333; margin-top: 16px; padding-top: 10px; }
.inv-joint h4 { margin: 0 0 4px; font-size: 15px; text-align: center; }
.inv-joint .intro { font-size: 11px; text-align: center; margin: 0 0 8px; color: #444; }
.inv-joint .cols { column-count: 3; column-gap: 14px; font-size: 10px; line-height: 1.3; }
.inv-joint .piece { break-inside: avoid; margin-bottom: 6px; }
.inv-joint .piece b { display: block; font-size: 10.5px; border-bottom: 1px solid #999; margin-bottom: 1px; }
@media (max-width: 560px) { .inv-joint .cols { column-count: 2; } }
.apercu-contrat .titre-rome { display: block; text-align: center; font-size: clamp(14px, 4.4vw, 34px); letter-spacing: .14em; margin-bottom: 10px; white-space: normal; }
.apercu-contrat .cadre-titre { border: 1px solid #333; background: #c7d7ea; text-align: center; font-weight: 700; padding: 6px; margin-bottom: 12px; }
.apercu-contrat p { margin: 0 0 8px; }
.tableau-taxe { width: 100%; border-collapse: collapse; background: var(--papier); border-radius: 12px; overflow: hidden; box-shadow: var(--ombre); font-size: 15px; }
.tableau-taxe th, .tableau-taxe td { padding: 9px 10px; border-bottom: 1px solid var(--ligne); text-align: right; }
.tableau-taxe th:first-child, .tableau-taxe td:first-child { text-align: left; }
.edl-piece { background: var(--papier); border-radius: 12px; box-shadow: var(--ombre); margin-bottom: 10px; padding: 0 14px; }
.edl-piece summary { cursor: pointer; padding: 14px 0; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 18px; }
.edl-piece h4 { font-family: var(--texte); font-size: 15px; margin: 10px 0 4px; }
.edl-photos { background: var(--sable); border-radius: 10px; padding: 10px 12px; font-size: 14px; color: var(--encre-2); }
.edl-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 0; border-top: 1px solid var(--ligne); }
.edl-ligne.marquee { background: #fff5f3; margin: 0 -14px; padding: 7px 14px; }
.edl-nom { flex: 1 1 180px; font-size: 16px; }
.edl-avant { display: inline-block; background: var(--attente-pale); color: var(--attente); border-radius: 999px; padding: 0 8px; font-weight: 700; }
.choix-options { border: 1px solid var(--ligne); border-radius: 10px; padding: 4px 12px; margin: 10px 0; min-width: 0; }
.choix-options legend { font-weight: 700; padding: 0 4px; }
.edl-connu { display: inline-block; background: var(--sable); color: var(--encre-2); border-radius: 999px; padding: 0 8px; font-weight: 700; }
.defauts-connus { background: var(--sable); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.defauts-connus h4 { margin-top: 2px !important; }
.defaut-ligne { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--ligne); flex-wrap: wrap; font-size: 15px; }
.defaut-ligne span { flex: 1 1 180px; }
.defaut-ligne select, .defaut-ligne input[type=text] { font: inherit; padding: 6px 8px; border: 1px solid #c4d2e1; border-radius: 8px; min-width: 0; flex: 1 1 160px; }
.edl-bouton { border: 1px solid var(--ligne); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 700; color: var(--encre-2); min-height: 36px; }
.edl-bouton[aria-pressed="true"] { background: var(--alerte); border-color: var(--alerte); color: #fff; }
.edl-detail { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 14px; }
.edl-detail input[type=text], .edl-detail input[type=number] { font: inherit; padding: 6px 8px; border: 1px solid #c4d2e1; border-radius: 8px; width: 100%; }
.edl-detail input[type=number] { width: 90px; }
.edl-detail label { display: flex; flex-direction: column; gap: 3px; }
.inv-ligne { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--ligne); flex-wrap: wrap; }
.inv-ligne input[type=number] { width: 64px; font: inherit; padding: 6px 8px; border: 1px solid #c4d2e1; border-radius: 8px; }
.inv-ligne input[type=text] { flex: 1 1 160px; font: inherit; padding: 6px 8px; border: 1px solid #c4d2e1; border-radius: 8px; min-width: 0; }
.inv-suppr { border: 1px solid var(--ligne); background: #fff; border-radius: 8px; width: 36px; height: 36px; color: var(--alerte); font-weight: 700; }
.titre-licorne { display: block; text-align: center; font-family: "Arial Black", sans-serif; font-weight: 900; font-size: clamp(20px, 7vw, 40px); letter-spacing: .12em; text-shadow: 2px 2px 0 #555; margin-bottom: 10px; white-space: nowrap; }
.faq-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.faq-sommaire a { background: var(--papier); border: 1px solid var(--ligne); border-radius: 999px; padding: 6px 12px; text-decoration: none; font-weight: 600; font-size: 15px; }
details.faq { background: var(--papier); border-radius: 12px; box-shadow: var(--ombre); margin-bottom: 8px; padding: 0 16px; }
details.faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 17px; }
details.faq p { margin: 0 0 14px; color: var(--encre-2); }
.article-cg { background: var(--papier); border-radius: 12px; box-shadow: var(--ombre); padding: 16px 18px; margin-bottom: 10px; }
.article-cg h2 { font-family: var(--texte); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.article-cg p { margin: 0 0 8px; }
.a-completer { background: var(--attente-pale); color: #6d4700; border-radius: 6px; padding: 0 4px; }
.infos-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 10px; }
.article-cg.sante { border-left: 5px solid var(--alerte); }
.carnet h4 { font-family: var(--texte); font-size: 15px; margin: 12px 0 2px; color: var(--encre-2); }
.carnet-ligne { padding: 7px 0; border-top: 1px solid var(--ligne); font-size: 16px; }
.carnet { margin-bottom: 8px; padding-bottom: 6px; }
.facture-doc { background: #fff; border: 1px solid var(--ligne); border-radius: 6px; padding: 20px 18px; margin-top: 10px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.45; box-shadow: 0 4px 18px rgba(20,40,70,.12); }
.facture-doc .titre-rome { display: block; text-align: center; font-size: clamp(14px, 4.4vw, 30px); letter-spacing: .14em; margin-bottom: 12px; white-space: normal; }
.facture-haut { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.facture-client { min-width: 160px; }
.facture-titre { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid #7f9cbd; padding-bottom: 4px; margin-bottom: 8px; font-size: 16px; }
.facture-table { width: 100%; border-collapse: collapse; }
.facture-table th { background: #7f9cbd; color: #fff; text-align: right; padding: 5px 6px; font-weight: 600; }
.facture-table th:first-child, .facture-table td:first-child { text-align: left; }
.facture-table td { text-align: right; padding: 6px; border-bottom: 1px solid #e3e8ef; vertical-align: top; }
.facture-table .sous-total td, .facture-table .total td { font-weight: 700; }
.facture-table .total td { background: #eef3f9; font-size: 16px; }
.facture-regl { margin: 12px 0; }
.facture-reste { margin-top: 6px; font-weight: 700; color: #7a1f1f; }
.tampon-paye { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; padding: 8px 18px 8px 8px; border-radius: 999px; background: #e8f4ee; color: #2f7d5b; }
.tampon-paye svg { width: 34px; height: 34px; flex: none; padding: 7px; border-radius: 50%; background: #2f7d5b; color: #fff; box-sizing: border-box; }
.tampon-paye b { display: block; font-size: 17px; letter-spacing: .14em; }
.tampon-paye span { display: block; font-size: 12px; color: #335544; }
@media print { body * { visibility: hidden; } .facture-doc, .facture-doc *, .apercu-contrat, .apercu-contrat * { visibility: visible; } .facture-doc, .apercu-contrat { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: 0; margin: 0; }
  /* Couleurs gardées même sans « graphiques d'arrière-plan » : sinon le titre en dégradé disparaît */
  .facture-doc, .facture-doc *, .apercu-contrat, .apercu-contrat * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Fiche : petits formulaires « Reçu » et date d'un paiement reçu */
.paiement-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.paiement input[type=date] { font: inherit; font-size: 15px; padding: 4px 6px; border: 1px solid #c4d2e1; border-radius: 8px; }
/* Paiement en plusieurs fois : versements notés les uns sous les autres, puis le montant qui reste */
.paiement .versements { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.paiement input.montant-recu { font: inherit; font-size: 15px; width: 6.5em; padding: 5px 8px; border: 1px solid #c4d2e1; border-radius: 8px; }
@media (max-width: 700px) { .entete, .suivi-tete { top: 0; } }
.choix-planning { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.choix-planning .bouton[aria-current] { cursor: default; }

/* Page « Ménage » : texte de 16 px, lignes de 32 px (15 à 18 à l'écran d'un téléphone, demande de Pascale), faciles à toucher */
.menage-compte { margin: 6px 0 2px; font-size: 17px; }
.menage-rub h3, .menage-faites h3 { font-family: var(--texte); font-size: 15px; margin: 10px 0 3px; color: var(--bleu-fonce); text-transform: uppercase; letter-spacing: .04em; }
.menage-rub ul, .menage-faites ul { list-style: none; margin: 0; padding: 0; }
.menage-ligne { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 32px; padding: 2px 10px; margin: 0 0 2px; background: var(--papier); border: 1px solid var(--ligne); border-radius: 10px; font: inherit; font-size: 16px; line-height: 1.2; text-align: left; color: var(--encre); cursor: pointer; }
.menage-ligne .coche { flex: none; width: 22px; height: 22px; border: 2px solid #8aa0b8; border-radius: 6px; background: #fff; }
.menage-ligne[aria-pressed="true"] { background: #f1f5f9; color: #6b7a8a; }
.menage-ligne[aria-pressed="true"] .texte { text-decoration: line-through; }
.menage-ligne[aria-pressed="true"] .coche { border-color: var(--bleu); background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.menage-fini { background: #eaf6ee; border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-weight: 600; }
.menage-travaux .inv-ligne span { font-size: 16px; }

/* Menu de la page de suivi : onglets sur grand écran, bouton « Menu » déroulant sur téléphone (demande de Pascale, 2026-10-28) */
.menu-tel { display: none; margin-left: auto; position: relative; }
.menu-tel summary { list-style: none; cursor: pointer; font-weight: 700; padding: 6px 12px; border-radius: 10px; background: var(--bleu); color: #fff; }
.menu-tel summary::-webkit-details-marker { display: none; }
.menu-tel summary::after { content: " ▾"; }
.menu-tel[open] summary::after { content: " ▴"; }
.menu-tel nav { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; background: var(--papier); border: 1px solid var(--ligne); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 4px; display: flex; flex-direction: column; }
.menu-tel nav a { text-decoration: none; color: var(--encre-2); font-weight: 700; padding: 10px 12px; border-radius: 8px; }
.menu-tel nav a[aria-current="true"] { background: var(--bleu); color: #fff; }
@media (max-width: 700px) {
  .suivi-tete { position: static; }
  .suivi-tete .enveloppe { min-height: 0; flex-wrap: nowrap; }
  .suivi-tete .onglets { display: none; }
  .menu-tel { display: block; }
}
.travaux-liste h3 { margin: 16px 0 4px; font-size: 18px; }
/* Page Ménage : les quatre listes sur une seule rangée pour garder la place aux lignes (téléphone) */
#menage .choix-logement { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
#menage .choix-logement a { padding: 6px 2px; font-size: 14px; line-height: 1.2; }
#menage .choix-logement small { display: block; }

/* Page « Finances » : une dépense = une ligne qui s'ouvre pour se corriger */
.mois-nav { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 4px; }
.mois-nav a { padding: 8px 16px; border-radius: 10px; background: var(--bleu); color: #fff; text-decoration: none; font-weight: 700; }
.finances-ligne { border-top: 1px solid var(--ligne); }
.finances-ligne summary { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; cursor: pointer; list-style: none; }
.finances-ligne summary::-webkit-details-marker { display: none; }
.finances-ligne .finances-resume { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; }
a.finances-ligne { display: block; color: inherit; text-decoration: none; }
.finances-ligne .fl-date { flex: 0 0 52px; color: var(--encre-3); font-size: 15px; }
.finances-ligne .fl-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.finances-ligne .fl-montant { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
.finances-ligne form { padding: 4px 0 12px; }
.finances-classer { padding: 10px 0; border-top: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 6px; }
.finances-classer select { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid #c4d2e1; border-radius: 10px; background: #fff; max-width: 100%; }
.finances-classer .fc-texte { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.finances-classer .fc-texte b { flex: 1 1 140px; overflow-wrap: anywhere; }
.finances-aller { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--ligne); }
.finances-aller b { flex: 1 0 100%; }
.finances-aller select { font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid #c4d2e1; border-radius: 10px; background: #fff; }
.inv-ligne select { font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid #c4d2e1; border-radius: 8px; background: #fff; max-width: 100%; }

/* Finances : trois chiffres et tableau des douze mois */
.finances-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 10px 0; }
.finances-chiffres > div { background: var(--carte, #fff); border: 1px solid #ddd; border-radius: 10px; padding: 8px 10px; }
.finances-chiffres small { display: block; color: #666; font-size: 13px; }
.finances-chiffres b { font-size: 18px; }
.negatif, .negatif b { color: #b3261e; }
.finances-tab { display: grid; grid-template-columns: 0.8fr 1.1fr 1.1fr 1.1fr 1.2fr; gap: 4px; padding: 9px 0; border-top: 1px solid #e5e5e5; font-size: 14px; text-decoration: none; color: inherit; text-align: right; }
.finances-tab > :first-child { text-align: left; }
.finances-tete { font-weight: 700; border-top: 0; font-size: 13px; }

.releve-ligne { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--trait, #ddd); }
.releve-ligne select { grid-column: 2 / 4; }
.releve-coche input { width: 22px; height: 22px; }
.releve-doublon { display: block; color: #8a5a00; }

.finances-outils { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.finances-outils a[aria-current="true"] { background: #eef5ff; border-color: #2d5fa6; }
/* Finances : récapitulatif annuel (tableau mensuel qui défile de côté, mois fixe à gauche) */
.recap-defile { overflow-x: auto; margin: 6px -16px 0; padding: 0 16px; }
.recap-tab { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.recap-tab th, .recap-tab td { padding: 9px 8px; border-bottom: 1px solid #e5e5e5; white-space: nowrap; }
.recap-tab thead th { font-size: 13px; border-bottom: 2px solid #999; }
.recap-tab th:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; }
.recap-tab a { font-weight: 700; }
.recap-tab .recap-ca { background: #dbeafe; }
.recap-tab .recap-cout { background: #fde0dd; }
.recap-tab .recap-benef { background: #e9defa; }
.recap-tab .negatif { color: #b3261e; font-weight: 700; }
.recap-total th, .recap-total td { font-weight: 700; border-top: 2px solid #999; }
.recap-evol th, .recap-evol td { font-size: 13px; font-weight: 700; }

/* Accès de François : lecture seule, sans formulaire ni saisie */
[data-lecture] form, [data-lecture] .fiche-carte, [data-lecture] .finances-outils, [data-lecture] #nouvelle-recette, [data-lecture] #nouvelle-depense { display: none; }

/* Prévisionnel du récapitulatif annuel : lignes hachurées (le prévu se distingue du validé) */
.recap-tab .recap-prevu th, .recap-tab .recap-prevu td { background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.07) 0 5px, transparent 5px 10px); font-style: italic; color: #555; font-weight: 400; }
.prevu-gestes { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.prevu-geste summary { list-style: none; cursor: pointer; }
.prevu-geste summary::-webkit-details-marker { display: none; }
.prevu-geste[open] { flex: 1 1 100%; }
.prevu-geste form { margin-top: 8px; padding: 10px; border: 1px solid var(--ligne); border-radius: 8px; }
.recap-pastille { display: inline-block; width: 22px; height: 12px; vertical-align: middle; border: 1px solid #999; background: #fff repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0 3px, transparent 3px 6px); }