/* Bureau Mahé, site v1, essai 3 : le bureau, façon application, fond noir (DEC-A15).
   Version corrigée après les audits du 12 novembre 2026 (Direction/Audit-site-2026-11-12/temps-6/).
   Logo : le cordeau (DEC-A14). Rouge de traçage : seulement le cordeau, le repère du jour, la date limite, le bouton. */

@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;
  src:url(polices/archivo-700-latin.woff2) format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(polices/public-sans-variable-latin.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --fond:#1d1a17;      /* l'encre de la charte, devenue le fond */
  --plan:#282420;      /* le dossier ouvert */
  --survol:#24201c;
  --filet:#3d3832;
  --contour:#857e75;   /* contour du menu : visible sur le noir */
  --blanc:#ffffff;
  --clair:#d9d4cc;     /* texte courant sur noir */
  --gris:#b5aea5;      /* texte second sur noir (éclairci pour le plein soleil) */
  --rouge:#c8281e;
  --rouge-vif:#d93a2f;
  --marge:2.5rem;
  --k-titre:1;   /* réglages : taille des titres */
  --air:1;       /* réglages : espacements */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* tout grandit un peu sur les grands écrans, et le texte agrandi du navigateur est respecté */
  font-size:calc(clamp(100%, .55vw + 53.125%, 118.75%) * var(--k-texte,1))}
body{margin:0;background:var(--fond);color:var(--clair);
  font:400 1rem/1.5 "Public Sans",Arial,sans-serif;font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
button,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blanc);outline-offset:3px}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Barre ---------- */
.barre{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.4rem var(--marge) 1.1rem}
.marque{display:flex;align-items:baseline;gap:1.25rem}
.cordeau{text-decoration:none;color:var(--blanc);font:700 1.375rem/1 "Archivo",Arial,sans-serif;letter-spacing:-.015em;
  padding-bottom:.4rem;border-bottom:2px solid var(--rouge)}
.marque span{font-size:.875rem;color:var(--gris)}
.contact{display:flex;align-items:center;gap:1rem;font-size:.9375rem;color:var(--gris)}
.contact a{display:inline-flex;align-items:center;min-height:44px;color:var(--blanc);font-weight:600;font-size:1.0625rem;text-decoration:none;white-space:nowrap}
.contact a:hover{text-decoration:underline;text-underline-offset:.3em}

/* ---------- Le bureau : la liste à gauche, le dossier ouvert à droite ---------- */
.bureau{display:grid;grid-template-columns:minmax(22rem,27rem) minmax(0,1fr);grid-template-rows:auto 1fr;
  grid-template-areas:"tete dossier" "choix dossier";column-gap:var(--marge);
  padding:calc(1rem * var(--air)) var(--marge) var(--marge);max-width:100rem;margin:0 auto}
.tete{grid-area:tete}
.choix{grid-area:choix}

.tete h1{margin:calc(.75rem * var(--air)) 0 calc(1rem * var(--air));color:var(--blanc);font:700 calc(2.625rem * var(--k-titre))/1.03 "Archivo",Arial,sans-serif;letter-spacing:-.028em}
.tete .intro{margin:0 0 calc(1.75rem * var(--air));max-width:24em}
.tete .note{margin:0 0 calc(1.75rem * var(--air));max-width:24em;color:var(--blanc)}

.filtre{display:flex;align-items:center;gap:.75rem;margin:0 0 .25rem;font-size:.9375rem;color:var(--gris)}
.filtre select{appearance:none;-webkit-appearance:none;flex:1;min-width:0;min-height:44px;padding:.55rem 2.4rem .55rem .85rem;
  background-color:var(--fond);
  background-image:linear-gradient(45deg,transparent 50%,var(--clair) 50%),linear-gradient(-45deg,transparent 50%,var(--clair) 50%);
  background-position:right 1.15rem center,right .75rem center;background-size:.4rem .4rem,.4rem .4rem;background-repeat:no-repeat;
  border:1px solid var(--contour);border-radius:4px;color:var(--blanc);font-weight:600;cursor:pointer}
.filtre select option{background:var(--plan);color:var(--blanc)}
.compte{margin:.9rem 0 .5rem;font-size:.875rem;color:var(--gris);min-height:1.3em}

.liste{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--filet)}
.liste button{display:grid;grid-template-columns:4.6rem minmax(0,1fr);column-gap:1rem;align-items:start;width:100%;text-align:left;
  background:none;border:0;border-top:1px solid var(--filet);border-left:3px solid transparent;padding:calc(.85rem * var(--air)) .9rem calc(.9rem * var(--air)) .75rem;cursor:pointer}
.liste button:hover{background:var(--survol)}
.liste button[aria-current="true"]{background:var(--plan);border-left-color:var(--blanc)}
.liste .date{color:var(--blanc);font:700 1.0625rem/1.2 "Archivo",Arial,sans-serif;letter-spacing:-.01em}
.liste .date small{display:block;font:400 .875rem/1.3 "Public Sans",Arial,sans-serif;color:var(--gris);letter-spacing:0}
.liste .nom{display:block;color:var(--blanc);font-weight:600;line-height:1.3}
.liste .sous{display:block;font-size:.875rem;color:var(--gris);margin-top:.15rem}
.liste .sous.lot{color:var(--clair)}
.liste .etat{display:block;font-size:.875rem;color:var(--gris);margin-top:.15rem}
.pied-liste{margin:.9rem 0 0;font-size:.875rem;color:var(--gris)}
.dossier h2,.liste .nom,.liste .sous,.lots li{overflow-wrap:anywhere}

/* ---------- Le dossier ouvert ---------- */
.dossier{grid-area:dossier;align-self:start;position:sticky;top:1.25rem;min-width:0;
  background:var(--plan);border-radius:12px;padding:calc(1.75rem * var(--air)) 2.75rem calc(1.6rem * var(--air))}
.dossier .etat{margin:0;font-size:.9375rem;color:var(--gris)}
.dossier h2{margin:.55rem 0 .6rem;color:var(--blanc);font:700 calc(2.625rem * var(--k-titre))/1.03 "Archivo",Arial,sans-serif;letter-spacing:-.028em;max-width:15em;text-wrap:balance}
.dossier h2:focus{outline:none}
.dossier .quoi{margin:0;font-size:1.0625rem;max-width:40em}
.dossier .acheteur{margin:.25rem 0 0;font-size:.9375rem;color:var(--gris)}
.dossier .acheteur a{text-underline-offset:.2em}
.echeance{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem 2rem;margin:calc(1.3rem * var(--air)) 0 0}
.depot{margin:0;color:var(--blanc);font-size:1.3125rem;font-weight:600}
@media (min-width:70.01rem){.echeance{flex-wrap:nowrap}.depot{min-width:0}.depot span{white-space:nowrap}}
.depot span{text-decoration:underline;text-decoration-color:var(--rouge-vif);text-decoration-thickness:3px;text-underline-offset:.38em}
.quinze{margin:.75rem 0 0;color:var(--blanc);font-size:.9375rem}
.quinze{max-width:44em}
.foi{margin:.6rem 0 0;font-size:.875rem;color:var(--gris);max-width:52em}

.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.65rem 1.4rem;border-radius:4px;
  background:var(--rouge);color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}
.bouton:hover{background:var(--rouge-vif)}
.bouton:active{transform:translateY(1px)}

/* La frise : six repères à pas égal, le point rouge du jour entre deux repères */
.frise{position:relative;margin:calc(1.5rem + 1.1rem * var(--air)) 0 0}
.frise ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;list-style:none}
.frise::before{content:"";position:absolute;left:0;top:4px;height:1px;width:calc(100% / 6 * 5);background:var(--gris);opacity:.75}
.frise .fait{position:absolute;left:0;top:3px;height:3px;background:var(--blanc);width:calc(var(--t) / 6 * 100%);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.frise .auj{position:absolute;top:-2px;left:calc(var(--t) / 6 * 100%);width:13px;height:13px;margin-left:-6px;border-radius:50%;
  background:var(--rouge-vif);box-shadow:0 0 0 4px var(--plan);transition:left .4s cubic-bezier(.2,.7,.2,1)}
.frise .auj b{font-style:normal;position:absolute;bottom:1.15rem;left:50%;transform:translateX(-50%);font-size:.75rem;font-weight:600;color:var(--blanc);white-space:nowrap}
.frise li{position:relative;padding:1.15rem .75rem 0 0;font-size:.875rem;line-height:1.3;color:var(--gris)}
.frise li::before{content:"";position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--plan);border:1.5px solid var(--gris)}
.frise li.passe::before{background:var(--blanc);border-color:var(--blanc)}
.frise li b{display:block;color:var(--blanc);font-weight:600}
.frise li.fin::before{border-radius:0;width:3px;height:15px;top:-3px;border:0;background:var(--rouge-vif)}
.condition{margin:.9rem 0 0;font-size:.9375rem;color:var(--clair);max-width:48em}

.deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:2.5rem;margin:calc(1.4rem * var(--air)) 0 0;padding-top:calc(1.25rem * var(--air));border-top:1px solid var(--filet)}
.deux h3{margin:0 0 .6rem;font:600 .9375rem/1.3 "Public Sans",Arial,sans-serif;color:var(--blanc)}
.avis p{margin:0;line-height:1.5}
.lots{list-style:none;margin:0;padding:0;columns:2;column-gap:1.75rem;font-size:.875rem;line-height:1.35;color:var(--gris)}
.lots li{break-inside:avoid;padding:.1rem 0 .1rem 1.7rem;position:relative}
.lots li i{position:absolute;left:0;font-style:normal;font-variant-numeric:tabular-nums}
.lots li.pour-vous{color:var(--blanc);font-weight:600}
.rappel{margin:calc(1.1rem * var(--air)) 0 0;font-size:.9375rem;color:var(--blanc);font-weight:600}
.retour{display:none}

/* ---------- Sous le bureau ---------- */
.suite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--marge);padding:3rem var(--marge);border-top:1px solid var(--filet);max-width:100rem;margin:0 auto}
.suite h2{margin:0 0 .8rem;color:var(--blanc);font:700 1.375rem/1.15 "Archivo",Arial,sans-serif;letter-spacing:-.015em}
.suite p{margin:0 0 .6rem;max-width:30em}
.suite .prix{color:var(--blanc);font:700 2.25rem/1.05 "Archivo",Arial,sans-serif;letter-spacing:-.025em;margin-bottom:.5rem}
.mentions{padding:1.5rem var(--marge) 2.5rem;border-top:1px solid var(--filet);font-size:.875rem;color:var(--gris)}
.mentions p{margin:0 0 .35rem;max-width:70em}

/* ---------- Écrans de PC étroits (1121 à 1280 px) : colonne de gauche resserrée, pour que la frise tienne ---------- */
@media (min-width:70.01rem) and (max-width:80rem){
  .bureau{grid-template-columns:20rem minmax(0,1fr);column-gap:1.75rem}
  .dossier{padding-left:1.75rem;padding-right:1.75rem}
  .tete h1{font-size:calc(2.25rem * var(--k-titre))}
}
/* Écrans de PC bas (1366 × 768) : le dossier ne reste pas collé, on peut le faire défiler en entier */
@media (min-width:70.01rem) and (max-height:58rem){.dossier{position:static}}

/* ---------- Téléphone et petite fenêtre : une seule colonne, le dossier ouvert d'abord ---------- */
@media (max-width:70rem){
  :root{--marge:1.1rem}
  .marque span,.contact span{display:none}
  .barre{padding-top:1rem;padding-bottom:.6rem}
  .bureau{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"tete" "dossier" "choix";row-gap:1.5rem;padding-top:.5rem}
  .dossier{position:static;padding:1.5rem 1.25rem 1.4rem}
  .tete h1{font-size:calc(2.5rem * var(--k-titre));margin-top:1.25rem}
  .tete .intro,.tete .note{margin-bottom:0}
  .dossier h2{font-size:calc(1.875rem * var(--k-titre))}
  .dossier .quoi{font-size:1rem}
  .depot{font-size:1.125rem}
  .echeance{margin-top:1.25rem}
  .bouton{width:100%}
  .bouton .num{display:none}
  /* frise verticale */
  .frise{margin-top:1.5rem;--pas:3rem}
  .frise ol{grid-template-columns:minmax(0,1fr);grid-auto-rows:var(--pas)}
  .frise::before{left:4px;top:.35rem;width:1px;height:calc(var(--pas) * 5)}
  .frise .fait{left:3px;top:.35rem;width:3px;height:calc(var(--t) * var(--pas));transition:height .4s cubic-bezier(.2,.7,.2,1)}
  .frise .auj{left:0;margin-left:0;width:100%;border-radius:0;background:none;box-shadow:none;pointer-events:none;
    top:calc(.35rem + var(--t) * var(--pas) - 6px);transition:top .4s cubic-bezier(.2,.7,.2,1)}
  .frise .auj::before{content:"";position:absolute;left:-2px;top:0;width:13px;height:13px;border-radius:50%;background:var(--rouge-vif);box-shadow:0 0 0 4px var(--plan)}
  .frise .auj b{bottom:auto;top:-.2rem;left:auto;right:0;transform:none}
  .frise li{padding:0 0 0 1.6rem}
  .frise li::before{top:.35rem}
  .frise li.fin::before{top:.15rem;left:3px}
  .frise li b{display:inline;margin-right:.4rem}
  .deux{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .lots{columns:1}
  .retour{display:block;margin:1.25rem 0 0;font-size:.9375rem}
  .suite{grid-template-columns:minmax(0,1fr);gap:2rem;padding-top:2.25rem;padding-bottom:2.25rem}
}
@media (prefers-reduced-motion:reduce){.frise .fait,.frise .auj{transition:none}}
.calme .frise .fait,.calme .frise .auj{transition:none}

/* ---------- Impression : noir sur blanc, sans liste ni bouton ---------- */
@media print{
  body{background:#fff;color:#000}
  .maquette,.choix,.bouton,.retour,.reglages{display:none !important}
  .bureau{display:block}
  .dossier{position:static;background:none;padding:0}
  .dossier h2,.tete h1,.depot,.frise li b,.deux h3,.rappel,.suite h2,.suite .prix,.cordeau,.contact a,.lots li.pour-vous{color:#000}
  .dossier .etat,.dossier .acheteur,.foi,.frise li,.condition,.lots,.mentions,.marque span,.contact{color:#333}
}

/* ---------- Panneau de réglages (maquette seulement, à retirer du vrai site) ---------- */
.maquette{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--gris);padding:.3rem var(--marge);border-bottom:1px solid var(--filet)}
.maquette button{background:none;border:0;padding:0;color:var(--clair);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:.75rem}
.reglages{position:fixed;right:1rem;bottom:1rem;z-index:10;width:18rem;max-width:calc(100vw - 2rem);background:#fff;color:#1d1a17;border-radius:8px;padding:1rem 1.1rem;font-size:14px;line-height:1.4;box-shadow:0 8px 30px rgba(0,0,0,.45);color-scheme:light}
.reglages h2{margin:0 0 .6rem;font:700 16px/1.2 "Archivo",Arial,sans-serif}
.reglages label{display:block;margin:.55rem 0 0}
.reglages label span{float:right;font-variant-numeric:tabular-nums;color:#5f5a54}
.reglages input[type=range]{width:100%;margin:.2rem 0 0;accent-color:#1d1a17}
.reglages .coche{display:flex;align-items:center;gap:.5rem;margin-top:.8rem}
.reglages .bas{display:flex;justify-content:space-between;margin-top:.9rem}
.reglages button{background:none;border:0;padding:0;color:#1d1a17;text-decoration:underline;cursor:pointer;font-size:14px}
.reglages :focus-visible{outline-color:#1d1a17}

/* ---------- Menu et pages de texte (comment ça marche, mentions légales) ---------- */
.menu{display:flex;gap:1.75rem;margin-right:auto;margin-left:1.5rem;font-size:.9375rem}
.menu a{color:var(--gris);text-decoration:none;padding:.6rem 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--blanc)}
.menu a[aria-current="page"]{color:var(--blanc);border-bottom-color:var(--blanc)}
.page{max-width:64rem;margin:0 auto;padding:2.5rem var(--marge) 3rem}
.page h1{margin:0 0 1.25rem;color:var(--blanc);font:700 calc(3.5rem * var(--k-titre))/1.02 "Archivo",Arial,sans-serif;letter-spacing:-.03em;max-width:12em;text-wrap:balance}
.page h2{margin:0 0 1rem;color:var(--blanc);font:700 1.5rem/1.15 "Archivo",Arial,sans-serif;letter-spacing:-.015em}
.chapo{margin:0;font-size:1.25rem;max-width:32em}
.page section{margin-top:4rem}
.page .ouverture{margin-top:1.5rem}
.etapes{list-style:none;margin:0;padding:0;position:relative;counter-reset:e}
.etapes::before{content:"";position:absolute;left:4px;top:.6rem;bottom:2.5rem;width:1px;background:var(--gris);opacity:.75}
.etapes li{position:relative;padding:0 0 1.75rem 2.25rem;max-width:44em}
.etapes li::before{content:"";position:absolute;left:0;top:.5rem;width:9px;height:9px;border-radius:50%;background:var(--fond);border:1.5px solid var(--gris)}
.etapes li.fin::before{border-radius:0;border:0;width:15px;height:3px;left:-3px;top:.75rem;background:var(--rouge-vif)}
.etapes b{color:var(--blanc);font-size:1.1875rem;font-weight:600}
.etapes .quand{display:inline-block;margin-left:.75rem;font-size:.875rem;color:var(--gris)}
.etapes p{margin:.3rem 0 0}
.source{margin:0;font-size:.875rem;color:var(--gris)}
.trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;padding-top:2.5rem;border-top:1px solid var(--filet)}
.trois p{margin:0 0 .6rem}
.trois .prix{color:var(--blanc);font:700 2.25rem/1.05 "Archivo",Arial,sans-serif;letter-spacing:-.025em}
.questions details{border-top:1px solid var(--filet);max-width:46em}
.questions details:last-of-type{border-bottom:1px solid var(--filet)}
.questions summary{cursor:pointer;padding:1rem 2rem 1rem 0;color:var(--blanc);font-weight:600;font-size:1.0625rem;list-style:none;position:relative}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+";position:absolute;right:.25rem;top:.85rem;font-weight:400;font-size:1.25rem;color:var(--gris)}
.questions details[open] summary::after{content:"–"}
.questions details p{margin:0 0 1.1rem;max-width:40em}
.appel{background:var(--plan);border-radius:12px;padding:2.25rem 2.75rem}
.appel p{margin:0 0 1.25rem}
.gestes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin:0 !important}
.second{color:var(--blanc);text-underline-offset:.3em}
.texte h1{font-size:calc(2.5rem * var(--k-titre))}
.texte h2{margin-top:2.25rem;font-size:1.25rem}
.texte p{max-width:44em;margin:0}
.dossier .ecrire{margin:.4rem 0 0;font-size:.9375rem}
@media (min-width:70.01rem){.dossier .ecrire{text-align:right}}
@media (max-width:70rem){
  .barre{flex-wrap:wrap}
  .menu{order:3;width:100%;margin:0;gap:1.5rem}
  .page{padding-top:1.25rem}
  .page h1{font-size:calc(2.5rem * var(--k-titre))}
  .chapo{font-size:1.0625rem}
  .page section{margin-top:2.75rem}
  .etapes .quand{display:block;margin:0}
  .trois{grid-template-columns:minmax(0,1fr);gap:2rem}
  .appel{padding:1.5rem 1.25rem}
}