/*!
 * Atlas — gestionnaire immobilier. Version 1.85.0.
 * Copyright (c) 2026 Systegon. Tous droits reserves.
 *
 * Ce fichier et son contenu sont protégés par le droit d'auteur
 * (code de la propriété intellectuelle, art. L112-2 et L122-6).
 * Leur reproduction, adaptation ou réutilisation, même partielle,
 * est interdite sans autorisation écrite de Systegon.
 *
 * https://atlas.systegon.com — contact-atlas@systegon.com
 */
/* LES PAGES-GUIDES.
 *
 * Elles répondent à une vraie question avant de proposer quoi que ce soit :
 * quelqu'un qui cherche « modèle de quittance » veut d'abord savoir ce
 * qu'une quittance doit contenir. Le texte prime donc sur la mise en scène —
 * la vitrine garde son décor, mais ici il se fait discret.
 */

.guide-tete h1{font-size:clamp(30px,4.6vw,52px);}
.guide-corps{max-width:760px;}

.guide-bloc{margin-bottom:38px;}
.guide-bloc h2{
  font-size:22px;font-weight:600;margin:0 0 14px;letter-spacing:-.015em;
}
.guide-bloc p{
  margin:0 0 14px;font-size:15.5px;line-height:1.72;color:var(--encre-douce);
}
.guide-bloc b{color:var(--encre);font-weight:600;}

.guide-liste{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px;}
.guide-liste li{
  position:relative;padding-left:22px;
  font-size:15px;line-height:1.65;color:var(--encre-douce);
}
.guide-liste li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;rotate:45deg;background:var(--accent);
}

.guide-note{
  padding:14px 16px;border-radius:var(--r-sm,12px);margin:16px 0 0 !important;
  font-size:14px !important;
  background:var(--accent-sourd);border-left:2px solid var(--accent);
}

/* Le tableau des types de bail : il porte des références de loi, il doit se
   lire comme un tableau et défiler seul sur téléphone. */
.guide-table{
  width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 4px;
  display:block;overflow-x:auto;white-space:nowrap;
}
.guide-table th{
  text-align:left;padding:9px 14px 9px 0;font-weight:600;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
  border-bottom:var(--filet,1px) solid var(--trait);
}
.guide-table td{
  padding:11px 14px 11px 0;border-bottom:var(--filet,1px) solid var(--trait);
  color:var(--encre-douce);
}
.guide-table td:first-child{color:var(--encre);}
.guide-table tr:last-child td{border-bottom:0;}

/* Les questions repliées : une page qui déballe quinze réponses décourage,
   la même page repliée se parcourt en dix secondes. */
.guide-q{
  border:var(--filet,1px) solid var(--trait);border-radius:var(--r-sm,12px);
  margin-bottom:9px;background:rgba(255,255,255,.02);
}
.guide-q summary{
  padding:15px 18px;cursor:pointer;list-style:none;
  font-size:15px;font-weight:500;color:var(--encre);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;
}
.guide-q summary::-webkit-details-marker{display:none;}
.guide-q summary::after{
  content:"+";flex-shrink:0;font-size:19px;font-weight:400;
  color:var(--accent);transition:transform .2s;
}
.guide-q[open] summary::after{transform:rotate(45deg);}
.guide-q p{
  margin:0 !important;padding:0 18px 17px;
  font-size:14.5px;line-height:1.68;color:var(--encre-douce);
}

@media (max-width:640px){
  .guide-bloc{margin-bottom:30px;}
  .guide-bloc h2{font-size:19px;}
  .guide-bloc p,.guide-liste li{font-size:14.5px;}
}

/* ── Le fil d'Ariane ───────────────────────────────────────────────────────
   Quelqu'un qui arrive d'un moteur de recherche atterrit ici sans avoir vu la
   page d'accueil : il lui faut savoir en un coup d'œil où il est tombé et par
   où remonter. Discret, mais présent — et déclaré aussi en données
   structurées, ce qui remplace l'URL brute sous le résultat de recherche. */
.guide-fil{
  max-width:var(--bande, 1180px);margin:0 auto;padding:18px 22px 0;
  font-size:13px;color:var(--encre-douce);
}
.guide-fil a{
  color:var(--encre-douce);text-decoration:none;transition:color .2s;
  /* UNE CIBLE ATTEIGNABLE AU DOIGT. Le lien nu faisait 17 px de haut : la
     hauteur de sa ligne de texte. Sur un téléphone, c'est une cible qu'on
     rate une fois sur deux — et le fil d'Ariane est précisément ce qu'on
     touche en arrivant d'un moteur de recherche, pour savoir où l'on est.
     Le padding vertical est compensé par une marge négative, sinon la ligne
     du fil se met à peser trois fois sa hauteur utile. */
  display:inline-block;padding:11px 8px;margin:-11px -4px;min-width:24px;text-align:center;
}
.guide-fil a:hover{color:var(--accent);}
.guide-fil span[aria-hidden]{margin:0 5px;opacity:.5;}
.guide-fil [aria-current]{color:var(--encre);}

/* ── Les autres modèles ────────────────────────────────────────────────────
   Un maillage qui sert d'abord le visiteur : qui prépare un bail aura besoin
   d'un état des lieux la semaine suivante. C'est parce qu'ils sont utiles que
   ces liens comptent aussi pour le référencement, et non l'inverse. */
.guide-voisins{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px;
}
.guide-voisins a{
  display:block;padding:18px 20px;border-radius:var(--r-md,16px);text-decoration:none;
  background:rgba(255,255,255,.035);border:var(--filet,1px) solid var(--trait);
  transition:border-color .2s, background .2s, transform .2s;
}
.guide-voisins a:hover{transform:translateY(-2px);border-color:var(--accent-ombre);}
.guide-voisins b{
  display:block;font-size:15.5px;font-weight:600;color:var(--encre);margin-bottom:5px;
}
.guide-voisins span{display:block;font-size:13px;line-height:1.5;color:var(--encre-douce);}