/* =========================================================================
   1Contact — CHARTE BLEUE-LÉGÈRETÉ
   Espace 2, version 3 · 01.08.2026 · décision Maia

   Cette feuille est posée PAR-DESSUS le site public actuel. Elle ne le refait
   pas : elle l'habille. Le squelette, les pages et les textes restent ceux
   d'app.1contact.ch — on change la couleur, la typographie, l'air entre les
   blocs, et on répare le téléphone.

   Palette, et rien d'autre :
     bleu    #2563EB   boutons, liens, titres de panneau
     blanc   #FFFFFF   fond dominant
     gris    #F4F5F6   alternance et encarts
     encre   #2B2E33   texte
   Le vert #75cd78 et #7ad61d a entièrement disparu.
   ========================================================================= */

:root{
  --accent:#2563EB;
  --accent-h:#1D4FD7;
  --accent-soft:#EFF4FE;
  --ink:#2B2E33;
  --ink-soft:#5B6472;
  --paper:#FFFFFF;
  --panel:#F4F5F6;
  --line:#E6E8EA;
  --rayon:10px;
  --ombre:0 1px 2px rgba(30,34,40,.05), 0 8px 24px rgba(30,34,40,.07);
  --ombre-fine:0 1px 2px rgba(30,34,40,.06);
  --serif:'Spectral', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------------------------------------------------------------- TYPOGRAPHIE
   Khand était une police étroite, chargée depuis Google. Elle est remplacée
   par Inter pour le texte et Spectral pour les titres — les deux servies par
   notre propre serveur. */
a, body, button, html, input, select, textarea,
.button, .large-button, .app-bar, .footer{
  font-family:var(--sans);
}
body{
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.2;
  color:var(--ink);
  letter-spacing:-.01em;
  text-wrap:balance;
}
h1{font-size:clamp(28px,5vw,42px);margin:0 0 .35em;}
h2{font-size:clamp(23px,3.6vw,31px);margin:1.4em 0 .4em;}
h3{font-size:clamp(19px,2.6vw,23px);margin:1.2em 0 .35em;}
h4{font-size:18px;}
p{margin:0 0 1em;max-width:68ch;}
a{color:var(--accent);font-weight:500;text-decoration:none;}
a:visited{color:var(--accent);}
a:hover{color:var(--accent-h);text-decoration:underline;text-underline-offset:2px;}
hr{border:0;height:1px;background:var(--line);margin:2em 0;}
strong,b{color:var(--ink);font-weight:600;}

/* ------------------------------------------------------- LE VERT DISPARAÎT
   Metro et onecontact posaient du #75cd78 et du #7ad61d à une dizaine
   d'endroits. Tout passe au bleu d'accent. */
.bg-lightGreen{background-color:var(--accent)!important;color:#fff!important;}
.fg-lightGreen{color:var(--accent)!important;}
.bg-green,.bg-darkGreen,.bg-teal{background-color:var(--accent)!important;}
.fg-green,.fg-darkGreen,.fg-teal{color:var(--accent)!important;}
.panel>.heading{background-color:var(--accent);color:#fff;}
.panel>.heading>.title{color:#fff;font-family:var(--serif);font-size:19px;font-weight:600;}
.large-button{background-color:var(--accent);text-shadow:none;border:none;}
.large-button:hover{background-color:var(--accent-h);border:none;}
.large-button.active{background-color:var(--ink)!important;}
.pagination>.item.active,.pagination>.item.current{background-color:var(--accent);color:#fff;}
.dialog.success{background-color:var(--accent);color:#fff;}
.dialog.success .dialog-close-button{color:var(--accent);}
.switch input:checked~.check{background-color:var(--accent);}
.accordion>.frame>.heading:before,
.accordion>.frame.active>.heading:before{border-bottom-color:var(--accent);}

/* -------------------------------------------------------------- LES PANNEAUX
   Le fond gris #e6e6e6 des contenus était lourd. Blanc, filet fin, angles
   adoucis : le même bloc, mais qui respire. */
.panel{
  border:1px solid var(--line);
  border-radius:var(--rayon);
  overflow:hidden;
  box-shadow:var(--ombre-fine);
  background:var(--paper);
}
.panel>.heading{border:none;padding:.85rem 1.15rem;}
.panel>.content{background-color:var(--paper);color:var(--ink);padding:1.15rem!important;}
.box4{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--ombre);
  padding:2rem!important;
}

/* --------------------------------------------------------------- LES BOUTONS */
.button{
  font-family:var(--sans);
  font-weight:600;
  font-size:15px;
  color:var(--accent);
  background:var(--paper);
  border:1.6px solid var(--line);
  border-radius:8px;
  padding:0 1.15rem;
  height:auto;
  min-height:44px;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s,border-color .15s,color .15s;
}
.button:hover{border-color:var(--accent);color:var(--accent-h);background:var(--accent-soft);}
.button.bg-lightGreen,.button.bg-lightGreen:visited{
  background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;
}
.button.bg-lightGreen:hover{background:var(--accent-h)!important;border-color:var(--accent-h)!important;}
.large-button{
  font-family:var(--sans);font-weight:600;font-size:16px;
  border-radius:8px;min-height:48px;height:auto;
  padding:.75rem 2rem;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--ombre-fine);
}

/* ------------------------------------------------------------ LA BARRE DU HAUT
   Elle était grise, encombrée, et se cassait en deux lignes sur un téléphone.
   Blanche, un filet en bas, et une disposition qui tient à 320 px. */
.app-bar.onecontact{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  color:var(--ink);
  border-bottom:1px solid var(--line);
  box-shadow:none;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2px 4px;
  padding:6px 14px;
  min-height:60px;
}
.app-bar.onecontact a{color:var(--ink);font-weight:500;}
.app-bar.onecontact a:hover{color:var(--accent);text-decoration:none;}










/* ------------------------------------------------------------- LE PIED DE PAGE */
.footer{
  background:var(--panel);
  color:var(--ink-soft);
  border-top:1px solid var(--line);
  box-shadow:none;
  height:auto;
  padding:1.5rem 1rem 2rem;
  position:static;
}
.footer a{color:var(--accent);font-weight:500;}

/* --------------------------------------------------------------- LES TABLEAUX */
.table thead th,.table thead td{color:var(--ink);font-weight:600;}
.table thead{border-bottom:2px solid var(--line);}
.table.striped tbody tr:nth-child(odd){background:var(--panel);}

/* ------------------------------------------------------------------ LES CHAMPS */
.input-control input,.input-control textarea,.input-control select,
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  font-family:var(--sans);font-size:16px;   /* 16 px : en dessous, Safari zoome tout seul */
  border-radius:8px;border:1px solid #cfd3d6;color:var(--ink);
}
.input-control input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none;}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:4px;}

/* ================================================================ TÉLÉPHONE
   Vérifié à 375 px puis à 320 px. */
html,body{overflow-x:hidden;max-width:100%;}
img{max-width:100%;height:auto;}

@media screen and (max-width:640px){
  /* Le logo était masqué sur téléphone : on le remet, c'est le repère. */
  
  .app-bar.onecontact{padding:6px 10px;min-height:56px;}
  
  .box4{padding:1.25rem!important;border-radius:12px;}
  .container{padding:0!important;display:block;width:100%;}
  .grid .row.cells2>.cell{width:100%!important;margin:0 0 .75rem;}
  h1{font-size:27px;}
  h2{font-size:22px;}
  .large-button{width:100%;padding:.75rem 1rem;font-size:15px;}
  .app-bar-menu>li a,.footer a{min-height:44px;display:inline-flex;align-items:center;}
}

@media screen and (max-width:400px){
  
  .box4{padding:1rem!important;}
  h1{font-size:24px;}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* =========================================================================
   RETOUCHES APRÈS ESSAI À L'ÉCRAN — 01.08.2026
   ========================================================================= */

/* --- Le pied de page recouvrait le contenu ---------------------------------
   L'ancien montage collait le pied en bas par un calage absolu de 8 rem
   (.master réservait la place, .footer s'y posait). Dès que le pied dépasse
   8 rem — ce qui arrive sur un téléphone où tout s'empile — il remonte
   par-dessus le texte. On revient à un pied de page normal, dans le flux. */
body .master{padding-bottom:0!important;min-height:0!important;}
body .footer,
body div.footer{
  position:static!important;
  height:auto!important;
  bottom:auto!important;
  margin-top:2.5rem;
}
body .footer-content{text-align:left;max-width:1120px;margin:0 auto;}

/* --- L'ordre de la navigation ---------------------------------------------
   L'ancienne barre plaçait ses entrées de droite à gauche. En les alignant
   normalement, elles se retrouvaient dans le désordre. On rétablit l'ordre
   de lecture : d'abord la porte « je cherche », puis « j'offre ». */
.app-bar.onecontact{justify-content:flex-end;}






/* --- Le bouton d'action principal, toujours visible ------------------------ */
.app-bar .btn-mandat{
  order:4;background:var(--accent);color:#fff!important;font-weight:600;
  border-radius:8px;padding:0 1rem!important;min-height:42px;
}
.app-bar .btn-mandat:hover{background:var(--accent-h);color:#fff!important;}

@media screen and (max-width:640px){
  .app-bar.onecontact{justify-content:space-between;row-gap:4px;}
  
  body .footer{margin-top:1.5rem;padding:1.25rem 1rem 2rem;}
}

/* =========================================================================
   LA PAGE « CRÉER UN MANDAT »
   Le prix annoncé en tête, le choix des deux chemins, le récapitulatif avant
   paiement et la suite du parcours. Aucune couleur nouvelle.
   ========================================================================= */

.essai-note{
  background:#FFF7E6;border:1px solid #F0C36D;color:#7A4E00;border-radius:8px;
  padding:.7rem 1rem;font-size:14px;font-weight:600;margin-bottom:1.5rem;text-align:center;
}
.chapeau{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:60ch;margin-bottom:1.75rem;}
.aide{font-size:13.5px;line-height:1.55;color:var(--ink-soft);}

/* --- Ce que coûte un mandat --- */
.mandat-prix{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--paper);box-shadow:var(--ombre-fine);margin-bottom:1rem;
}
.mp-ligne{display:grid;grid-template-columns:1fr auto;gap:2px 18px;padding:1.15rem 1.35rem;align-items:baseline;}
.mp-ligne + .mp-ligne{border-top:1px solid var(--line);}
.mp-quand{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
.mp-combien{
  grid-row:1/3;grid-column:2;font-family:var(--serif);font-weight:600;
  font-size:clamp(24px,3.4vw,32px);color:var(--accent);white-space:nowrap;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.mp-quoi{font-size:14.5px;line-height:1.55;color:var(--ink-soft);max-width:52ch;margin:0;}
.mp-quoi b{color:var(--ink);}
.mp-donne{padding:1.1rem 1.35rem;background:var(--accent-soft);border-top:1px solid var(--line);}
.mp-donne-t{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.65rem;}
.mp-donne ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.mp-donne li{display:flex;gap:10px;font-size:14.5px;line-height:1.5;color:var(--ink);text-align:left;}
.mp-donne li::before{content:"✓";color:var(--accent);font-weight:700;flex:none;}

/* --- La sortie gratuite --- */
.mandat-rappel{
  display:flex;flex-wrap:wrap;gap:.9rem 1.25rem;align-items:center;justify-content:space-between;
  padding:1rem 1.35rem;border:1px dashed var(--accent);border-radius:12px;
  background:var(--paper);margin-bottom:2rem;
}
.mandat-rappel b{display:block;font-size:15.5px;color:var(--ink);}
.mandat-rappel span{font-size:14px;color:var(--ink-soft);line-height:1.5;}
.mandat-rappel .button{flex:none;}

/* --- Les étapes du formulaire --- */
#mandat-essai{display:flex;flex-direction:column;gap:1.15rem;}
.fs{border:1px solid var(--line);border-radius:12px;padding:1.35rem;background:var(--paper);}
.fs h3{margin:0 0 .9rem;font-size:19px;}
.champ{display:flex;flex-direction:column;gap:.35rem;margin:.9rem 0;}
.champ label{font-weight:600;font-size:14px;color:var(--ink);}
.champ input,.champ select,.champ textarea{width:100%;padding:.7rem .85rem;min-height:46px;}
.depot{border:2px dashed #cfd3d6;border-radius:10px;padding:1.4rem;text-align:center;color:var(--ink-soft);font-size:14.5px;}
.paiement{background:var(--panel);border-radius:8px;padding:.9rem 1rem;font-size:14.5px;line-height:1.6;color:var(--ink);margin:0;}

/* --- Le choix des deux chemins --- */
.choix2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}
.choix{display:block;cursor:pointer;}
.choix input{position:absolute;opacity:0;width:0;height:0;}
.choix-in{
  display:flex;flex-direction:column;gap:.4rem;height:100%;padding:1.1rem;
  border:1.6px solid var(--line);border-radius:12px;background:var(--paper);
  transition:border-color .15s,background .15s;
}
.choix:hover .choix-in{border-color:var(--accent);}
.choix input:checked + .choix-in{border-color:var(--accent);background:var(--accent-soft);}
.choix input:focus-visible + .choix-in{outline:2.5px solid var(--accent);outline-offset:2px;}
.choix-t{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;}
.choix-tag{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:999px;padding:3px 9px;}
.choix-d{font-size:14px;line-height:1.55;color:var(--ink-soft);}
.choix-tps{margin-top:auto;padding-top:.35rem;font-size:13px;font-weight:600;color:var(--accent);}

/* --- Protection des données, au moment du dépôt --- */
.mp-rgpd{
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);background:var(--panel);
  border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:.8rem 1rem;margin:0 0 .9rem;
}

/* --- Récapitulatif avant paiement --- */
.mp-recap{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:1rem;}
.mp-recap-t{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);background:var(--panel);padding:.75rem 1rem;border-bottom:1px solid var(--line);}
.mp-recap-l{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink);}
.mp-recap-l b{font-family:var(--serif);font-size:17px;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums;}
.mp-recap-n{padding:.8rem 1rem;font-size:13.5px;line-height:1.6;color:var(--ink-soft);background:var(--panel);margin:0;}
.mp-recap-n b{color:var(--ink);}

/* --- Ce qui se passe ensuite --- */
.mp-suite{padding:1.35rem;border:1px solid var(--line);border-radius:12px;background:var(--panel);}
.mp-suite-t{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.8rem;}
.mp-suite ol{margin:0;padding-left:1.4rem;display:flex;flex-direction:column;gap:.65rem;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
.mp-suite ol b{color:var(--ink);}
.mp-suite ol::marker{color:var(--accent);}
.mp-suite-n{margin:.9rem 0 0;padding-top:.8rem;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--ink-soft);}
.fin-essai{margin-top:1rem;background:var(--accent-soft);border:1px solid var(--accent);color:#17408F;border-radius:8px;padding:.9rem 1rem;font-size:14.5px;line-height:1.6;}

/* --- Ordre des étapes : le dépôt passe au début ou à la fin --- */
#bloc-documents{order:0;}
#bloc-signature{order:10;}
#mandat-essai.chemin-main #bloc-documents{order:9;}

/* --- Le champ piège : invisible pour une personne, tentant pour un robot --- */
.piege{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}

/* --- La fenêtre « être rappelée » --- */
.dlg{border:none;border-radius:14px;padding:0;max-width:26rem;width:calc(100% - 2rem);box-shadow:0 30px 80px rgba(0,0,0,.3);color:var(--ink);}
.dlg::backdrop{background:rgba(30,34,40,.55);}
.dlg-in{padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;}
.dlg-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0;}

@media screen and (max-width:640px){
  .choix2{grid-template-columns:1fr;}
  .mp-ligne{grid-template-columns:1fr;}
  .mp-combien{grid-row:auto;grid-column:auto;}
  .mandat-rappel{flex-direction:column;align-items:stretch;}
  .mandat-rappel .button{width:100%;}
  .dlg-actions .large-button,.dlg-actions .button{width:100%;}
}

/* --- [EN-TÊTE TÉLÉPHONE] Deux rangées nettes au lieu de trois désordonnées :
   la marque et l'action principale en haut, les trois entrées en dessous,
   à parts égales. Vérifié à 375 px puis à 320 px. --- */
@media screen and (max-width:640px){
  .app-bar.onecontact{padding:6px 8px 4px;gap:0;justify-content:space-between;}
  
  .app-bar .btn-mandat{order:1;flex:0 0 auto;font-size:14px;padding:0 .85rem!important;min-height:40px;}
  
  
}
@media screen and (max-width:360px){
  .app-bar .btn-mandat{font-size:13px;padding:0 .6rem!important;}
  
}

/* --- [EN-TÊTE TÉLÉPHONE — rupture de ligne franche]
   Sans rupture, les entrées remontaient se coller à côté du bouton et
   l'ordre devenait illisible. Un séparateur invisible force deux rangées :
   marque + action principale, puis les trois entrées. --- */
@media screen and (max-width:640px){
  .app-bar.onecontact::before{
    content:"";order:2;flex:0 0 100%;height:0;margin:0;padding:0;
  }
  
  .app-bar .btn-mandat{order:1;}
  
  
  
  
}

/* =========================================================================
   L'EN-TÊTE PUBLIC — structure simple, la même sur ordinateur et téléphone
     [marque]   Je recherche · J'offre · Nos services   [Créer un mandat]
   ========================================================================= */
.app-bar.onecontact{
  position:sticky;top:0;z-index:1030;
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);box-shadow:none;
  padding:.6rem clamp(.75rem,3vw,2rem);min-height:64px;
}
.marque{display:inline-flex;align-items:center;flex:0 0 auto;min-height:44px;padding:0;}
.marque img{height:2.2rem;width:auto;display:block;}
.nav-liens{
  display:flex;align-items:center;flex-wrap:wrap;gap:.15rem .35rem;
  flex:1 1 auto;justify-content:center;
}
.nav-liens a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.35rem .7rem;border-radius:8px;
  color:var(--ink);font-weight:500;font-size:14.5px;line-height:1.25;text-align:center;
  transition:background .15s,color .15s;
}
.nav-liens a:hover,.nav-liens a:focus-visible{background:var(--accent-soft);color:var(--accent);text-decoration:none;}
.btn-mandat{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 1.1rem;border-radius:8px;
  background:var(--accent);color:#fff!important;font-weight:600;font-size:14.5px;
  box-shadow:var(--ombre-fine);transition:background .15s;white-space:nowrap;
}
.btn-mandat:hover{background:var(--accent-h);color:#fff!important;text-decoration:none;}

@media screen and (max-width:640px){
  /* Deux rangées franches : marque + action en haut, les trois entrées dessous. */
  .app-bar.onecontact{padding:.5rem .75rem;gap:.35rem;min-height:0;}
  .marque{order:0;}
  .marque img{height:1.9rem;}
  .btn-mandat{order:1;margin-left:auto;font-size:14px;padding:0 .9rem;}
  .nav-liens{order:2;flex:0 0 100%;justify-content:space-between;gap:0;
    border-top:1px solid var(--line);padding-top:.35rem;margin-top:.15rem;}
  .nav-liens a{flex:1 1 0;font-size:12.5px;padding:.4rem .15rem;min-height:42px;}
}
@media screen and (max-width:360px){
  .btn-mandat{font-size:13px;padding:0 .7rem;}
  .nav-liens a{font-size:11.5px;}
}

/* --- Le vide au-dessus de l'en-tête : une marge héritée de l'ancien gabarit --- */
.app-bar.onecontact{margin:0!important;}
body>.master{margin-top:0!important;padding-top:0!important;}
.master>.app-bar:first-child{margin-top:0!important;}

/* --- L'ancienne barre était flottante : un script décalait tout le contenu
   vers le bas de sa hauteur pour ne pas passer dessous. La nouvelle barre
   reste dans le flux (elle colle en haut au défilement), ce décalage n'a
   donc plus lieu d'être — il laissait un vide au-dessus du logo. --- */
body>.master{top:0!important;}

/* --- L'ancien gabarit masquait le logo sous 640 px. Sur un téléphone, c'est
   pourtant le seul repère qui dit où l'on est : on le remet. --- */
#logo-img,.marque{display:inline-flex!important;align-items:center;}
.marque img{height:2.2rem;width:auto;display:block!important;max-width:none;}
@media screen and (max-width:640px){ .marque img{height:1.9rem;} }

/* --- Le titre de page. Cinq pages publiques n'en avaient aucun : ni un
   moteur ni un lecteur d'écran ne savait de quoi la page parlait. --- */
.titre-page{
  max-width:1120px;margin:1.75rem auto .5rem;padding:0 clamp(1rem,4vw,2rem);
  text-align:left;font-size:clamp(26px,4.5vw,38px);
}