/* Alpilles Web — styles communs des outils gratuits (/outils/…)
   S'appuie sur les tokens et composants de site.css. */

/* ---------- carte outil : formulaire + aperçu ---------- */
.outil{display:grid;grid-template-columns:.95fr 1.05fr;gap:32px;align-items:start;padding-bottom:40px}
.outil>*{min-width:0}
.outil form{padding:30px}
.outil details{margin-top:18px;border-top:1px solid var(--trait);padding-top:10px;font-size:.93rem;color:var(--texte)}
.outil summary{cursor:pointer;font-weight:600;color:var(--ardoise)}
.outil details ol{margin:10px 0 0 20px;display:grid;gap:6px}
.outil .aide{font-size:.86rem;color:var(--texte);margin-top:6px}
.outil-rendu{background:var(--blanc);border-radius:var(--rad-l);padding:30px;box-shadow:0 0 0 1px var(--trait);position:sticky;top:96px}
.outil-rendu h2{font-size:1.4rem;max-width:none}
.outil-duo{display:grid;grid-template-columns:.8fr 1.2fr;gap:22px;align-items:start;margin-top:18px}
.outil-duo.egal{grid-template-columns:1fr}
.outil-duo figure{margin:0}
.outil-duo figcaption{font-size:.85rem;color:var(--texte);margin-top:8px;text-align:center}
.outil-duo canvas{display:block;width:100%;height:auto;border-radius:var(--rad-s);background:#fff;box-shadow:0 0 0 1px var(--trait)}
canvas.ombre{box-shadow:0 0 0 1px var(--trait),0 14px 30px -16px rgba(23,37,45,.35)}
.outil-boutons{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.outil-boutons .btn{flex:1 1 200px;justify-content:center}
.outil-boutons .btn:disabled{opacity:.45;cursor:not-allowed}
.confiance{font-size:.86rem;color:var(--texte);margin-top:16px;display:flex;gap:8px;align-items:flex-start}
.confiance svg{width:18px;height:18px;flex:none;color:var(--olivier);margin-top:2px}
.outil-cta{border-top:1px solid var(--trait);margin-top:30px;padding:26px 0 var(--sec);font-size:.97rem;color:var(--texte)}
.outil-cta a{color:var(--ardoise);font-weight:600}
@media(max-width:940px){.outil{grid-template-columns:1fr}.outil-rendu{position:static}}
@media(max-width:480px){.outil-duo{grid-template-columns:1fr}.outil-duo figure.qr-seul{max-width:220px;margin:0 auto}.outil-rendu,.outil form{padding:22px}}

/* ---------- hub /outils/ ---------- */
.outils-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.outil-carte{background:var(--blanc);border-radius:var(--rad-l);padding:28px;box-shadow:0 0 0 1px var(--trait);display:flex;flex-direction:column;gap:12px;text-decoration:none;transition:box-shadow .2s,transform .2s}
.outil-carte:hover{box-shadow:0 0 0 2px var(--ardoise);transform:translateY(-3px)}
.outil-carte svg{width:40px;height:40px;color:var(--ocre-d)}
.outil-carte h2{font-size:1.35rem;max-width:none}
.outil-carte p{color:var(--texte);font-size:.97rem;flex:1}
.outil-carte span{font-weight:600}
.lettre-bloc{margin:40px 0 var(--sec);display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;background:var(--ardoise);color:var(--blanc);border-radius:var(--rad-l);padding:40px}
.lettre-bloc h2{color:var(--blanc);font-size:clamp(1.6rem,3vw,2.2rem)}
.lettre-bloc p{color:#c9d4d9;margin-top:10px}
@media(max-width:940px){.outils-liste{grid-template-columns:1fr}.lettre-bloc{grid-template-columns:1fr;padding:28px}}

/* ---------- audit de fiche Google ---------- */
.audit-q{border:0;padding:14px 0;margin:0;border-bottom:1px solid var(--trait);min-width:0}
.audit-q:last-of-type{border-bottom:0}
.audit-q legend{font-weight:600;font-size:1rem;padding:0;float:left;width:100%;margin-bottom:10px}
.audit-q legend small{display:block;font-weight:400;color:var(--texte);font-size:.86rem;margin-top:2px}
.oui-non{clear:both;display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:260px}
.oui-non label{margin:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1.5px solid var(--trait);border-radius:var(--rad-s);background:var(--calcaire);cursor:pointer;font-weight:500}
.oui-non input{width:16px;height:16px;padding:0;margin:0;flex:none;accent-color:var(--mistral)}
.oui-non label:has(input:checked){border-color:var(--mistral);background:#fff}
.oui-non label:has(input:focus-visible){outline:3px solid var(--ocre);outline-offset:2px}
.jauge-audit{display:grid;place-items:center;margin:10px auto 4px;width:220px;max-width:100%;position:relative}
.jauge-audit svg{width:100%;height:auto;display:block;transform:rotate(-90deg)}
.jauge-audit circle{fill:none;stroke-width:14}
.jauge-audit .fond{stroke:var(--calcaire)}
.jauge-audit .val{stroke:var(--ocre);stroke-linecap:round;transition:stroke-dashoffset .9s var(--ease,ease),stroke .3s}
.jauge-audit b{position:absolute;inset:0;display:grid;place-items:center;font:800 3rem/1 "Bricolage Grotesque","Bricolage repli",sans-serif;color:var(--ardoise)}
.jauge-audit b small{font-size:1rem;color:var(--texte);font-weight:600}
.verdict{text-align:center;font-weight:700;font-size:1.15rem;margin-top:6px}
.audit-avance{text-align:center;font-size:.88rem;color:var(--texte);margin-top:4px}
.corrections{list-style:none;display:grid;gap:12px;margin-top:20px;counter-reset:c}
.corrections li{background:var(--calcaire);border-radius:var(--rad);padding:14px 16px 14px 52px;position:relative;font-size:.94rem;color:var(--texte)}
.corrections li::before{counter-increment:c;content:counter(c);position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:50%;background:var(--ardoise);color:var(--blanc);display:grid;place-items:center;font-weight:700;font-size:.85rem}
.corrections b{display:block;color:var(--ardoise);margin-bottom:2px}
.corrections .bravo{padding-left:16px}.corrections .bravo::before{display:none}

/* ---------- carte de visite ---------- */
.modeles{border:0;padding:0;margin:0;min-width:0}
.modeles legend{display:block;font-size:.9rem;font-weight:600;margin:16px 0 7px;padding:0}
.modeles div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.modeles label{margin:0;display:flex;align-items:center;gap:8px;padding:10px;border:1.5px solid var(--trait);border-radius:var(--rad-s);background:var(--calcaire);cursor:pointer;font-weight:500;font-size:.93rem}
.modeles input{width:16px;height:16px;padding:0;margin:0;flex:none;accent-color:var(--mistral)}
.modeles label:has(input:checked){border-color:var(--mistral);background:#fff}
.modeles label:has(input:focus-visible){outline:3px solid var(--ocre);outline-offset:2px}
.modeles i{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px var(--trait)}
.carte-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.carte-duo figure{margin:0}
.carte-duo figcaption{font-size:.85rem;color:var(--texte);margin-top:8px;text-align:center}
.carte-duo canvas{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 0 0 1px var(--trait),0 12px 26px -14px rgba(23,37,45,.4)}
@media(max-width:560px){.carte-duo{grid-template-columns:1fr}.modeles div{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.jauge-audit .val,.outil-carte{transition:none}.outil-carte:hover{transform:none}}