:root{
  --vert:#be1a1d; --vert-f:#a01518; --jaune:#ff5b52; --eclair:#ff5b52; --rouge:#b3261e;
  --encre:#1e1b1b; --gris:#5f5a57; --trait:#e7e3dd; --fond:#f4f3f0; --blanc:#fff;
  --rayon:16px; --ombre:0 1px 2px rgba(20,30,50,.06), 0 10px 26px rgba(20,30,50,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}

/* ---------- barre du haut ---------- */
.barre{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--trait)}
.barre-in{max-width:1180px;margin:auto;padding:10px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.marque{display:flex;align-items:center;gap:10px;min-width:0}
.marque .txt{display:block;min-width:0;overflow:hidden}
.marque b{display:block;font-size:16px;line-height:1.2}
.marque small{display:block;color:var(--gris);font-size:12.5px;white-space:nowrap}
.ec{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:#fff url(favicon.svg) center/76% no-repeat;box-shadow:inset 0 0 0 1px var(--trait)}
.etat{display:flex;align-items:center;gap:10px;margin-left:auto}
.jauge{width:120px;height:8px;border-radius:99px;background:var(--trait);overflow:hidden}
.jauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--vert),#ff5b52);transition:width .35s}
.chiffre{font-size:13px;color:var(--gris);white-space:nowrap}
.sauve{font-size:12.5px;color:#2a8a4a;white-space:nowrap;min-width:96px}
.sauve.encours{color:var(--gris)}
.sauve.rate{color:var(--rouge);font-weight:600}
.actions{display:flex;gap:8px}
.bt{border:0;background:var(--vert);color:#fff;padding:10px 18px;border-radius:99px;font-weight:600;cursor:pointer;
  transition:transform .12s, background .15s}
.bt:hover{background:var(--vert-f)}
.bt:active{transform:scale(.97)}
.bt-clair{background:#fff;color:var(--vert);border:1px solid var(--trait)}
.si-petit{display:none}
.bt-clair:hover{background:#fbeeee}
.onglets{max-width:1180px;margin:auto;padding:0 12px 10px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.onglets::-webkit-scrollbar{display:none}
.onglets a{flex:0 0 auto;padding:6px 13px;border-radius:99px;font-size:13.5px;text-decoration:none;color:var(--gris);
  border:1px solid transparent;white-space:nowrap}
.onglets a:hover{background:#fbeeee;color:var(--encre)}
.onglets a.actif{background:var(--vert);color:#fff}
.onglets a b{font-weight:600}
.onglets a i{font-style:normal;opacity:.75;font-size:12px;margin-left:5px}

/* ---------- corps ---------- */
.wrap{max-width:820px;margin:auto;padding:0 18px}
.intro{padding:46px 18px 10px;text-align:center}
.intro h1{font-size:clamp(25px,3.6vw,36px);line-height:1.18;margin:0 0 14px;letter-spacing:-.01em}
.intro p{margin:0 auto 10px;max-width:62ch;color:#2c2c30}
.fin-note{font-size:14.5px;color:var(--gris)}

.grp{max-width:1180px;margin:34px auto 0;padding:0 18px;scroll-margin-top:calc(var(--htete,118px) + 16px)}
.grp-tete{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--trait);padding-bottom:8px;margin-bottom:18px;flex-wrap:wrap}
.grp-tete h2{font-size:22px;margin:0;letter-spacing:-.01em}
.grp-tete span{font-size:13px;color:var(--gris)}
.grp-tete a{font-size:13px;color:var(--vert);text-decoration:none;margin-left:auto}
.grp-tete a:hover{text-decoration:underline}

.bloc{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--rayon);box-shadow:var(--ombre);
  padding:18px;margin:0 0 18px;scroll-margin-top:calc(var(--htete,118px) + 16px)}
.bloc.fait{border-color:#bcd7c4;box-shadow:0 1px 2px rgba(20,30,50,.05),0 8px 20px rgba(40,120,70,.07)}
.bloc-tete{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.bloc h3{font-size:18px;margin:0;letter-spacing:-.005em}
.coche{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:2px solid var(--trait);position:relative}
.bloc.fait .coche{background:#2a8a4a;border-color:#2a8a4a}
.bloc.fait .coche::after{content:"";position:absolute;left:6px;top:2.5px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(43deg)}
.aide{color:var(--gris);font-size:14.5px;margin:0 0 14px}

.cartouche{background:#0b1220;border-radius:16px;padding:34px 24px;margin:0 0 16px;display:flex;justify-content:center}
.cartouche img{width:min(360px,80%);height:auto}
@media (max-width:760px){.cartouche{padding:26px 14px}.cartouche img{width:88%}}
.vues{display:flex;gap:6px;margin:0 0 10px}
.vues button{border:1px solid var(--trait);background:#fff;padding:5px 12px;border-radius:99px;font-size:13px;cursor:pointer;color:var(--gris)}
.vues button.on{background:var(--vert);border-color:var(--vert);color:#fff}
.pellicule{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pellicule figure{margin:0}
.pellicule img{width:100%;border-radius:10px;border:1px solid var(--trait);cursor:zoom-in;background:#0d1117}
.pellicule figcaption{font-size:12px;color:var(--gris);text-align:center;margin-top:5px}
.pellicule.tel{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-width:520px;margin:auto}

.qs{margin:16px 0 0;display:grid;gap:8px}
.q{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--trait);border-radius:12px;background:#fbfcfe}
.q.repondu{background:#f3f8f4;border-color:#cfe3d6}
.q p{margin:0;flex:1;font-size:15px}
.ouinon{display:flex;gap:6px;flex:0 0 auto}
.ouinon button{border:1px solid var(--trait);background:#fff;border-radius:99px;padding:7px 16px;font-size:14px;
  font-weight:600;cursor:pointer;color:var(--gris);transition:transform .1s}
.ouinon button:active{transform:scale(.94)}
.ouinon button.on[data-v="oui"]{background:#2a8a4a;border-color:#2a8a4a;color:#fff}
.ouinon button.on[data-v="non"]{background:var(--rouge);border-color:var(--rouge);color:#fff}

label.note{display:block;margin-top:12px}
label.note span{display:block;font-size:13px;color:var(--gris);margin-bottom:5px}
textarea{width:100%;border:1px solid var(--trait);border-radius:12px;padding:11px 13px;font:inherit;font-size:15px;
  resize:vertical;min-height:52px;background:#fbfcfe;color:inherit}
textarea:focus, input[type=text]:focus{outline:2px solid #ef9a96;outline-offset:1px;background:#fff}

/* ---------- partie libre ---------- */
.libre{max-width:1180px;margin:40px auto 0;padding:0 18px;scroll-margin-top:calc(var(--htete,118px) + 16px)}
.libre-carte{background:#fff;border:1px solid var(--trait);border-radius:var(--rayon);box-shadow:var(--ombre);padding:18px;margin-bottom:14px}
.libre-carte input[type=text]{width:100%;border:0;border-bottom:2px solid var(--trait);padding:6px 2px;font:inherit;
  font-size:17px;font-weight:600;background:none;margin-bottom:10px;color:inherit}
.libre-x{float:right;border:0;background:none;color:var(--gris);cursor:pointer;font-size:14px;padding:2px 6px}
.libre-x:hover{color:var(--rouge)}
.ajouter{display:block;width:100%;border:2px dashed #e6c9c7;background:#fff;border-radius:var(--rayon);padding:16px;
  font-size:16px;font-weight:600;color:var(--vert);cursor:pointer}
.ajouter:hover{background:#fbeeee;border-color:var(--vert)}

.final{max-width:1180px;margin:34px auto 70px;padding:26px 18px;text-align:center}
.final .bt{padding:14px 30px;font-size:17px}
.final p{color:var(--gris);font-size:14px;margin:12px 0 0}

/* ---------- loupe ---------- */
.loupe[hidden],.bandeau[hidden]{display:none!important}
.loupe{position:fixed;inset:0;z-index:60;background:rgba(12,18,28,.93);display:flex;align-items:center;justify-content:center;padding:16px}
.loupe img{max-width:100%;max-height:96vh;border-radius:8px;object-fit:contain}
.loupe-x{position:absolute;top:12px;right:16px;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:30px;
  line-height:1;width:46px;height:46px;border-radius:50%;cursor:pointer}

/* ---------- bandeau ---------- */
.bandeau{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;background:var(--encre);color:#fff;
  padding:12px 20px;border-radius:99px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:14.5px;max-width:92vw;text-align:center}
.bandeau b{color:var(--eclair)}

/* ---------- compte rendu ---------- */
.recap{max-width:820px;margin:auto;padding:30px 18px 60px;background:#fff}
.recap h1{font-size:26px;margin:0 0 4px}
.recap .date{color:var(--gris);font-size:14px;margin:0 0 26px}
.recap h2{font-size:19px;margin:28px 0 10px;border-bottom:2px solid var(--trait);padding-bottom:6px}
.recap h3{font-size:16px;margin:18px 0 4px}
.recap .rq{margin:2px 0;font-size:15px}
.recap .rq b{font-weight:600}
.recap .ro{color:#2a8a4a}.recap .rn{color:var(--rouge)}
.recap .rn-note{background:#faf6f2;border-left:3px solid var(--vert);padding:8px 12px;margin:6px 0 10px;white-space:pre-wrap;font-size:15px}
.recap .vide{color:var(--gris);font-style:italic}

@media print{
  .barre,.actions,.final,.ajouter,.bandeau{display:none!important}
  body{background:#fff}
  .recap{max-width:none;padding:0}
  .recap h2{break-after:avoid}
}

@media (max-width:760px){
  .barre-in{padding:7px 12px 6px;gap:8px}
  .marque{flex:1 1 120px;min-width:0;order:1}
  .marque .txt{flex:1}
  .actions{order:2}
  .marque b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .marque small{display:none}
  .ec{width:28px;height:28px;flex-basis:28px;border-radius:8px}
  .etat{order:3;width:100%;margin-left:0;gap:8px;padding-bottom:2px}
  .jauge{flex:1;width:auto}
  .chiffre,.sauve{font-size:12px;min-width:0}
  .actions{margin-left:0;flex:0 0 auto}
  .bt{padding:8px 12px;font-size:13px}
  .si-large{display:none}
  .si-petit{display:inline}
  .onglets{padding:0 12px 8px}
  .onglets a{padding:6px 11px;font-size:13px}
  .grp,.libre,.final{padding-left:12px;padding-right:12px}
  .bloc{padding:14px}
  .q{flex-direction:column;align-items:stretch;gap:9px}
  .ouinon{justify-content:stretch}
  .ouinon button{flex:1;padding:11px 0}
  .pellicule{grid-template-columns:1fr}
}

/* ---------- les trois propositions de logo ---------- */
.logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:4px 0 6px}
.logo-carte{border:2px solid var(--trait);border-radius:16px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s,box-shadow .2s}
.logo-carte.choisi{border-color:var(--vert);box-shadow:0 0 0 4px rgba(190,26,29,.12)}
.logo-tete{display:flex;align-items:center;gap:10px}
.logo-n{width:28px;height:28px;border-radius:50%;background:var(--vert);color:#fff;font-weight:700;font-size:14px;display:grid;place-items:center;flex:none}
.logo-tete h4{margin:0;font-size:16px;letter-spacing:-.005em}
.logo-fond{border-radius:12px;display:flex;align-items:center;justify-content:center;padding:26px 16px;min-height:118px}
.logo-clair{background:#fff;border:1px solid var(--trait)}
.logo-fonce{background:#0b0b0d}
.logo-fond img{max-width:100%;max-height:66px;width:auto;height:auto;cursor:zoom-in}
.logo-bas{display:flex;gap:12px;align-items:flex-start}
.logo-icone{flex:none;width:58px;height:58px;border-radius:14px;border:1px solid var(--trait);display:grid;place-items:center;background:#fff}
.logo-icone img{width:36px;height:36px;object-fit:contain}
.logo-idee{margin:0;font-size:13.5px;color:var(--gris);line-height:1.45}
.logo-situ{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:8px;align-items:start}
.logo-situ figure{margin:0}
.logo-situ img{width:100%;border-radius:8px;border:1px solid var(--trait);cursor:zoom-in}
.logo-situ figcaption{font-size:11.5px;color:var(--gris);text-align:center;margin-top:3px;line-height:1.3}
.logo-choix{margin-top:auto;border:1.5px solid var(--vert);background:#fff;color:var(--vert);border-radius:99px;padding:11px 14px;
  font-weight:600;cursor:pointer;transition:transform .1s,background .15s}
.logo-choix:active{transform:scale(.97)}
.logo-carte.choisi .logo-choix{background:var(--vert);color:#fff}
.loupe img.sur-fonce{background:#0b0b0d;padding:48px;border-radius:16px}
.loupe img.sur-clair{background:#fff;padding:48px;border-radius:16px}
.recap .r-logo img{max-height:56px;width:auto;margin:6px 0 12px}
@media (max-width:1020px){.logos{grid-template-columns:1fr}.logo-fond img{max-height:72px}}
.intro h1{text-wrap:balance}

/* le choix « Lequel garde-t-on ? » (30/10/2026) */
.choix{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 16px}
.choix-bt{flex:1 1 180px;min-height:56px;padding:12px 18px;border-radius:16px;border:2px solid #d9d5cb;background:#fff;font:inherit;font-size:1.05rem;font-weight:650;color:#0b1a26;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.choix-bt:hover{border-color:var(--vert);transform:translateY(-1px)}
.choix-bt.on{border-color:var(--vert);background:#fbeeee;color:#7d1013}
.choix-bt.on::before{content:"✓  "}

/* ce qu'il faut trancher avec le client (03/11/2026) */
.attention{margin:0 0 14px;padding:11px 14px;border-left:4px solid var(--vert);border-radius:0 10px 10px 0;background:#fbf1e6;color:#4a2c12;font-size:15px;line-height:1.55}
.attention b{color:var(--vert-f)}

/* LE NOM DE DOMAINE (05/11/2026), tout en bas : ce que dit le registre, puis les notes de l'agence */
.domaine{max-width:1180px;margin:40px auto 0;padding:0 18px;scroll-margin-top:calc(var(--htete,118px) + 16px)}
.registre{background:#fff;border:1px solid var(--trait);border-left:4px solid var(--vert);border-radius:0 var(--rayon) var(--rayon) 0;box-shadow:var(--ombre);padding:16px 18px;margin:0 0 14px}
.registre h3{margin:0;font-size:17px}
.registre-date{margin:2px 0 12px;font-size:13px;color:var(--gris)}
.registre dl{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:7px 18px;margin:0;font-size:15px}
.registre dt{color:var(--gris)}
.registre dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.garde{margin:0 0 16px;padding:10px 14px;border-radius:10px;background:#fbf1e6;color:#4a2c12;font-size:14.5px}
.garde b{color:var(--vert-f)}
.dom-champ{background:#fff;border:1px solid var(--trait);border-radius:var(--rayon);box-shadow:var(--ombre);padding:16px 18px;margin-bottom:12px}
.dom-champ h3{margin:0 0 4px;font-size:17px}
.dom-champ.fait{border-color:#bcd7c4}
.dom-champ .choix{margin:4px 0 4px}
@media (max-width:640px){
  .domaine{padding-left:12px;padding-right:12px}
  .registre dl{grid-template-columns:1fr;gap:2px}
  .registre dd{margin-bottom:8px}
  .dom-champ{padding:14px}
}
@media print{.garde{display:none}}

/* les deux boutons du compte rendu (05/11/2026 : plus de style écrit dans la page, interdit par la politique de contenu) */
.r-boutons{margin:0 0 20px}

/* le bas du cahier et ses deux pages légales (05/11/2026) */
.pied-cahier{max-width:1180px;margin:0 auto;padding:0 18px 40px;text-align:center;font-size:13px;color:var(--gris)}
.pied-cahier a,.legal a{color:var(--gris)}
.legal{padding-top:40px;padding-bottom:60px}
.legal h1{font-size:28px}
.legal h2{font-size:17px;margin:22px 0 6px}
@media print{.pied-cahier{display:none}}