/* Habillage de l'outil budget et de la calculette de prêt.
   Charte « Le magazine » (maquette/design_handoff_app_cles_de_la_reno/README.md, 11 octobre 2026) :
   Bodoni Moda pour les titres et tous les chiffres, DM Sans pour le texte, coins nets, aucune ombre.
   Tout l'habillage des deux outils tient dans ce fichier. */
:root{
  --lin:#F7F4F0; --lin-chaud:#EFEAE3; --blanc:#FFFFFF; --aubergine:#3D232A; --bordeaux:#723536; --taupe:#5E4F4C;
  --kaki:#A3915F; --nude:#D3AE9A; --ligne:#E1D9D0; --sur-sombre:#F0EEEA; --sur-sombre-2:#D9CFCB;
  --titre:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif; --texte:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box;border-radius:0}
body{margin:0;background:var(--lin);color:var(--aubergine);font-family:var(--texte);font-weight:300;font-size:16px;line-height:1.5}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
em{font-style:italic;color:var(--bordeaux)}
a{color:var(--aubergine);text-decoration:underline;text-underline-offset:4px;font-weight:400}
p{margin:0}

/* En-tête : aplat lin chaud, logo, titre avec un mot en italique */
.bandeau{background:var(--lin-chaud)}
header{padding:22px 0 26px;display:flex;flex-direction:column;gap:10px}
.marque{display:flex;align-items:center;gap:10px;margin-bottom:10px;text-decoration:none}
.serrure{position:relative;flex:none;width:28px;height:28px;background:var(--bordeaux)}
.serrure::before{content:"";position:absolute;left:50%;top:22%;width:29%;height:29%;border-radius:50%;background:#fff;transform:translateX(-50%)}
.serrure::after{content:"";position:absolute;left:50%;top:40%;width:25%;height:38%;background:#fff;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);transform:translateX(-50%)}
.nom{display:flex;flex-direction:column;gap:2px;color:var(--aubergine)}
/* Le logo garde la Bodoni d'origine, fine et contrastée (charte de Claude Design) : un seul style, l'italique 400 en grande taille optique,
   rangé dans polices/ sous un nom à part, pour ne pas toucher aux titres en Bodoni version texte (6 novembre 2026) */
@font-face{font-family:"Bodoni Logo";font-style:italic;font-weight:400;font-display:swap;src:url("/polices/BodoniLogo-italic-latin.woff2") format("woff2")}
.nom .cles{font-family:var(--texte);font-weight:500;font-size:8px;letter-spacing:.42em;line-height:1.2;white-space:nowrap}
.nom .reno{font-family:"Bodoni Logo",var(--titre);font-style:italic;font-weight:400;font-size:24px;line-height:1;color:var(--bordeaux);white-space:nowrap}
h1,h2,h3{font-family:var(--titre);font-weight:400;color:var(--aubergine);margin:0;text-wrap:balance}
h1{font-size:38px;line-height:1.08}
h2{font-size:24px;line-height:1.15;margin:34px 0 10px;padding-top:16px;border-top:1px solid var(--aubergine)}
h3{font-size:19px}
.accroche{font-size:16px;color:var(--taupe);max-width:52ch}
@media (min-width:768px){h1{font-size:54px}h2{font-size:28px}}

/* Cartes, champs, choix */
.lab{font-size:13px;font-weight:400;color:var(--taupe);display:block;margin-bottom:6px}
.card{background:var(--blanc);border:1px solid var(--ligne);padding:18px;margin:12px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
input[type=number],input[type=text],select{width:100%;padding:10px 12px;border:1px solid var(--ligne);background:var(--lin);font:inherit;font-weight:400;color:var(--aubergine)}
input[type=number]{font-family:var(--titre);font-size:17px}
input[type=range]{width:100%;accent-color:var(--bordeaux)}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--bordeaux);outline-offset:1px}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pills button{border:1px solid var(--aubergine);background:var(--blanc);color:var(--aubergine);padding:8px 12px;font:inherit;font-weight:400;font-size:14px;cursor:pointer}
.pills button.on{background:var(--aubergine);color:var(--sur-sombre)}
.check{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:15px}
.check input{width:17px;height:17px;margin-top:3px;flex:none;accent-color:var(--bordeaux)}
.aide{display:block;font-size:13px;color:var(--taupe);margin-top:5px;line-height:1.45}
.retrait{margin:12px 0 0 26px;padding-left:12px;border-left:2px solid var(--ligne);max-width:320px}

/* Les types de travaux */
.typo{border:1px solid var(--ligne);background:var(--blanc);margin:8px 0;overflow:hidden}
.typo>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:0;background:none;font:inherit;color:var(--aubergine);cursor:pointer;text-align:left}
.typo>button b{font-family:var(--titre);font-weight:400;font-size:19px;line-height:1.15}
.typo>button small{display:block;color:var(--taupe);font-size:13px;margin-top:2px}
.typo .prix{white-space:nowrap;font-family:var(--titre);font-size:18px;color:var(--aubergine)}
.typo .plus{width:26px;height:26px;border:1px solid var(--aubergine);display:grid;place-items:center;flex:none;color:var(--aubergine);font-size:14px}
.typo.on{border-color:var(--aubergine)}
.typo.on .plus{background:var(--aubergine);color:var(--sur-sombre)}
.typo .in{display:none;padding:2px 16px 18px;border-top:1px solid var(--ligne)}
.typo.on .in{display:block}
.typo .in .grid{margin-top:14px}

/* Résultats : tous les montants en Bodoni */
table{width:100%;border-collapse:collapse;font-size:15px}
td,th{padding:9px 0;border-bottom:1px solid var(--ligne);vertical-align:top;text-align:left;font-weight:300}
th{font-size:13px;color:var(--taupe);font-weight:400}
td small{color:var(--taupe);font-size:13px}
.n{text-align:right;white-space:nowrap;padding-left:12px;font-family:var(--titre)}
tr.tot td{border-bottom:0;border-top:1px solid var(--aubergine);font-weight:400;padding-top:12px}
tr.tot td.n{font-size:22px}
tr.ici td{background:var(--lin-chaud);font-weight:400}
details summary{cursor:pointer;color:var(--taupe);font-size:13px;margin-top:4px;text-decoration:underline;text-underline-offset:4px}
details table{font-size:13.5px;margin-top:6px}
.defile{overflow-x:auto}
.grand{font-family:var(--titre);font-size:44px;line-height:1.1;color:var(--aubergine)}
.note{font-size:14px;background:var(--lin-chaud);border-left:3px solid var(--kaki);padding:12px 14px;margin:16px 0;color:var(--aubergine)}
.note b{font-weight:500}
/* Le mode d'emploi en tête de chaque outil (demande d'Allison, 2 novembre 2026) */
.comment-marche{background:var(--blanc);border:1px solid var(--ligne);border-left:3px solid var(--bordeaux);padding:14px 18px;margin:18px 0;font-size:14.5px;max-width:760px}
.comment-marche b{font-weight:500}
.comment-marche ul{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.vide{color:var(--taupe);font-family:var(--titre);font-style:italic}
footer{font-size:13px;color:var(--taupe);padding:18px 0 100px}

/* Barre du total, toujours visible */
.barre{position:sticky;bottom:0;background:var(--aubergine);color:var(--sur-sombre);margin-top:28px}
.barre .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px}
.barre .lab{color:var(--nude);margin:0 0 2px;font-size:13px}
.barre b{font-family:var(--titre);font-weight:400;font-size:30px;line-height:1.1}
.barre a{color:var(--sur-sombre);font-size:14px}

/* Encart « Pass projet » : dans chaque outil gratuit, après le résultat. Une phrase sur ce que le pass ajoute et un bouton. */
.pass{background:var(--nude);color:var(--aubergine);padding:16px 18px;margin:16px 0;display:flex;flex-direction:column;gap:6px}
.pass .et{align-self:flex-start;background:var(--aubergine);color:var(--sur-sombre);font-size:11px;font-weight:500;padding:3px 7px}
.pass p{font-size:15px}
.bouton-pass{align-self:flex-end;margin-top:8px;background:var(--aubergine);color:var(--sur-sombre);border:0;font:inherit;font-weight:400;font-size:15px;padding:10px 18px;cursor:pointer}
a.bouton-pass{text-decoration:none;display:inline-block}

/* Le rappel du compte, en haut à droite de chaque page */
.bandeau .wrap{position:relative}
.compte{position:absolute;top:24px;right:20px;display:flex;gap:14px;align-items:center;font-size:14px}
.compte a{text-decoration:none;border-bottom:1px solid var(--aubergine);padding-bottom:1px}
.compte a.creer{background:var(--aubergine);color:var(--sur-sombre);border:0;padding:7px 12px}
.compte .etat,.compte .projet{color:var(--taupe);font-size:13px}
@media (max-width:480px){.compte .projet{display:none}.compte{gap:10px;font-size:13px}}
/* Sur un petit écran, les liens du compte passent au-dessus du logo au lieu de le chevaucher (19 octobre 2026) */
@media (max-width:640px){.compte{position:static;order:-1;align-self:flex-end;flex-wrap:wrap;justify-content:flex-end;row-gap:8px}}

/* Le micro pendant la dictée : un halo qui bat, pour qu'on voie qu'il écoute (test de Christine, 20 octobre 2026) */
@keyframes ecoute{0%{box-shadow:0 0 0 0 rgba(114,53,54,.45)}70%{box-shadow:0 0 0 12px rgba(114,53,54,0)}100%{box-shadow:0 0 0 0 rgba(114,53,54,0)}}
.micro.actif,#q-micro.actif{animation:ecoute 1.4s ease-out infinite}
@media (prefers-reduced-motion:reduce){.micro.actif,#q-micro.actif{animation:none;outline:3px solid var(--nude);outline-offset:2px}}
/* En bas des outils : outil précédent, outil suivant (suite-outils.js) */
.suite-outils{display:flex;justify-content:space-between;gap:12px;margin:36px 0 0;padding-top:22px;border-top:1px solid var(--ligne)}
.suite-outils .vers{display:flex;align-items:center;gap:12px;flex:1;max-width:48%;padding:14px 16px;border:0;background:var(--bordeaux);color:#fff;text-decoration:none;font-size:15px;line-height:1.3}
.suite-outils .vers:hover{background:var(--aubergine);color:#fff}
.suite-outils .vers:hover small{color:var(--sur-sombre-2)}
.suite-outils .suivant{justify-content:flex-end;text-align:right;margin-left:auto}
.suite-outils small{display:block;font-size:12px;color:var(--sur-sombre-2);margin-bottom:2px}
.suite-outils .fl{font-size:20px;flex:none}
@media (max-width:520px){.suite-outils .vers{font-size:14px;padding:12px}}
/* Les actions sont de vrais boutons, jamais du texte souligné ni des boutons blancs (Allison, 20 octobre 2026).
   .lien : action secondaire, en kaki ; .bt-suppr : supprimer ; .bt-sombre : sur fond sombre ; .lien-texte : renvoi dans une phrase. */
.lien,.bt2{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--kaki);color:var(--aubergine);border:0;padding:8px 14px;font:inherit;font-size:14px;font-weight:400;line-height:1.3;text-decoration:none;cursor:pointer;text-align:center}
.lien:hover,.bt2:hover{background:var(--aubergine);color:#fff}
.bt-suppr{background:var(--lin-chaud)!important;color:var(--bordeaux)!important;box-shadow:inset 0 0 0 1px var(--bordeaux)}
.bt-suppr:hover{background:var(--bordeaux)!important;color:#fff!important}
.bt-sombre{background:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff}
.bt-sombre:hover{background:#fff!important;color:var(--aubergine)!important}
.lien-texte{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.boutons-ligne{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
/* 16 px au moins dans les champs sur téléphone : en dessous, l'iPhone zoome dès qu'on touche le champ (première bêta-testeuse, 29 octobre 2026) */
@media (pointer:coarse){input,textarea,select{font-size:16px!important}}