/* Espace Pilotis — feuille de style du module (chargée par les seules pages de l'espace).
 * Tout est préfixé « pe- » pour ne rien redéfinir du thème Dolibarr. Palette Pilotis :
 * lagon #0e5a6b, turquoise #18a7bd, bois #a9764a. Aucune ressource externe : les
 * instances n'appellent pas de CDN. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/fraunces-latin.woff2') format('woff2')}
.pe{--pe-lagon:#0e5a6b;--pe-lagon-f:#0a4552;--pe-turq:#18a7bd;--pe-bois:#a9764a;--pe-bois-f:#7c5433;
	--pe-encre:#13282e;--pe-doux:#3d565d;--pe-pale:#7a8f95;--pe-sable:#f4efe4;--pe-sable-f:#e3d8c4;
	--pe-bord:#e2ddd2;--pe-bord-d:#eeeae0;--pe-carte:#fff;--pe-ok:#2f9e6e;--pe-ok-f:#e3f3ea;
	--pe-alerte:#c96f2d;--pe-alerte-f:#fbeadd;--pe-erreur:#b8472f;--pe-erreur-f:#f8e4df;
	--pe-ecume:#f7f4ee;--pe-titres:'Fraunces',Georgia,'Times New Roman',serif;--pe-texte:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	color:var(--pe-encre);font-size:14px;line-height:1.5;max-width:1120px;
	background:var(--pe-ecume);padding:18px 20px 24px;border-radius:12px;margin:-4px -2px 0}
@media (max-width:860px){.pe{padding:12px;margin:0}}
.pe *{box-sizing:border-box}
.pe h2,.pe h3{margin:0;font-family:var(--pe-titres);font-weight:600;letter-spacing:-.01em;color:var(--pe-encre)}
.pe h2 small,.pe h3 small,.pe .pe-val small,.pe .pe-tarif small{font-family:var(--pe-texte)}
.pe .pe-ico{color:var(--pe-turq);margin-right:6px;font-size:.95em}
.pe .pe-section>h2 .pe-ico{color:var(--pe-lagon)}
.pe a{color:var(--pe-lagon)}
.pe .pe-num{font-variant-numeric:tabular-nums}
.pe .pe-pale{color:var(--pe-pale);font-size:13px}
.pe .pe-note{color:var(--pe-pale);font-size:12px;margin:8px 0 0}
.pe p{margin:0}

/* Bandeau de tête : logo Pilotis + titre, avant les onglets */
.pe-bandeau{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.pe-bandeau img{width:44px;height:44px}
.pe-bandeau h1{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:24px;letter-spacing:-.01em;color:#0e5a6b}
.pe-bandeau span{display:block;font-size:13px;color:#3d565d}
.pe-onglet-ico{margin-right:6px;color:#18a7bd}

/* Cartes et sections */
.pe .pe-carte{background:var(--pe-carte);border:1px solid var(--pe-bord);border-radius:10px;padding:18px 20px}
.pe .pe-carte>h2{font-size:17px;margin-bottom:4px}
.pe .pe-sous{color:var(--pe-doux);margin:0 0 12px;max-width:70ch}
.pe .pe-section{margin-top:22px}
.pe .pe-section>h2{font-size:17px;margin-bottom:10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pe .pe-section>h2 small{font-weight:400;color:var(--pe-pale);font-size:13px}
.pe .pe-grille{display:grid;gap:14px}
.pe .pe-g2{grid-template-columns:1fr 1fr}
@media (max-width:860px){.pe .pe-g2,.pe .pe-hero,.pe .pe-offres{grid-template-columns:1fr}}

/* Boutons : un seul primaire par page */
.pe .pe-btn{display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:9px 16px;font:inherit;font-weight:600;
	border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1.2;white-space:nowrap}
.pe .pe-btn:hover{text-decoration:none;filter:brightness(1.06)}
.pe .pe-btn:focus-visible{outline:2px solid var(--pe-turq);outline-offset:2px}
.pe .pe-btn-p{background:var(--pe-lagon);color:#fff !important}
.pe .pe-btn-s{background:transparent;color:var(--pe-lagon);border-color:var(--pe-lagon)}
.pe .pe-btn-d{background:transparent;color:var(--pe-doux);border-color:var(--pe-bord)}
.pe .pe-btn-min{padding:6px 12px;font-size:13px}
.pe .pe-lien-discret{color:var(--pe-pale);font-size:13px;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.pe .pe-lien-discret.pe-danger{color:var(--pe-erreur)}
.pe form.pe-inline{display:inline}

/* Pastilles d'état */
.pe .pe-pastille{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pe .pe-pastille::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pe .pe-p-ok{background:var(--pe-ok-f);color:var(--pe-ok)}
.pe .pe-p-alerte{background:var(--pe-alerte-f);color:var(--pe-alerte)}
.pe .pe-p-erreur{background:var(--pe-erreur-f);color:var(--pe-erreur)}
.pe .pe-p-neutre{background:var(--pe-sable);color:var(--pe-doux)}
.pe .pe-p-neutre::before{opacity:.5}

/* Alertes de tête */
.pe .pe-alerte{display:flex;gap:14px;align-items:flex-start;background:var(--pe-alerte-f);border:1px solid #e9c4a4;border-radius:10px;padding:12px 16px;margin-bottom:14px;flex-wrap:wrap}
.pe .pe-alerte>div{flex:1;min-width:260px}
.pe .pe-alerte b{color:var(--pe-alerte)}
.pe .pe-alerte p{margin:2px 0 0;color:var(--pe-doux);max-width:72ch}
.pe .pe-alerte form{margin-left:auto}
.pe .pe-vide{border:1px dashed var(--pe-bord);border-radius:8px;padding:14px;color:var(--pe-doux);font-size:13px;display:flex;gap:12px;align-items:center}

/* Mon espace : carte offre + aide */
.pe .pe-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.pe .pe-hero .pe-carte{display:flex;flex-direction:column;gap:10px}
.pe .pe-offre{position:relative;overflow:hidden;border-top:4px solid var(--pe-lagon)}
.pe .pe-offre::after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(24,167,189,.16),rgba(24,167,189,0) 70%);pointer-events:none}
.pe .pe-offre-tete{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pe .pe-offre-tete h2{font-size:30px}
.pe .pe-offre-tete h2 .pe-ico{font-size:22px;color:var(--pe-lagon);vertical-align:2px}
.pe .pe-offre-c h3 .pe-ico{color:var(--pe-bois)}
.pe .pe-opt b .pe-ico{color:var(--pe-lagon)}
.pe .pe-chips span .pe-ico{font-size:.9em}
.pe .pe-fichier{font-size:13px}
.pe .pe-fichier input[type=file]{font:inherit;font-size:13px;max-width:100%}
.pe .pe-prix{color:var(--pe-doux)}
.pe .pe-prix b{color:var(--pe-encre)}
.pe .pe-echeance{font-size:15px;margin-top:2px}
.pe .pe-echeance b{font-family:var(--pe-titres);font-size:24px;font-weight:600;color:var(--pe-lagon)}
.pe .pe-jauge{height:6px;background:var(--pe-sable);border-radius:3px;overflow:hidden}
.pe .pe-jauge i{display:block;height:100%;background:var(--pe-turq)}
.pe .pe-jauge.pe-jauge-alerte i{background:var(--pe-alerte)}
.pe .pe-chips{font-size:13px;color:var(--pe-doux)}
.pe .pe-chips span{display:inline-block;background:var(--pe-sable);border-radius:6px;padding:2px 8px;margin:2px 4px 0 0;color:var(--pe-encre)}
.pe .pe-actions{display:flex;gap:10px;align-items:center;margin-top:auto;flex-wrap:wrap;padding-top:4px}
.pe .pe-resil{background:var(--pe-alerte-f);border-radius:8px;padding:10px 12px;font-size:13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pe .pe-aide h2{font-size:16px}
.pe .pe-qui{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--pe-bord-d);border-radius:8px;text-decoration:none !important;color:inherit !important}
.pe .pe-qui:hover{border-color:var(--pe-turq)}
.pe .pe-qui b{display:block;font-size:13px}
.pe .pe-qui span{font-size:12px;color:var(--pe-doux)}
.pe .pe-qui em{margin-left:auto;font-style:normal;color:var(--pe-lagon);font-size:12px;font-weight:600;white-space:nowrap}
.pe .pe-av{width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;color:#fff;background:var(--pe-lagon);font-size:13px;flex:none;text-transform:uppercase}
.pe .pe-av.pe-av-bois{background:var(--pe-bois)}
.pe .pe-av.pe-av-turq{background:var(--pe-turq)}
.pe .pe-av.pe-av-vide{background:var(--pe-sable-f);color:var(--pe-pale)}
.pe .pe-av.pe-av-g{width:42px;height:42px;font-size:15px}

/* Invitation : parlez-en à votre comptable */
.pe .pe-invite{display:flex;gap:10px;align-items:flex-start;background:linear-gradient(135deg,#f4efe4,#fff);border:1px dashed var(--pe-bois);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--pe-doux)}
.pe .pe-invite .pe-ico{color:var(--pe-bois);font-size:18px;margin-top:2px}
.pe .pe-invite b{color:var(--pe-encre)}

/* Compteurs */
.pe .pe-compteurs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:1100px){.pe .pe-compteurs{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pe .pe-compteurs{grid-template-columns:1fr}}
.pe .pe-compteur{background:var(--pe-sable);border-radius:8px;padding:12px 14px}
.pe .pe-compteur .pe-lbl{font-size:11px;color:var(--pe-doux);text-transform:uppercase;letter-spacing:.06em}
.pe .pe-compteur .pe-val{font-family:var(--pe-titres);font-size:26px;font-weight:600;line-height:1.1;margin-top:2px}
.pe .pe-compteur .pe-lbl .pe-ico{color:var(--pe-lagon)}
.pe .pe-compteur .pe-val small{font-size:13px;font-weight:400;color:var(--pe-pale)}
.pe .pe-compteur .pe-jauge{height:4px;background:var(--pe-sable-f);margin-top:8px}
.pe .pe-compteur .pe-jauge i{background:var(--pe-lagon)}
.pe .pe-compteur a{font-size:12px;display:inline-block;margin-top:8px}

/* Prolonger */
.pe .pe-renouv{border-color:var(--pe-turq)}
.pe .pe-seg{display:inline-flex;border:1px solid var(--pe-bord);border-radius:8px;overflow:hidden;flex-wrap:wrap}
.pe .pe-seg label{position:relative;cursor:pointer}
.pe .pe-seg label input{position:absolute;opacity:0;width:0;height:0}
.pe .pe-seg label span{display:block;padding:7px 14px;color:var(--pe-doux);border-right:1px solid var(--pe-bord);background:var(--pe-carte)}
.pe .pe-seg label:last-child span{border-right:0}
.pe .pe-seg label input:checked+span{background:var(--pe-lagon);color:#fff;font-weight:600}
.pe .pe-seg label input:focus-visible+span{outline:2px solid var(--pe-turq);outline-offset:-2px}
.pe .pe-ligne{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:8px 0 14px}
.pe .pe-ligne>label{color:var(--pe-doux);font-size:13px}
.pe .pe-devis{display:grid;grid-template-columns:1fr auto;gap:4px 24px;background:var(--pe-sable);border-radius:8px;padding:12px 16px;max-width:560px}
.pe .pe-devis .pe-tot{font-weight:600;border-top:1px solid var(--pe-sable-f);padding-top:6px;margin-top:4px}
.pe .pe-devis .pe-ttc{font-family:var(--pe-titres);font-size:20px;color:var(--pe-lagon)}
.pe .pe-rib{margin-top:12px;font-size:13px;color:var(--pe-doux)}
.pe .pe-rib b{display:block;color:var(--pe-encre);white-space:pre-line}
.pe .pe-cgv{display:flex;gap:8px;align-items:center;margin:12px 0;font-size:13px}

/* Aller plus loin */
.pe .pe-offres{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
.pe .pe-offre-c{border:1px solid var(--pe-bord);border-radius:10px;padding:16px 18px;background:var(--pe-carte);display:flex;flex-direction:column;gap:8px}
.pe .pe-offre-c.pe-mise{border-color:var(--pe-bois);background:linear-gradient(180deg,#faf4ec,#fff)}
.pe .pe-offre-c .pe-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.pe .pe-offre-c h3{font-size:19px}
.pe .pe-tarif{font-family:var(--pe-titres);font-size:18px;font-weight:600;color:var(--pe-bois-f);white-space:nowrap}
.pe .pe-tarif small{font-size:12px;font-weight:400;color:var(--pe-pale)}
.pe .pe-offre-c ul{margin:0;padding-left:18px;color:var(--pe-doux);font-size:13px}
.pe .pe-offre-c ul li{margin:2px 0}
.pe .pe-offre-c ul li b{color:var(--pe-encre)}
.pe .pe-offre-c .pe-btn{align-self:flex-start;margin-top:4px}
.pe .pe-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.pe .pe-opt{border:1px solid var(--pe-bord);border-radius:8px;padding:12px 14px;background:var(--pe-carte);display:flex;flex-direction:column;gap:4px}
.pe .pe-opt b{font-size:14px}
.pe .pe-opt span{font-size:12px;color:var(--pe-doux);flex:1}
.pe .pe-opt .pe-bas{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:13px}
.pe .pe-opt.pe-active{border-style:dashed;background:var(--pe-sable)}
.pe .pe-recharges{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.pe .pe-recharge{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--pe-bord);border-radius:8px;padding:12px 14px;background:var(--pe-carte)}
.pe .pe-recharge b{display:block}
.pe .pe-recharge span{font-size:12px;color:var(--pe-doux)}
.pe .pe-recharge .pe-px{font-weight:600;white-space:nowrap;margin-left:auto}

/* Tableaux */
.pe table.pe-liste{width:100%;border-collapse:collapse;font-size:13px}
.pe table.pe-liste th{text-align:left;font-weight:600;color:var(--pe-pale);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-bottom:1px solid var(--pe-bord)}
.pe table.pe-liste td{padding:9px 10px;border-bottom:1px solid var(--pe-bord-d)}
.pe table.pe-liste td.pe-d,.pe table.pe-liste th.pe-d{text-align:right}
.pe table.pe-liste tr:last-child td{border-bottom:0}
.pe .pe-pied{margin-top:26px;display:flex;justify-content:space-between;align-items:center;color:var(--pe-pale);font-size:12px;flex-wrap:wrap;gap:8px}

/* Mes demandes */
.pe .pe-entete{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.pe .pe-entete p{margin:0;color:var(--pe-doux);max-width:70ch}
.pe .pe-filtres{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.pe .pe-filtres a{border:1px solid var(--pe-bord);background:var(--pe-carte);border-radius:999px;padding:4px 12px;font-size:12px;color:var(--pe-doux);text-decoration:none}
.pe .pe-filtres a.pe-actif{background:var(--pe-lagon);border-color:var(--pe-lagon);color:#fff}
.pe .pe-fils{display:flex;flex-direction:column;gap:6px}
.pe .pe-fil{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:10px 14px;background:var(--pe-carte);border:1px solid var(--pe-bord);border-radius:8px;text-decoration:none !important;color:inherit !important}
.pe .pe-fil:hover{border-color:var(--pe-turq)}
.pe .pe-fil.pe-nonlu{border-left:4px solid var(--pe-turq)}
.pe .pe-fil .pe-sujet{font-weight:600}
.pe .pe-fil.pe-nonlu .pe-sujet{color:var(--pe-lagon)}
.pe .pe-fil .pe-apercu{font-size:13px;color:var(--pe-doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60ch}
.pe .pe-fil .pe-meta{text-align:right;font-size:12px;color:var(--pe-pale);display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.pe .pe-champs{display:grid;grid-template-columns:180px 1fr;gap:10px 14px;align-items:center;max-width:760px}
@media (max-width:860px){.pe .pe-champs{grid-template-columns:1fr}}
.pe .pe-champs>label{color:var(--pe-doux);font-size:13px}
.pe .pe-champs input[type=text],.pe .pe-champs textarea,.pe textarea.pe-reponse{font:inherit;padding:8px 10px;border:1px solid var(--pe-bord);border-radius:6px;background:var(--pe-carte);color:var(--pe-encre);width:100%}
.pe .pe-champs textarea{min-height:100px;resize:vertical}
.pe .pe-dest{display:flex;gap:8px;flex-wrap:wrap}
.pe .pe-dest label{border:1px solid var(--pe-bord);border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--pe-encre);font-size:13px;display:inline-flex;gap:6px;align-items:center;position:relative}
.pe .pe-dest label input{position:absolute;opacity:0;width:0;height:0}
.pe .pe-dest label:has(input:checked){border-color:var(--pe-lagon);background:var(--pe-lagon);color:#fff}
.pe .pe-dest label:has(input:focus-visible){outline:2px solid var(--pe-turq);outline-offset:2px}
.pe .pe-champs .pe-bas{display:flex;gap:12px;align-items:center;margin-top:6px;grid-column:1/-1}
.pe .pe-fil-tete{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.pe .pe-fil-tete h2{font-size:18px}
.pe .pe-bulles{display:flex;flex-direction:column;gap:10px;max-width:780px}
.pe .pe-bulle{max-width:84%;padding:10px 14px;border-radius:12px;background:var(--pe-carte);border:1px solid var(--pe-bord)}
.pe .pe-bulle.pe-moi{align-self:flex-end;background:var(--pe-sable);border-color:var(--pe-sable-f);border-bottom-right-radius:4px}
.pe .pe-bulle.pe-eux{align-self:flex-start;border-bottom-left-radius:4px}
.pe .pe-bulle .pe-qui-l{font-size:12px;color:var(--pe-pale);margin-bottom:3px}
.pe .pe-bulle .pe-qui-l b{color:var(--pe-doux)}
.pe .pe-bulle details{margin-top:6px;font-size:12px;color:var(--pe-pale)}
.pe .pe-pj{display:inline-flex;gap:6px;align-items:center;font-size:12px;background:var(--pe-carte);border:1px solid var(--pe-bord);border-radius:6px;padding:3px 8px;text-decoration:none;margin:4px 6px 0 0}
.pe .pe-repondre{display:flex;gap:10px;align-items:flex-end;margin-top:12px;max-width:780px}
.pe .pe-repondre textarea{flex:1;min-height:64px}

/* Mes prestataires */
.pe .pe-presta{display:flex;flex-direction:column;gap:12px}
.pe .pe-role{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pe .pe-role h2{font-size:18px}
.pe .pe-role span{color:var(--pe-pale);font-size:13px}
.pe .pe-actuel{display:flex;align-items:center;gap:12px;background:var(--pe-sable);border-radius:8px;padding:12px 14px;flex-wrap:wrap}
.pe .pe-actuel b{display:block}
.pe .pe-actuel span{font-size:12px;color:var(--pe-doux)}
.pe .pe-actuel form{margin-left:auto}
.pe .pe-choix{display:flex;flex-direction:column;gap:8px}
.pe .pe-choix h3{font-size:12px;font-weight:600;color:var(--pe-pale);text-transform:uppercase;letter-spacing:.06em}
.pe .pe-candidat{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border:1px solid var(--pe-bord);border-radius:8px;padding:10px 12px}
.pe .pe-candidat b{display:block}
.pe .pe-candidat span{font-size:12px;color:var(--pe-doux)}
.pe .pe-pourquoi{background:var(--pe-carte);border:1px solid var(--pe-bord);border-radius:10px;padding:14px 18px;color:var(--pe-doux);font-size:13px;margin-bottom:14px}
.pe .pe-pourquoi b{color:var(--pe-encre)}

/* Réglages */
.pe .pe-reglage{display:grid;grid-template-columns:280px 1fr;gap:10px 24px;align-items:start;padding:16px 0;border-bottom:1px solid var(--pe-bord-d)}
@media (max-width:860px){.pe .pe-reglage{grid-template-columns:1fr}}
.pe .pe-reglage:last-child{border-bottom:0}
.pe .pe-reglage h3{font-size:15px}
.pe .pe-reglage .pe-desc{font-size:13px;color:var(--pe-doux);margin-top:2px;max-width:48ch}
.pe .pe-radio{display:flex;flex-direction:column;gap:6px;font-size:13px}
.pe .pe-radio label{display:flex;gap:8px;align-items:flex-start}
.pe .pe-fonds{display:flex;gap:10px;flex-wrap:wrap}
.pe .pe-fond{padding:0;border:3px solid transparent;border-radius:8px;cursor:pointer;background:none;overflow:hidden}
.pe .pe-fond.pe-choisi{border-color:var(--pe-bois)}
.pe .pe-fond:focus-visible{outline:2px solid var(--pe-turq)}
.pe .pe-fond img,.pe .pe-fond span{display:block;width:200px;height:112px;border-radius:5px;object-fit:cover}
.pe .pe-fond span{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#1e3a5f,#2d5f8a);color:#fff;font-size:.9em}

/* ---- Le TUNNEL DE COMMANDE : les choix à gauche, le ticket à droite -------
   Le ticket suit le défilement pour que le client vérifie en continu au lieu
   de découvrir le total à la fin. Sous 900 px les colonnes s'empilent et il
   se colle en bas de l'écran : sur téléphone, un ticket qu'il faut aller
   chercher en haut de page n'est plus un ticket. */
.pe .pe-tunnel{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.pe .pe-tunnel-choix{min-width:0}
/* La section désignée par ?veut= depuis l'accueil : on la montre, sans la crier. */
/* ⚠️ La section désignée depuis l'accueil est une CARTE COMPLÈTE, pas un liseré posé au
   milieu des champs. L'ancienne règle décalait la section de douze pixels en négatif : le
   cadre chevauchait les formulaires voisins et n'avait pas la même allure selon qu'on
   arrivait par « prolonger » ou par « changer d'offre ». Même traitement pour les deux. */
/* Le fragment posé par l'accueil (#sec-prolonger) amènerait le titre juste sous le menu
   haut de Dolibarr, qui le recouvrirait. */
.pe .pe-section,.pe .pe-tunnel h3[id]{scroll-margin-top:72px}
.pe .pe-section.pe-vise{box-shadow:0 0 0 1px var(--pe-bord);border-left:4px solid var(--pe-lagon);
	border-radius:12px;padding:16px 18px;margin:0 0 18px;background:#fff}
.pe .pe-section.pe-vise > h2{margin-top:0}
.pe .pe-tunnel h3{margin:18px 0 8px;font-size:14px;color:var(--pe-doux)}
.pe .pe-choix-ligne{display:flex;flex-wrap:wrap;gap:8px}
/* ⚠️ `display:flex` porté par une classe (spécificité 0,2,0) l'emporte sur la règle
   d'agent utilisateur `[hidden]{display:none}` (0,1,0), et ni ce fichier ni le thème
   Dolibarr ne redéclarent `[hidden]`. Sans cette ligne, le groupe de durées masqué
   RESTE À L'ÉCRAN : le client voit « 1 / 3 / 6 mois » alors qu'il a choisi l'annuel,
   coche « 3 mois », et `pe_panier_poste()` — qui ne lit que `nb_mois_an` — envoie 0.
   Le hub refuse, et on retombe exactement dans l'impasse « 3 mois en annuel » que ce
   tunnel a été écrit pour supprimer. Revue du 04/09/2026. */
.pe .pe-choix-ligne[hidden]{display:none}
/* Une option réservée à une offre supérieure : MONTRÉE, et vue comme conditionnelle avant
   d'être lue. La classe était posée par commande.php mais n'existait dans aucune règle :
   la pastille était visuellement identique à une option achetable, et seule la mention en
   petit texte la distinguait — donc rien, pour qui balaie la page du regard. */
/* Pourquoi le bouton de validation est grisé — un point mort qui s'explique n'en est plus un. */
.pe .pe-cgv-manque{color:var(--pe-alerte);font-weight:600;margin:0 0 6px}
/* ⚠️ CLASSE PROPRE, `pe-choix`, et surtout PAS `pe-pastille` : celle-ci désigne depuis
   toujours les pastilles d'ÉTAT (« Service actif »), qui portent une PUCE RONDE en
   `::before`. Les boutons de choix du tunnel l'avaient reprise : ils héritaient de la puce
   — d'où « une puce ET une case à cocher » sur chaque bouton — et la coche ajoutée ensuite
   se dessinait par-dessus un rond plein de la même couleur, donc invisible.
   ⚠️ UNE SEULE marque de sélection : le contrôle natif est masqué — sans quitter le DOM,
   donc toujours focalisable au clavier et lisible par un lecteur d'écran — et c'est le
   bouton qui porte l'état, avec une coche à gauche quand il est choisi. */
.pe .pe-choix{position:relative;display:inline-flex;align-items:center;gap:8px;
	border:1.5px solid var(--pe-bord);border-radius:999px;padding:9px 16px;cursor:pointer;
	background:#fff;font-size:14px;transition:border-color .12s,background .12s,box-shadow .12s}
.pe .pe-choix input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.pe .pe-choix:hover{border-color:var(--pe-lagon)}
.pe .pe-choix:has(input:focus-visible){box-shadow:0 0 0 3px var(--pe-sable)}
.pe .pe-choix:has(input:checked){border-color:var(--pe-lagon);background:var(--pe-sable);
	font-weight:600;padding-left:34px}
/* La coche n'apparaît que sur le choix retenu, et pousse le texte sans décaler les voisins. */
.pe .pe-choix:has(input:checked)::before{content:"✓";position:absolute;left:14px;
	color:var(--pe-lagon);font-weight:700;line-height:1}
.pe .pe-choix:has(input:disabled){opacity:.45;cursor:not-allowed}
.pe .pe-choix small{display:block;font-weight:400;color:var(--pe-pale);font-size:12px}
.pe .pe-choix-off{opacity:.55}
/* ⚠️⚠️ LE MÊME PIÈGE QUE POUR `.pe-choix-ligne`, REFAIT. `display:inline-flex` porté par
   une classe (0,2,0) écrase la règle d'agent utilisateur `[hidden]{display:none}` (0,1,0).
   Sans cette ligne, les options masquées — celles que l'offre ne débloque pas, et surtout
   celles qu'elle COMPREND DÉJÀ — restaient à l'écran : le changement principal de cette
   version ne fonctionnait tout simplement pas dans un navigateur, alors que le banc, qui
   ne regardait que l'attribut HTML, restait vert. Toute règle d'affichage posée sur une
   classe doit redéclarer son `[hidden]`. */
.pe .pe-choix[hidden]{display:none}
.pe .pe-pastille small{display:block;font-weight:400;color:var(--pe-pale);font-size:12px}
.pe .pe-pastille-off{opacity:.55;cursor:not-allowed}
.pe .pe-cgv{display:block;margin-top:14px;font-size:13px;color:var(--pe-doux)}
/* ---- « Où j'en suis » : l'état de l'abonnement, en tête du tunnel ---------
   Quatre faits, alignés, avant le premier choix : quelle offre, ce qu'elle coûte,
   jusqu'à quand elle est payée, quand tombe la suite. Sans eux le client choisit
   sans savoir d'où il part. */
.pe .pe-etat-actuel{display:flex;flex-wrap:wrap;gap:8px 28px;background:var(--pe-sable);
	border-radius:10px;padding:14px 18px;margin:0 0 22px}
.pe .pe-etat-l{display:flex;flex-direction:column;gap:1px;min-width:0}
.pe .pe-etat-l span{font-size:12px;color:var(--pe-doux)}
.pe .pe-etat-l b{font-size:15px;color:var(--pe-encre);white-space:nowrap}
.pe .pe-etat-l b small{font-weight:400;font-size:12px;color:var(--pe-pale)}
.pe .pe-etat-l .pe-ico{color:var(--pe-lagon);margin-right:4px}

/* Ce que comprend l'offre : le texte que Pilotis tient au Catalogue, puis les quotas. */
.pe .pe-carte-resume{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.pe .pe-carte-resume span{font-size:12px;color:var(--pe-doux);line-height:1.35;
	padding-left:14px;position:relative}
.pe .pe-carte-resume span::before{content:"·";position:absolute;left:4px;color:var(--pe-lagon);
	font-weight:700}
.pe .pe-carte-quotas{display:flex;flex-direction:column;gap:2px;margin-top:8px;
	padding-top:8px;border-top:1px solid var(--pe-bord-d)}
.pe .pe-carte-quotas span{font-size:12px;color:var(--pe-pale);font-variant-numeric:tabular-nums}
/* ⚠️ La carte COCHÉE passe en gras (`.pe-choix:has(input:checked)`) : sans ce retour au
   normal, tout le descriptif de l'offre retenue s'affichait en gras, et la carte choisie
   criait au lieu de se distinguer. */
.pe .pe-carte-resume span,.pe .pe-carte-quotas span{font-weight:400}

/* ---- Les CARTES d'offre : trois colonnes de même largeur, comparables ------
   Le mécanisme de sélection reste celui de `.pe-choix` (contrôle natif masqué,
   état porté par l'étiquette) : seule la mise en page change. La coche passe en
   haut à droite — au centre gauche d'une carte, elle poussait le texte. */
.pe .pe-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.pe .pe-choix-carte{display:flex;align-items:stretch;border-radius:12px;padding:14px 16px;
	width:auto;text-align:left}
.pe .pe-choix-carte>span{display:flex;flex-direction:column;gap:2px;width:100%}
.pe .pe-choix-carte .pe-ico{font-size:18px;color:var(--pe-lagon);margin-bottom:4px}
.pe .pe-carte-nom{font-size:15px;font-weight:600}
/* Le PRIX est l'information première d'une page de commande : il se lisait en gris, à la
   taille d'une note de bas de page, au même rang que la description. */
.pe .pe-carte-prix{font-family:var(--pe-titres);font-size:20px;color:var(--pe-encre);
	font-variant-numeric:tabular-nums;line-height:1.2}
.pe .pe-carte-prix small{font-family:inherit;font-size:12px;color:var(--pe-pale);font-weight:400}
.pe .pe-carte-etat{font-size:12px;color:var(--pe-doux)}
.pe .pe-carte-note{font-size:12px;color:var(--pe-pale);margin-top:2px}
.pe .pe-choix-carte:has(input:checked){padding-left:16px}
.pe .pe-choix-carte:has(input:checked)::before{left:auto;right:14px;top:12px}
/* L'offre déjà servie n'est pas une vente : elle se tient en retrait des deux autres. */
.pe .pe-carte-mienne{background:var(--pe-sable)}

/* Les recharges : une grille, pas une colonne de pastilles isolées. */
.pe .pe-recharge-lot .pe-choix-ligne{display:grid;
	grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.pe .pe-recharge-lot .pe-choix{width:auto}

/* Le numéro d'étape : trois sections, et on sait où on en est. */
.pe .pe-etape{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
	margin-right:10px;border-radius:999px;background:var(--pe-lagon);color:#fff;
	font-family:var(--pe-corps);font-size:13px;font-weight:700;line-height:1;vertical-align:2px}

.pe .pe-ticket{position:sticky;top:16px;border:1px solid var(--pe-bord);border-radius:10px;
	background:#fff;padding:16px 18px}
.pe .pe-ticket h2{margin:0 0 12px;font-size:16px}
/* ⚠️ Le libellé rétrécit, le MONTANT jamais. Sans `flex:0 0 auto` et `nowrap`, « 213 400 F »
   se coupait entre les milliers et le franc dès qu'un libellé était long : un ticket de
   caisse dont les chiffres passent à la ligne cesse d'être lisible d'un coup d'œil, et
   c'est tout ce qu'on lui demande. */
.pe .pe-ticket-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
	padding:5px 0;font-size:13px}
.pe .pe-ticket-l span{color:var(--pe-doux);min-width:0;overflow-wrap:anywhere}
.pe .pe-ticket-l b{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.pe .pe-ticket-totaux{margin-top:10px;padding-top:10px;border-top:1px solid var(--pe-bord)}
.pe .pe-ticket-ttc{font-family:var(--pe-titres);font-size:19px;color:var(--pe-lagon)}
.pe .pe-ticket-ttc b{white-space:nowrap}
.pe .pe-ticket-ttc span{color:inherit}
.pe .pe-ticket-couverture{margin:12px 0 0;font-size:13px;color:var(--pe-encre);font-weight:600}
/* Un lot de recharges par service : l'intertitre sépare ce qui n'est pas comparable. */
.pe .pe-recharge-lot{margin:0 0 14px}
.pe .pe-recharge-lot h4{margin:12px 0 6px;font-size:13px;font-weight:600;color:var(--pe-doux);
	display:flex;align-items:center;gap:6px}
.pe .pe-recharge-lot h4 .fa{color:var(--pe-lagon)}
.pe .pe-opt-vide{margin:6px 0 0}
/* L'acceptation des CGV, contre le bouton qu'elle conditionne. */
.pe .pe-ticket .pe-cgv{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;
	font-size:12px;line-height:1.4;color:var(--pe-doux);cursor:pointer}
.pe .pe-ticket .pe-cgv input{flex:0 0 auto;margin-top:2px}
.pe .pe-ticket-valider{width:100%;margin-top:10px;justify-content:center}
.pe .pe-ticket-valider:disabled{opacity:.5;cursor:not-allowed}
/* La poignée n'existe QUE sur téléphone : sur écran large, le ticket est déjà tout entier
   sous les yeux et un bouton pour le replier n'aurait aucun sens. */
.pe .pe-ticket-poignee{display:none}

/* ⚠️ Bascule à 1100 px, pas à 900 : entre les deux, la colonne des choix tombait à ~350 px
   une fois retiré le menu de Dolibarr et les 320 px du ticket — les trois offres s'y
   empilaient l'une sous l'autre et redevenaient incomparables, ce que cette version vient
   justement de corriger. Mieux vaut la pleine largeur et le ticket en barre.
   ⚠️ Sur téléphone, le ticket occupait 52 % de la hauteur en permanence : le client
   voyait son récapitulatif et presque plus rien de ce qu'il était en train de choisir.
   Il se REPLIE désormais en une barre — total et bouton — et s'ouvre d'un geste. Replié,
   il montre l'essentiel ; ouvert, il montre le détail. Sans script il reste ouvert : le
   repli est un confort, jamais une condition pour commander. */
@media (max-width:1100px){
	.pe .pe-tunnel{grid-template-columns:1fr}
	.pe .pe-ticket{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:12px 12px 0 0;
		max-height:76vh;overflow:auto;box-shadow:0 -6px 24px rgba(0,0,0,.14);z-index:30;
		padding-top:8px}
	/* La poignée : ce qu'on voit toujours, et ce sur quoi on appuie pour déplier. */
	.pe .pe-ticket-poignee{display:flex;align-items:center;justify-content:space-between;gap:12px;
		width:100%;background:none;border:0;padding:6px 0 10px;font:inherit;color:var(--pe-encre);
		cursor:pointer;text-align:left}
	.pe .pe-ticket-poignee b{font-family:var(--pe-titres);font-size:18px;color:var(--pe-lagon);
		white-space:nowrap}
	.pe .pe-ticket-poignee .fa{color:var(--pe-doux)}
	.pe .pe-ticket.pe-replie{max-height:none}
	.pe .pe-ticket.pe-replie>h2,
	/* ⚠️ `.pe-ticket-couverture` n'est PAS dans cette liste : « votre service est assuré
	   jusqu'au … » est la phrase que le client doit avoir lue avant d'engager. Masquée
	   avec le reste, elle laissait valider vingt-quatre mois sur la seule vue d'un total. */
	.pe .pe-ticket.pe-replie>.pe-ticket-lignes,
	.pe .pe-ticket.pe-replie>.pe-ticket-totaux,
	.pe .pe-ticket.pe-replie>.pe-note:not(.pe-raison),
	.pe .pe-ticket.pe-replie>noscript{display:none}
	/* ⚠️ La marge basse couvre la BARRE REPLIÉE — total, case CGV, raison, bouton, soit
	   environ 180 px mesurés —, pas le panneau déplié : celui-là, le client l'ouvre
	   lui-même et le referme de même. Une seule règle : il y en avait deux, la première
	   n'ayant jamais servi qu'à se faire écraser par la seconde. */
	.pe .pe-tunnel-choix{padding-bottom:190px}
}

/* ---- Bloc « À régler » : la demande de paiement en cours -----------------
   C'est le SEUL endroit où le client lit nos coordonnées bancaires — elles ne
   partent dans aucun courriel. Il est donc permanent, et la référence à
   recopier doit être le premier élément que l'œil trouve : c'est elle qui
   relie le virement à la demande. `user-select:all` pour qu'un clic la
   sélectionne entière, sans risque de la tronquer. */
.pe .pe-apayer{border-left:4px solid var(--pe-lagon)}
.pe .pe-demande{padding:0 0 16px;margin-bottom:16px;border-bottom:1px solid var(--pe-bord)}
.pe .pe-demande:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:4px}
.pe .pe-ref{margin-top:14px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pe .pe-ref span{color:var(--pe-doux);font-size:13px}
.pe .pe-ref b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;letter-spacing:.08em;
	color:var(--pe-encre);background:var(--pe-sable);border-radius:6px;padding:4px 12px;user-select:all}
.pe .pe-delai{margin:10px 0 14px;font-size:13px;color:var(--pe-doux);max-width:70ch}
.pe .pe-btn-ghost{background:transparent;color:var(--pe-doux);border-color:var(--pe-bord)}
.pe .pe-cb{margin-top:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}