/* 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}}
/* Cinq compteurs quand le hub rend les coups de main (vague 31, CM9) : une ligne au-delà de
   1 100 px ; en deux colonnes, le cinquième prend la ligne plutôt que d'en laisser une moitié
   vide. ⚠️ La règle à une colonne est REDITE : `.pe-compteurs.pe-compteurs-5` l'emporterait
   sinon sur celle du dessus, et le téléphone garderait deux colonnes. */
.pe .pe-compteurs.pe-compteurs-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.pe .pe-compteurs.pe-compteurs-5{grid-template-columns:1fr 1fr}.pe .pe-compteurs-5>.pe-compteur:nth-of-type(5){grid-column:1/-1}}
@media (max-width:600px){.pe .pe-compteurs.pe-compteurs-5{grid-template-columns:1fr}}
/* La note d'essai est un élément de la grille : sans ceci, elle tient dans une seule case. */
.pe .pe-compteurs>.pe-note{grid-column:1/-1}
.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-estimation{align-self:flex-start;max-width:84%;background:var(--pe-sable);border:1px dashed var(--pe-bois);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.pe .pe-estimation p{margin:0}
.pe .pe-estimation>b{color:var(--pe-bois-f)}
.pe .pe-estimation form,.pe .pe-estimation .pe-btn{align-self:flex-start}
.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)}
/* Vague 32 (Amandine, épreuve 2) : deux ÉTAPES se séparent plus que deux sous-blocs d'une
   même étape (h3 à 18 px). Une section visée prend `margin:0 0 18px` ci-dessus : l'étape 2,
   ouverte par « Souscrire maintenant » (?veut=prolonger), arrivait à 0 px des options. Celle-ci
   l'emporte par sa SPÉCIFICITÉ (4 classes contre 3), pas par sa place : visée ou non. */
.pe .pe-tunnel-choix > .pe-section + .pe-section{margin-top:36px}
.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}
/* La demande visée par le lien de l'email de commande (?demande=<REF>, skin.js). */
/* ⚠️ Cadre POSÉ, pas décalé (vague 32) : `outline-offset:8px` sur un bloc sans rembourrage
   le faisait mordre sur le titre au-dessus et frôler les boutons. Le rembourrage est dedans,
   et la marge du haut l'écarte du titre ; `:last-of-type` (même spécificité, plus haut) ne
   lui reprend pas son rembourrage du bas. */
.pe .pe-demande.pe-cible{outline:2px solid var(--pe-turq);outline-offset:0;border-radius:8px;
	padding:14px 16px 16px;margin-top:12px;scroll-margin-top:90px}
.pe .pe-demande > .pe-devis{margin-bottom:12px}
.pe .pe-demande > form + form{margin-top:8px}
.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}

/* ==== Lot 2.28.0 — retours du 28/09 ================================== */
/* A6 : « envoyée, en attente » a sa couleur, distincte du gris de « close ». */
.pe .pe-p-attente{background:#e2f3f6;color:var(--pe-lagon)}
/* A4 : ces paragraphes-là ne sont plus bridés à 70 caractères — la fin de phrase tombait
   seule sur la ligne suivante. Classe DÉDIÉE : les autres `.pe-sous` gardent leur largeur
   de lecture. `pretty` évite le dernier mot orphelin quand ça passe à la ligne. */
.pe .pe-sous{text-wrap:pretty}
.pe .pe-sous.pe-sous-large{max-width:none}
/* A5 : « ← Mes demandes » sur sa propre ligne, au-dessus du titre du fil. */
.pe .pe-fil-tete>.pe-lien-discret{flex-basis:100%}
/* A9 : le ticket se colle SOUS le menu du haut (sticky, 50 px dans eldy) au lieu de passer
   dessous, et défile lui-même s'il est plus haut que l'écran. Écran large seulement : en
   dessous de 1100 px il devient une barre basse. */
@media (min-width:1101px){
	.pe .pe-ticket{top:66px;max-height:calc(100vh - 82px);overflow:auto}
}
/* B2 : tant qu'il bloque, le motif du bouton grisé se lit en bandeau, pas en note grise. */
.pe .pe-ticket .pe-raison{margin:12px 0 0;padding:8px 10px;border-radius:6px;font-size:13px;
	font-weight:600;color:var(--pe-encre);background:var(--pe-alerte-f);border-left:3px solid var(--pe-alerte)}
/* …sauf la case CGV manquante, qui garde sa couleur d'alerte (le bandeau l'écrasait). */
.pe .pe-ticket .pe-raison.pe-cgv-manque{color:var(--pe-alerte)}
/* B4 : l'offre CHOISIE (turquoise) ne se confond plus avec l'offre ACTUELLE (sable). */
.pe .pe-choix-carte:has(input:checked){background:#e2f3f6;border-color:var(--pe-turq);
	box-shadow:0 0 0 1px var(--pe-turq)}
.pe .pe-offres-detail{margin:8px 0 0}
/* La phrase commune aux offres, dite une fois sous les cartes (comme sur le site). */
.pe .pe-offres-commun{margin:14px 0 0;color:var(--pe-encre)}
/* B5 : les options en blocs de même largeur, deux par ligne, un seul sur téléphone. */
.pe .pe-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pe .pe-options .pe-choix{border-radius:12px;align-items:flex-start;width:auto}
.pe .pe-options .pe-choix[hidden]{display:none}
@media (max-width:640px){.pe .pe-options{grid-template-columns:1fr}}
/* D3, D4 : l'infobulle (i). Au survol ET au focus — sur téléphone, c'est le toucher qui
   donne le focus. Ancrée à GAUCHE, pas centrée : centrée sur un (i) proche du bord, ses
   300 px débordaient de l'écran d'un téléphone. */
.pe .pe-info{position:relative;display:inline-flex;vertical-align:1px;cursor:help;outline:none}
.pe .pe-info-i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
	border-radius:50%;border:1px solid var(--pe-lagon);color:var(--pe-lagon);font:600 11px/1 var(--pe-texte);
	font-style:italic}
.pe .pe-info:focus-visible .pe-info-i{box-shadow:0 0 0 3px var(--pe-sable-f)}
.pe .pe-info-t{display:none;position:absolute;left:-8px;bottom:calc(100% + 8px);
	width:max-content;max-width:min(300px,80vw);padding:8px 10px;border-radius:6px;background:var(--pe-encre);
	color:#fff;font:400 12px/1.4 var(--pe-texte);letter-spacing:0;text-align:left;white-space:normal;z-index:40;
	box-shadow:0 4px 14px rgba(0,0,0,.18)}
.pe .pe-info:hover .pe-info-t,.pe .pe-info:focus .pe-info-t,.pe .pe-info:focus-within .pe-info-t{display:block}
/* D5 : les coordonnées bancaires, un champ par ligne, chacun copiable. */
.pe .pe-rib-champs{display:grid;gap:6px;margin:8px 0 0}
.pe .pe-rib-l{display:grid;grid-template-columns:130px minmax(0,1fr);align-items:center;gap:10px}
.pe .pe-rib-l dt{color:var(--pe-doux);font-size:13px}
.pe .pe-rib-l dd{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.pe .pe-rib-l dd b{display:inline;white-space:normal;overflow-wrap:anywhere;color:var(--pe-encre);
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
@media (max-width:640px){.pe .pe-rib-l{grid-template-columns:1fr;gap:2px}}

/* ---- Offres de la commande : LE design de pilotis.nc (décision du 02/10/2026) ----------
   Un seul design d'offre, dont la référence est le site (DEV WEB pilotis.nc, branche
   retours-site-1001). Chaque offre a sa tête de couleur, du lagon clair au lagon profond à
   mesure que Pilotis travaille davantage : la couleur dit la gradation, elle ne décore pas.
   Clé : `data-offre` = code du Catalogue (socle, serenite, pilote), comme sur le site. Un
   code inconnu garde la tête claire. ⚠️ Les valeurs suivent celles du site : à recaler sur
   son CSS quand il bouge, jamais à inventer ici. */
/* Trois de front même à côté du récapitulatif (colonne d'environ 470 px) : comparer trois offres
   suppose de les voir ensemble — en 2 + 1, Pilote tombait seul sous les deux autres. */
.pe .pe-cartes:has(.pe-offre-carte){grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:14px;
	align-items:start;padding-top:12px}
/* Finition = celle du site, lot 1 (DEV WEB, Linkia-NC/pilotis cf37ad3), valeurs reprises telles
   quelles : un fond qui se teinte vers le bas, une ombre en deux temps (contact + portée) et un
   liseré clair en haut. C'est le « qui fait bien fini » demandé le 02/10. */
.pe .pe-offre-carte{padding:0;overflow:hidden;border:1px solid rgba(10,69,82,.09);border-radius:16px;
	background:linear-gradient(180deg,#fff 52%,#f2f9fa);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(5,46,55,.06),0 16px 40px rgba(5,46,55,.10)}
.pe .pe-offre-carte[data-offre="serenite"]{background:linear-gradient(180deg,#fff 52%,#eaf7f9)}
.pe .pe-offre-carte[data-offre="pilote"]{background:linear-gradient(180deg,#fff 52%,#edf2f4)}
.pe .pe-offre-carte>span{gap:0}
.pe .pe-offre-carte>span>:not(.pe-carte-tete){padding:0 14px}
.pe .pe-offre-carte>span>:last-child{padding-bottom:14px}
/* En colonne (pastille, nom, prix) : à 150 px de large, la pastille à gauche du nom écrasait
   le prix (écart convenu avec DEV WEB). Un reflet radial posé sur le dégradé, en haut à droite. */
.pe .pe-carte-tete{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
	padding:16px 14px 22px;margin-bottom:12px;color:var(--pe-encre);
	background-image:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%),linear-gradient(160deg,#e3f5f7,#c9ecf1);
	box-shadow:inset 0 -1px 0 rgba(5,46,55,.05)}
.pe .pe-offre-carte[data-offre="serenite"] .pe-carte-tete{box-shadow:none;
	background-image:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.26),rgba(255,255,255,0) 55%),linear-gradient(160deg,#18a7bd,#12707f)}
.pe .pe-offre-carte[data-offre="pilote"] .pe-carte-tete{box-shadow:none;
	background-image:radial-gradient(120% 90% at 100% 0%,rgba(47,212,228,.22),rgba(47,212,228,0) 55%),linear-gradient(160deg,#0a4552,#04242c)}
/* La vague du site, en bas de la tête. */
.pe .pe-carte-tete::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:10px;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 q15 -6 30 0 t30 0 t30 0 t30 0 V12 H0 Z' fill='%23ffffff'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat}
/* La pastille de l'icône (`.icone-offre` du site) : 44 px, glyphe de 21 px. */
.pe .pe-carte-tete .pe-ico{width:44px;height:44px;margin:0 0 8px;border-radius:50%;flex:none;
	display:flex;align-items:center;justify-content:center;font-size:21px;
	background:linear-gradient(160deg,#fff,#e9f6f8);color:#0e5a6b;
	box-shadow:0 2px 6px rgba(5,46,55,.12),inset 0 0 0 1px rgba(10,69,82,.06)}
.pe .pe-offre-carte[data-offre="serenite"] .pe-carte-tete .pe-ico,
.pe .pe-offre-carte[data-offre="pilote"] .pe-carte-tete .pe-ico{background:rgba(255,255,255,.14);color:#fff;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.pe .pe-offre-carte[data-offre="pilote"] .pe-carte-tete .pe-ico{color:#ffc94a}
.pe .pe-carte-tete .pe-carte-nom{font-family:var(--pe-titres);font-size:19px;font-weight:600;color:#052e37}
.pe .pe-carte-tete .pe-carte-prix{font-size:24px;font-weight:600;color:#052e37}
.pe .pe-carte-tete .pe-carte-prix small,.pe .pe-carte-tete .pe-carte-etat{color:var(--pe-doux)}
.pe .pe-offre-carte[data-offre="serenite"] .pe-carte-tete .pe-carte-nom,
.pe .pe-offre-carte[data-offre="pilote"] .pe-carte-tete .pe-carte-nom,
.pe .pe-offre-carte[data-offre="serenite"] .pe-carte-tete .pe-carte-prix{color:#fff}
.pe .pe-offre-carte[data-offre="pilote"] .pe-carte-tete .pe-carte-prix{color:#ffc94a}
.pe .pe-offre-carte[data-offre="serenite"] .pe-carte-tete small,.pe .pe-offre-carte[data-offre="pilote"] .pe-carte-tete small,
.pe .pe-offre-carte[data-offre="serenite"] .pe-carte-etat,.pe .pe-offre-carte[data-offre="pilote"] .pe-carte-etat{color:rgba(247,244,238,.88)}
/* Sérénité surélevée, comme sur le site. Pas sur téléphone : en colonne, un décalage vertical
   ne distingue plus rien et mord sur la carte du dessus. */
.pe .pe-offre-carte[data-offre="serenite"]{transform:translateY(-10px);border:2px solid #18a7bd;
	box-shadow:0 3px 8px rgba(5,46,55,.08),0 26px 60px rgba(5,46,55,.24)}
@media (max-width:700px){.pe .pe-offre-carte[data-offre="serenite"]{transform:none}}
/* Le CHOIX se lit au contour et à la coche, jamais en repeignant la carte : tête et fond gardent
   leur couleur d'offre. La coche passe en pastille soleil, lisible sur toute tête. */
.pe .pe-offre-carte:has(input:checked){border-color:var(--pe-turq);padding-left:0;
	box-shadow:0 0 0 3px rgba(24,167,189,.35),0 3px 8px rgba(5,46,55,.08),0 18px 50px rgba(5,46,55,.18)}
.pe .pe-offre-carte:has(input:checked)::before{z-index:2;top:10px;right:10px;left:auto;width:22px;height:22px;
	border-radius:50%;background:#ffc94a;color:#04242c;display:flex;align-items:center;justify-content:center;font-size:13px}
.pe .pe-offre-carte .pe-carte-resume,.pe .pe-offre-carte .pe-carte-quotas{display:flex;flex-direction:column;gap:3px;font-size:13px}
.pe .pe-offre-carte .pe-carte-quotas{margin-top:8px;padding-top:8px;border-top:1px solid var(--pe-bord-d);color:var(--pe-doux)}
@media (prefers-reduced-motion:no-preference){.pe .pe-offre-carte{transition:box-shadow .15s,border-color .15s}}
/* « HT par mois » reste dans la police du texte : en Fraunces, sous le prix, il se lisait
   comme un second titre. */
.pe .pe-carte-tete .pe-carte-prix small{font-family:var(--pe-texte);font-size:12px;font-weight:500}