/* ==================================================================
   NACRE — AFFICHAGE ORDINATEUR (écrans de 1024 px et plus)
   Demande d'Alexandre (06.11) : « la barre sur le côté, et tout organisé pour remplir la page ; ne touche vraiment
   pas la version téléphone ; les procédures et la destination des boutons ne changent absolument pas ».
   • Ce fichier est chargé avec media="(min-width:1024px)" : un téléphone (ou une tablette en portrait) ne l'applique
     JAMAIS. Il ne contient que de la mise en page : aucun bouton, lien ou texte n'est ajouté, retiré ou déplacé
     dans le code ; seule leur place à l'écran change.
   • Pages : application (index.html), espace agence, location, partenaire, devenir laveur, entreprise, conditions.
   ================================================================== */
:root{--barre:108px;--large:1200px}

/* ---------- 1. la barre d'onglets devient une barre latérale (application, agence, entreprise) ----------
   Modèle choisi par Alexandre (vidéo du 06.11) : une colonne noire arrondie qui flotte à gauche, le logo en haut,
   des icônes seules ; l'onglet ouvert est dans un rond nacré, avec une petite encoche sur le bord ; au survol, le nom
   de l'onglet apparaît dans une bulle noire à droite. Les boutons et leur texte restent dans le code (lecteurs d'écran). */
body.avec-tabs,body:has(.tabs .tab){padding-left:var(--barre);padding-bottom:56px}
body.avec-tabs.avec-action,body.avec-action{padding-bottom:150px}
.tabs{top:16px;bottom:16px;left:16px;right:auto;width:76px;padding:22px 0 18px;pointer-events:auto;
  background:#0A0A0A;border-radius:38px;display:flex;flex-direction:column;align-items:center;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.tabs:empty{display:none}
.tabs::before{content:"";display:block;flex:none;width:34px;height:34px;margin:0 0 34px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='38' fill='none' stroke='%23FFFFFF' stroke-width='8'/%3E%3Cpath d='M27.4 36.2A27 27 0 0 1 46.6 23.2' fill='none' stroke='%23FFFFFF' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.tabs-in{flex-direction:column;align-items:center;height:auto;max-width:none;width:100%;margin:0;gap:12px;filter:none;border-radius:0;
  background:none;border:0;box-shadow:none}
.tabs-liquide,.tabs-goutte,.tabs-point{display:none}
/* chaque onglet : un rond de 48 px ; son nom (déjà dans le bouton) sert de bulle au survol */
.tabs button{flex:none;display:grid;grid-template-columns:48px max-content;column-gap:34px;align-items:center;justify-items:center;justify-content:start;align-content:center;
  width:48px;height:48px;min-width:48px;padding:0;margin:0;border-radius:50%;font-size:0;font-weight:500;letter-spacing:0;
  color:#8E8E93;background:transparent;overflow:visible;white-space:nowrap;isolation:isolate;text-overflow:clip;
  transition:background-color .2s,color .2s}
.tabs button > svg{grid-column:1;grid-row:1}
.tabs button > span:not(.plus){grid-column:2;grid-row:1;font-size:inherit;color:inherit}
/* la bulle : une case sous le nom (même colonne, donc même largeur), remontée derrière lui */
.tabs button{grid-template-rows:48px 0}
.tabs button::before{content:"";grid-column:2;grid-row:2;justify-self:stretch;align-self:start;height:30px;margin:-42px -13px 0;
  background:#0A0A0A;border-radius:10px;z-index:-1;opacity:0;pointer-events:none;transition:opacity .15s;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.tabs button:hover,.tabs button:focus-visible{font-size:13px;color:#FFFFFF}
.tabs button:hover::before,.tabs button:focus-visible::before{opacity:1}
.tabs button:hover:not([aria-pressed=true]):not([aria-current=page]):not(.tab-creer){background:rgba(255,255,255,.09)}
.tabs svg,.tabs button[aria-pressed=true] svg,.tabs button[aria-current=page] svg{width:22px;height:22px;transform:none}
/* l'onglet ouvert : rond nacré + encoche noire sur le bord de la barre */
.tabs button[aria-pressed=true]:not(.tab-creer),.tabs button[aria-current=page]{color:#FFFFFF;
  background:radial-gradient(circle at 30% 22%,#FFFFFF 0%,#F1F0F7 45%,#DDE5F3 80%,#EADCEB 100%);
  box-shadow:38px 0 0 -16px #0A0A0A}
.tabs button[aria-pressed=true]:not(.tab-creer) svg,.tabs button[aria-current=page] svg{stroke:#0A0A0A;fill:rgba(0,0,0,.10)}
/* point rouge « à faire » : contour noir, comme la barre */
.tabs [data-onglet].a-faire::after{top:7px;left:calc(50% + 7px);box-shadow:0 0 0 2px #0A0A0A}
/* « + Créer » (laveur) et « + Ajouter » (agence) : un rond blanc, juste sous le logo */
.tabs .tab-creer{order:-1;margin-bottom:10px;background:#FFFFFF;color:#FFFFFF}
.tabs .tab-creer:hover{background:#E9E9EC}
.tabs .tab-creer .plus{grid-column:1;grid-row:1;width:auto;height:auto;background:none;border-radius:0;display:flex}
.tabs .tab-creer .plus svg{stroke:#0A0A0A;width:20px;height:20px}

/* ---------- 2. la largeur : en-tête, contenu, barre d'action ---------- */
.haut-in{max-width:var(--large);padding-left:48px;padding-right:48px}
.wrap{max-width:var(--large);padding-left:48px;padding-right:48px}
.entete p,.accueil-sous,.haut-pourquoi{max-width:68ch}
.action{bottom:24px}
.action.seule{bottom:24px}
body.avec-tabs .action{left:var(--barre)}
.action-in{max-width:760px}
#alerte,#alerte-a{bottom:40px}

/* ---------- 3. accueil ---------- */
.accueil-haut{padding-top:40px}
.accueil-titre{font-size:56px;margin-top:26px}
.accueil-sous{font-size:18px}
.pros-choix.duo{gap:24px}
.pros-tuile.compact .pros-vis{aspect-ratio:16/8}
.pros-tuile.compact .pros-txt{padding:20px 22px 22px}
.pros-tuile.compact .pros-txt b{font-size:22px}
.pros-tuile.compact .pros-go{font-size:15px}
.pros-tuile.compact .pros-ico{width:48px;height:48px;border-radius:14px;top:-26px;right:18px}
.pros-tuile.compact .pros-ico svg{width:25px;height:25px}
.pros-vis{height:260px}
.tuiles{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:16px}
/* accueil connecté, espace laveur, espace agence : deux colonnes. À gauche la carte Nacre et ses raccourcis,
   à droite le reste de l'écran ; ce qui précède la carte reste sur toute la largeur. Chaque colonne garde
   l'ordre de l'écran téléphone (mise en colonnes CSS : aucun élément n'est déplacé dans le code). */
@media (min-width:1280px){
.wrap:has(> .carte-nacre){columns:2;column-gap:56px}
.wrap:has(> .carte-nacre) > *{break-inside:avoid}
.wrap:has(> .carte-nacre) > :not(.salut,.carte-nacre,.c-actions,.c-sous):not(.carte-nacre ~ *){column-span:all}
.wrap:has(> .carte-nacre) > .carte-nacre ~ :not(.salut,.carte-nacre,.c-actions,.c-sous):not(.carte-nacre ~ :not(.salut,.carte-nacre,.c-actions,.c-sous) ~ *){
  break-before:column;margin-top:0}
.wrap:has(> .carte-nacre) > .carte-nacre{margin-top:8px}
}
.c-actions{max-width:none}

/* ---------- 4. listes : en grilles qui remplissent la largeur ---------- */
.grille2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.laveurs-rang{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px;overflow:visible;padding:4px 0 14px}
.lv-carte{height:236px;flex:none}
.lv-carte .av-grand{font-size:56px}
.dispo-grille{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.mk-grille{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.mk-specs{grid-template-columns:repeat(4,1fr)}
.bq-grille{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.vit-grille,.grille{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
/* une suite de rangées (menus, formules, réglages) : deux colonnes */
.section:has(> .rangee ~ .rangee){display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:start}
.section:has(> .rangee ~ .rangee) > :not(.rangee){grid-column:1/-1}
.wrap > div:not([class]):has(> .rangee ~ .rangee){display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
/* plusieurs cartes à la suite : deux colonnes */
.wrap:has(> .carte + .carte):not(:has(> .carte-nacre)){display:grid;grid-template-columns:1fr 1fr;column-gap:22px;align-items:start}
.wrap:has(> .carte + .carte):not(:has(> .carte-nacre)) > *{grid-column:1/-1}
.wrap:has(> .carte + .carte):not(:has(> .carte-nacre)) > .carte:has(+ .carte),
.wrap:has(> .carte + .carte):not(:has(> .carte-nacre)) > .carte + .carte{grid-column:auto}
/* formulaire en carte : deux champs par ligne */
.carte:has(> .champ ~ .champ ~ .champ){display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.carte:has(> .champ ~ .champ ~ .champ) > :not(.champ){grid-column:1/-1}

/* liste de réglages (profil de l'agence) : deux colonnes */
.wrap:has(> .rang ~ .rang){display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:start}
.wrap:has(> .rang ~ .rang) > :not(.rang){grid-column:1/-1}

/* ---------- 4 bis. formulaires (fiche agence, ajouter une voiture, réglages…) : le titre à gauche, les champs à droite ---------- */
.wrap:has(> .entete ~ .champ, > .entete ~ div:not([class]) > .champ):not(:has(> .carte-nacre, > .profil-t, > .rang)){
  display:grid;grid-template-columns:minmax(0,360px) minmax(0,680px);justify-content:space-between;column-gap:64px;align-items:start}
.wrap:has(> .entete ~ .champ, > .entete ~ div:not([class]) > .champ):not(:has(> .carte-nacre, > .profil-t, > .rang)) > *{grid-column:2}
.wrap:has(> .entete ~ .champ, > .entete ~ div:not([class]) > .champ):not(:has(> .carte-nacre, > .profil-t, > .rang)) > .entete{
  grid-column:1;grid-row:1/span 40;position:sticky;top:96px}
.wrap:has(> .entete ~ .champ, > .entete ~ div:not([class]) > .champ):not(:has(> .carte-nacre, > .profil-t, > .rang)) > .entete h1{font-size:40px}
/* sur ces écrans, la barre d'action (Continuer, Enregistrer…) se place sous la colonne des champs */
body:has(.wrap > .entete ~ .champ, .wrap > .entete ~ div:not([class]) > .champ):not(:has(.wrap > .carte-nacre, .wrap > .profil-t, .wrap > .rang)) .action-in{
  max-width:none;width:min(680px,100%);margin:0 max(28px,calc((100% - 1160px) / 2 + 28px)) 0 auto}

/* ---------- 4 ter. création de compte et connexion (partenaire, application) : le message à gauche, le formulaire à droite ---------- */
.insc:has(> .insc-haut + .insc-in){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);column-gap:80px;align-items:center;
  padding:56px max(56px,calc((100% - 1160px) / 2))}
.insc:has(> .insc-haut + .insc-in) > .insc-haut{padding:0;text-align:left}
.insc:has(> .insc-haut + .insc-in) .insc-in{max-width:none;margin:0;padding:0}
.insc:has(> .insc-haut + .insc-in) .insc-haut h1{font-size:60px;line-height:1.02}
.insc:has(> .insc-haut + .insc-in) .insc-haut p{max-width:40ch;margin:18px 0 0;font-size:18px}
.insc:has(> .insc-haut + .insc-in) .insc-seg{margin:30px 0 0}
.insc:has(> .insc-haut + .insc-in) .insc-carte{margin-top:0}
.insc:has(> .insc-haut + .insc-in) .insc-retour{position:relative;left:auto;top:auto;display:flex;width:max-content;margin:0 0 28px}

/* ---------- 5. fiches : le profil à gauche, le contenu à droite ---------- */
.wrap:has(> .profil-t){display:grid;grid-template-columns:360px minmax(0,1fr);column-gap:48px;align-items:start}
.wrap:has(> .profil-t) > *{grid-column:2}
.wrap:has(> .profil-t) > .profil-t{grid-column:1;grid-row:1/span 30;position:sticky;top:96px;padding:28px 24px;
  background:#F7F7F8;border-radius:28px}
/* voiture : la photo à gauche, les détails à droite */
.wrap.mk-fiche{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:44px;align-items:start}
.wrap.mk-fiche > *{grid-column:2}
.wrap.mk-fiche > .mk-vis.grand{grid-column:1;grid-row:1/span 30;position:sticky;top:96px;margin-top:8px}

/* ---------- 6. entreprise : même barre (règles du point 1) ; la barre du bas suit ---------- */
body:has(.tabs .tab) .bas-fixe{left:var(--barre)}
.bas-fixe .in{max-width:760px}