/* V121 — l’artisan sur ordinateur : la fiche d’un dossier, « Je viens », l’Espace, « Mes clients » et la fiche de visite, d’après
   la maquette du 13/10 validée par HB (option A, operations/artisan-ordinateur-2026-10-13/artisan-ordi.css), règle pour règle.
   Tout est sous html.ordi (posé par app/artisan-ordi.js : 1200 px et plus, pointeur précis) : le téléphone ne lit aucune de ces
   règles. Les classes nouvelles commencent par « o- » (les pages ont déjà .carte, .duo, .dispo, .reglage… pour le téléphone).
   Style « A » : aucun mot surligné, pas de flèche, pas de capitales au-dessus des titres, l’ombre dure seulement sur ce qu’on
   touche. Verrou : tout bloc en flex ou en grille reste caché par [hidden] (règle globale de chaque page, doublée ici). */
html.ordi [hidden]{display:none!important}
html:not(.ordi) .o-tete{display:none!important}
html.ordi{--tete:60px;--marge:48px;--gout:32px;--rail:384px;--galerie:388px;--h1:32px;--lime-doux:#EFF7E2}   /* V121 (testeur V3) : l’Espace n’avait pas --lime-doux */
@media (max-width:1360px){html.ordi{--marge:36px;--gout:28px;--rail:348px;--h1:29px}}
@media (max-height:840px){html.ordi{--galerie:292px}}
html.ordi .entete{display:none!important}

/* ── l’en-tête : la marque, les deux espaces de l’artisan, la référence ── */
html.ordi .o-tete{position:sticky;top:0;z-index:30;height:var(--tete);flex:none;background:var(--foret);color:var(--creme);display:flex;align-items:center;gap:30px;
  padding:0 max(var(--marge),calc((100% - 1480px) / 2 + var(--marge)));   /* au-delà de 1480 px, aligné sur la page (testeur, finition 6) */
  font-size:15px;line-height:1.5;font-weight:600}
html.ordi .o-marque{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
html.ordi .o-marque svg{width:30px;height:30px}
html.ordi .o-marque .o-mot{font-size:1.3rem;font-weight:900;letter-spacing:-.05em}
html.ordi .o-marque .o-mot em{font-style:normal;color:var(--lime)}
html.ordi .o-onglets{display:flex;height:100%;gap:2px}
html.ordi .o-onglet{position:relative;display:flex;align-items:center;gap:8px;height:100%;padding:0 14px;text-decoration:none;font-size:.98rem;font-weight:800;color:rgba(255,252,244,.7)}
html.ordi .o-onglet:hover,html.ordi .o-onglet[aria-current]{color:var(--creme)}
html.ordi .o-onglet[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--lime)}
html.ordi .o-onglet:focus-visible{outline:3px solid var(--lime);outline-offset:-6px;border-radius:12px}
html.ordi .o-nb{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--lime);color:var(--foret);font-size:.78rem;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
html.ordi .o-tete .o-droite{margin-left:auto;display:flex;align-items:center;gap:14px}
html.ordi .o-ref{font-size:.76rem;font-weight:800;letter-spacing:.06em;background:rgba(255,255,255,.12);border-radius:999px;padding:6px 12px}
html.ordi .num{font-variant-numeric:tabular-nums}
html.ordi :where(.o-page,.o-espace) .num{letter-spacing:normal}   /* la maquette n’espace pas les chiffres (le .num des pages, si : « 18 h 25 » passait à la ligne) */

/* ── la page à deux colonnes : ce que l’habitant a donné | Pallier et votre réponse ── */
html.ordi main#corps:has(> .o-page),html.ordi main#corps:has(> .o-espace){max-width:none;padding:0}
html.ordi .o-page,html.ordi .o-espace{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:var(--gout);align-items:start;padding:22px var(--marge) 28px;max-width:1480px;
  width:100%;margin:0 auto;color:var(--foret);font-size:15px;line-height:1.5;font-weight:600}
html.ordi .o-espace{padding:24px var(--marge) 28px}
/* les marges à zéro, seulement sur ce que dessine l’ordinateur (la feuille « Je viens » et les blocs du téléphone gardent les leurs) */
html.ordi :where(.o-page,.o-espace) :where(h1,h2,h3,p,dl,dd):where([class^="o-"],[class*=" o-"]),
html.ordi :where(.o-carte,.o-bonjour,.o-mois-l,.o-mentions,.o-sortie,.o-lignes,.o-titre-ligne,.o-dossier,.o-ligne,.o-reglage,.o-dispo,.o-client-carte,.o-depl,.o-lu) :where(h1,h2,h3,p,dl,dd){margin:0}
html.ordi :where(.o-page,.o-espace) a{color:inherit}
html.ordi :where(.o-page,.o-espace) :focus-visible{outline:3px solid var(--foret);outline-offset:2px}
html.ordi .o-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:.95rem;font-weight:800;color:var(--foret-doux)}
html.ordi .o-etat{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 9px;border:2px solid var(--foret);border-radius:999px;font-size:.84rem;font-weight:900;color:var(--foret)}
html.ordi .o-etat.chaud{background:var(--abricot-doux)}
html.ordi .o-etat.tiede{background:var(--lime)}
html.ordi .o-etat.froid{background:var(--ciel-doux)}
html.ordi .o-h1{font-size:var(--h1);line-height:1.12;font-weight:900;letter-spacing:-.03em;margin-top:8px;text-wrap:balance}
html.ordi .o-gauche .alerte-artisan{margin:12px 0 0}
html.ordi .o-gauche .alerte-artisan+.alerte-artisan{margin-top:8px}
html.ordi .o-mots{display:flex;gap:14px;align-items:baseline;margin-top:14px;padding:10px 16px;background:var(--lime-doux);border:2px solid var(--foret);border-radius:16px;font-size:1.02rem;font-weight:700;line-height:1.42}
html.ordi .o-mots > b{flex:none;font-size:.86rem;font-weight:900;color:var(--foret-doux)}
html.ordi .o-mots.corrige{background:var(--abricot-doux)}
html.ordi .o-mots + .o-mots{margin-top:8px}

/* la galerie : toutes les photos visibles d’un coup ; un clic agrandit (loupe), sans quitter la fiche */
html.ordi .o-galerie{display:grid;grid-template-columns:1.62fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:var(--galerie);margin-top:16px}
html.ordi .o-galerie.deux{grid-template-columns:1.25fr 1fr;grid-template-rows:1fr}
html.ordi .o-galerie.un{grid-template-columns:1fr;grid-template-rows:1fr}
html.ordi .o-galerie.quatre{grid-template-rows:repeat(3,1fr)}
html.ordi .o-galerie.cinq{grid-template-columns:1.62fr 1fr 1fr}
html.ordi .o-galerie > .o-ph:first-child{grid-row:1 / -1}
html.ordi .o-galerie:is(.deux,.un) > .o-ph:first-child{grid-row:auto}
/* V121 (testeur V1, décision du CEO) — la photo ENTIÈRE, jamais recadrée : prise debout comme couchée, elle tient dans sa case, sur le
   crème (comme la photo en hauteur du téléphone, V118) ; la légende garde la police de la page */
html.ordi .o-ph{position:relative;min-height:0;padding:0;border:2.5px solid var(--foret);border-radius:18px;overflow:hidden;background:var(--creme-2);cursor:zoom-in;display:block;font:inherit;color:inherit}
html.ordi .o-ph img{display:block;width:100%;height:100%;object-fit:contain}
/* V171 (point 1) : l'étiquette se lit en entier, sur deux lignes si la place manque (jamais « … ») ; le rayon de 13 px garde la pilule sur une
   ligne (26 px de haut) et ne rogne pas le texte sur deux */
html.ordi .o-leg{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);background:rgba(18,49,42,.86);color:#fff;font-size:.8rem;font-weight:800;border-radius:13px;padding:4px 11px;
  line-height:18px;white-space:normal;overflow-wrap:break-word;text-wrap:balance}   /* testeur F3 : « Le point / qui fuit » */

html.ordi .o-duo{display:grid;grid-template-columns:1.08fr 1fr;gap:20px;margin-top:20px;align-items:stretch}
html.ordi .o-duo > :only-child{grid-column:1 / -1}
html.ordi .o-carte{background:var(--blanc);border:2px solid var(--foret);border-radius:20px;padding:14px 18px 12px}
html.ordi .o-carte.o-douce{background:var(--creme-2)}
html.ordi .o-carte h2,html.ordi .o-sect{font-size:1.04rem;font-weight:800;letter-spacing:-.01em;line-height:1.3}
html.ordi .o-carte h2{margin-bottom:6px}
html.ordi .o-carte h3.o-sous-titre{margin:10px 0 4px;font-size:.94rem;font-weight:800;letter-spacing:0;line-height:1.3}
html.ordi dl.o-lignes > div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:6px 0;border-top:1.5px solid var(--creme-2)}
html.ordi dl.o-lignes > div:first-child{border-top:0;padding-top:2px}
html.ordi dl.o-lignes dt{font-size:.88rem;font-weight:700;color:var(--foret-doux);padding-top:1px}
html.ordi dl.o-lignes dd{font-weight:700}
html.ordi .o-vu .o-etiq{font-size:.88rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-vu .o-etiq ~ .o-etiq{margin-top:8px}
html.ordi .o-vu .o-val{font-weight:800;line-height:1.4}
html.ordi .o-vu .o-src{margin-top:3px;font-size:.84rem;font-weight:600;color:var(--foret-doux)}
html.ordi .o-vu .o-src a{color:var(--foret);font-weight:800;text-underline-offset:2px}
html.ordi .o-aide{font-size:.84rem;font-weight:600;color:var(--foret-doux);line-height:1.45}
html.ordi .o-carte .o-aide{margin-top:6px}
html.ordi .o-aide b{color:var(--foret)}
html.ordi .o-ia-off{display:flex;gap:8px;align-items:flex-start;padding:0 4px}

/* ── la colonne de droite : l’échéance, la décision, ce que Pallier a lu ── */
/* V121 (testeur V2, décision du CEO) — seule la carte de décision colle, juste sous l’en-tête : sur un portable (1366 × 625), « Je viens »
   et l’échéance restent entiers quand on descend lire ; le reste de la colonne défile avec la page */
html.ordi .o-rail{display:flex;flex-direction:column;gap:16px;min-width:0;align-self:stretch}
html.ordi .o-decision{position:sticky;top:calc(var(--tete) + 22px);z-index:2;background:var(--blanc);border:2.5px solid var(--foret);border-radius:22px;padding:16px 18px}
html.ordi .o-echeance{display:flex;align-items:center;gap:9px}
html.ordi .o-echeance b{font-size:1.1rem;font-weight:900}
html.ordi .o-echeance .o-reste{margin-left:auto;font-size:.9rem;font-weight:800;color:var(--foret-doux)}
html.ordi .o-echeance.passee .o-reste{color:var(--alerte)}
html.ordi .o-jauge{height:10px;margin:10px 0 16px;border:2px solid var(--foret);border-radius:999px;background:var(--creme-2);overflow:hidden}
html.ordi .o-jauge i,html.ordi .o-mini-jauge i{display:block;height:100%;background:var(--lime);border-right:2px solid var(--foret)}
html.ordi .o-decision #contact-corps:not(:empty){margin-bottom:12px}
html.ordi .o-decision #contact-corps .etat-verif{margin:0}
html.ordi .o-decision #contact-corps .attente{margin:0 0 10px}
html.ordi .o-decision #contact-corps .tel{margin:0!important}
html.ordi .o-decision #contact-corps .bloc{margin-top:0;box-shadow:none}
html.ordi .o-decision .barre{position:static;background:none;border-radius:0;padding:0;margin:0;box-shadow:none;z-index:auto}
html.ordi .o-decision .barre-in{max-width:none;margin:0;display:grid;grid-template-columns:.78fr 1.22fr;gap:12px}
html.ordi .o-decision .barre .btn{flex:none;min-height:52px;padding:12px 16px;border:2.5px solid var(--foret);border-radius:999px;font:inherit;font-size:1.04rem;font-weight:900;letter-spacing:-.01em;
  color:var(--foret);white-space:nowrap;line-height:1.5}
html.ordi .o-decision .barre .btn-oui{background:var(--lime);box-shadow:0 4px 0 var(--lime-ombre)}
html.ordi .o-decision .barre .btn-non{background:var(--blanc);box-shadow:0 3px 0 var(--foret);font-weight:800}
html.ordi .o-decision .barre .btn-non:active{transform:translateY(3px);box-shadow:none}
html.ordi .o-decision .barre .btn:focus-visible{outline:3px solid var(--foret);outline-offset:3px}
html.ordi .o-apres{margin-top:14px;display:flex;gap:8px;font-size:.84rem;font-weight:700;color:var(--foret-doux);line-height:1.42}
html.ordi .o-apres .ico,html.ordi .o-ia-off .ico{margin-top:2px}
html.ordi .o-rail > #bloc-passe{margin-top:0;box-shadow:none;border-width:2.5px;border-radius:22px}
html.ordi .o-rail > #bloc-passe .bloc-tete{text-transform:none;letter-spacing:-.01em;font-size:1.04rem;font-weight:800;background:var(--creme-2)}

html.ordi .o-lu ul{list-style:none;margin:0;padding:0}
html.ordi .o-lu li{position:relative;padding:3px 0 3px 16px;font-size:.94rem;font-weight:700;line-height:1.4}
html.ordi .o-lu li::before{content:"";position:absolute;left:2px;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--lime-ombre)}
html.ordi .o-lu .o-resume{margin-bottom:6px;font-size:.95rem;font-weight:800;line-height:1.4}
html.ordi .o-lu .o-resume small{display:block;margin-top:2px;font-size:.8rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-lu .o-prevoir{margin-top:8px;padding-top:8px;border-top:1.5px solid rgba(18,49,42,.1);font-size:.94rem;line-height:1.4}
html.ordi .o-pistes > summary{display:flex;align-items:center;gap:6px;margin-top:8px;min-height:36px;padding:0;list-style:none;cursor:pointer;font-size:.9rem;font-weight:800;
  text-decoration:underline;text-underline-offset:3px;width:max-content}
html.ordi .o-pistes > summary::-webkit-details-marker{display:none}
html.ordi .o-pistes[open] > summary .ico{transform:rotate(180deg)}
html.ordi .o-pistes ul{margin-bottom:4px}
html.ordi .o-danger{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:8px 11px;background:var(--alerte-doux);border:2px solid var(--foret);border-radius:14px;font-size:.88rem;font-weight:800;line-height:1.4;color:var(--alerte)}
html.ordi .o-danger .ico{margin-top:2px}
/* V160 — la fiche de décision (maquette operations/v160/maquette/fiche-decision.html) : la carte de la lecture quitte le duo et passe pleine
   largeur sous les réponses ; ses quatre blocs sur deux colonnes (je sais · j’emporte, puis les pistes · ce que la lecture n’a pas pu voir),
   le pied dessous ; des vignettes plus grandes ; sur la carte crème, des filets en forêt léger et des pastilles blanches */
html.ordi .o-lu.o-fdd{margin-top:20px;padding:16px 22px 14px}
html.ordi .o-lu.o-fdd .o-resume{margin-bottom:0}
html.ordi .o-fdd-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:34px;align-items:start}
html.ordi .o-fdd-grille > .fdd{margin-top:12px;padding-top:12px;border-top:2px solid rgba(18,49,42,.12)}
html.ordi .o-fdd-grille > .fdd-pied{grid-column:1 / -1;grid-row:4;margin-top:12px;padding-top:10px;border-top:2px solid rgba(18,49,42,.12)}
/* à gauche ce que je sais, puis les pistes ; à droite ce que j’emporte, puis ce que la lecture n’a pas pu voir (chaque colonne se suit, sans trou) */
html.ordi .o-fdd-grille > #lu-sais{grid-column:1;grid-row:1 / span 2}
html.ordi .o-fdd-grille > #lu-emporte{grid-column:2;grid-row:1}
html.ordi .o-fdd-grille > #lu-nonvu{grid-column:2;grid-row:2 / span 2}
html.ordi .o-fdd-grille > #lu-pistes{grid-column:1;grid-row:3}
html.ordi .o-lu .fdd li::before{content:none}
html.ordi .o-lu .fdd .fdd-c,html.ordi .o-lu .fdd .fdd-p{border-bottom-color:rgba(18,49,42,.1)}
html.ordi .o-lu .fdd .fdd-c{padding:10px 0}
html.ordi .o-lu .fdd-v{width:96px;height:72px}
html.ordi .o-lu .fdd-vin img{max-width:92px;max-height:68px}
html.ordi .o-lu .fdd-ai,html.ordi .o-lu .fdd-mot.m-probable,html.ordi .o-lu .fdd-aucune,html.ordi .o-lu .fdd-v.sans{background:var(--blanc)}
html.ordi .o-mentions{font-size:.8rem;font-weight:600;color:var(--foret-doux);line-height:1.45;padding:0 4px}
html.ordi .o-mentions p + p{margin-top:6px}
html.ordi .o-mentions a{color:var(--foret);font-weight:800}
html.ordi .o-mentions .o-avec-ico,html.ordi p.o-mentions.o-avec-ico{display:flex;gap:8px}
html.ordi .o-mentions .ico{margin-top:1px}

/* ── les boutons (l’ombre dure : on les touche) ── */
html.ordi .o-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 16px;border:2.5px solid var(--foret);border-radius:999px;background:var(--blanc);
  font:inherit;font-size:1.04rem;font-weight:900;letter-spacing:-.01em;line-height:1.5;color:var(--foret);text-decoration:none;cursor:pointer;white-space:nowrap}
html.ordi .o-btn.o-oui{background:var(--lime);box-shadow:0 4px 0 var(--lime-ombre)}
html.ordi .o-btn.o-non{background:var(--blanc);box-shadow:0 3px 0 var(--foret);font-weight:800}
html.ordi .o-btn.o-plein{width:100%}
html.ordi .o-btn.o-petit{min-height:44px;padding:9px 14px;font-size:.94rem}
html.ordi .o-btn.o-second{background:var(--blanc);box-shadow:0 3px 0 var(--foret);min-height:46px;font-size:.92rem;padding:8px 12px}
html.ordi .o-btn:active{transform:translateY(3px);box-shadow:none}
html.ordi .o-btn:disabled{opacity:.6;cursor:default}
html.ordi .o-btn.fait{background:var(--lime-doux)}
html.ordi .o-puce{min-height:44px;padding:9px 14px;border:2.5px solid var(--foret);border-radius:999px;background:var(--blanc);box-shadow:0 3px 0 var(--foret);font:inherit;font-size:.92rem;font-weight:800;
  color:var(--foret);cursor:pointer}
html.ordi .o-puce[aria-pressed="true"]{background:var(--lime);box-shadow:0 3px 0 var(--lime-ombre)}
html.ordi .o-puce:disabled{opacity:.6}
html.ordi .o-lien-btn{display:inline-flex;align-items:center;min-height:32px;padding:0 2px;border:0;background:none;font-weight:900;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--foret)}

/* ── la feuille « Je viens », à la place de la colonne de droite : les photos restent visibles à gauche ── */
html.ordi .o-page.jv{padding-bottom:12px;--rail:420px}
@media (max-width:1360px){html.ordi .o-page.jv{--rail:384px}}
html.ordi .o-page > .feuille{position:sticky;top:calc(var(--tete) + 22px);left:auto;right:auto;bottom:auto;z-index:auto;height:calc(100vh - var(--tete) - 34px);max-height:none;
  display:flex;flex-direction:column;padding:0;background:var(--creme);border:3px solid var(--foret);border-radius:24px;box-shadow:0 18px 50px -20px rgba(18,49,42,.45);overflow:hidden;min-width:0}
html.ordi .o-page > .feuille .fermer{top:16px;right:18px;border-width:2.5px}   /* la maquette : .haut padding 16px 18px 10px (sa dernière règle) */
html.ordi .o-page > .feuille .defile{flex:1;min-height:0;overflow-y:auto;padding:0 18px}
html.ordi .o-page > .feuille .feuille-in{max-width:none}
html.ordi .o-page > .feuille h2{margin-top:16px;padding-right:56px;font-size:1.3rem;font-weight:900;letter-spacing:-.02em;line-height:1.5;gap:8px}
html.ordi .o-page > .feuille .qui{margin:2px 0 0;font-size:.86rem;font-weight:700;line-height:1.5}
html.ordi .o-page > .feuille .q{align-items:baseline;margin:10px 0 7px;font-size:.95rem;font-weight:900;letter-spacing:0;text-transform:none;color:var(--foret);line-height:1.5}
html.ordi .o-page > .feuille .q.q-quand{margin-top:20px}   /* le bas de .haut (10 px) et la marge de la question (10 px) */
html.ordi .o-page > .feuille .o-resume-quand{margin-top:16px}
html.ordi .o-page > .feuille .q span{font-size:.8rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-page > .feuille .puces{gap:7px}
html.ordi .o-page > .feuille .puce{min-height:42px;padding:7px 12px;font-size:.9rem;font-weight:800;line-height:1.5}
html.ordi .o-page > .feuille .tarifs{padding:10px 13px;font-size:.88rem;line-height:1.42;border-radius:14px}
html.ordi .o-page > .feuille .tarifs .mod-lien,html.ordi .o-page > .feuille .plus-mot{display:inline-flex;align-items:center;min-height:32px;padding:0 2px;margin:0;font:inherit;font-weight:900;
  color:var(--foret);text-decoration:underline;text-underline-offset:3px}
html.ordi .o-page > .feuille .plus-mot{margin-top:12px;font-size:15px}
html.ordi .o-page > .feuille .lira{margin:9px 0 0;padding:8px 12px;font-size:.86rem;line-height:1.4}
html.ordi .o-page > .feuille .pied-feuille{margin:0;padding:12px 16px 14px;border-top:2px solid rgba(18,49,42,.1);background:var(--creme)}
html.ordi .o-page > .feuille .envoi,html.ordi .o-page > .feuille .mod-act button{min-height:52px;padding:12px 16px;border-width:2.5px;font-size:1.04rem;font-weight:900;letter-spacing:-.01em;line-height:1.5}
html.ordi .o-page > .feuille .mod-act{display:grid;grid-template-columns:1fr 1fr;gap:12px}
html.ordi .o-page > .feuille .mod-act .mod-ok,html.ordi .o-page > .feuille .envoi[aria-disabled="false"]{box-shadow:0 4px 0 var(--lime-ombre)}
html.ordi .o-page > .feuille .mod-tete{min-height:0;padding:0;margin:14px 0 0}
html.ordi .o-page > .feuille .mod-tete b{font-size:1.04rem;line-height:1.5}
html.ordi .o-page > .feuille .mod-tete small{font-size:.84rem;margin:0;line-height:1.5}
html.ordi .o-page > .feuille .fois{margin-top:10px;padding:2px 14px;border-radius:16px}
html.ordi .o-page > .feuille .chp,html.ordi .o-page > .feuille #p-mod .chp{gap:12px;padding:8px 0}
html.ordi .o-page > .feuille .chp label{font-size:.94rem;line-height:1.25}
html.ordi .o-page > .feuille .chp label small{font-size:.8rem}
html.ordi .o-page > .feuille .montant{width:124px;height:46px;padding:0 13px}
html.ordi .o-page > .feuille .montant input{font-size:1.12rem}
html.ordi .o-page > .feuille .montant span{font-size:.86rem}
html.ordi .o-page > .feuille .on .puce{min-width:64px}
html.ordi .o-page > .feuille .ordre-faux,html.ordi .o-page > .feuille .p-erreur{font-size:.84rem}
html.ordi .o-page > .feuille .lu{font-size:.84rem}
/* « Modifier » ouvert : le créneau choisi tient sur une ligne ; « Pour ce dossier » et le mot attendent la fermeture */
/* V121 (testeur, point a) — la ligne du jour (« Mercredi 14 octobre, 8 h - 12 h ») est gardée ; sous 780 px de haut (un portable 1366 × 768),
   ses 28 px sont repris aux marges de la feuille, sans réduire les boutons : « + Un mot pour le client » reste visible */
@media (max-height:780px){
  html.ordi .o-page > .feuille .q.q-quand{margin-top:14px}
  html.ordi .o-page > .feuille .q{margin-top:4px}
  html.ordi .o-page > .feuille .lu{margin-top:4px}
  html.ordi .o-page > .feuille .lira{margin-top:6px}
  html.ordi .o-page > .feuille .plus-mot{margin-top:2px}
}
html.ordi .o-resume-quand{display:flex;align-items:center;gap:10px;margin:6px 0 0;padding:9px 12px;background:var(--blanc);border:2px solid var(--foret);border-radius:14px;font-weight:800;line-height:1.5}
html.ordi .o-resume-quand small{font-size:.86rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-page > .feuille.edit :is(.q-quand,#p-jours,#p-date-champ,#p-plages,#p-rdv-lu,.q-dossier,#p-prix,#p-estim-champ,#p-plus-mot,#p-msg-champ){display:none!important}

/* ── l’Espace ── */
html.ordi .o-bonjour-l{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
html.ordi .o-bonjour .o-h1{margin-top:0}
html.ordi .o-bonjour p{margin-top:2px;font-size:1rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-mois-l > p{font-size:.86rem;font-weight:800;color:var(--foret-doux);margin-bottom:2px}
html.ordi .o-mois{display:flex}
html.ordi .o-mois div{padding:0 16px;min-width:0;border-left:1.5px solid var(--creme-2)}
html.ordi .o-mois div:first-child{border-left:0;padding-left:0}
html.ordi .o-mois b{display:block;font-size:1.5rem;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
html.ordi .o-mois small{display:block;font-size:.82rem;font-weight:700;color:var(--foret-doux);line-height:1.25;white-space:nowrap}
html.ordi .o-sect{display:flex;align-items:center;gap:8px;margin:18px 0 8px}
html.ordi .o-sect .o-n{min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:var(--creme-2);border:2px solid var(--foret);font-size:.8rem;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;letter-spacing:0}
html.ordi .o-rien{font-size:.92rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-dossier{display:grid;grid-template-columns:44px minmax(0,1fr) 236px;align-items:center;gap:16px;padding:12px 16px;margin-top:10px;background:var(--blanc);
  border:2.5px solid var(--foret);border-radius:18px;box-shadow:0 3px 0 var(--foret);text-decoration:none;color:var(--foret)}
html.ordi .o-dossier.o-urgent{grid-template-columns:44px minmax(0,1fr) 236px 190px;padding:14px 16px}
html.ordi .o-dossier:active{transform:translateY(3px);box-shadow:none}
html.ordi .o-pu{width:44px;height:44px;border:2.5px solid var(--foret);border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--creme-2)}
html.ordi .o-pu.chaud{background:var(--abricot-doux)}
html.ordi .o-pu.lime{background:var(--lime)}
html.ordi .o-dossier b{display:block;font-size:1.02rem;font-weight:800}
html.ordi .o-dossier small{display:block;font-size:.9rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-dossier .o-quand{font-size:.92rem;font-weight:800;text-align:left}
html.ordi .o-dossier .o-quand b{font-size:inherit;font-weight:800}
html.ordi .o-dossier .o-quand small{font-weight:700}
html.ordi .o-dossier .o-quand.passee b{color:var(--alerte)}
html.ordi .o-mini-jauge{display:block;width:100%;height:8px;margin-top:6px;border:2px solid var(--foret);border-radius:999px;background:var(--creme-2);overflow:hidden}
html.ordi .o-liste{background:var(--blanc);border:2px solid var(--foret);border-radius:18px;overflow:hidden}
html.ordi .o-ligne{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 16px;text-decoration:none;color:var(--foret)}
html.ordi .o-ligne + .o-ligne{border-top:1.5px solid var(--creme-2)}
html.ordi a.o-ligne:hover{background:var(--creme-2)}
html.ordi .o-ligne .o-pu{width:40px;height:40px;border-width:2px;border-radius:12px}
html.ordi .o-ligne b{display:block;font-size:1rem;font-weight:800}
html.ordi .o-ligne small{display:block;font-size:.88rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-ligne .o-quand{font-size:.92rem;font-weight:800;text-align:right}
html.ordi .o-reglages{display:grid;grid-template-columns:1fr 1fr;gap:14px}
html.ordi .o-reglage{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--blanc);border:2px solid var(--foret);border-radius:18px}
html.ordi .o-reglage > span{flex:1;min-width:0}
html.ordi .o-reglage b{display:block;font-size:.98rem;font-weight:800}
html.ordi .o-reglage small{display:block;font-size:.84rem;font-weight:600;color:var(--foret-doux);line-height:1.4}
html.ordi .o-reglage .essai{display:inline;font:inherit;font-weight:800;color:var(--foret);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
html.ordi .o-reglage .inter{box-shadow:0 2px 0 var(--foret)}
html.ordi .o-reglages + .erreur,html.ordi .o-reglage + .erreur{grid-column:1 / -1;margin-top:0}
html.ordi .o-dispo{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--lime);border:2.5px solid var(--foret);border-radius:20px}
html.ordi .o-dispo.pause,html.ordi .o-dispo.arret{background:var(--abricot-doux)}
html.ordi .o-dispo b{display:flex;align-items:center;gap:6px;font-size:1.06rem;font-weight:900}
html.ordi .o-dispo small{display:block;font-size:.86rem;font-weight:700;line-height:1.4}
html.ordi .o-dispo .o-btn{margin-left:auto;min-height:44px;padding:8px 16px;font-size:.94rem;background:var(--blanc);box-shadow:0 3px 0 var(--foret)}
html.ordi .o-titre-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
html.ordi .o-carte .o-titre-ligne h2{margin:0}
html.ordi .o-titre-ligne > span{font-size:.8rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-titre-ligne .o-btn{min-height:38px;padding:5px 14px;font-size:.88rem}
html.ordi .o-tarifs-l{font-weight:800;line-height:1.4}
html.ordi .o-ok-t{display:inline-block;margin-top:6px;padding:0 8px;background:var(--lime);border:2px solid var(--foret);border-radius:999px;font-size:.8rem;font-weight:900}
html.ordi .o-doc{display:flex;gap:10px;padding:8px 0;border-top:1.5px solid var(--creme-2)}
html.ordi .o-co{width:24px;height:24px;min-width:24px;max-width:24px;flex:none;line-height:1;padding:0;margin-top:1px;border:2px solid var(--foret);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--lime);font-size:.8rem;font-weight:900}
html.ordi .o-co .ico{width:14px;height:14px;stroke-width:3}
html.ordi .o-co.bientot,html.ordi .o-co.manque{background:var(--abricot-doux)}
html.ordi .o-co.expire{background:var(--alerte);border-color:var(--alerte);color:#fff}
html.ordi .o-doc b{display:block;font-size:.94rem;font-weight:800}
html.ordi .o-doc small{display:block;font-size:.82rem;font-weight:600;color:var(--foret-doux);line-height:1.4}
html.ordi .o-espace .o-rail .o-mentions{margin-top:2px}

/* ── « Mes clients » : l’envoi, les derniers envois ; à droite, votre mois et votre lien ── */
html.ordi .o-sous{margin-top:4px;font-size:1rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-envoi{margin-top:16px;padding:14px 18px;background:var(--blanc);border:2.5px solid var(--foret);border-radius:20px}
html.ordi .o-etiq-champ{display:block;font-size:.9rem;font-weight:900}
html.ordi .o-saisie{display:flex;gap:12px;margin-top:6px}
html.ordi .o-champ{flex:1;min-width:0;max-width:300px;height:46px;padding:0 13px;background:var(--blanc);border:2.5px solid var(--foret);border-radius:14px;box-shadow:0 3px 0 var(--foret);
  font:inherit;font-size:1rem;font-weight:700;color:var(--foret);font-variant-numeric:tabular-nums}
html.ordi .o-champ::placeholder{color:#637770;opacity:1}
html.ordi .o-champ:focus{outline:3px solid var(--foret);outline-offset:2px}
html.ordi .o-envoi .o-btn{min-height:46px;padding:8px 18px;font-size:.96rem}
html.ordi .o-envoi .o-aide{margin-top:8px}
html.ordi .o-envoi .erreur,html.ordi .o-envoi .repli{margin-top:10px}
html.ordi .o-envoi .repli textarea,html.ordi .o-sortie .repli textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:.9rem;font-weight:600;line-height:1.4;color:var(--foret);background:var(--creme);border:2px solid var(--foret);border-radius:12px;padding:9px 11px;resize:vertical}
html.ordi .o-liste.o-envois .o-ligne{grid-template-columns:40px minmax(0,1fr) 118px 150px}
html.ordi .o-ligne.o-attente{background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(18,49,42,.025) 10px 20px)}
html.ordi .o-pastille{justify-self:start;padding:2px 10px;border:2px solid var(--foret);border-radius:999px;font-size:.8rem;font-weight:900;background:var(--creme-2)}
html.ordi .o-pastille.recue{background:var(--lime)}
html.ordi .o-pastille.vide{background:var(--blanc);border-style:dashed}
html.ordi .o-ligne.o-carte-lien{border:2.5px solid var(--foret);border-radius:18px;background:var(--blanc);box-shadow:0 3px 0 var(--foret);grid-template-columns:40px minmax(0,1fr)}
html.ordi .o-ligne.o-carte-lien:hover{background:var(--blanc)}
html.ordi .o-ligne.o-carte-lien:active{transform:translateY(3px);box-shadow:none}
html.ordi .o-lien-l{display:flex;gap:14px;align-items:center;margin-top:4px}
html.ordi .o-qr{width:104px;height:104px;flex:none;padding:6px;border:2px solid var(--foret);border-radius:14px;background:#fff}
html.ordi .o-qr svg{display:block;width:100%;height:100%}
html.ordi .o-url{display:block;font-size:1.02rem;font-weight:900;word-break:break-word}
html.ordi .o-url span{display:block;font-weight:700;color:var(--foret-doux);font-size:.9rem}
html.ordi .o-lien-carte small{display:block;margin-top:3px;font-size:.84rem;font-weight:600;color:var(--foret-doux);line-height:1.4}
html.ordi .o-duo-b{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
html.ordi .o-lien-carte .o-lien-btn{margin-top:6px}

/* ── la fiche de visite : la même forme que la fiche d’un dossier ; à droite, le client et « Emporter la fiche » ── */
/* V121 (testeur V4, décision du CEO) — « Lecture automatique, à vérifier sur place… » toujours visible : ses deux lignes (26 px à 1440 × 900,
   41 px à 1280 × 800) sont prises aux photos, entières, de la fiche de visite (maquette : - 30 px et 250 px) */
html.ordi .o-page.o-visite .o-galerie{height:calc(var(--galerie) - 56px)}
html.ordi .o-page.o-visite .o-rail{gap:14px}
@media (max-height:840px){
  html.ordi .o-page.o-visite .o-galerie{height:209px}
  html.ordi .o-page.o-visite{padding-bottom:12px}
  html.ordi .o-page.o-visite .o-client-carte{padding-top:10px;padding-bottom:12px}
  html.ordi .o-page.o-visite .o-depl{padding:8px 14px}
  html.ordi .o-page.o-visite .o-sortie{padding-top:12px;padding-bottom:12px}
}
/* V151 (C2 du testeur, décidé par le CEO) — « Mes clients » : la carte de M2 en tête du rail (V150) l’allongeait de 106 px ; sur un écran
   bas, la colonne se resserre (rien n’est retiré, rien ne change de place) : 1 280 × 800 ne défile plus, 1 280 × 720 pas plus que la V149.
   1 440 × 900 n’est pas touché. Mesuré par v121 (la page avec la carte ; l’écart avec la maquette de la V121, nommé : ECART_C2) */
@media (max-height:840px){
  html.ordi #o-clients .o-rail{gap:10px}
  html.ordi #o-clients .o-ligne.o-carte-lien{padding-top:7px;padding-bottom:7px}
}
@media (max-height:760px){
  html.ordi #o-clients .o-rail{gap:8px}
  html.ordi #o-clients .o-ligne.o-carte-lien{padding-top:5px;padding-bottom:5px}
  html.ordi #o-clients .o-ligne.o-carte-lien small{line-height:1.3}
  html.ordi #o-clients .o-lien-carte{padding-top:10px;padding-bottom:9px}
  html.ordi #o-clients .o-qr{width:84px;height:84px;padding:5px}
  html.ordi #o-clients .o-duo-b{margin-top:8px}
  html.ordi #o-clients .o-lien-carte .o-lien-btn{margin-top:4px}
  html.ordi #o-clients .o-rail .o-mentions{margin-top:0;line-height:1.3}
}
html.ordi .o-client-carte{background:var(--blanc);border:2.5px solid var(--foret);border-radius:22px;padding:14px 18px 16px}
html.ordi .o-ligne-c{display:flex;gap:12px;padding:8px 0;border-top:1.5px solid var(--creme-2)}
html.ordi .o-ligne-c:first-child{border-top:0;padding-top:2px}
html.ordi .o-ligne-c > div{min-width:0}
html.ordi .o-pic{width:34px;height:34px;flex:none;border:2px solid var(--foret);border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--creme-2)}
html.ordi .o-client-carte b{display:block;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
html.ordi .o-client-carte .o-tel{font-size:1.3rem;font-weight:900;letter-spacing:.01em;font-variant-numeric:tabular-nums}
html.ordi .o-client-carte small{display:block;font-size:.84rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-client-carte b a{text-decoration:none}
html.ordi .o-acces{display:inline-block;margin-top:5px;padding:3px 10px;background:var(--lime-doux);border:2px solid var(--foret);border-radius:10px;font-size:.88rem;font-weight:800}
html.ordi .o-acces em{font-style:normal;font-weight:700;color:var(--foret-doux);margin-right:6px}
html.ordi .o-choix{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
html.ordi .o-sortie{background:var(--blanc);border:2.5px solid var(--foret);border-radius:22px;padding:14px 18px}
html.ordi .o-sortie h2{font-size:1.04rem;font-weight:800;letter-spacing:-.01em;line-height:1.5;margin-bottom:10px}
html.ordi .o-grille{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
html.ordi .o-grille .o-large{grid-column:span 2}
html.ordi .o-sortie .o-aide{margin-top:10px}
html.ordi .o-depl{display:flex;align-items:center;gap:12px;padding:12px 16px;border:2px solid var(--foret);border-radius:18px;background:var(--creme-2)}
html.ordi .o-depl b{display:block;font-size:.94rem;font-weight:800;line-height:1.3}
html.ordi .o-depl small{display:block;font-size:.8rem;font-weight:600;color:var(--foret-doux);line-height:1.35}
html.ordi .o-on{display:flex;gap:6px;flex:none}
html.ordi .o-depl .o-puce{min-width:58px;padding:6px 12px;min-height:40px}
html.ordi #depl-err:empty{display:none}
html.ordi #depl-err .depl-ok{margin:0;padding:0 4px;font-size:.8rem}
html.ordi .o-imp-tete{display:none}
/* la fiche convenue garde la forme du téléphone : « SMS » n’ouvre rien sur la plupart des ordinateurs (testeur, point d) */
html.ordi #sms{display:none!important}

/* « Fiche en PDF » depuis un ordinateur : une page, le dossier puis le client, rien à toucher */
@media print{
  html.ordi .o-tete{display:none!important}
  html.ordi .o-page{display:block;padding:0;max-width:none;font-size:10pt}
  html.ordi .o-page .o-h1{font-size:17pt;margin-top:4px}
  html.ordi .o-imp-tete{display:flex;justify-content:space-between;gap:12px;font-size:8.5pt;font-weight:800;color:var(--foret-doux);border-bottom:1.5px solid var(--foret);padding-bottom:4px;margin:0 0 8px}
  html.ordi .o-galerie{height:62mm;break-inside:avoid;margin-top:8px}
  html.ordi .o-ph{cursor:default}
  html.ordi .o-duo{break-inside:avoid;margin-top:8px}
  html.ordi .o-rail{position:static;margin-top:8px;gap:8px}
  html.ordi .o-sortie,html.ordi .o-depl,html.ordi #depl-err,html.ordi .o-choix,html.ordi .o-pistes,html.ordi .loupe{display:none!important}
  html.ordi .o-client-carte{break-inside:avoid;padding:8px 12px}
}

/* ── V122 — « Votre page » (maquette operations/page-artisan-image-2026-10-13/2-votre-page.html, écran 2c, validée par HB le 13/10) :
   le formulaire à gauche (sa photo ou son logo, son mot, ses horaires, « Enregistrer »), l’aperçu vivant à droite, dans un
   téléphone (la page dessinée par app/page-artisan.js à 390 × 660, réduite). La feuille de recadrage devient une fenêtre au
   centre. Les mesures de la maquette ; tout bloc en flex ou en grille reste caché par [hidden] (verrou du haut de la feuille). ── */
html.ordi .pg-ordi{grid-template-columns:minmax(0,1fr) 400px;gap:40px;padding:22px var(--marge) 28px}
@media (max-width:1360px){html.ordi .pg-ordi{gap:28px}}
html.ordi .pg-form{max-width:760px;min-width:0}
html.ordi .pg-fil{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:.92rem;font-weight:800;color:var(--foret-doux);text-decoration:none}
html.ordi .pg-fil:hover{color:var(--foret)}
html.ordi .pg-ordi h1.pg-h1{font-size:32px;line-height:1.08;margin:2px 0 0;letter-spacing:-.03em}
html.ordi .pg-ordi h1.pg-h1:focus{outline:none}
html.ordi .pg-sous{display:block;margin:4px 0 0;font-size:1rem;font-weight:700;color:var(--foret-doux)}
html.ordi .pg-sous b{color:var(--foret)}
html.ordi .pg-carte{display:block;margin-top:16px;background:var(--blanc);border:2px solid var(--foret);border-radius:20px;padding:14px 18px 16px}
html.ordi .pg-carte > h2{display:block;margin:0;font-size:1.04rem;font-weight:800;letter-spacing:-.01em;line-height:1.3}
html.ordi .pg-qui{margin-top:0;border:0;border-radius:0;padding:8px 0 0;gap:16px;background:none}
html.ordi .pg-med{width:84px;height:84px;font-size:1.7rem}
html.ordi .pg-qui b{font-size:.98rem;font-weight:800}
html.ordi .pg-qui small{font-size:.86rem;font-weight:600}
html.ordi .pg-qui .pg-aide{display:block;margin-top:2px}
html.ordi .pg-qui .pg-tx{display:flex;flex-direction:column;align-items:flex-start}
html.ordi .pg-qui .pg-statut + .pg-metier{display:block}
html.ordi .pg-qui .pg-statut{order:3;display:inline-block;margin-top:6px;padding:0 9px;border:2px solid var(--foret);border-radius:999px;background:var(--creme-2);font-size:.8rem;font-weight:900;color:var(--foret)}
html.ordi .pg-qui .pg-statut.refus{background:var(--abricot-doux);color:var(--foret)}
/* le refus ou le retrait : la phrase dans la carte, à la place de l’aide, plutôt qu’un encadré en plus (testeur : 828 px pour 800) */
html.ordi .pg-note-photo{display:none!important}
html.ordi .pg-qui .pg-aide.refus{color:var(--alerte);font-weight:800}
html.ordi .pg-qui .pg-boutons .pg-retirer{display:inline-flex}
html.ordi .pg-carte .pg-etiq{margin-bottom:8px}
html.ordi .pg-mot{min-height:84px;font-size:1.02rem}
html.ordi .pg-jours{grid-template-columns:repeat(7,64px);gap:8px}
html.ordi .pg-ligne-h{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin-top:12px}
html.ordi .pg-ligne-h .pg-heures,html.ordi .pg-ligne-h .pg-options{margin-top:0}
html.ordi .pg-actions{display:flex;align-items:center;gap:14px;margin-top:18px}
html.ordi .pg-actions .gros{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:220px;min-height:52px;margin:0;padding:13px 24px;font-size:1.05rem;line-height:1.5;box-shadow:0 4px 0 var(--lime-ombre)}
html.ordi .pg-actions .pg-second{min-height:52px;padding:8px 22px;font-size:1rem}
html.ordi .pg-actions p{margin:0;max-width:300px;font-size:.84rem;font-weight:600;color:var(--foret-doux);line-height:1.4}
html.ordi .pg-rail{display:flex;position:sticky;top:calc(var(--tete) + 22px);flex-direction:column;align-items:center;gap:0;align-self:start}
html.ordi .pg-rail h2{align-self:stretch;margin:0;font-size:1.04rem;font-weight:800;letter-spacing:-.01em;line-height:1.3}
html.ordi .pg-rail h2 small{display:block;font-size:.86rem;font-weight:600;color:var(--foret-doux);letter-spacing:0}
html.ordi .pg-telephone{position:relative;width:303px;height:507px;margin-top:12px;border:3px solid var(--foret);border-radius:34px;overflow:hidden;background:var(--creme)}
html.ordi .pg-ecran{position:absolute;left:0;top:0;width:390px;height:660px;transform:scale(.7615);transform-origin:0 0;pointer-events:none}
html.ordi .pg-ecran .pa{min-height:660px;height:660px}
html.ordi .pg-ecran .pa-barre{position:static}   /* l'aperçu réduit : la barre à sa place (collée en bas, elle suivrait la fenêtre) */
html.ordi .pg-rail .pg-note{max-width:303px;margin:10px 0 0;text-align:center}
html.ordi .pg-lien{display:inline-flex;align-items:center;gap:7px;min-height:40px;margin-top:10px;font-size:.92rem;font-weight:900;color:var(--foret);text-decoration:underline;text-underline-offset:3px}
html.ordi .pg-o-pu,html.ordi .o-pu.pg-mini{width:40px;height:40px;border-width:2px}
html.ordi .pg-feuille{left:50%;right:auto;top:50%;bottom:auto;width:460px;max-width:calc(100% - 40px);transform:translate(-50%,-50%);border:2.5px solid var(--foret);border-radius:24px;padding:18px 22px 20px}
@media (max-height:840px){
  html.ordi .pg-ordi h1.pg-h1{font-size:29px}
  html.ordi .pg-carte{margin-top:12px;padding:12px 18px 14px}
  html.ordi .pg-actions{margin-top:14px}
  html.ordi .pg-telephone{width:270px;height:452px}
  html.ordi .pg-ecran{transform:scale(.6785)}
  html.ordi .pg-rail .pg-note{max-width:270px}
}
/* V122 (testeur, finition 2) — 1280 × 720 : « Votre page » tient sans défiler (marges, médaillon, champ du mot et téléphone resserrés) */
@media (max-height:760px){
  html.ordi .pg-ordi{padding-top:12px;padding-bottom:12px}
  html.ordi .pg-fil{min-height:26px}
  html.ordi .pg-ordi h1.pg-h1{font-size:26px}
  html.ordi .pg-sous{margin-top:2px;font-size:.95rem}
  html.ordi .pg-carte{margin-top:8px;padding:9px 16px 11px}
  html.ordi .pg-qui{padding-top:4px}
  html.ordi .pg-med{width:60px;height:60px;font-size:1.25rem}
  html.ordi .pg-mot{min-height:62px}
  html.ordi .pg-carte .pg-etiq{margin-bottom:6px}
  html.ordi .pg-regle{margin-top:6px}
  html.ordi .pg-ligne-h{margin-top:8px}
  html.ordi .pg-actions{margin-top:10px}
  html.ordi .pg-telephone{width:240px;height:402px;margin-top:8px}
  html.ordi .pg-ecran{transform:scale(.6031)}
  html.ordi .pg-rail .pg-note{max-width:240px}
}

/* ══ V167 — l’Espace sur ordinateur, lot A (maquette operations/maquettes-espace-ordinateur-2026-10-27/, « Ok » de HB le 27/10) : la navigation
   latérale (forêt, 232 px ; 212 px jusqu’à 1 300 px, comme la maquette à 1 280), « Mes clients » avec la liste (372 px) et le panneau côte à côte,
   la fiche dans le panneau (son en-tête fixe, seul le corps défile), la bande « en pause », le lien périmé. Tout sous html.ordi. ══ */
html:not(.ordi) .o-nav{display:none!important}
html.ordi{--nav:232px;--liste:372px;--filet:#ECE4D3}
@media (max-width:1300px){html.ordi{--nav:212px}}
html.ordi body.o-avec-nav{padding-left:var(--nav)}
html.ordi body.o-avec-nav #nf-barre{left:var(--nav)}
html.ordi .o-nav{position:fixed;left:0;top:0;bottom:0;width:var(--nav);z-index:40;background:var(--foret);color:var(--creme);display:flex;flex-direction:column;
  padding:22px 14px 18px;font-size:15px;line-height:1.4;font-weight:600;overflow-y:auto}
html.ordi .o-nav .o-marque{padding:0 10px 26px}
html.ordi .o-nav-l{display:grid;gap:4px}
html.ordi .o-nav-a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;text-decoration:none;font-weight:700;font-size:1rem;color:#DCE6E1}
html.ordi .o-nav-a .ico{width:20px;height:20px;flex:none}
html.ordi .o-nav-a:hover{background:#1C4239}
html.ordi .o-nav-a[aria-current]{background:var(--lime);color:var(--foret);font-weight:800}
html.ordi .o-nav-nb{margin-left:auto;min-width:24px;height:22px;border-radius:11px;background:var(--lime);color:var(--foret);font-size:.8rem;font-weight:900;display:grid;place-items:center;padding:0 7px}
html.ordi .o-nav-a[aria-current] .o-nav-nb{background:var(--foret);color:var(--lime)}
html.ordi .o-nav :focus-visible{outline:3px solid var(--lime);outline-offset:2px}
html.ordi .o-nav-pied{margin-top:auto;display:grid;gap:14px;padding-top:16px}
html.ordi .o-nav-notif{display:grid;gap:3px;padding:10px 12px;border-radius:12px;background:#1C4239;color:#DCE6E1}
html.ordi .o-nn-l{display:flex;align-items:center;gap:10px;font-size:.86rem;font-weight:700}
html.ordi .o-nn-l svg{width:18px;height:18px;flex:none}
html.ordi .o-nn-l b{flex:1;min-width:0;font-weight:700}
/* V173 (F-b du testeur) — « Notifications sur cet ordinateur » sur deux lignes au plus dans la barre de gauche : le titre un peu plus petit et les écarts
   resserrés (le texte ne change pas) ; la ligne d’état dessous reste alignée sur le titre (cloche 18 px + écart) */
html.ordi .o-nn-l{gap:7px}
html.ordi .o-nn-l b{font-size:.78rem;letter-spacing:-.01em;line-height:1.25}
html.ordi .o-nav .inter{position:relative;flex:none;width:46px;height:28px;border-color:var(--lime);background:transparent}
html.ordi .o-nav .inter::before{content:"";position:absolute;inset:-9px -6px}   /* V171 (point 2 ; testeur V1) : la zone élargie sur ::before, comptée depuis l’intérieur de la bordure : 54 × 42 réels à 1 440 ; le dessin ne change pas */
html.ordi .o-nav .inter i{top:2px;left:2px;width:19px;height:19px;border-color:var(--lime);background:var(--foret)}
html.ordi .o-nav .inter[aria-checked="true"]{background:var(--lime)}
html.ordi .o-nav .inter[aria-checked="true"] i{left:20px;border-color:var(--foret)}
html.ordi .o-nav-notif small{display:block;padding-left:25px;font-size:.78rem;font-weight:600;color:#B9CCC5;line-height:1.35}
html.ordi .o-nav-notif .notif-msg{display:inline;font-size:inherit;color:var(--lime)}
html.ordi .o-nn-essai{justify-self:start;margin-left:25px;min-height:34px;padding:0;border:0;background:none;color:var(--lime);font:inherit;font-size:.8rem;font-weight:800;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html.ordi .o-qui{display:flex;align-items:center;gap:10px;padding:0 6px;min-width:0}
html.ordi .o-qui img,html.ordi .o-qui-i{width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;border:2px solid var(--lime)}
html.ordi .o-qui-i{display:grid;place-items:center;background:#1C4239;color:var(--lime);font-weight:900}
html.ordi .o-qui-t{min-width:0;display:grid}
html.ordi .o-qui-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ordi .o-qui-t small{overflow-wrap:break-word;line-height:1.3}   /* V171 (testeur F4) : le lien en entier, sur deux lignes si besoin (coupé après « / » ou « - », lienCoupe) */
html.ordi .o-qui-t b{font-size:.95rem;font-weight:800;color:var(--creme)}
html.ordi .o-qui-t small{font-size:.8rem;font-weight:600;color:#8AA39B}

/* la coque : [la bande] / la liste | le panneau ; seule la liste et le panneau défilent */
html.ordi main#corps:has(> .o-mc),html.ordi main#corps:has(> .o-seule),html.ordi main#corps:has(> .o-perime){max-width:none;padding:0;margin:0}
html.ordi .o-mc{height:100vh;display:flex;flex-direction:column;color:var(--foret);font-size:15px;line-height:1.4;font-weight:600}
html.ordi .o-mc :where(h1,h2,h3,p,dl,dd),html.ordi .o-seule :where(h1,h2,h3,p,dl,dd){margin:0}
html.ordi :where(.o-mc,.o-seule) a{color:inherit}
html.ordi :where(.o-mc,.o-seule) :focus-visible{outline:3px solid var(--foret);outline-offset:2px}
html.ordi .o-mc-in{flex:1;min-height:0;display:grid;grid-template-columns:var(--liste) minmax(0,1fr)}
html.ordi .o-col{display:flex;flex-direction:column;min-height:0;border-right:2px solid var(--filet);background:var(--creme)}
html.ordi .o-col-tete{display:flex;align-items:center;gap:10px;padding:24px 20px 14px}
html.ordi .o-col-t{font-size:1.5rem;font-weight:900;letter-spacing:-.02em;line-height:1.2}
html.ordi .o-col-tete .o-b{margin-left:auto}
html.ordi .o-liste-c{flex:1;min-height:0;overflow:auto;padding:2px 10px 16px}
html.ordi .o-envois{display:grid;gap:2px}
html.ordi .o-ligne.o-l{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border:0;border-radius:14px;background:none;color:var(--foret)}
html.ordi .o-ligne.o-l + .o-ligne.o-l{border-top:0}
html.ordi a.o-ligne.o-l:hover{background:var(--creme-2)}
html.ordi .o-ligne.o-l.choisie,html.ordi a.o-ligne.o-l.choisie:hover{background:var(--lime-doux);box-shadow:inset 0 0 0 2px var(--foret)}
html.ordi .o-vign{width:48px;height:48px;border-radius:12px;border:2px solid var(--foret);background:var(--creme-2);display:grid;place-items:center;color:var(--foret-doux)}
html.ordi .o-vign .ico{width:20px;height:20px}
html.ordi .o-l-t{display:block;min-width:0}
html.ordi .o-ligne.o-l .o-l-t > b{display:block;font-size:.97rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ordi .o-l.nonlue .o-l-t > b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#0C7489;margin:0 7px 1px 0;vertical-align:middle}
/* V171 (point 1) : ce que la maquette écrit en entier se lit en entier, sur deux lignes si la place manque (la ligne grandit de cette
   ligne-là) : « Lien envoyé, en attente de ses photos », le lieu de la petite ligne ; le titre d'une fiche garde sa coupe « … » (maquette 02) */
html.ordi .o-l-titre{display:block;font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ordi .o-attente .o-l-titre{white-space:normal;overflow:visible}
html.ordi .o-ligne.o-l .o-l-t small{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-width:0;margin-top:3px;white-space:nowrap;font-size:.8rem;font-weight:600;color:var(--foret-doux)}
html.ordi .o-l-t .o-pastille{flex:none;padding:1px 8px;border-width:1.5px;border-radius:8px;font-size:.74rem;font-weight:800;background:var(--blanc)}
html.ordi .o-l-t .o-pastille.recue{background:var(--lime)}
html.ordi .o-l-t .o-pastille.vide{border-style:dashed;border-color:var(--foret-doux);color:var(--foret-doux)}
html.ordi .o-l-lieu{min-width:0;white-space:normal}
html.ordi .o-l-ph{flex:none}
html.ordi .o-ligne.o-l .o-quand{align-self:start;padding-top:2px;font-size:.8rem;font-weight:700;color:var(--foret-doux);white-space:nowrap;text-align:right}
html.ordi .o-rien-l{display:grid;gap:8px;justify-items:start;padding:4px 10px}
html.ordi .o-lien-s{display:inline-flex;align-items:center;min-height:40px;font-weight:800;font-size:.92rem;color:var(--foret);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}

/* les boutons du bureau : 40 px, l’ombre dure parce qu’on les touche */
html.ordi .o-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:12px;border:2.5px solid var(--foret);background:var(--blanc);
  color:var(--foret);font:inherit;font-weight:800;font-size:.93rem;line-height:1.2;text-decoration:none;box-shadow:0 3px 0 var(--foret);white-space:nowrap;cursor:pointer}
html.ordi .o-b .ico{width:17px;height:17px;flex:none}
html.ordi .o-b.o-p{background:var(--lime)}
html.ordi .o-b.o-g{min-height:46px;padding:0 22px;font-size:1rem;border-radius:14px}
html.ordi .o-b:active{transform:translateY(3px);box-shadow:none}
html.ordi .o-b:disabled,html.ordi .o-b[aria-disabled="true"]{opacity:.6;cursor:default}
html.ordi .o-b.fait{background:var(--lime-doux)}

/* le panneau d’accueil */
html.ordi .o-pan{min-height:0;display:flex;flex-direction:column;background:var(--blanc)}
html.ordi .o-pan > .vide{margin:auto}
html.ordi .o-acc{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;padding:40px 56px 24px}
html.ordi .o-acc-offre{width:100%;max-width:680px}
html.ordi .o-acc-offre .offre{margin:0}
html.ordi .o-acc-offre .offre .gros{display:inline-block;width:auto;padding:12px 24px}
html.ordi .o-acc-offre .offre .lien-doux{display:inline-flex;align-items:center;margin:10px 0 0 18px}
html.ordi .o-acc-bloc{width:100%;max-width:680px;margin:auto 0}
html.ordi .o-acc-offre + .o-acc-bloc{margin-top:24px}
html.ordi .o-acc-t{font-size:2rem;font-weight:900;letter-spacing:-.02em;line-height:1.1}
html.ordi .o-acc-t:focus{outline:none}
html.ordi .o-acc .o-sous{margin-top:6px;font-size:1.02rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-acc .o-envoi{margin-top:24px;padding:20px 22px}
html.ordi .o-acc .o-saisie{gap:10px;margin-top:8px}
html.ordi .o-acc .o-champ{max-width:none;box-shadow:none}
html.ordi .o-acc .o-envoi .o-aide{margin-top:12px;font-size:.86rem}
html.ordi .o-deja{margin-top:14px;display:flex;align-items:center;gap:14px;padding:14px 18px;border:2.5px solid var(--foret);border-radius:18px;background:var(--blanc);box-shadow:0 3px 0 var(--foret)}
html.ordi .o-deja .o-pu{flex:none;width:42px;height:42px;border-width:2px;border-radius:12px}
html.ordi .o-deja b{display:block;font-size:1rem;font-weight:900}
html.ordi .o-deja small{display:block;font-size:.86rem;font-weight:600;color:var(--foret-doux)}
html.ordi .o-acc .nf-efface-ok{margin:0 0 14px}
html.ordi .o-acc-pied{margin-top:auto;width:100%;max-width:680px;padding-top:16px;border-top:2px solid var(--filet);display:grid;gap:6px;font-size:.82rem;font-weight:600;color:var(--foret-doux);line-height:1.45}
html.ordi .o-acc-bloc + .o-acc-pied{margin-top:28px}
html.ordi .o-acc-pied .o-avec-ico{display:flex;gap:8px}
html.ordi .o-acc-pied .ico{width:16px;height:16px;flex:none;margin-top:1px}
html.ordi .o-acc-pied a{font-weight:800;color:var(--foret)}
html.ordi .o-acc-l{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px}
html.ordi .o-acc-l p.arret-l{margin:0}
html.ordi .o-acc-l p.arret-l::before{content:"·";margin-right:6px}
html.ordi .o-acc-l .arret-l .lien-doux{min-height:34px;font-size:inherit;color:var(--foret)}
html.ordi .o-acc-l > div.arret-l{display:none}
html.ordi .o-acc-l > .offre{flex-basis:100%;margin:10px 0 0}
html.ordi .o-acc-l > .offre .gros{display:inline-block;width:auto;padding:10px 22px}
html.ordi .o-pied-notif{margin:0}
html.ordi .o-pied-notif ol{margin:4px 0 0;padding-left:18px}
html.ordi .o-pied-notif svg{width:15px;height:15px;vertical-align:-2px}

/* la bande « en pause » / « arrêté » : pleine largeur, au-dessus de la liste et de la fiche, en crème et forêt */
html.ordi .o-bande{flex:none;display:flex;align-items:center;gap:16px;padding:12px 28px 12px 24px;background:var(--creme-2);border-bottom:2px solid var(--foret)}
html.ordi .o-bande-i .ico{width:26px;height:26px}
html.ordi .o-bande .offre{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center;margin:0;padding:0;border:0;background:none}
html.ordi .o-bande .offre h2{grid-column:1;font-size:1.05rem;margin:0 0 2px}
html.ordi .o-bande .offre p{grid-column:1;font-size:.88rem;line-height:1.4}
html.ordi .o-bande .offre .gros{grid-column:2;grid-row:1 / span 2;width:auto;margin:0;padding:11px 22px;white-space:nowrap}
html.ordi .o-bande .offre .erreur{grid-column:1 / -1;margin-top:6px}

/* la fiche : l’en-tête fixe, le corps qui défile seul ; deux colonnes (les mots, les photos… | ce que Pallier a lu), une sans la lecture */
html.ordi .o-fiche{flex:1;min-height:0;display:flex;flex-direction:column;color:var(--foret);font-size:15px;line-height:1.4;font-weight:600}
html.ordi .o-fiche .num{letter-spacing:normal}
html.ordi .o-f-tete{flex:none;padding:20px 32px 16px;border-bottom:2px solid var(--filet);background:var(--blanc)}
html.ordi .o-f-tete .o-meta{font-size:.88rem;font-weight:700}
html.ordi .o-f-titre{margin-top:10px;font-size:1.62rem;line-height:1.15;letter-spacing:-.02em}
html.ordi .o-f-titre:focus{outline:none}
html.ordi .o-f-titre:focus-visible{outline:3px solid var(--foret);outline-offset:3px;border-radius:6px}
html.ordi .o-contact{display:flex;align-items:center;flex-wrap:wrap;column-gap:26px;row-gap:4px;margin-top:10px}
html.ordi .o-contact .ico{width:19px;height:19px;flex:none}
html.ordi .o-c-tel{display:inline-flex;align-items:center;gap:8px;min-height:34px}
html.ordi .o-c-tel b{font-size:1.25rem;font-weight:900;letter-spacing:.01em}
html.ordi .o-c-tel b a{text-decoration:none;position:relative}
html.ordi .o-c-tel b a::before{content:"";position:absolute;top:-5px;bottom:-5px;left:-4px;right:-4px}   /* V171 (point 2) : le numéro, cible de 34 px */
html.ordi .o-c-tel small{font-size:.84rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-c-adr{display:inline-flex;align-items:center;gap:8px;min-height:34px;text-decoration:none;font-weight:700}
html.ordi .o-c-adr span{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
html.ordi .o-c-acces{font-size:.86rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-c-acces em{font-style:normal;font-weight:900;color:var(--foret)}
html.ordi .o-f-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
html.ordi .o-f-tete .o-lignes-aide{margin-top:10px;font-size:.84rem}
html.ordi .o-f-tete .repli{margin-top:10px}
html.ordi .o-f-tete .repli textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:.9rem;font-weight:600;line-height:1.4;color:var(--foret);background:var(--creme);border:2px solid var(--foret);border-radius:12px;padding:8px 10px}
html.ordi .o-f-corps{flex:1;min-height:0;overflow:auto;padding:22px 32px 28px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}
html.ordi .o-fiche.sans-lu .o-f-corps{grid-template-columns:minmax(0,1fr)}
html.ordi .o-f-g > *{margin-top:16px}
html.ordi .o-f-g > :first-child{margin-top:0}
html.ordi .o-f-g > #depl-err:empty{margin-top:0}
html.ordi .o-f-g .o-mots + .o-mots{margin-top:8px}
html.ordi .o-f-corps .o-galerie{height:300px}
html.ordi .o-fiche.sans-lu .o-galerie{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:240px;height:auto}
html.ordi .o-fiche.sans-lu .o-galerie > .o-ph:first-child{grid-row:auto}
html.ordi .o-f-bas{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}
html.ordi .o-f-bas > div > *{margin-top:14px}
html.ordi .o-f-bas > div > :first-child{margin-top:0}
html.ordi .o-dit h2{font-size:1.02rem;font-weight:900;margin-bottom:6px}
html.ordi .o-dit dl.o-lignes > div{grid-template-columns:130px minmax(0,1fr);padding:8px 0;border-top:1.5px solid var(--filet)}
html.ordi .o-dit dl.o-lignes > div:first-child{border-top:1.5px solid var(--filet);padding-top:8px}
html.ordi .o-dit dl.o-lignes dt{font-size:.93rem}
html.ordi .o-dit dl.o-lignes dd{font-size:.93rem;font-weight:800}
html.ordi .o-c-mail{display:flex;gap:8px;align-items:flex-start;font-size:.92rem}
html.ordi .o-c-mail .ico{width:17px;height:17px;flex:none;margin-top:2px}
html.ordi .o-c-mail small{display:block;font-size:.8rem;font-weight:600;color:var(--foret-doux)}
html.ordi .o-f-g .o-depl{border:0;border-radius:14px;padding:12px 14px}
html.ordi .o-f-g .o-ia-off{display:flex;gap:8px;align-items:flex-start}
html.ordi .o-f-g .o-ia-off .ico{width:16px;height:16px;flex:none;margin-top:2px}
html.ordi .o-protege{display:flex;gap:6px;align-items:flex-start;font-size:.8rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-protege .ico{width:15px;height:15px;flex:none;margin-top:1px}
html.ordi .o-f-d .o-lu.o-fdd{margin-top:0;border:0;padding:18px 20px}
html.ordi .o-f-d .o-fdd-grille{grid-template-columns:minmax(0,1fr)}
html.ordi .o-f-d .o-fdd-grille > *{grid-column:auto!important;grid-row:auto!important}
@media (max-width:1279px){html.ordi .o-f-corps,html.ordi .o-f-bas{grid-template-columns:minmax(0,1fr)}}
/* jusqu’à 1 300 px (la maquette à 1 280) : la navigation à 212 px, les quatre exports sur une ligne, la bande sur deux lignes (le titre et le
   bouton, puis la phrase sur toute la largeur) */
@media (max-width:1300px){
  html.ordi .o-nav{padding-left:12px;padding-right:12px}
  html.ordi .o-nav-notif{padding:10px}
  html.ordi .o-nn-l{gap:8px;font-size:.8rem}
  html.ordi .o-nav .inter{width:42px}
  html.ordi .o-nav .inter[aria-checked="true"] i{left:16px}
  html.ordi .o-nav-notif small{padding-left:26px}
  html.ordi .o-nn-essai{margin-left:26px}
  html.ordi .o-f-tete{padding-left:26px;padding-right:26px}
  html.ordi .o-f-corps{padding-left:26px;padding-right:26px;gap:24px}
  html.ordi .o-f-actions{gap:8px}
  html.ordi .o-f-actions .o-b{padding:0 12px;font-size:.9rem;gap:7px}
  html.ordi .o-acc{padding:32px 40px 22px}
  /* V167, testeur B1 : sous 1 300 px, le champ « Son portable » prend sa ligne (il tombait à 64 px à 1 200), les deux boutons dessous */
  html.ordi .o-acc .o-saisie{flex-wrap:wrap}
  html.ordi .o-acc .o-champ{flex:1 1 100%}
  html.ordi .o-bande .offre{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  html.ordi .o-bande .offre h2{grid-row:1;align-self:center}
  html.ordi .o-bande .offre p{grid-column:1 / -1;grid-row:2}
  html.ordi .o-bande .offre .gros{grid-row:1;min-height:0;padding:7px 18px;font-size:.94rem}
}

/* la fiche par le lien de l’email, sans clé : la même fiche, seule, sur toute la largeur, sous l’en-tête d’aujourd’hui */
html.ordi .o-seule{max-width:1180px;margin:0 auto;padding:0 var(--marge) 28px;color:var(--foret)}
html.ordi .o-seule .o-f-tete{position:sticky;top:var(--tete);z-index:5}
html.ordi .o-seule .o-f-corps{overflow:visible;background:var(--blanc)}

/* le lien périmé (maquette 08-d) : une carte au centre, sans navigation */
html.ordi .o-perime{min-height:100vh;display:grid;place-items:center;padding:24px;color:var(--foret);font-size:15px;line-height:1.45}
html.ordi .o-perime-c{width:min(520px,100%);background:var(--blanc);border:2.5px solid var(--foret);border-radius:28px;padding:34px 36px 32px}
html.ordi .o-perime-m{display:flex;align-items:center;gap:10px;font-size:1.3rem;font-weight:900;letter-spacing:-.05em}
html.ordi .o-perime-m svg{width:30px;height:30px}
html.ordi .o-perime h1{margin:22px 0 0;font-size:1.75rem;font-weight:900;letter-spacing:-.02em;line-height:1.15}
html.ordi .o-perime p{margin:10px 0 0;font-size:1.02rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-perime-b{display:flex;align-items:center;gap:24px;margin-top:24px}
html.ordi .o-perime :focus-visible{outline:3px solid var(--foret);outline-offset:2px}

/* V169 — le panneau d’une rubrique (maquette : .pan-tete.barre, .pan-corps, .deux) : l’en-tête fixe, le corps qui défile seul, deux colonnes */
html.ordi .o-pt{flex:none;padding:22px 32px 18px;border-bottom:2px solid var(--filet);background:var(--blanc)}
html.ordi .o-pt.o-barre{display:flex;align-items:center;gap:12px}
html.ordi .o-pt-tt{flex:1;min-width:0}
html.ordi .o-pt-t{font-size:1.62rem;font-weight:900;letter-spacing:-.02em;line-height:1.15}
html.ordi .o-pt-t:focus{outline:none}
html.ordi .o-pt-t:focus-visible{outline:3px solid var(--foret);outline-offset:3px;border-radius:6px}
html.ordi .o-pt p.o-pt-s{margin-top:4px;font-size:.92rem;font-weight:700;color:var(--foret-doux)}
html.ordi .o-pc{flex:1;min-height:0;overflow:auto;padding:22px 32px 28px}
html.ordi .o-2c{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}

/* V169 — « Votre lien » (maquette 03) : la carte du lien, les six gestes et les mentions dans la colonne de la liste ; le geste dans le panneau */
html.ordi .o-lien-defile{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;padding:0 0 16px}
html.ordi .o-lien-c{margin:0 20px 4px;display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:center;padding:14px;border:2.5px solid var(--foret);border-radius:18px;background:var(--blanc)}
html.ordi .o-lien-c .o-qr{width:86px;height:86px;padding:6px;border-radius:12px}
html.ordi .o-lien-c .o-url{font-size:1rem;overflow-wrap:anywhere}
html.ordi .o-lien-c small{display:block;margin-top:2px;font-size:.8rem;font-weight:600;color:var(--foret-doux);line-height:1.4}
html.ordi .o-lien-c .o-lien-s{min-height:34px;font-size:.9rem}
html.ordi .o-lien-sect{font-size:.92rem;font-weight:900;padding:14px 20px 6px}
html.ordi #o-lien .gp-liste{margin:0;padding:0 10px;border:0;border-radius:0;box-shadow:none;background:none;display:grid;gap:2px;overflow:visible}
html.ordi #o-lien .gp-liste a{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;min-height:0;padding:9px 10px;border:0;border-radius:14px}
html.ordi #o-lien .gp-liste a + a{border-top:0}
html.ordi #o-lien .gp-liste a:hover{background:var(--creme-2)}
html.ordi #o-lien .gp-liste a.choisie{background:var(--lime-doux);box-shadow:inset 0 0 0 2px var(--foret)}
html.ordi #o-lien .gp-liste a:focus-visible{outline:3px solid var(--foret);outline-offset:-1px}
html.ordi #o-lien .gp-liste .chev{display:none}
html.ordi #o-lien .gp-liste b{font-size:.93rem;font-weight:800}
html.ordi #o-lien .o-col > .o-lien-defile > .o-mentions{margin:auto 20px 0;padding:14px 0 0;border-top:2px solid var(--filet)}
html.ordi .o-gp{flex:1;min-height:0;display:flex;flex-direction:column}
html.ordi .o-gp .gp-onglets{margin-top:14px}
html.ordi .o-gp .gp-simple{margin:0 0 22px}
html.ordi .o-gp-g h2{font-size:1.05rem;font-weight:900;margin:0}
html.ordi .o-gp .o-gp-g .gp-etapes{margin-top:14px;gap:14px}
html.ordi .o-gp .o-gp-g .gp-etapes li{line-height:1.4}
html.ordi .o-gp .o-gp-g .gp-note{margin-top:16px}
html.ordi .o-gp-d > .o-b{width:100%;margin-top:12px}
html.ordi .o-gp-d > .gp-copie2{margin-top:10px}
html.ordi .o-gp-d .repli{margin-top:10px}
html.ordi .o-gp .gp-apercu{margin-top:18px;background:var(--creme-2);border-radius:20px;padding:16px}
html.ordi .o-gp .gp-apercu h2{font-size:1rem;font-weight:900;margin:0}
html.ordi .o-gp .gp-apercu h2 small{display:block;font-size:.8rem;font-weight:600;color:var(--foret-doux);margin-top:1px}
html.ordi .o-gp .gp-apercu .gp-scene{margin-top:10px;background:none;padding:0;border-radius:0;display:grid;place-items:center}
@media (max-width:1300px){
  html.ordi .o-pt{padding-left:26px;padding-right:26px}
  html.ordi .o-pc{padding-left:26px;padding-right:26px}
  html.ordi .o-2c{gap:24px}
}

@media print{
  html.ordi body.o-avec-nav{padding-left:0}
  html.ordi .o-nav,html.ordi .o-col,html.ordi .o-bande,html.ordi .o-f-actions,html.ordi .o-lignes-aide,html.ordi .o-f-g .o-depl{display:none!important}
  html.ordi .o-mc,html.ordi .o-mc-in,html.ordi .o-pan,html.ordi .o-fiche,html.ordi .o-f-corps,html.ordi .o-f-bas{display:block;height:auto;overflow:visible}
  html.ordi .o-f-tete{border:0;padding:0}
  html.ordi .o-f-corps{padding:0}
  html.ordi .o-f-d,html.ordi .o-f-bas > div + div{margin-top:8px}
  html.ordi .o-f-corps .o-galerie{height:62mm}
}

/* V169 — la fiche depuis WhatsApp dans le panneau (maquette 06, 07) : l’en-tête et ses deux boutons, la zone de dépôt (cinq photos sur une
   rangée), « Pour sa fiche » en deux colonnes (le formulaire | ses photos et le rappel au client, en ciel) ; le téléphone ne change pas */
html.ordi .o-nf{flex:1;min-height:0;display:flex;flex-direction:column;color:var(--foret);font-size:15px;line-height:1.4;font-weight:600}
html.ordi .o-pt.o-barre > .o-b{flex:none}
html.ordi .o-depot{border:2.5px dashed var(--foret-doux);border-radius:20px;padding:18px;background:var(--creme)}
html.ordi .o-depot.survol{border-style:solid;border-color:var(--foret);background:var(--lime-doux)}
html.ordi .o-depot .nf-photos{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0}
html.ordi .o-depot .nf-ph{border-radius:16px;box-shadow:0 3px 0 var(--foret);background:var(--blanc)}
html.ordi .o-depot .nf-ph .coche{top:8px;right:8px;width:28px;height:28px}
html.ordi .o-depot .nf-ajout{background:var(--blanc);cursor:pointer;font-size:.95rem}
html.ordi .o-depot-t{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:.95rem;font-weight:700;line-height:1.45}
html.ordi .o-depot-t .ico{width:22px;height:22px;flex:none}
/* V171 (point 17) — « Coller » dans la ligne du texte de la zone, à droite : le dessin des « Coller » des champs, 40 px à la souris */
html.ordi .o-depot-t #nf-depot-t{flex:1;min-width:0}
html.ordi .o-depot-t .col{flex:none;margin-left:auto;padding:0;min-height:40px;border:0;background:none;font:inherit;color:var(--foret);cursor:pointer;display:inline-flex;align-items:center}
html.ordi .o-depot-t .col span{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:2px solid var(--foret);border-radius:999px;background:var(--creme-2);box-shadow:0 2px 0 var(--foret);font-size:.84rem;font-weight:900}
html.ordi .o-depot-t .col .ico{width:16px;height:16px}
html.ordi .o-depot-t .col:focus-visible{outline:none}
html.ordi .o-depot-t .col:focus-visible span{outline:3px solid var(--foret);outline-offset:2px}
html.ordi .o-depot-t .col[hidden]{display:none!important}
html.ordi .o-depot-t kbd{font:inherit;font-weight:900;border:2px solid var(--foret);border-radius:7px;padding:0 6px;background:var(--blanc);font-size:.84rem;white-space:nowrap}
html.ordi .o-nf .mention{display:flex;gap:8px;align-items:center;margin-top:16px;font-size:.84rem;font-weight:700;color:var(--foret-doux);line-height:1.4}
html.ordi .o-nf .mention .ico{width:16px;height:16px;flex:none;color:var(--foret)}
html.ordi .o-nf .nf-note{margin-top:12px}
html.ordi .o-nf-err{flex:none;padding:12px 32px 0}
html.ordi .o-nf-err:empty{display:none}
html.ordi .o-nf-err .erreur{margin:0}
/* V171 (point 5) : l'erreur du serveur de « Votre page » se pose par-dessus le haut du formulaire, sans prendre de hauteur dans la colonne :
   l'aperçu ne bouge plus (il descendait de 56 px) ; role="alert" gardé */
html.ordi #pg-err-o{position:relative;z-index:6;height:0;padding:0;overflow:visible}
html.ordi #pg-err-o .erreur{position:absolute;top:10px;left:32px;width:min(520px,calc(100% - 64px));box-shadow:0 4px 0 var(--foret)}
@media (max-width:1300px){html.ordi #pg-err-o .erreur{left:26px}}
html.ordi .o-nf-form .f-lab{display:block;font-size:.88rem;font-weight:800;margin:16px 0 7px}
html.ordi .o-nf-form > .f-lab:first-child{margin-top:0}
html.ordi .o-nf-form .nf-duo{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px}
/* V169, testeur V1 : sous 1 440 px, « Son prénom » et « Son portable » passent sur deux lignes (comme la maquette 07 à 1 280) : à 1 280 et 1 200, « Coller »
   cachait la fin du numéro collé (« 06 12 34 56 », « 06 12 34 ») */
@media (max-width:1439px){html.ordi .o-nf-form .nf-duo{grid-template-columns:minmax(0,1fr)}}
html.ordi .o-nf-form .pc-p{min-height:40px}   /* V171 (point 3) : 40 px à la souris */
/* V171 (point 4) : à 1 200, l'adresse tenait à 1 px près ; 6 px de plus pour le texte (le bord et « Coller » plus près) */
html.ordi .o-nf-form .nf-champ{padding:0 12px}
html.ordi .o-nf-form .nf-champ .col{margin-left:4px}
html.ordi .o-nf-cote{display:grid;gap:14px}
html.ordi .o-nf-h{display:flex;justify-content:space-between;align-items:baseline;font-size:.95rem;font-weight:900;margin-bottom:8px}
html.ordi .o-nf-h .o-lien-s{min-height:34px;font-size:.84rem}
html.ordi .o-mini-ph{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html.ordi .o-mini-ph img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:2px solid var(--foret);display:block}
html.ordi .o-nf-rappel{margin:0;background:var(--ciel-doux);border-radius:18px;padding:16px 18px}
html.ordi .o-nf-rappel p{font-weight:800;font-size:.97rem}
html.ordi .o-nf-rappel small{display:block;font-size:.84rem;font-weight:600;color:var(--foret-doux);margin:4px 0 12px}
html.ordi .o-nf-rappel .o-b{white-space:normal;text-align:left}
html.ordi .o-nf-rappel .repli{margin-top:10px}
html.ordi .o-nf-rappel .repli textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:.9rem;font-weight:600;line-height:1.4;color:var(--foret);background:var(--creme);border:2px solid var(--foret);border-radius:12px;padding:8px 10px}
html.ordi .o-deja.survol{background:var(--lime-doux);border-style:solid;outline:3px solid var(--foret);outline-offset:2px}
html.ordi .o-nf .nf-champ input:focus-visible{outline:none}

/* ══ V170 — l’Espace sur ordinateur, lot C (maquette 04, 05) ══
   « Votre page » dans la coque : l’en-tête fixe (« Annuler », « Enregistrer » à largeur fixe), le formulaire qui défile seul dans sa colonne, l’aperçu
   fixe à droite (le téléphone d’aperçu à 340 px de large à 1 440 × 900, réduit selon la hauteur pour ne jamais faire défiler le panneau). */
html.ordi .o-rub{background:var(--blanc)}
html.ordi .o-pt .o-pg-enr{min-width:168px}
html.ordi .o-pg-dit{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.ordi .o-pg-in{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) 340px;gap:40px;padding:0 32px}
html.ordi .o-pg-in .o-pg-form{max-width:none;min-height:0;overflow:auto;padding:4px 4px 28px;margin:0 -4px}
html.ordi .o-pg-form .pg-carte{margin:0;padding:18px 0 20px;border:0;border-bottom:2px solid var(--filet);border-radius:0;background:none}
html.ordi .o-pg-form .pg-carte:last-of-type{border-bottom:0}
html.ordi .o-pg-form .pg-qui{padding-top:12px}
html.ordi .o-pg-form .pg-qui .pg-boutons{align-self:center}
html.ordi .o-pg-pied{margin:4px 0 0;font-size:.86rem;font-weight:600;color:var(--foret-doux);line-height:1.4}
html.ordi .o-pg-rail{position:static;display:flex;flex-direction:column;align-items:center;align-self:start;padding-top:24px;max-height:100%;min-height:0;overflow-y:auto;padding-bottom:12px}
/* V170 (testeur V3) : la page ne défile jamais ; sur un écran bas, la colonne de l’aperçu défile dans sa hauteur (« Voir ma page en vrai » reste atteignable) */
html.ordi .o-rub{overflow:hidden}
html.ordi .o-pg-rail > *{flex:none}
html.ordi .o-pg-rail .pg-telephone{width:340px;height:571px;margin-top:0}
html.ordi .o-pg-rail .pg-ecran{transform:scale(.8564)}
html.ordi .o-pg-voit{margin:10px 0 0;font-size:.86rem;font-weight:600;color:var(--foret-doux);text-align:center}
html.ordi .o-pg-rail .pg-note{max-width:340px;margin-top:4px}
html.ordi .o-pg-rail .pg-lien{margin-top:4px}
@media (max-height:859px){
  html.ordi .o-pg-in{grid-template-columns:minmax(0,1fr) 300px}
  html.ordi .o-pg-rail{padding-top:18px}
  html.ordi .o-pg-rail .pg-telephone{width:300px;height:504px}
  html.ordi .o-pg-rail .pg-ecran{transform:scale(.7538)}
  html.ordi .o-pg-rail .pg-note{max-width:300px}
}
@media (max-height:779px){
  html.ordi .o-pg-in{grid-template-columns:minmax(0,1fr) 262px;gap:32px}
  html.ordi .o-pg-rail{padding-top:14px}
  html.ordi .o-pg-rail .pg-telephone{width:262px;height:439px}
  html.ordi .o-pg-rail .pg-ecran{transform:scale(.6564)}
  html.ordi .o-pg-rail .pg-note{max-width:262px}
  html.ordi .o-pg-rail .pg-lien{min-height:34px}
}
@media (max-width:1300px){html.ordi .o-pg-in{padding-left:26px;padding-right:26px;gap:28px}}
html.ordi .o-pg-form .pg-regle{margin-top:8px}

/* V170 — « Votre mois » dans la coque (maquette 05) : 1 080 px au plus, aligné à gauche ; quatre tuiles sur une rangée (deux sous 1 280 px), les deux « d’après
   vos réponses » côte à côte (une seule reste à sa demi-largeur), les avis, puis l’offre et « Ne pas suivre mon activité » côte à côte */
html.ordi .o-vm{max-width:1080px;margin:0;display:grid;gap:14px}   /* V170 (testeur V4) : aligné à gauche sous le titre, comme la maquette */
html.ordi .o-vm .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0}
html.ordi .o-vm .stat{margin:0;display:block;min-width:0;background:var(--blanc);border:2.5px solid var(--foret);border-radius:18px;padding:16px 18px 18px}
html.ordi .o-vm .stat b{display:block;font-size:2.5rem;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
html.ordi .o-vm .stat small{display:block;margin-top:10px;font-size:.98rem;font-weight:800;color:var(--foret);line-height:1.35}
html.ordi .o-m-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
html.ordi .o-vm .stat.large{margin:0;background:var(--lime-doux)}
html.ordi .o-vm .stat.large small span{display:block;margin-top:12px;font-size:.9rem;font-weight:600;color:var(--foret-doux);line-height:1.45}
html.ordi .o-vm .rien{margin:0;font-size:.92rem}
html.ordi .o-vm .avis{margin:0;border:0;border-radius:16px;padding:14px 18px;font-size:.95rem;font-weight:600;align-items:center}
html.ordi .o-m-bas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;margin-top:10px}
html.ordi .o-vm .cle{margin:0;padding:6px 0 0;font-size:.9rem;font-weight:600;line-height:1.5}
html.ordi .o-vm .cle .ico{flex:none;width:18px;height:18px;margin-top:2px}
html.ordi .o-vm .reglage.suivi{margin:0;min-height:40px;padding:14px 18px;gap:18px;border-radius:18px}
html.ordi .o-vm .reglage.suivi b{font-size:1rem}
html.ordi .o-vm .reglage.suivi small{font-size:.86rem;font-weight:600;line-height:1.45}
html.ordi .o-vm #suivi-err:empty{display:none}
html.ordi .o-vm #suivi-err .erreur{margin:0}
@media (max-width:1279px){html.ordi .o-vm .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}