/* Outil « Créer mon panneau d'aire de jeux » : styles propres à la page (s'appuie sur assets/site.css). */
.outil{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,44%);gap:clamp(24px,4vw,56px);align-items:start;padding-block:clamp(16px,3vw,32px) clamp(40px,6vw,72px)}
.outil>*{min-width:0}
.o-etapes{list-style:none;display:flex;gap:4px;border-bottom:2px solid var(--ligne);margin-bottom:22px;overflow-x:auto;scrollbar-width:none}
.o-etapes button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:10px 12px;font-family:var(--titre);font-weight:500;font-size:1rem;color:var(--ardoise);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:8px}
.o-etapes button b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--brume);color:var(--foret);font-weight:600;font-size:.85rem}
.o-etapes button[aria-selected="true"]{color:var(--foret);border-bottom-color:var(--robinier)}
.o-etapes button[aria-selected="true"] b{background:var(--robinier)}
.o-etapes button.ok b{background:var(--feuille);color:#fff}
.o-panneau{display:none}
.o-panneau.actif{display:block}
.o-panneau h2{font-size:1.5rem;font-weight:500;margin-bottom:6px}
.o-panneau>p.chapo{font-size:1.02rem;color:var(--ardoise);margin-bottom:20px}
.o-panneau fieldset{border:0;padding:0;margin:0 0 22px}
.o-panneau legend{font-family:var(--titre);font-weight:500;font-size:1.12rem;color:var(--foret);margin-bottom:10px;padding:0}
.o-panneau label.ch{display:block;font-size:.92rem;font-weight:600;color:var(--graphite);margin-bottom:4px}
.o-panneau label.ch small{font-weight:400;color:var(--ardoise)}
.o-panneau input[type=text],.o-panneau input[type=email],.o-panneau input[type=tel],.o-panneau input[type=url],.o-panneau input[type=number],.o-panneau select,.o-panneau textarea{width:100%;font:inherit;font-size:1rem;padding:9px 11px;border:1.5px solid #b9c2b8;border-radius:6px;background:var(--blanc);color:var(--graphite)}
.o-panneau textarea{min-height:120px;line-height:1.45}
.o-panneau input:focus,.o-panneau select:focus,.o-panneau textarea:focus{border-color:var(--foret);outline:3px solid rgba(233,169,52,.45);outline-offset:1px}
.o-grille{display:grid;gap:12px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.o-grille .pleine{grid-column:1/-1}
.o-aide{font-size:.86rem;color:var(--ardoise);margin-top:4px}
.o-aide b{color:var(--feuille-texte)}
.o-oblig{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7a2d1f;background:#fbe9e5;padding:1px 6px;border-radius:3px;margin-left:6px;vertical-align:middle}
.o-reco{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--feuille-texte);background:var(--brume);padding:1px 6px;border-radius:3px;margin-left:6px;vertical-align:middle}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{border:1.5px solid #b9c2b8;border-radius:999px;padding:7px 14px;cursor:pointer;font-size:.95rem;background:var(--blanc);display:inline-flex;align-items:center;gap:8px}
.chips label:hover{border-color:var(--foret)}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips label:has(input:checked){background:var(--foret);color:#fff;border-color:var(--foret)}
.chips label:has(input:focus-visible){outline:3px solid var(--robinier)}
.pictos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;list-style:none}
.pictos label{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:1.5px solid #b9c2b8;border-radius:8px;padding:10px 6px;cursor:pointer;font-size:.82rem;line-height:1.25;background:var(--blanc);position:relative}
.pictos label:hover{border-color:var(--foret)}
.pictos label svg{width:52px;height:52px}
.pictos input{position:absolute;opacity:0;width:0;height:0}
.pictos label:has(input:checked){border-color:var(--foret);background:var(--brume);box-shadow:inset 0 0 0 1.5px var(--foret)}
.pictos label:has(input:focus-visible){outline:3px solid var(--robinier)}
.o-liste{list-style:none;display:grid;gap:10px;margin-bottom:16px}
.o-jeu{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--ligne);border-radius:8px;padding:10px;background:var(--blanc)}
.o-jeu .vign{width:76px;height:60px;border-radius:6px;background:var(--brume);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--ardoise);font-size:.72rem;text-align:center;line-height:1.2}
.o-jeu .vign img{width:100%;height:100%;object-fit:contain}
.o-jeu b{display:block;font-family:var(--titre);font-weight:500}
.o-jeu .etat{font-size:.84rem;color:var(--ardoise)}
.o-jeu .etat.manque{color:#7a2d1f}
.o-jeu .actions{display:flex;gap:6px}
.o-jeu .actions button{background:none;border:1.5px solid #b9c2b8;border-radius:6px;padding:6px 9px;cursor:pointer;font-size:.86rem;color:var(--graphite)}
.o-jeu .actions button:hover{border-color:var(--foret)}
.o-ajout{border:1px dashed #b9c2b8;border-radius:8px;padding:16px;background:var(--brume)}
.o-ajout h3{font-size:1.08rem;margin-bottom:12px}
.o-resultats{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px;max-height:330px;overflow:auto}
.o-resultats li button{width:100%;background:var(--blanc);border:1.5px solid #b9c2b8;border-radius:8px;padding:8px;cursor:pointer;text-align:left;font-size:.82rem;line-height:1.25;color:var(--graphite)}
.o-resultats li button:hover{border-color:var(--foret)}
.o-resultats img{width:100%;height:84px;object-fit:contain;background:#fff;border-radius:4px;margin-bottom:6px}
.o-resultats .ref{display:block;color:var(--ardoise);font-size:.76rem}
.o-sources{display:grid;gap:8px;margin-top:12px}
.o-sources label{display:flex;gap:10px;align-items:flex-start;border:1.5px solid #b9c2b8;border-radius:8px;padding:10px 12px;background:var(--blanc);cursor:pointer;font-size:.95rem}
.o-sources label:has(input:checked){border-color:var(--foret);box-shadow:inset 0 0 0 1.5px var(--foret)}
.o-sources input{margin-top:4px}
.o-sources small{display:block;color:var(--ardoise);font-size:.84rem}
.o-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px;padding-top:18px;border-top:1px solid var(--ligne)}
.o-nav .btn{font-size:1rem}
button.btn{font-family:var(--titre)}
.o-controle{list-style:none;display:grid;gap:6px;margin:0 0 18px}
.o-controle li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;padding:7px 10px;border-radius:6px;background:var(--brume)}
.o-controle li::before{content:"";flex:0 0 18px;height:18px;border-radius:50%;margin-top:3px;background:var(--acier)}
.o-controle li.ok::before{background:var(--feuille)}
.o-controle li.ko::before{background:var(--alerte)}
.o-controle li.ko{background:#fbe9e5}
.o-actions{display:grid;gap:14px;margin-top:8px}
.o-action{border:1.5px solid var(--ligne);border-radius:10px;padding:18px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--blanc)}
.o-action.prio{border-color:var(--foret);border-width:2px}
.o-action h3{font-size:1.1rem;margin-bottom:4px}
.o-action p{font-size:.93rem;color:var(--ardoise)}
.o-action .btn{white-space:nowrap}
.outil-apercu{position:sticky;top:96px}
.outil-apercu .cadre-apercu{background:var(--brume);border:1px solid var(--ligne);border-radius:10px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.outil-apercu #o-svg > svg{width:100%;height:auto;max-height:calc(100vh - 260px);box-shadow:0 12px 32px -14px rgba(14,59,35,.45);background:#fff}
.outil-apercu .ligne-ap{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:.86rem;color:var(--ardoise);gap:10px;flex-wrap:wrap}
.outil-apercu .ligne-ap b{color:var(--foret);font-family:var(--titre);font-weight:500}
.outil-apercu .btns{margin-top:12px;justify-content:center}
.outil-apercu .btns .btn{font-size:.98rem}
.o-etat{font-size:.86rem;color:var(--ardoise);text-align:center;margin-top:8px;min-height:1.2em}
.o-etat.err{color:var(--alerte)}
.o-bandeau-equipe{background:#fff6e0;border:2px solid var(--robinier);border-radius:8px;padding:14px 18px;margin-bottom:18px;font-size:.95rem}
.o-bandeau-equipe b{font-family:var(--titre);color:var(--foret)}
.o-modal{position:fixed;inset:0;background:rgba(14,59,35,.55);z-index:300;display:none;align-items:center;justify-content:center;padding:16px}
.o-modal.ouvert{display:flex}
.o-modal>div{background:var(--blanc);border-radius:10px;max-width:640px;width:100%;max-height:92vh;overflow:auto;padding:clamp(20px,3vw,32px);position:relative}
.o-modal h2{font-size:1.45rem;font-weight:500;margin-bottom:6px}
.o-modal .fermer{position:absolute;top:10px;right:12px;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--ardoise);line-height:1}
.o-modal .o-grille{margin-top:14px}
.o-modal .consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ardoise);margin-top:14px}
.o-modal .consent input{margin-top:4px}
.o-modal .btns{margin-top:18px}
.o-specs{font-size:.9rem;background:var(--brume);border-left:5px solid var(--ruban);padding:12px 16px;margin-top:14px}
.o-specs ul{margin:6px 0 0 18px}
.o-ok{text-align:center;padding:10px 0}
.o-ok .coche{width:56px;height:56px;border-radius:50%;background:var(--feuille);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:12px}
.o-ok p{color:var(--ardoise);max-width:46ch;margin-inline:auto}
.o-ok p+p{margin-top:.8em}
.o-fichier{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.o-fichier .btn{font-size:.92rem;padding:.55em 1em}
.o-fichier img{height:44px;border:1px solid var(--ligne);background:#fff;padding:3px;border-radius:4px}
.o-logo-ok{font-size:.86rem;color:var(--feuille-texte)}
.o-pretty-file{position:absolute;opacity:0;width:0;height:0}
.o-tarif{background:var(--brume);padding:12px 16px;border-radius:8px;font-size:.93rem;margin-top:10px}
.o-tarif b{font-family:var(--titre);font-weight:500;color:var(--foret);font-size:1.15rem}
.o-mentions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;list-style:none}
.o-mentions li{border-top:3px solid var(--feuille);padding-top:14px}
.o-mentions li.oblig{border-top-color:var(--alerte)}
.o-mentions h3{font-size:1.06rem;margin-bottom:6px}
.o-mentions p{font-size:.95rem;color:var(--ardoise)}
.o-mentions .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:3px;margin-bottom:8px}
.o-mentions .oblig .tag{color:#7a2d1f;background:#fbe9e5}
.o-mentions .reco .tag{color:var(--feuille-texte);background:var(--brume)}
.o-comment{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;list-style:none;counter-reset:c;border-top:2px solid var(--foret)}
.o-comment li{counter-increment:c;padding:22px 22px 8px 0}
.o-comment li::before{content:counter(c);font-family:var(--titre);font-weight:300;font-size:2.6rem;color:var(--feuille);line-height:1;display:block;margin-bottom:8px}
.o-comment h3{font-size:1.1rem}
.o-comment p{color:var(--ardoise);font-size:.96rem;margin-top:6px}
@media (max-width:1080px){
  .outil{grid-template-columns:1fr}
  .outil-apercu{position:static;order:-1}
  .outil-apercu #o-svg > svg{max-height:40vh}
  .o-comment{grid-template-columns:repeat(2,minmax(0,1fr))}
  .o-mentions{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .o-grille{grid-template-columns:1fr}
  .o-jeu{grid-template-columns:64px minmax(0,1fr)}
  .o-jeu .actions{grid-column:1/-1}
  .o-action{grid-template-columns:1fr}
  .o-comment,.o-mentions{grid-template-columns:1fr}
}
@media print{.entete,.bandeau,.pied,.barre-mobile,.outil-col,.o-nav{display:none!important}.outil{display:block}}

.o-resultats li button.choisi,.o-gen li button.choisi{border-color:var(--foret);box-shadow:inset 0 0 0 1.5px var(--foret);background:var(--brume)}
.o-gen{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:10px;max-height:330px;overflow:auto}
.o-gen li button{width:100%;background:var(--blanc);border:1.5px solid #b9c2b8;border-radius:8px;padding:6px;cursor:pointer;font-size:.8rem;line-height:1.2;color:var(--graphite)}
.o-gen li button:hover{border-color:var(--foret)}
.o-gen img{width:100%;height:68px;object-fit:contain;margin-bottom:4px}
.o-suggestion{font-size:.86rem;color:var(--feuille-texte);margin-top:4px;min-height:1.1em}

.o-fab{background:var(--blanc);border:1px solid var(--ligne);border-radius:8px;padding:12px 14px;margin-bottom:14px}
.o-fab select optgroup{font-weight:700}

.o-retenu{display:flex;gap:12px;align-items:center;border:2px dashed #b9c2b8;border-radius:8px;padding:8px 10px;background:var(--blanc);margin-top:10px}
.o-retenu.ok{border:2px solid var(--feuille);background:#f4f9ef}
.o-retenu .vign{flex:0 0 96px;height:72px;border-radius:6px;background:var(--brume);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--acier);font-size:1.6rem;font-family:var(--titre)}
.o-retenu .vign img{width:100%;height:100%;object-fit:contain}
.o-retenu .txt{font-size:.9rem;line-height:1.35;color:var(--graphite)}
.o-retenu .txt b{display:block;font-family:var(--titre);font-weight:500;color:var(--foret);font-size:.98rem}
.o-retenu.ok .txt b::before{content:"✓ ";color:var(--feuille)}
.o-resultats li button.choisi{position:relative}
.o-resultats li button.choisi::after{content:"✓";position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--feuille);color:#fff;font-size:.8rem;display:flex;align-items:center;justify-content:center}

.o-logos{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.o-logos img{height:84px;background:repeating-conic-gradient(#eef1ec 0 25%,#fff 0 50%) 0 0/14px 14px;border-radius:4px}
#o-logos{margin-top:10px}
.o-modeles{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:8px}
.o-modeles button{width:100%;background:var(--blanc);border:1.5px solid #b9c2b8;border-radius:10px;padding:8px;cursor:pointer;text-align:left;font:inherit;color:var(--graphite);display:flex;flex-direction:column;gap:4px;height:100%}
.o-modeles button:hover{border-color:var(--foret)}
.o-modeles button.choisi{border-color:var(--foret);box-shadow:inset 0 0 0 2px var(--foret);background:var(--brume)}
.o-modeles .mini{display:block;aspect-ratio:7/10;background:var(--brume);border-radius:6px;overflow:hidden}
.o-modeles .mini > svg{width:100%;height:100%;display:block}
.o-modeles b{font-family:var(--titre);font-weight:500;color:var(--foret)}
.o-modeles small{font-size:.8rem;color:var(--ardoise);line-height:1.3}
.o-modeles button.choisi b::before{content:"✓ ";color:var(--feuille)}
.o-retenu{flex-wrap:wrap}
.o-retenu .txt{flex:1 1 180px}
.o-retenu .o-retenu-btn{margin-left:auto;font-size:.95rem;padding:.6em 1.1em}
@media (max-width:640px){.o-retenu .o-retenu-btn{width:100%}}
.o-jeu.ajoute{border-color:var(--feuille);box-shadow:0 0 0 3px rgba(92,144,67,.35);transition:box-shadow .3s}